diff --git a/apps/next/pages/index.tsx b/apps/next/pages/index.tsx index eea75b206..035dde577 100644 --- a/apps/next/pages/index.tsx +++ b/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> = ({ @@ -34,9 +36,13 @@ export const Page: NextPageWithLayoutSend | Home {session ? ( - }> - - + + } + > + + + ) : ( { + 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} + + {!isLoading && direction !== 'down' && ( + + + + + + + {canSend && ( + + + + )} + + + )} + + + ) +} diff --git a/packages/app/features/home/HomeButtons.tsx b/packages/app/features/home/HomeButtons.tsx index 04ebf76b2..0143b573d 100644 --- a/packages/app/features/home/HomeButtons.tsx +++ b/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 ( - - {!balancesIsLoading && !isSendAccountLoading && isVisible && ( - - - - - - - {canSend && ( - - - - )} - - - )} - - ) -} +import { XStack, LinkableButton, type LinkableButtonProps } from '@my/ui' export const DepositButton = () => { return ( - + ) } + +export const HomeButtons = { + DepositButton: DepositButton, + SendButton: SendButton, +} diff --git a/packages/app/features/home/__snapshots__/screen.test.tsx.snap b/packages/app/features/home/__snapshots__/screen.test.tsx.snap index d2a06c4bb..499209bbb 100644 --- a/packages/app/features/home/__snapshots__/screen.test.tsx.snap +++ b/packages/app/features/home/__snapshots__/screen.test.tsx.snap @@ -203,498 +203,387 @@ exports[`HomeScreen 1`] = ` - - - + + Deposit + - - Deposit - - - - + - - + - - - + - - + propList={ + [ + "fill", + ] + } + /> - - + + + + - - + - Send - - + - - - - - + /> + + - ) => { - const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent - const isEndOfView = layoutMeasurement.height + contentOffset.y >= contentSize.height - 50 - setScrollY((prev) => { - if ((prev > contentOffset.y && !isEndOfView) || contentOffset.y < 50) { - setIsActionRowVisible(true) - } else if (prev < e.nativeEvent.contentOffset.y || isEndOfView) { - setIsActionRowVisible(false) - } else { - setIsActionRowVisible(true) - } - return e.nativeEvent.contentOffset.y - }) - } + const { onScroll } = useScrollDirection() return ( @@ -49,7 +29,6 @@ export function HomeLayout({ {children} - {media.lg && pathname === '/' && } ) diff --git a/packages/app/features/home/screen.tsx b/packages/app/features/home/screen.tsx index 98be1cb5c..3788abf0f 100644 --- a/packages/app/features/home/screen.tsx +++ b/packages/app/features/home/screen.tsx @@ -1,20 +1,16 @@ import { Paragraph, - Separator, XStack, YStack, Stack, Spinner, - Link, - H3, Card, AnimatePresence, H4, useMedia, type XStackProps, - H5, } from '@my/ui' -import { IconError, IconPlus } from 'app/components/icons' +import { IconError } from 'app/components/icons' import { coins, coinsDict } from 'app/data/coins' import { useSendAccount } from 'app/utils/send-accounts' import { useCoinFromTokenParam } from 'app/utils/useCoinFromTokenParam' @@ -26,9 +22,9 @@ import Search from 'app/components/SearchBar' import { useTagSearch } from 'app/provider/tag-search' import { DepositAddress } from 'app/components/DepositAddress' import { useRootScreenParams } from 'app/routers/params' -import { parseUnits, formatUnits } from 'viem' -import { baseMainnet, sendTokenAddress, usdcAddress } from '@my/wagmi' -import { HomeButtonRow, DepositButton } from './HomeButtons' +import { parseUnits } from 'viem' +import { baseMainnet, usdcAddress } from '@my/wagmi' +import { DepositButton, SendButton } from './HomeButtons' function SendSearchBody() { const { isLoading, error } = useTagSearch() @@ -59,7 +55,8 @@ function HomeBody(props: XStackProps) { const [usdcBalance, sendBalance, ethBalance] = [balances?.USDC, balances?.SEND, balances?.ETH] const canSend = - usdcBalance && usdcBalance >= parseUnits('.20', coinsDict[usdcAddress[baseMainnet.id]].decimals) + usdcBalance !== undefined && + usdcBalance >= parseUnits('.20', coinsDict[usdcAddress[baseMainnet.id]].decimals) const transfersUnavailable = !canSend && ((sendBalance && sendBalance > 0n) || (ethBalance && ethBalance > 0n)) @@ -71,48 +68,6 @@ function HomeBody(props: XStackProps) { ) - // if (!canSend) { - // return ( - // - // - // - // - // - // - // - // - // Or direct deposit on Base - // - // - // - // {transfersUnavailable && ( - // <> - // - // - // - // A minimum of .20 USDC is required to unlock sending - // - // - // - // - // )} - // - // - // - // - // - // - // - // ) - // } - return ( {!canSend ? ( - - - - - - - Or direct deposit on Base - - - - {transfersUnavailable && ( - <> - - - - A minimum of .20 USDC is required to unlock sending - + <> + + + + - - )} - + + Or direct deposit on Base + + + + {transfersUnavailable && ( + <> + + + + A minimum of .20 USDC is required to unlock sending + + + + )} + + ) : ( - {} + + + + + {canSend && ( + + + + )} + )} - @@ -225,76 +190,3 @@ export function HomeScreen() { ) } - -const NoGasBalances = () => { - const { balances } = useSendAccountBalances() - - const [usdcBalance, sendBalance, ethBalance] = [ - formatUnits(balances?.USDC ?? 0n, coinsDict[usdcAddress[baseMainnet.id]].decimals), - formatUnits(balances?.SEND ?? 0n, coinsDict[sendTokenAddress[baseMainnet.id]].decimals), - formatUnits(balances?.ETH ?? 0n, coinsDict.eth.decimals), - ] - - return ( - -
Current Balances
- USDC: {Number(usdcBalance).toLocaleString()} - ETH: {Number(ethBalance).toLocaleString()} - SEND: {Number(sendBalance).toLocaleString()} - - ) -} - -const NoSendAccountMessage = () => { - return ( - -

- Register Your Sendtag Today! -

- - - - Earn rewards, transfer funds, and claim your unique Sendtag before it's gone. - - - - - - - - SENDTAG - - - - - - ) -} diff --git a/packages/app/provider/index.tsx b/packages/app/provider/index.tsx index 658780db2..59cf24105 100644 --- a/packages/app/provider/index.tsx +++ b/packages/app/provider/index.tsx @@ -7,6 +7,7 @@ import { TamaguiProvider } from './tamagui' import { UniversalThemeProvider } from './theme' import { ToastProvider } from './toast' import { WagmiProvider } from './wagmi' +import { ScrollDirectionProvider } from './scroll' import { ReactQueryDevtools } from '@tanstack/react-query-devtools' @@ -46,4 +47,5 @@ const Providers = compose([ SafeAreaProvider, TamaguiProvider, ToastProvider, + ScrollDirectionProvider, ]) diff --git a/packages/app/provider/scroll/ScrollDirectionProvider.tsx b/packages/app/provider/scroll/ScrollDirectionProvider.tsx new file mode 100644 index 000000000..b7806636d --- /dev/null +++ b/packages/app/provider/scroll/ScrollDirectionProvider.tsx @@ -0,0 +1,43 @@ +import { createContext, useContext, useState } from 'react' +import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native' + +export type ScrollDirectionContextValue = { + direction?: 'up' | 'down' + onScroll: (e: NativeSyntheticEvent) => void +} + +const ScrollDirection = createContext( + undefined as unknown as ScrollDirectionContextValue +) + +export const ScrollDirectionProvider = ({ children }: { children: React.ReactNode }) => { + const [direction, setDirection] = useState<'up' | 'down'>() + const [, setScrollY] = useState(0) + + const onScroll = (e: NativeSyntheticEvent) => { + const { contentOffset, contentSize, layoutMeasurement } = e.nativeEvent + const isEndOfView = layoutMeasurement.height + contentOffset.y >= contentSize.height - 50 + setScrollY((prev) => { + if ((prev > contentOffset.y && !isEndOfView) || contentOffset.y < 50) { + setDirection('up') + } else if (prev < e.nativeEvent.contentOffset.y || isEndOfView) { + setDirection('down') + } else { + setDirection(undefined) + } + return e.nativeEvent.contentOffset.y + }) + } + + return ( + {children} + ) +} + +export const useScrollDirection = () => { + const context = useContext(ScrollDirection) + if (!context) { + throw new Error('useScrollDirection must be used within a ScrollDirectionProvider') + } + return context +} diff --git a/packages/app/provider/scroll/index.tsx b/packages/app/provider/scroll/index.tsx new file mode 100644 index 000000000..bb7f098f8 --- /dev/null +++ b/packages/app/provider/scroll/index.tsx @@ -0,0 +1 @@ +export { ScrollDirectionProvider, useScrollDirection } from './ScrollDirectionProvider'