Hide Send Button in home row when no gas

0xsend · Sep 23, 2024 · 356abbf · 356abbf
1 parent 8900bce
commit 356abbf
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 10 deletions.
diff --git a/packages/app/features/home/HomeButtons.tsx b/packages/app/features/home/HomeButtons.tsx
@@ -1,5 +1,9 @@
 import { IconArrowRight, IconDeposit } from 'app/components/icons'
 import { useRootScreenParams } from 'app/routers/params'
+import { parseUnits } from 'viem'
+import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
+import { coinsDict } from 'app/data/coins'
+import { baseMainnet, usdcAddress } from '@my/wagmi'
 import {
   XStack,
   LinkableButton,
@@ -10,6 +14,7 @@ import {
   LinearGradient,
   usePwa,
   useMedia,
+  type LinkableButtonProps,
 } from '@my/ui'
 
 const Row = styled(XStack, {
@@ -30,9 +35,15 @@ export const HomeButtonRow = ({
 }: XStackProps & { isVisible?: boolean }) => {
   const isPwa = usePwa()
   const media = useMedia()
+  const { balances, isLoading: balancesIsLoading } = useSendAccountBalances()
+  const usdcBalance = balances?.USDC
+  const canSend =
+    usdcBalance !== undefined &&
+    usdcBalance >= parseUnits('.20', coinsDict[usdcAddress[baseMainnet.id]].decimals)
+
   return (
     <AnimatePresence>
-      {isVisible && (
+      {!balancesIsLoading && isVisible && (
         <Stack
           w={'100%'}
           pb={isPwa ? '$1' : '$5'}
@@ -63,12 +74,14 @@ export const HomeButtonRow = ({
             $gtLg={{ display: 'none' }}
           />
           <Row {...props}>
-            <Stack f={1} w="50%" flexDirection="row-reverse">
+            <Stack f={1} w="50%" flexDirection="row-reverse" maw={350}>
               <DepositButton />
             </Stack>
-            <Stack f={1} w="50%" jc={'center'}>
-              <SendButton />
-            </Stack>
+            {canSend && (
+              <Stack f={1} w="50%" jc={'center'} maw={350}>
+                <SendButton />
+              </Stack>
+            )}
           </Row>
         </Stack>
       )}
@@ -94,19 +107,20 @@ export const DepositButton = () => {
     </LinkableButton>
   )
 }
-
-export const SendButton = () => {
+//@todo this patch should be fixed in LinkableButtonProps
+export const SendButton = (props: Omit<LinkableButtonProps, 'href' | 'children'>) => {
   const [{ token }] = useRootScreenParams()
   const href = token ? `/send?sendToken=${token}` : '/send'
   return (
     <LinkableButton
       href={href}
-      theme="green"
+      theme={'green'}
       br="$4"
       px={'$3.5'}
       h={'$4.5'}
       w="100%"
       testID="homeSendButton"
+      {...props}
     >
       <XStack w={'100%'} jc={'space-between'} ai={'center'} h="100%">
         <LinkableButton.Text

diff --git a/packages/app/features/home/__snapshots__/screen.test.tsx.snap b/packages/app/features/home/__snapshots__/screen.test.tsx.snap
@@ -303,6 +303,7 @@ exports[`HomeScreen 1`] = `
                 {
                   "flex": 1,
                   "flexDirection": "row-reverse",
+                  "maxWidth": 350,
                   "width": "50%",
                 }
               }
@@ -526,6 +527,7 @@ exports[`HomeScreen 1`] = `
                 {
                   "flex": 1,
                   "justifyContent": "center",
+                  "maxWidth": 350,
                   "width": "50%",
                 }
               }

diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx
@@ -76,8 +76,8 @@ function HomeBody(props: XStackProps) {
       <XStack w={'100%'} jc={'space-between'} $gtLg={{ gap: '$11' }} $lg={{ f: 1 }} {...props}>
         <YStack $gtLg={{ width: 455, display: 'flex' }} width="100%" ai={'center'}>
           <Card
-            $lg={{ fd: 'column', bc: 'transparent' }}
             $gtLg={{ p: 36 }}
+            $lg={{ display: 'none' }}
             py={'$6'}
             px={'$2'}
             ai={'center'}

diff --git a/packages/playwright/tests/home.onboarded.spec.ts b/packages/playwright/tests/home.onboarded.spec.ts
@@ -38,7 +38,7 @@ test('can visit token detail page', async ({ context, page }) => {
   await expect(page.getByText('10 USDC')).toBeVisible()
 
   // Button and label
-  await expect(page.getByText('Deposit')).toHaveCount(1)
+  await expect(page.getByText('Deposit')).toHaveCount(2)
 
   await expect(page.getByText('/alice')).toBeVisible()
   await expect(page.getByText('Received')).toBeVisible()

diff --git a/packages/ui/src/components/LinkableButton.tsx b/packages/ui/src/components/LinkableButton.tsx
@@ -4,6 +4,7 @@ import { useLink } from 'solito/link'
 
 import { getButtonSized } from '@tamagui/get-button-sized'
 import type { LinkProps } from './Link'
+import type { ReactElement } from 'react'
 
 const BUTTON_NAME = 'Button'