Redesign send amount

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) => {

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} />
 }

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',

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={

packages/app/features/profile/components/ProfileAboutTile.tsx

@@ -0,0 +1,101 @@
+import type { Functions } from '@my/supabase/database.types'
+import { Fade, Image, LinearGradient, Paragraph, Stack, XStack, YStack } from '@my/ui'
+import { IconX, IconXLogo } from 'app/components/icons'
+
+export const ProfileAboutTile = ({
+  otherUserProfile,
+  onClose,
+}: {
+  otherUserProfile?: Functions<'profile_lookup'>[number] | null
+  onClose: () => void
+}) => {
+  const handleOnXRedirect = () => {
+    const twitterUrl = `https://x.com/${otherUserProfile?.x_username}`
+    window.open(twitterUrl, '_blank', 'noopener,noreferrer')
+  }
+
+  return (
+    <Fade>
+      <YStack w={'100%'} gap={'$4'} pb={'$4'}>
+        <YStack w={'100%'} bg={'$color1'} borderRadius={'$6'} padding={'$5'} gap={'$4'}>
+          <XStack ai="center" jc="space-between">
+            <Paragraph size={'$8'}>About</Paragraph>
+            <Stack onPress={onClose} cursor={'pointer'}>
+              <IconX
+                size={'$1.5'}
+                $theme-dark={{ color: '$primary' }}
+                $theme-light={{ color: '$color12' }}
+              />
+            </Stack>
+          </XStack>
+          <YStack width="100%" aspectRatio={1} overflow="hidden" position="relative">
+            <Image
+              width={'100%'}
+              height={'100%'}
+              borderRadius={'$6'}
+              objectFit="cover"
+              src={
+                otherUserProfile?.avatar_url ??
+                `https://ui-avatars.com/api.jpg?name=${otherUserProfile?.name ?? '??'}&size=256`
+              }
+            />
+            <LinearGradient
+              start={[0, 0]}
+              end={[0, 1]}
+              fullscreen
+              colors={['transparent', '#000000A5']}
+              borderRadius="$6"
+            >
+              <YStack
+                position="absolute"
+                top={0}
+                left={0}
+                width="100%"
+                height="100%"
+                p={'$5'}
+                justifyContent="flex-end"
+                gap={'$3'}
+              >
+                <Paragraph size={'$9'} $theme-light={{ color: '$white' }}>
+                  {otherUserProfile?.name ||
+                    (otherUserProfile?.all_tags?.[0] ? `/${otherUserProfile?.all_tags[0]}` : '??')}
+                </Paragraph>
+                <XStack flexWrap="wrap" columnGap={'$2.5'} rowGap={'$2'}>
+                  {otherUserProfile?.all_tags?.map((tag: string) => (
+                    <XStack key={tag} bg={'$gray3Dark'} px={'$2.5'} py={'$1'} borderRadius={'$2'}>
+                      <Paragraph
+                        size={'$2'}
+                        $theme-light={{ color: '$white' }}
+                      >{`/${tag}`}</Paragraph>
+                    </XStack>
+                  ))}
+                </XStack>
+              </YStack>
+            </LinearGradient>
+          </YStack>
+          <Paragraph>{otherUserProfile?.about}</Paragraph>
+        </YStack>
+        {otherUserProfile?.x_username && (
+          <XStack
+            ai="center"
+            jc="center"
+            bg={'$color1'}
+            borderRadius={'$6'}
+            padding={'$5'}
+            w={'100%'}
+            gap={'$2'}
+            cursor={'pointer'}
+            onPress={handleOnXRedirect}
+          >
+            <IconXLogo
+              size={'$1'}
+              $theme-dark={{ color: '$primary' }}
+              $theme-light={{ color: '$color12' }}
+            />
+            <Paragraph size={'$5'}>{otherUserProfile?.x_username}</Paragraph>
+          </XStack>
+        )}
+      </YStack>
+    </Fade>
+  )
+}

packages/app/features/profile/components/ProfileHeader.tsx

@@ -0,0 +1,38 @@
+import type { Functions } from '@my/supabase/database.types'
+import { Paragraph, XStack } from '@my/ui'
+import { AvatarProfile } from 'app/features/profile/AvatarProfile'
+import { IconArrowRight } from 'app/components/icons'
+
+export const ProfileHeader = ({
+  otherUserProfile,
+  onPress,
+}: {
+  otherUserProfile: Functions<'profile_lookup'>[number]
+  onPress: () => void
+}) => {
+  return (
+    <XStack
+      jc="space-between"
+      ai="center"
+      bg={'$color1'}
+      p={'$size.1.5'}
+      borderRadius={'$6'}
+      padding={'$5'}
+      onPress={onPress}
+      cursor={'pointer'}
+    >
+      <XStack ai="center" gap={'$size.1.5'} width={'80%'}>
+        <AvatarProfile profile={otherUserProfile} mx="none" size="$6" />
+        <Paragraph nativeID="profileName" size={'$8'} width={'80%'}>
+          {otherUserProfile.name ||
+            (otherUserProfile.all_tags?.[0] ? `/${otherUserProfile.all_tags[0]}` : '??')}
+        </Paragraph>
+      </XStack>
+      <IconArrowRight
+        size={'$1.5'}
+        $theme-dark={{ color: '$primary' }}
+        $theme-light={{ color: '$color12' }}
+      />
+    </XStack>
+  )
+}