Skip to content

Commit

Permalink
Merge branch 'dev' of bargsend:0xsend/sendapp into temporal-changes
Browse files Browse the repository at this point in the history
  • Loading branch information
beezybarg committed Oct 2, 2024
2 parents 15d8624 + 1ff344e commit 4fb1bf7
Show file tree
Hide file tree
Showing 17 changed files with 1,056 additions and 1,188 deletions.
11 changes: 7 additions & 4 deletions apps/next/pages/[tag].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ import { CheckoutTagSchema } from 'app/features/account/sendtag/checkout/Checkou
import { assert } from 'app/utils/assert'
import { supabaseAdmin } from 'app/utils/supabase/admin'
import { ButtonOption, TopNav } from 'app/components/TopNav'
import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout'

export const Page: NextPageWithLayout<{ sendid: string }> = ({ sendid }) => {
export const Page: NextPageWithLayout<{ sendid: number | null }> = ({ sendid }) => {
return (
<>
<Head>
Expand Down Expand Up @@ -82,9 +83,11 @@ export const getServerSideProps = (async (ctx: GetServerSidePropsContext) => {
}) satisfies GetServerSideProps

Page.getLayout = (children) => (
<HomeLayout TopNav={<TopNav header="Profile" noSubroute button={ButtonOption.PROFILE} />}>
{children}
</HomeLayout>
<MobileButtonRowLayout.Profile>
<HomeLayout TopNav={<TopNav header="Profile" noSubroute button={ButtonOption.PROFILE} />}>
{children}
</HomeLayout>
</MobileButtonRowLayout.Profile>
)

export default Page
12 changes: 9 additions & 3 deletions apps/next/pages/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>> = ({
Expand All @@ -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={{
Expand Down
9 changes: 6 additions & 3 deletions apps/next/pages/profile/[sendid].tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { Database } from '@my/supabase/database.types'
import { userOnboarded } from 'utils/userOnboarded'
import { supabaseAdmin } from 'app/utils/supabase/admin'
import { ButtonOption, TopNav } from 'app/components/TopNav'
import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout'

export const Page: NextPageWithLayout = () => {
return (
Expand Down Expand Up @@ -67,9 +68,11 @@ export const getServerSideProps = (async (ctx: GetServerSidePropsContext) => {
}) satisfies GetServerSideProps

Page.getLayout = (children) => (
<HomeLayout TopNav={<TopNav header="Profile" noSubroute button={ButtonOption.PROFILE} />}>
{children}
</HomeLayout>
<MobileButtonRowLayout.Profile>
<HomeLayout TopNav={<TopNav header="Profile" noSubroute button={ButtonOption.PROFILE} />}>
{children}
</HomeLayout>
</MobileButtonRowLayout.Profile>
)

export default Page
160 changes: 160 additions & 0 deletions packages/app/components/MobileButtonRowLayout.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,160 @@
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'
import { ProfileButtons } from 'app/features/profile/ProfileButtons'
import { useUser } from 'app/utils/useUser'
import { useProfileLookup } from 'app/utils/useProfileLookup'
import { useProfileScreenParams } from 'app/routers/params'

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

export const Profile = (
{ children, ...props }: XStackProps //@todo another use case for a generated type for our route names
) => {
const isPwa = usePwa()
const [{ sendid, tag }] = useProfileScreenParams()
const identifier = tag ?? sendid ?? ''
const identifierType = tag ? 'tag' : 'sendid'
const { profile, isLoading } = useUser()
const { data: otherUserProfile } = useProfileLookup(identifierType, identifier?.toString() || '')

const { direction } = useScrollDirection()

const isVisible = Boolean(otherUserProfile) && profile?.send_id !== otherUserProfile?.sendid

return (
<>
{children}
<AnimatePresence>
{!isLoading && isVisible && 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 w={200}>
<ProfileButtons.SendButton
identifier={otherUserProfile?.tag ?? otherUserProfile?.sendid ?? ''}
idType="tag"
/>
</Stack>
</Row>
</Stack>
)}
</AnimatePresence>
</>
)
}

export const MobileButtonRowLayout = {
Home: Home,
Profile: Profile,
}
106 changes: 15 additions & 91 deletions packages/app/features/home/HomeButtons.tsx
Original file line number Diff line number Diff line change
@@ -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'}
Expand Down Expand Up @@ -139,3 +58,8 @@ export const SendButton = (props: Omit<LinkableButtonProps, 'href' | 'children'>
</LinkableButton>
)
}

export const HomeButtons = {
DepositButton: DepositButton,
SendButton: SendButton,
}
Loading

0 comments on commit 4fb1bf7

Please sign in to comment.