Use Mobile Buttons Row in profile screen

0xsend · Oct 2, 2024 · 0bdf163 · 0bdf163
1 parent 5536ebe
commit 0bdf163
Show file tree

Hide file tree

Showing 7 changed files with 524 additions and 522 deletions.
diff --git a/apps/next/pages/[tag].tsx b/apps/next/pages/[tag].tsx
@@ -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>
@@ -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
diff --git a/apps/next/pages/profile/[sendid].tsx b/apps/next/pages/profile/[sendid].tsx
@@ -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 (
@@ -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
diff --git a/packages/app/components/MobileButtonRowLayout.tsx b/packages/app/components/MobileButtonRowLayout.tsx
@@ -14,6 +14,10 @@ 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 { usePathname } from 'app/utils/usePathname'
 
 const Row = styled(XStack, {
   w: '100%',
@@ -88,3 +92,69 @@ export const Home = ({ children, ...props }: XStackProps) => {
     </>
   )
 }
+
+export const Profile = (
+  { children, ...props }: XStackProps //@todo another use case for a generated type for our route names
+) => {
+  const isPwa = usePwa()
+  const pathname = usePathname()
+  const identifier = pathname.split('/').at(-1)
+  const identifierType = pathname.split('/').at(-2) === 'profile' ? 'sendid' : 'tag'
+  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,
+}
diff --git a/packages/app/features/profile/ProfileButtons.tsx b/packages/app/features/profile/ProfileButtons.tsx
@@ -0,0 +1,31 @@
+import { LinkableButton, XStack } from '@my/ui'
+import { IconArrowRight } from 'app/components/icons'
+
+export const SendButton = ({
+  identifier,
+  idType,
+}: { identifier: string | number; idType: string }) => (
+  <LinkableButton
+    href={`/send?idType=${idType}&recipient=${identifier}`}
+    br="$4"
+    px={'$3.5'}
+    h={'$4.5'}
+    w="100%"
+    miw={150}
+    theme={'green'}
+    testID={profileSendButton}
+  >
+    <XStack w={'100%'} jc={'center'} ai={'center'} gap={'$2'} h="100%">
+      <LinkableButton.Text
+        fontWeight={'600'}
+        textTransform={'uppercase'}
+        $theme-dark={{ col: '$color0' }}
+      >
+        SEND
+      </LinkableButton.Text>
+      <LinkableButton.Icon>
+        <IconArrowRight size={'$1'} $theme-dark={{ col: '$color0' }} />
+      </LinkableButton.Icon>
+    </XStack>
+  </LinkableButton>
+)