fix navbar wallet name onPress (#6309)

rainbow-me · Dec 9, 2024 · 7dc1b03 · 7dc1b03
1 parent c59bade
commit 7dc1b03
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 19 deletions.
diff --git a/src/components/asset-list/RecyclerAssetList2/index.tsx b/src/components/asset-list/RecyclerAssetList2/index.tsx
@@ -267,7 +267,7 @@ function NavbarOverlay({ accentColor, position }: { accentColor?: string; positi
               as={RNAnimated.View}
               height={{ custom: navbarHeight }}
               justifyContent="center"
-              style={[walletNameStyle, { alignSelf: 'center', bottom: 2, zIndex: -1 }]}
+              style={[walletNameStyle, { alignSelf: 'center', bottom: 2 }]}
             >
               <ProfileNameRow variant="header" />
             </Box>

diff --git a/src/components/asset-list/RecyclerAssetList2/profile-header/ProfileNameRow.tsx b/src/components/asset-list/RecyclerAssetList2/profile-header/ProfileNameRow.tsx
@@ -3,17 +3,21 @@ import { useRecoilState } from 'recoil';
 import Clipboard from '@react-native-clipboard/clipboard';
 import { ButtonPressAnimation } from '@/components/animations';
 import { Icon } from '@/components/icons';
-import { Bleed, Box, Inline, Inset, Text, useForegroundColor } from '@/design-system';
+import { Bleed, Box, Inset, Text, useForegroundColor } from '@/design-system';
 import { useAccountProfile, useDimensions } from '@/hooks';
 import { useNavigation } from '@/navigation';
 import { abbreviateEnsForDisplay } from '@/utils/abbreviations';
 import Routes from '@rainbow-me/routes';
 import { FloatingEmojis } from '@/components/floating-emojis';
 import { haptics } from '@/utils';
-import { Space } from '@/design-system/docs/system/tokens.css';
 import { addressCopiedToastAtom } from '@/recoil/addressCopiedToastAtom';
+import { NAVBAR_HORIZONTAL_INSET } from '@/components/navbar/Navbar';
+import { NAVBAR_ICON_SIZE } from '@/components/navbar/NavbarTextIcon';
 
 export const ProfileNameRowHeight = 16;
+const CARET_ICON_WIDTH = 22;
+const HIT_SLOP = 16;
+const GAP = 4;
 
 export function ProfileNameRow({
   disableOnPress,
@@ -66,31 +70,33 @@ export function ProfileNameRow({
 
   const { width: deviceWidth } = useDimensions();
 
-  const horizontalInset = 19;
-  const accountNameLeftOffset = 15;
-  const caretIconWidth = 22;
-  const maxWidth = deviceWidth - (caretIconWidth + accountNameLeftOffset) - horizontalInset * 2;
+  const maxWidth = deviceWidth - 2 * (NAVBAR_ICON_SIZE + NAVBAR_HORIZONTAL_INSET + HIT_SLOP) - CARET_ICON_WIDTH - GAP;
 
-  const hitSlop: Space = '16px';
   return (
-    <Box pointerEvents={disableOnPress ? 'none' : 'auto'} position="absolute" style={{ zIndex: 100 }}>
+    <Box
+      pointerEvents={disableOnPress ? 'none' : 'auto'}
+      position="absolute"
+      style={{
+        zIndex: 100,
+      }}
+    >
       {name && (
-        <Bleed space={hitSlop}>
+        <Bleed space={`${HIT_SLOP}px`}>
           <ButtonPressAnimation
             onLongPress={onLongPressName}
             onPress={onPressName}
             scaleTo={0.84}
             testID={testIDPrefix ? `${testIDPrefix}-${name}` : undefined}
           >
-            <Inset space={hitSlop}>
-              <Inline alignVertical="center" space="4px" wrap={false}>
+            <Inset space={`${HIT_SLOP}px`}>
+              <Box flexDirection="row" alignItems="center" gap={GAP}>
                 <Box style={{ maxWidth }}>
-                  <Text color="label" numberOfLines={1} size={variant === 'header' ? '22pt' : '22pt'} weight="bold">
+                  <Text color="label" numberOfLines={1} size={variant === 'header' ? '22pt' : '22pt'} weight="bold" ellipsizeMode="middle">
                     {name}
                   </Text>
                 </Box>
-                <Icon color={iconColor} height={9} name="caretDownIcon" width={caretIconWidth} />
-              </Inline>
+                <Icon color={iconColor} height={9} name="caretDownIcon" width={CARET_ICON_WIDTH} />
+              </Box>
             </Inset>
           </ButtonPressAnimation>
         </Bleed>

diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx
@@ -18,6 +18,7 @@ type NavbarProps = {
 };
 
 export const navbarHeight = 60;
+export const NAVBAR_HORIZONTAL_INSET = 20;
 
 export function Navbar({
   hasStatusBarInset = false,
@@ -36,7 +37,7 @@ export function Navbar({
       <Box alignItems="center" height={{ custom: navbarHeight }} justifyContent="center" style={{ backgroundColor: 'transparent' }}>
         <Cover alignVertical="center" alignHorizontal="justify">
           <Box style={{ backgroundColor: 'transparent' }} width="full">
-            <Inset horizontal="20px">
+            <Inset horizontal={{ custom: NAVBAR_HORIZONTAL_INSET }}>
               <Inline alignHorizontal="justify" alignVertical="center">
                 {leftComponent}
                 {rightComponent}

diff --git a/src/components/navbar/NavbarTextIcon.tsx b/src/components/navbar/NavbarTextIcon.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { Box, Cover, Text } from '@/design-system';
 import { useTheme } from '@/theme';
 
+export const NAVBAR_ICON_SIZE = 36;
+
 type NavbarIconProps = {
   backgroundOpacity?: number;
   icon: string;
@@ -14,12 +16,12 @@ export function NavbarTextIcon({ backgroundOpacity, icon, color }: NavbarIconPro
 
   return (
     <Box
-      borderRadius={18}
-      height={{ custom: 36 }}
+      borderRadius={NAVBAR_ICON_SIZE / 2}
+      height={{ custom: NAVBAR_ICON_SIZE }}
       style={{
         backgroundColor: colors.alpha(accentColor, backgroundOpacity ?? (isDarkMode ? 0.2 : 0.1)),
       }}
-      width={{ custom: 36 }}
+      width={{ custom: NAVBAR_ICON_SIZE }}
     >
       <Box
         height="full"