Redesign send amount (#963)

0xsend · Dec 24, 2024 · 5fbf335 · 5fbf335
1 parent 5f64903
commit 5fbf335
Show file tree

Hide file tree

Showing 16 changed files with 691 additions and 349 deletions.
diff --git a/packages/app/components/FormFields/CoinField.tsx b/packages/app/components/FormFields/CoinField.tsx
@@ -3,28 +3,30 @@ import {
   Button,
   FieldError,
   Fieldset,
+  getFontSize,
+  isWeb,
+  isTouchable,
   Paragraph,
   Select,
+  type SelectProps,
   Shake,
   Sheet,
   Spinner,
   Theme,
+  useThemeName,
   XStack,
   YStack,
-  getFontSize,
-  isWeb,
-  useThemeName,
-  type SelectProps,
 } from '@my/ui'
 import { baseMainnet, usdcAddress } from '@my/wagmi'
-import { ChevronDown, ChevronUp, CheckCircle as IconCheckCircle } from '@tamagui/lucide-icons'
+import { CheckCircle as IconCheckCircle, ChevronDown, ChevronUp } from '@tamagui/lucide-icons'
 import { useTsController } from '@ts-react/form'
 import { IconX } from 'app/components/icons'
 import formatAmount from 'app/utils/formatAmount'
 import { useId, useState } from 'react'
 import { IconCoin } from '../icons/IconCoin'
 import type { CoinWithBalance } from 'app/data/coins'
 import { useCoins } from 'app/provider/coins'
+
 export const CoinField = ({
   native = false,
   ...props
@@ -42,6 +44,8 @@ export const CoinField = ({
   const id = useId()
   const disabled = isSubmitting
 
+  const pickedCoinSymbol = coins.find((coin) => coin.token === field.value)?.symbol
+
   return (
     <Theme name={error ? 'red' : themeName} forceClassName>
       <Fieldset>
@@ -58,22 +62,36 @@ export const CoinField = ({
           >
             <Select.Trigger
               testID={'SelectCoinTrigger'}
-              w={106}
-              h={48}
-              br="$3"
+              br={0}
               borderWidth={0}
-              scaleSpace={0}
+              w={'fit-content'}
+              scaleSpace={0.5}
               scaleIcon={1.5}
-              hoverStyle={{ bc: '$primary' }}
-              bc={isOpen ? '$color2' : '$primary'}
-              iconAfter={isOpen ? <ChevronUp color={'$color11'} /> : <ChevronDown color="$black" />}
+              padding={0}
+              bc={'transparent'}
+              focusStyle={{
+                bc: 'transparent',
+              }}
+              iconAfter={
+                isOpen ? (
+                  <ChevronUp color={'$primary'} $theme-light={{ color: '$color12' }} />
+                ) : (
+                  <ChevronDown color="$primary" $theme-light={{ color: '$color12' }} />
+                )
+              }
             >
-              <Select.Value
-                testID={'SelectCoinValue'}
-                fontWeight={'bold'}
-                color={'$black'}
-                placeholder={'Token'}
-              />
+              <XStack gap={'$2'} ai={'center'}>
+                {pickedCoinSymbol && <IconCoin symbol={pickedCoinSymbol} size={'$2'} />}
+                <Select.Value
+                  testID={'SelectCoinValue'}
+                  size={'$5'}
+                  color={'$color12'}
+                  placeholder={'Token'}
+                  $gtSm={{
+                    size: '$8',
+                  }}
+                />
+              </XStack>
             </Select.Trigger>
 
             <Adapt when="sm" platform="touch">
@@ -122,8 +140,18 @@ export const CoinField = ({
                 btrr={0}
                 boc="transparent"
                 focusStyle={{ bc: '$color0' }}
+                x={'-50%'}
+                $gtLg={{
+                  x: 0,
+                }}
               >
-                <XStack als="flex-start" w={320} $sm={{ w: '100%' }} boc={'transparent'} f={1}>
+                <XStack
+                  als="flex-start"
+                  w={320}
+                  $sm={{ w: isTouchable ? '100%' : 320 }}
+                  boc={'transparent'}
+                  f={1}
+                >
                   <Select.Group disabled={disabled} space="$0">
                     {/* <Select.Label>{label}</Select.Label> */}
                     {coins.map((coin, i) => {

diff --git a/packages/app/components/icons/IconCoin.tsx b/packages/app/components/icons/IconCoin.tsx
@@ -3,14 +3,25 @@ import { IconEthereum } from './IconEthereum'
 import { IconSend } from './IconSend'
 import { IconUSDC } from './IconUSDC'
 import { IconSPX6900 } from './IconSPX6900'
+import type { IconProps } from '@tamagui/helpers-icon'
+import type { NamedExoticComponent } from 'react'
 
-const coinSymbolToIcons: Record<coin['symbol'], JSX.Element> = {
-  USDC: <IconUSDC size={'$2.5'} />,
-  ETH: <IconEthereum size={'$2.5'} />,
-  SEND: <IconSend size={'$2.5'} />,
-  SPX: <IconSPX6900 size={'$2.5'} />,
+const coinSymbolToIcons: Record<coin['symbol'], NamedExoticComponent<IconProps>> = {
+  USDC: IconUSDC,
+  ETH: IconEthereum,
+  SEND: IconSend,
+  SPX: IconSPX6900,
 }
 
-export const IconCoin = ({ symbol }: { symbol: allCoins[number]['symbol'] }) => {
-  return coinSymbolToIcons[symbol]
+export const IconCoin = ({
+  symbol,
+  ...props
+}: { symbol: allCoins[number]['symbol'] } & IconProps) => {
+  const Icon = coinSymbolToIcons[symbol]
+
+  if (!Icon) {
+    return null
+  }
+
+  return <Icon size={'$2.5'} {...props} />
 }
diff --git a/packages/app/components/sidebar/HomeSideBar.tsx b/packages/app/components/sidebar/HomeSideBar.tsx
@@ -13,7 +13,13 @@ import {
   type YStackProps,
 } from '@my/ui'
 import { baseMainnet } from '@my/wagmi/chains'
-import { IconAccount, IconDeviceReset, IconHome, IconSendLogo } from 'app/components/icons'
+import {
+  IconAccount,
+  IconActivity,
+  IconDeviceReset,
+  IconHome,
+  IconSendLogo,
+} from 'app/components/icons'
 import { SideBarNavLink } from 'app/components/sidebar/SideBarNavLink'
 
 import type { ReactElement } from 'react'
@@ -28,6 +34,11 @@ const links = [
     text: 'Home',
     href: '/',
   },
+  {
+    icon: <IconActivity size={'$1'} color={'inherit'} />,
+    text: 'Send',
+    href: '/send',
+  },
   {
     icon: <IconDeviceReset size={'$1'} color={'inherit'} />,
     text: 'Activity',

diff --git a/packages/app/features/home/__snapshots__/TokenDetails.test.tsx.snap b/packages/app/features/home/__snapshots__/TokenDetails.test.tsx.snap
@@ -92,11 +92,11 @@ exports[`TokenDetails 1`] = `
         >
           <RNSVGSvgView
             align="xMidYMid"
-            bbHeight={32}
-            bbWidth={32}
+            bbHeight={16.8}
+            bbWidth={16.8}
             color="#FFFFFF"
             focusable={false}
-            height={32}
+            height={16.8}
             meetOrSlice={0}
             minX={0}
             minY={0}
@@ -107,18 +107,20 @@ exports[`TokenDetails 1`] = `
                   "backgroundColor": "transparent",
                   "borderWidth": 0,
                 },
-                {},
+                {
+                  "color": "#FFFFFF",
+                },
                 {
                   "flex": 0,
-                  "height": 32,
-                  "width": 32,
+                  "height": 16,
+                  "width": 16,
                 },
               ]
             }
             tintColor="#FFFFFF"
             vbHeight={32}
             vbWidth={32}
-            width={32}
+            width={16.8}
           >
             <RNSVGGroup
               fill={

diff --git a/packages/app/features/profile/AvatarProfile.tsx b/packages/app/features/profile/AvatarProfile.tsx
@@ -1,4 +1,5 @@
-import { Avatar, SizableText, type AvatarProps } from '@my/ui'
+import { Avatar, type AvatarProps } from '@my/ui'
+import { IconAccount } from 'app/components/icons'
 
 export type AvatarProfileProps = { name: string | null; avatar_url: string | null } | null
 
@@ -13,13 +14,10 @@ export function AvatarProfile({
         accessibilityLabel={profile?.name ?? '??'}
         accessibilityRole="image"
         accessible
-        src={
-          profile?.avatar_url ??
-          `https://ui-avatars.com/api.jpg?name=${profile?.name ?? '??'}&size=256`
-        }
+        src={profile?.avatar_url ?? ''}
       />
-      <Avatar.Fallback bc="$backgroundFocus" f={1} justifyContent="center" alignItems="center">
-        <SizableText size="$12">??</SizableText>
+      <Avatar.Fallback jc="center" ai="center">
+        <IconAccount size="$6" color="$olive" />
       </Avatar.Fallback>
     </Avatar>
   )