Refactor Mobile Buttons Row and use scroll context

apps/next/pages/index.tsx

@@ -15,6 +15,8 @@ import { useEffect, useState } from 'react'
 import { getRemoteAssets } from 'utils/getRemoteAssets'
 import type { GetPlaiceholderImage } from 'app/utils/getPlaiceholderImage'
 
+import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout'
+
 const log = debug('app:pages:index')
 
 export const Page: NextPageWithLayout<InferGetServerSidePropsType<typeof getServerSideProps>> = ({
@@ -34,9 +36,13 @@ export const Page: NextPageWithLayout<InferGetServerSidePropsType<typeof getServ
         <title>Send | Home</title>
       </Head>
       {session ? (
-        <HomeLayout TopNav={<TopNav header="Home" button={ButtonOption.PROFILE} showLogo={true} />}>
-          <HomeScreen />
-        </HomeLayout>
+        <MobileButtonRowLayout.Home>
+          <HomeLayout
+            TopNav={<TopNav header="Home" button={ButtonOption.PROFILE} showLogo={true} />}
+          >
+            <HomeScreen />
+          </HomeLayout>
+        </MobileButtonRowLayout.Home>
       ) : (
         <AuthCarouselContext.Provider
           value={{

packages/app/components/MobileButtonRowLayout.tsx

@@ -0,0 +1,90 @@
+import {
+  XStack,
+  Stack,
+  styled,
+  type XStackProps,
+  AnimatePresence,
+  LinearGradient,
+  usePwa,
+} from '@my/ui'
+import { useSendAccount } from 'app/utils/send-accounts'
+import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
+import { parseUnits } from 'viem'
+import { coinsDict } from 'app/data/coins'
+import { baseMainnet, usdcAddress } from '@my/wagmi'
+import { HomeButtons } from '../features/home/HomeButtons'
+import { useScrollDirection } from '../provider/scroll'
+
+const Row = styled(XStack, {
+  w: '100%',
+  ai: 'center',
+  mx: 'auto',
+  jc: 'space-around',
+  gap: '$4',
+  maw: 768,
+  $gtLg: {
+    pt: '$4',
+  },
+})
+
+export const Home = ({ children, ...props }: XStackProps) => {
+  const isPwa = usePwa()
+  const { isLoading: isLoadingSendAccount } = useSendAccount()
+  const { balances, isLoading: isLoadingBalances } = useSendAccountBalances()
+  const usdcBalance = balances?.USDC
+  const canSend =
+    usdcBalance !== undefined &&
+    usdcBalance >= parseUnits('.20', coinsDict[usdcAddress[baseMainnet.id]].decimals)
+
+  const { direction } = useScrollDirection()
+
+  const isLoading = !isLoadingSendAccount || isLoadingBalances
+
+  return (
+    <>
+      {children}
+      <AnimatePresence>
+        {!isLoading && direction !== 'down' && (
+          <Stack
+            w={'100%'}
+            pb={isPwa ? '$1' : '$5'}
+            px="$4"
+            $platform-web={{
+              position: 'fixed',
+              bottom: 0,
+            }}
+            $gtLg={{
+              display: 'none',
+            }}
+            animation="200ms"
+            opacity={1}
+            animateOnly={['scale', 'transform', 'opacity']}
+            enterStyle={{ opacity: 0, scale: 0.9 }}
+            exitStyle={{ opacity: 0, scale: 0.95 }}
+          >
+            <LinearGradient
+              h={'150%'}
+              top={'-50%'}
+              start={{ x: 0, y: 1 }}
+              end={{ x: 0, y: 0 }}
+              locations={[0, 0.33]}
+              fullscreen
+              colors={['transparent', '$background']}
+              $gtLg={{ display: 'none' }}
+            />
+            <Row {...props}>
+              <Stack f={1} w="50%" flexDirection="row-reverse" maw={350}>
+                <HomeButtons.DepositButton />
+              </Stack>
+              {canSend && (
+                <Stack f={1} w="50%" jc={'center'} maw={350}>
+                  <HomeButtons.SendButton />
+                </Stack>
+              )}
+            </Row>
+          </Stack>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}

packages/app/features/home/HomeButtons.tsx

@@ -1,99 +1,18 @@
 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,
-  Stack,
-  styled,
-  type XStackProps,
-  AnimatePresence,
-  LinearGradient,
-  usePwa,
-  useMedia,
-  type LinkableButtonProps,
-} from '@my/ui'
-import { useSendAccount } from 'app/utils/send-accounts'
-
-const Row = styled(XStack, {
-  w: '100%',
-  ai: 'center',
-  mx: 'auto',
-  jc: 'space-around',
-  gap: '$4',
-  maw: 768,
-  $gtLg: {
-    pt: '$4',
-  },
-})
-
-export const HomeButtonRow = ({
-  isVisible = true,
-  ...props
-}: XStackProps & { isVisible?: boolean }) => {
-  const isPwa = usePwa()
-  const media = useMedia()
-  const { isLoading: isSendAccountLoading } = useSendAccount()
-  const { balances, isLoading: balancesIsLoading } = useSendAccountBalances()
-  const usdcBalance = balances?.USDC
-  const canSend =
-    usdcBalance !== undefined &&
-    usdcBalance >= parseUnits('.20', coinsDict[usdcAddress[baseMainnet.id]].decimals)
-
-  return (
-    <AnimatePresence>
-      {!balancesIsLoading && !isSendAccountLoading && isVisible && (
-        <Stack
-          w={'100%'}
-          pb={isPwa ? '$1' : '$5'}
-          px="$4"
-          $platform-web={{
-            position: media.lg ? 'fixed' : 'relative',
-            bottom: 0,
-          }}
-          $gtLg={{
-            position: 'relative',
-            pb: '$0',
-            px: '$0',
-          }}
-          animation="200ms"
-          opacity={1}
-          animateOnly={['scale', 'transform', 'opacity']}
-          enterStyle={{ opacity: 0, scale: 0.9 }}
-          exitStyle={{ opacity: 0, scale: 0.95 }}
-        >
-          <LinearGradient
-            h={'150%'}
-            top={'-50%'}
-            start={{ x: 0, y: 1 }}
-            end={{ x: 0, y: 0 }}
-            locations={[0, 0.33]}
-            fullscreen
-            colors={['transparent', '$background']}
-            $gtLg={{ display: 'none' }}
-          />
-          <Row {...props}>
-            <Stack f={1} w="50%" flexDirection="row-reverse" maw={350}>
-              <DepositButton />
-            </Stack>
-            {canSend && (
-              <Stack f={1} w="50%" jc={'center'} maw={350}>
-                <SendButton />
-              </Stack>
-            )}
-          </Row>
-        </Stack>
-      )}
-    </AnimatePresence>
-  )
-}
+import { XStack, LinkableButton, type LinkableButtonProps } from '@my/ui'
 
 export const DepositButton = () => {
   return (
-    <LinkableButton theme="green" href="/deposit" px={'$3.5'} h={'$4.5'} borderRadius={'$4'} f={1}>
+    <LinkableButton
+      theme="green"
+      href="/deposit"
+      px={'$3.5'}
+      h={'$4.5'}
+      borderRadius={'$4'}
+      f={1}
+      testID="homeDepositButton"
+    >
       <XStack w={'100%'} jc={'space-between'} ai={'center'}>
         <LinkableButton.Text
           fontWeight={'500'}
@@ -139,3 +58,8 @@ export const SendButton = (props: Omit<LinkableButtonProps, 'href' | 'children'>
     </LinkableButton>
   )
 }
+
+export const HomeButtons = {
+  DepositButton: DepositButton,
+  SendButton: SendButton,
+}