From 038ff9126f2859247465f2bd5db8f71d2f28df44 Mon Sep 17 00:00:00 2001
From: youngkidwarrior <victor@she.energy>
Date: Thu, 18 Apr 2024 01:40:56 -0700
Subject: [PATCH] Change coin list to links and style when token selected

---
 .../app/features/home/TokenBalanceCard.tsx    | 121 +++++++++---------
 .../app/features/home/TokenBalanceList.tsx    |  26 +++-
 packages/app/features/home/screen.tsx         | 111 ++++++++--------
 3 files changed, 138 insertions(+), 120 deletions(-)

diff --git a/packages/app/features/home/TokenBalanceCard.tsx b/packages/app/features/home/TokenBalanceCard.tsx
index 540a1b663..0a1857f16 100644
--- a/packages/app/features/home/TokenBalanceCard.tsx
+++ b/packages/app/features/home/TokenBalanceCard.tsx
@@ -1,7 +1,6 @@
-import { Label, Paragraph, Spinner, Stack, Tooltip, TooltipGroup, XStack, YStack } from '@my/ui'
+import { Label, Paragraph, Spinner, Tooltip, TooltipGroup, XStack, YStack } from '@my/ui'
 import formatAmount from 'app/utils/formatAmount'
 import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
-import { useThemeSetting } from '@tamagui/next-theme'
 
 const USDollar = new Intl.NumberFormat('en-US', {
   style: 'currency',
@@ -10,73 +9,71 @@ const USDollar = new Intl.NumberFormat('en-US', {
 
 export const TokenBalanceCard = () => {
   const { totalBalance } = useSendAccountBalances()
-  const { resolvedTheme } = useThemeSetting()
-  const separatorColor = resolvedTheme?.startsWith('dark') ? '#343434' : '#E6E6E6'
 
   return (
-    <XStack w={'100%'} jc={'center'} $md={{ borderColor: separatorColor, borderBottomWidth: 1 }}>
-      <XStack w={'100%'} zIndex={4}>
-        <YStack>
-          <YStack jc={'center'} gap={'$6'} pb="$6">
-            <TooltipGroup delay={{ open: 0, close: 1500 }}>
-              <Tooltip placement="bottom">
-                <Tooltip.Trigger>
-                  <XStack ai="center" gap="$2.5">
-                    <Label
-                      fontSize={'$4'}
+    <XStack w={'100%'} zIndex={4}>
+      <YStack>
+        <YStack jc={'center'} gap={'$6'} pb="$6">
+          <TooltipGroup delay={{ open: 0, close: 1500 }}>
+            <Tooltip placement="bottom">
+              <Tooltip.Trigger>
+                <XStack ai="center" gap="$2.5">
+                  <Label
+                    fontSize={'$4'}
+                    zIndex={1}
+                    fontWeight={'500'}
+                    $theme-dark={{ col: '$gray5Light' }}
+                    $theme-light={{ col: '$color12' }}
+                    textTransform={'uppercase'}
+                  >
+                    Total Balance
+                  </Label>
+                </XStack>
+                <XStack style={{ color: 'white' }} gap={'$2.5'} mt={'$3'}>
+                  {totalBalance === undefined ? (
+                    <Spinner size={'large'} />
+                  ) : (
+                    <Paragraph
+                      color={'$color12'}
+                      fontFamily={'$mono'}
+                      fontSize={'$15'}
+                      lineHeight={'$14'}
+                      fontWeight={'500'}
                       zIndex={1}
-                      color={'$color05'}
-                      textTransform={'uppercase'}
                     >
-                      Total Balance
-                    </Label>
-                  </XStack>
-                  <XStack style={{ color: 'white' }} gap={'$2.5'} mt={'$3'}>
-                    {totalBalance === undefined ? (
-                      <Spinner size={'large'} />
-                    ) : (
-                      <Paragraph
-                        color={'$color12'}
-                        fontFamily={'$mono'}
-                        fontSize={'$15'}
-                        lineHeight={'$14'}
-                        fontWeight={'500'}
-                        zIndex={1}
-                      >
-                        {formatAmount(totalBalance, 4, 0)}
-                      </Paragraph>
-                    )}
-                    <Paragraph color={'$color12'} fontSize={'$6'} fontWeight={'500'} zIndex={1}>
-                      {'USD'}
+                      {formatAmount(totalBalance, 4, 0)}
                     </Paragraph>
-                  </XStack>
-                </Tooltip.Trigger>
-                <Tooltip.Content
-                  enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-                  exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
-                  scale={1}
-                  x={0}
-                  y={0}
-                  opacity={1}
-                  animation={[
-                    'quick',
-                    {
-                      opacity: {
-                        overshootClamping: true,
-                      },
-                    },
-                  ]}
-                >
-                  <Tooltip.Arrow />
-                  <Paragraph fontSize={'$6'} fontWeight={'500'}>
-                    {totalBalance === undefined ? null : USDollar.format(Number(totalBalance))}
+                  )}
+                  <Paragraph color={'$color12'} fontSize={'$6'} fontWeight={'500'} zIndex={1}>
+                    {'USD'}
                   </Paragraph>
-                </Tooltip.Content>
-              </Tooltip>
-            </TooltipGroup>
-          </YStack>
+                </XStack>
+              </Tooltip.Trigger>
+              <Tooltip.Content
+                enterStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+                exitStyle={{ x: 0, y: -5, opacity: 0, scale: 0.9 }}
+                scale={1}
+                x={0}
+                y={0}
+                opacity={1}
+                animation={[
+                  'quick',
+                  {
+                    opacity: {
+                      overshootClamping: true,
+                    },
+                  },
+                ]}
+              >
+                <Tooltip.Arrow />
+                <Paragraph fontSize={'$6'} fontWeight={'500'}>
+                  {totalBalance === undefined ? null : USDollar.format(Number(totalBalance))}
+                </Paragraph>
+              </Tooltip.Content>
+            </Tooltip>
+          </TooltipGroup>
         </YStack>
-      </XStack>
+      </YStack>
     </XStack>
   )
 }
diff --git a/packages/app/features/home/TokenBalanceList.tsx b/packages/app/features/home/TokenBalanceList.tsx
index 778d45bfe..9d324e880 100644
--- a/packages/app/features/home/TokenBalanceList.tsx
+++ b/packages/app/features/home/TokenBalanceList.tsx
@@ -1,4 +1,12 @@
-import { Paragraph, Spinner, Tooltip, type TooltipProps, XStack, type XStackProps } from '@my/ui'
+import {
+  Paragraph,
+  Spinner,
+  Tooltip,
+  type TooltipProps,
+  XStack,
+  Link,
+  type LinkProps,
+} from '@my/ui'
 import { useThemeSetting } from '@tamagui/next-theme'
 import { baseMainnet } from '@my/wagmi'
 import { IconArrowRight, IconError } from 'app/components/icons'
@@ -9,8 +17,7 @@ import type { coins } from 'app/data/coins'
 import { useToken } from 'app/routers/params'
 
 export const TokenBalanceList = ({ coins }: { coins: coins }) => {
-  const [, setTokenParam] = useToken()
-
+  const [tokenParam] = useToken()
   const { resolvedTheme } = useThemeSetting()
   const separatorColor = resolvedTheme?.startsWith('dark') ? '#343434' : '#E6E6E6'
 
@@ -22,7 +29,12 @@ export const TokenBalanceList = ({ coins }: { coins: coins }) => {
       ai={'center'}
       py={'$3.5'}
       borderColor={separatorColor}
-      onPress={() => setTokenParam(coin.token)}
+      disabled={tokenParam !== undefined && tokenParam !== coin.token}
+      disabledStyle={{ opacity: 0.5 }}
+      href={{
+        pathname: '/',
+        query: { token: coin.token },
+      }}
       borderBottomWidth={index !== coins.length - 1 ? 1 : 0}
     />
   ))
@@ -33,7 +45,7 @@ const TokenBalanceItem = ({
   ...props
 }: {
   coin: { label: string; token: `0x${string}` | 'eth'; icon: JSX.Element }
-} & XStackProps) => {
+} & Omit<LinkProps, 'children'>) => {
   const { data: sendAccounts } = useSendAccounts()
   const sendAccount = sendAccounts?.[0]
 
@@ -45,7 +57,7 @@ const TokenBalanceItem = ({
   })
 
   return (
-    <XStack {...props}>
+    <Link display="flex" {...props}>
       <XStack gap={'$2'} $gtLg={{ gap: '$3.5' }} ai={'center'}>
         {coin.icon}
         <Paragraph
@@ -60,7 +72,7 @@ const TokenBalanceItem = ({
       <XStack gap={'$3.5'} ai={'center'}>
         <TokenBalance balance={balance} />
       </XStack>
-    </XStack>
+    </Link>
   )
 }
 
diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx
index 1bfca3b02..affa78c43 100644
--- a/packages/app/features/home/screen.tsx
+++ b/packages/app/features/home/screen.tsx
@@ -1,87 +1,96 @@
 import {
-  BigHeading,
   Button,
   Container,
-  H1,
-  Label,
   Paragraph,
   Separator,
-  Spinner,
-  Stack,
   XStack,
   YStack,
   useMedia,
   useToastController,
+  Stack,
+  Label,
+  H1,
+  Spinner,
+  BigHeading,
 } from '@my/ui'
 import { IconDeposit, IconPlus } from 'app/components/icons'
 import { TokenBalanceList } from './TokenBalanceList'
 import { coins } from 'app/data/coins'
 import { TokenBalanceCard } from './TokenBalanceCard'
-import { type UseBalanceReturnType, useBalance, useAccount } from 'wagmi'
-import { baseMainnet } from '@my/wagmi/chains'
-import { useSendAccounts } from 'app/utils/send-accounts'
-
-import formatAmount from 'app/utils/formatAmount'
-import { useTokenPrice } from 'app/utils/coin-gecko'
+import { type UseBalanceReturnType, useAccount, useBalance } from 'wagmi'
 import { useToken } from 'app/routers/params'
 import { OpenConnectModalWrapper } from 'app/utils/OpenConnectModalWrapper'
+import { useThemeSetting } from '@tamagui/next-theme'
+import { useTokenPrice } from '../../utils/coin-gecko'
+import { useSendAccounts } from 'app/utils/send-accounts'
+import { baseMainnet } from '@my/wagmi'
+import formatAmount from 'app/utils/formatAmount'
 
 export function HomeScreen() {
   const media = useMedia()
   const toast = useToastController()
   const [tokenParam] = useToken()
   const { address } = useAccount()
+  const { resolvedTheme } = useThemeSetting()
+  const separatorColor = resolvedTheme?.startsWith('dark') ? '#343434' : '#E6E6E6'
 
   const selectedCoin = coins.find((c) => c.token === tokenParam)
 
   return (
     <Container fd={'column'} $gtMd={{ pt: '$6' }}>
-      <XStack w={'100%'} jc={'space-between'} gap={'$6'}>
+      <XStack w={'100%'} jc={'space-between'} $gtLg={{ gap: '$11' }} f={1}>
         {(selectedCoin === undefined || media.gtLg) && (
-          <YStack
-            $gtLg={{ width: 360 }}
-            $sm={{ width: '100%' }}
-            $gtSm={{ width: '100%' }}
-            ai={'center'}
-          >
-            <TokenBalanceCard />
-            <XStack w={'100%'} ai={'center'} pt={'$7'}>
-              <OpenConnectModalWrapper h={'$6'} width={'100%'}>
-                <Button
-                  px={'$3.5'}
+          <YStack $gtLg={{ width: 360 }} width="100%" ai={'center'}>
+            <XStack w={'100%'} jc={'center'} ai="center" $lg={{ f: 1 }}>
+              <TokenBalanceCard />
+            </XStack>
+
+            <Separator $gtLg={{ display: 'none' }} w={'100%'} borderColor={separatorColor} />
+            <YStack w={'100%'} ai={'center'}>
+              <XStack w={'100%'} ai={'center'} pt={'$7'}>
+                <OpenConnectModalWrapper
                   h={'$6'}
                   width={'100%'}
-                  theme="accent"
-                  borderRadius={'$4'}
-                  onPress={() => {
-                    // @todo onramp / deposit
-                    if (address === undefined) return
-                    toast.show('Coming Soon: Deposit')
-                  }}
+                  disabled={selectedCoin !== undefined}
                 >
-                  <XStack w={'100%'} jc={'space-between'} ai={'center'}>
-                    <Paragraph
-                      // fontFamily={'$mono'}
-                      fontWeight={'500'}
-                      textTransform={'uppercase'}
-                      color={'$black'}
-                    >
-                      {address ? 'Deposit' : 'Connect Wallet'}
-                    </Paragraph>
-                    <XStack alignItems={'center'} justifyContent={'center'} zIndex={2}>
-                      {address ? (
-                        <IconDeposit size={'$2.5'} color={'$black'} />
-                      ) : (
-                        <IconPlus size={'$2.5'} color={'$black'} />
-                      )}
+                  <Button
+                    px={'$3.5'}
+                    h={'$6'}
+                    width={'100%'}
+                    theme="accent"
+                    borderRadius={'$4'}
+                    onPress={() => {
+                      // @todo onramp / deposit
+                      if (address === undefined) return
+                      toast.show('Coming Soon: Deposit')
+                    }}
+                    disabled={selectedCoin !== undefined}
+                    disabledStyle={{ opacity: 0.5 }}
+                  >
+                    <XStack w={'100%'} jc={'space-between'} ai={'center'}>
+                      <Paragraph
+                        // fontFamily={'$mono'}
+                        fontWeight={'500'}
+                        textTransform={'uppercase'}
+                        color={'$black'}
+                      >
+                        {address ? 'Deposit' : 'Connect Wallet'}
+                      </Paragraph>
+                      <XStack alignItems={'center'} justifyContent={'center'} zIndex={2}>
+                        {address ? (
+                          <IconDeposit size={'$2.5'} color={'$black'} />
+                        ) : (
+                          <IconPlus size={'$2.5'} color={'$black'} />
+                        )}
+                      </XStack>
                     </XStack>
-                  </XStack>
-                </Button>
-              </OpenConnectModalWrapper>
-            </XStack>
+                  </Button>
+                </OpenConnectModalWrapper>
+              </XStack>
 
-            <YStack width="100%" pt="$6" pb="$12">
-              <TokenBalanceList coins={coins} />
+              <YStack width="100%" pt="$6" pb="$12">
+                <TokenBalanceList coins={coins} />
+              </YStack>
             </YStack>
           </YStack>
         )}