Merge pull request #545 from 0xsend/sendtags_start_with___and_style_t…

…weaks

Sendtags start with '/' and style tweaks

packages/app/components/SearchBar.tsx

@@ -238,7 +238,7 @@ function SearchResultRow({
               $theme-light={{ color: '$darkGrayTextField' }}
               $gtSm={{ fontSize: '$2' }}
             >
-              {profile.tag_name ? `@${profile.tag_name}` : `#${profile.send_id}`}
+              {profile.tag_name ? `/${profile.tag_name}` : `#${profile.send_id}`}
             </Text>
           </YStack>
         </XStack>

packages/app/components/TopNav.tsx

@@ -224,16 +224,7 @@ export function TopNav({
             top={0}
             justifyContent="center"
           >
-            <View
-              bw={1}
-              br={'$2'}
-              $theme-dark={{ boc: '$decay' }}
-              $theme-light={{ boc: '$gray4Light' }}
-              py={'$1.5'}
-              px={'$2'}
-              miw="$18"
-              bc="$background"
-            >
+            <View bw={1} br={'$2'} boc="$decay" py={'$1.5'} px={'$2'} miw="$18" bc="$background">
               <TokenDetailsMarketData coin={selectedCoin} />
             </View>
           </View>

packages/app/features/account/__snapshots__/screen.test.tsx.snap

@@ -8,8 +8,6 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
         "alignItems": "center",
         "flexDirection": "column",
         "gap": 24,
-        "paddingBottom": 32,
-        "paddingTop": 32,
         "width": "100%",
       }
     }
@@ -231,7 +229,7 @@ exports[`AccountScreen renders the account screen: AccountScreen 1`] = `
               }
               suppressHighlighting={true}
             >
-              @
+              /
               test
             </Text>
           </View>

packages/app/features/account/screen.tsx

@@ -176,7 +176,7 @@ export function AccountScreen() {
   ]
 
   return (
-    <YStack w={'100%'} ai={'center'} gap={'$size.1.5'} py="$6">
+    <YStack w={'100%'} ai={'center'} gap={'$size.1.5'}>
       <Card p={'$size.3.5'} w={'100%'}>
         <XStack gap={'$size.3.5'} w={'100%'} flexWrap="wrap">
           <View width={'100%'} $gtMd={{ width: 'auto' }}>
@@ -213,7 +213,7 @@ export function AccountScreen() {
 
               {tags?.[0] ? (
                 <Paragraph fontSize={'$7'} fontWeight={'600'} theme={'alt2'}>
-                  @{tags[0].name}
+                  /{tags[0].name}
                 </Paragraph>
               ) : null}
             </YStack>

packages/app/features/activity/ActivityRow.test.tsx

@@ -53,7 +53,7 @@ describe('ActivityRow', () => {
     // expect(getByText('Alice')).toBeOnTheScreen() // should we show the user's name?
     expect(getByText('Sent')).toBeOnTheScreen()
     expect(getByText('0.019032 USDC')).toBeOnTheScreen()
-    expect(getByText('@alice')).toBeOnTheScreen() // shows receivers first tag
+    expect(getByText('/alice')).toBeOnTheScreen() // shows receivers first tag
   })
 
   it('should render send account transfers event when received and sender is a send app user', () => {
@@ -67,7 +67,7 @@ describe('ActivityRow', () => {
     )
     expect(getByText('Received')).toBeOnTheScreen()
     expect(getByText('0.019032 USDC')).toBeOnTheScreen() // show senders address if not a send app user
-    expect(getByText('@alice')).toBeOnTheScreen() // shows senders first tag
+    expect(getByText('/alice')).toBeOnTheScreen() // shows senders first tag
   })
 
   it('should render tag receipts event', () => {
@@ -78,7 +78,7 @@ describe('ActivityRow', () => {
       </TamaguiProvider>
     )
     expect(getByText('Sendtag Registered')).toBeOnTheScreen()
-    expect(getByText('@yuw')).toBeOnTheScreen()
+    expect(getByText('/yuw')).toBeOnTheScreen()
     expect(getByText('0.02 ETH')).toBeOnTheScreen()
   })
 
@@ -90,7 +90,7 @@ describe('ActivityRow', () => {
       </TamaguiProvider>
     )
     expect(getByText('Referral')).toBeOnTheScreen()
-    expect(getByText('@disconnect_whorl7351')).toBeOnTheScreen()
+    expect(getByText('/disconnect_whorl7351')).toBeOnTheScreen()
     expect(getByTestId('ActivityRowAmount')).toHaveTextContent('1 Referrals')
   })
 
@@ -104,7 +104,7 @@ describe('ActivityRow', () => {
       </TamaguiProvider>
     )
     expect(getByText('Referred By')).toBeOnTheScreen()
-    expect(getByText('@disconnect_whorl7351')).toBeOnTheScreen()
+    expect(getByText('/disconnect_whorl7351')).toBeOnTheScreen()
     expect(getByTestId('ActivityRowAmount')).toBeEmptyElement()
   })
 })

packages/app/features/activity/__snapshots__/screen.test.tsx.snap

@@ -1165,7 +1165,7 @@ exports[`ActivityScreen renders activity screen: ActivityScreen 1`] = `
                     }
                     suppressHighlighting={true}
                   >
-                    @yuw
+                    /yuw
                   </Text>
                   <Text
                     style={
@@ -1482,7 +1482,7 @@ exports[`ActivityScreen renders activity screen: ActivityScreen 1`] = `
                     }
                     suppressHighlighting={true}
                   >
-                    @disconnect_whorl7351
+                    /disconnect_whorl7351
                   </Text>
                   <Text
                     style={
@@ -2443,7 +2443,7 @@ exports[`ActivityScreen renders activity screen: ActivityScreen 1`] = `
                     }
                     suppressHighlighting={true}
                   >
-                    @dan
+                    /dan
                   </Text>
                   <Text
                     style={

packages/app/features/activity/screen.test.tsx

@@ -81,6 +81,6 @@ describe('ActivityScreen', () => {
 
     expect(searchInput.props.value).toBe('test')
     const searchResults = await screen.findByTestId('tag-search-3665')
-    expect(searchResults).toHaveTextContent('??test@test')
+    expect(searchResults).toHaveTextContent('??test/test')
   })
 })

packages/app/features/activity/screen.tsx

@@ -117,7 +117,7 @@ function Suggestions() {
               </Avatar.Fallback>
             </Avatar>
             <Paragraph color="$color12" fontFamily="$mono" fontSize="$2">
-              @{user.username}
+              /{user.username}
             </Paragraph>
           </XStack>
         ))}

packages/app/features/home/TokenDetails.test.tsx

@@ -17,7 +17,7 @@ test('TokenDetails', () => {
 
   expect(screen.getByText('Sent')).toBeOnTheScreen()
   expect(screen.getAllByText('Received')).toHaveLength(2)
-  expect(screen.getByText('@alice')).toBeOnTheScreen()
+  expect(screen.getByText('/alice')).toBeOnTheScreen()
   expect(screen.getByText('0xa71CE00000000000000000000000000000000000')).toBeOnTheScreen()
   expect(screen.getByText('0x93F2FA7A16a7365e3895b0F6E6Ac7a832d6c761a')).toBeOnTheScreen()
   expect(screen.getByText('10 USDC')).toBeOnTheScreen()

packages/app/features/home/TokenDetails.tsx

@@ -55,33 +55,21 @@ export const TokenDetails = ({ coin }: { coin: coins[number] }) => {
     <YStack f={1}>
       {media.gtLg && (
         <XStack w={'100%'} ai={'center'} jc={'space-between'} $gtLg={{ mt: '$4.5' }} mt={'$6'}>
-          <Separator
-            $theme-dark={{ boc: '$decay' }}
-            $theme-light={{ boc: '$gray4Light' }}
-            my={coin.label === 'USDC' ? '$3.5' : '$0'}
-          />
+          <Separator boc="$decay" my={coin.label === 'USDC' ? '$3.5' : '$0'} />
           {coin.label !== 'USDC' && (
-            <Stack
-              bw={1}
-              br={'$2'}
-              $theme-dark={{ boc: '$decay' }}
-              $theme-light={{ boc: '$gray4Light' }}
-              p={'$1.5'}
-              jc="center"
-              miw="$18"
-            >
+            <Stack bw={1} br={'$2'} boc="$decay" p={'$1.5'} jc="center" miw="$18">
               <TokenDetailsMarketData coin={coin} />
             </Stack>
           )}
         </XStack>
       )}
-      <YStack>
+      <YStack mt={'$4'}>
         <Label fontSize={'$5'} fontWeight={'500'} textTransform={'uppercase'}>
           {`${coin.label} BALANCE`}
         </Label>
         <TokenDetailsBalance balance={balance} symbol={coin.symbol} />
       </YStack>
-      <Stack w={'100%'} py={'$6'}>
+      <Stack w={'100%'} py={'$4'}>
         <Separator />
       </Stack>
       <YStack>
@@ -167,7 +155,7 @@ const TokenDetailsBalance = ({
       <Tooltip.Trigger $platform-web={{ width: 'fit-content' }}>
         <BigHeading
           $platform-web={{ width: 'fit-content' }}
-          $sm={{ fontSize: balanceWithDecimals.toString().length > 8 ? '$10' : 64 }}
+          $sm={{ fontSize: balanceWithDecimals.toString().length > 8 ? '$10' : 68 }}
           color={'$color12'}
         >
           {formatAmount(balanceWithDecimals.toString(), 10, 5)}

packages/app/features/home/__snapshots__/TokenDetails.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`TokenDetails 1`] = `
     style={
       {
         "flexDirection": "column",
+        "marginTop": 18,
       }
     }
   >
@@ -54,7 +55,7 @@ exports[`TokenDetails 1`] = `
         {
           "color": "#FFFFFF",
           "fontFamily": "System",
-          "fontSize": 64,
+          "fontSize": 68,
           "fontWeight": "700",
           "lineHeight": 57,
           "marginBottom": 0,
@@ -72,8 +73,8 @@ exports[`TokenDetails 1`] = `
   <View
     style={
       {
-        "paddingBottom": 32,
-        "paddingTop": 32,
+        "paddingBottom": 18,
+        "paddingTop": 18,
         "width": "100%",
       }
     }
@@ -905,7 +906,7 @@ exports[`TokenDetails 1`] = `
                   }
                   suppressHighlighting={true}
                 >
-                  @alice
+                  /alice
                 </Text>
                 <Text
                   style={

packages/app/features/profile/__snapshots__/screen.test.tsx.snap

@@ -154,7 +154,7 @@ exports[`ProfileScreen: ProfileScreen 1`] = `
       }
       suppressHighlighting={true}
     >
-      @pip_test44677
+      /pip_test44677
     </Text>
     <Text
       selectable={true}

packages/app/features/profile/screen.test.tsx

@@ -87,7 +87,7 @@ test('ProfileScreen', async () => {
 
   const h1 = screen.getByText(PROFILE.name)
   expect(h1).toBeOnTheScreen()
-  const h2 = screen.getByText(`@${PROFILE.tag_name}`)
+  const h2 = screen.getByText(`/${PROFILE.tag_name}`)
   expect(h2).toBeOnTheScreen()
   const paragraph = screen.getByText(PROFILE.about)
   expect(paragraph).toBeOnTheScreen()

packages/app/features/profile/screen.tsx

@@ -27,7 +27,7 @@ export function ProfileScreen({ sendid: propSendid }: ProfileScreenProps) {
   const router = useRouter()
   const toast = useToastController()
 
-  const formatTags = (tags: string[]) => tags?.map((tag) => `@${tag}`).join(' ')
+  const formatTags = (tags: string[]) => tags?.map((tag) => `/${tag}`).join(' ')
 
   return (
     <YStack f={1} gap="$6" pt="$6" $gtMd={{ pt: '$0' }}>

packages/app/features/send/__snapshots__/screen.test.tsx.snap

@@ -313,7 +313,7 @@ exports[`SendScreen should render /send check when no send account: render 1`] =
           }
           suppressHighlighting={true}
         >
-          @test
+          /test
         </Text>
       </View>
     </View>
@@ -374,7 +374,7 @@ exports[`SendScreen should render /send check when no send account: render 1`] =
       }
       suppressHighlighting={true}
     >
-      @test
+      /test
     </Text>
     <Text
       style={
@@ -1517,7 +1517,7 @@ exports[`SendScreen should render with search when on /send and no recipient in
                     }
                     suppressHighlighting={true}
                   >
-                    @test
+                    /test
                   </Text>
                 </View>
               </View>

packages/app/features/send/confirm/screen.tsx

@@ -427,7 +427,7 @@ export function SendRecipient({ profile, ...props }: YStackProps & { profile: Pr
             lineHeight="$1"
             color="$color11"
           >
-            {profile?.tag ? `@${profile?.tag}` : `#${profile?.sendid}`}
+            {profile?.tag ? `/${profile?.tag}` : `#${profile?.sendid}`}
           </Paragraph>
         </YStack>
       </XStack>

packages/app/features/send/screen.test.tsx

@@ -90,7 +90,7 @@ describe('SendScreen', () => {
     })
 
     expect(screen.toJSON()).toMatchSnapshot('search')
-    expect(screen.getByTestId('tag-search-3665')).toHaveTextContent('??test@test')
+    expect(screen.getByTestId('tag-search-3665')).toHaveTextContent('??test/test')
     const avatar = screen.getByTestId('avatar')
     expect(avatar).toBeOnTheScreen()
     expect(avatar.props.source.uri).toBe('https://avatars.githubusercontent.com/u/123')
@@ -139,7 +139,7 @@ describe('SendScreen', () => {
 
     // screen.debug('amount form')
     expect(screen.getByTestId('NoSendAccountLink')).toHaveTextContent(
-      '@test has no send account! Ask them to create one or write a /send Check.'
+      '/test has no send account! Ask them to create one or write a /send Check.'
     )
   })
 })

packages/app/features/send/screen.tsx

@@ -86,7 +86,7 @@ function NoSendAccount({ profile }: { profile: Functions<'profile_lookup'>[numbe
       >
         <Text fontWeight="bold" display="flex" color="$color12">
           {(() => {
-            if (profile.tag) return `@${profile.tag}`
+            if (profile.tag) return `/${profile.tag}`
             if (profile.name) return profile.name
             return `#${profile.sendid}`
           })()}

packages/app/utils/activity.test.ts

@@ -73,17 +73,17 @@ describe('test subtextFromActivity', () => {
   })
   it('should return the to user tags when transfer and from user ID is present', () => {
     expect(subtextFromActivity(EventSchema.parse(mockSentTransfer))).toEqual(
-      `@${mockSentTransfer.to_user.tags[0]}`
+      `/${mockSentTransfer.to_user.tags[0]}`
     )
   })
   it('should return the tags when tag receipts event', () => {
     expect(subtextFromActivity(EventSchema.parse(mockTagReceipt))).toEqual(
-      `@${mockTagReceipt.data.tags[0]}`
+      `/${mockTagReceipt.data.tags[0]}`
     )
   })
   it('should return the referrals when referrals event', () => {
     const activity = mockReferral
-    expect(subtextFromActivity(EventSchema.parse(activity))).toBe('@disconnect_whorl7351')
+    expect(subtextFromActivity(EventSchema.parse(activity))).toBe('/disconnect_whorl7351')
   })
   it('should return Paymaster when sent to paymaster', () => {
     const activity = mockSentTransfer

packages/app/utils/activity.ts

@@ -128,7 +128,7 @@ export function subtextFromActivity(activity: Activity): string | null {
   const _user = counterpart(activity)
   const { from_user, to_user } = activity
   if (isTagReceiptsEvent(activity)) {
-    return activity.data.tags.map((t) => `@${t}`).join(', ')
+    return activity.data.tags.map((t) => `/${t}`).join(', ')
   }
   if (isReferralsEvent(activity)) {
     if (from_user?.id) {
@@ -168,7 +168,7 @@ export function userNameFromActivityUser(
 ): string {
   switch (true) {
     case !!user?.tags?.[0]:
-      return `@${user.tags[0]}`
+      return `/${user.tags[0]}`
     case !!user?.name:
       return user.name
     case !!user?.send_id: