Rewards Claimable Card

0xsend · Oct 18, 2024 · 169ae54 · 169ae54
1 parent 9c4877d
commit 169ae54
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 169 deletions.
diff --git a/apps/next/pages/account/rewards/activity.tsx b/apps/next/pages/account/rewards/activity.tsx
@@ -4,6 +4,7 @@ import { userProtectedGetSSP } from 'utils/userProtected'
 import type { NextPageWithLayout } from 'next-app/pages/_app'
 import { HomeLayout } from 'app/features/home/layout.web'
 import { ButtonOption, TopNav } from 'app/components/TopNav'
+import { MobileButtonRowLayout } from 'app/components/MobileButtonRowLayout'
 
 export const Page: NextPageWithLayout = () => {
   return (
@@ -22,19 +23,20 @@ const subheader =
   'Register at least 1 Sendtag, maintain the minimum balance, avoid selling, and refer others for a bonus multiplier. '
 
 Page.getLayout = (children) => (
-  <HomeLayout
-    $platform-web={{
-      h: '100svh',
-      contentContainerStyle: {
-        h: '100svh',
-      },
-    }}
-    TopNav={
-      <TopNav header="Send Rewards" showLogo subheader={subheader} button={ButtonOption.PROFILE} />
-    }
-  >
-    {children}
-  </HomeLayout>
+  <MobileButtonRowLayout.ActivityRewards>
+    <HomeLayout
+      TopNav={
+        <TopNav
+          header="Send Rewards"
+          showLogo
+          subheader={subheader}
+          button={ButtonOption.PROFILE}
+        />
+      }
+    >
+      {children}
+    </HomeLayout>
+  </MobileButtonRowLayout.ActivityRewards>
 )
 
 export default Page
diff --git a/packages/app/components/MobileButtonRowLayout.tsx b/packages/app/components/MobileButtonRowLayout.tsx
@@ -6,6 +6,7 @@ import {
   AnimatePresence,
   LinearGradient,
   usePwa,
+  Paragraph,
 } from '@my/ui'
 import { useSendAccount } from 'app/utils/send-accounts'
 import { useSendAccountBalances } from 'app/utils/useSendAccountBalances'
@@ -17,7 +18,10 @@ 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'
+import { useProfileScreenParams, useRewardsScreenParams } from 'app/routers/params'
+import { useMonthlyDistributions } from 'app/utils/distributions'
+import { DistributionClaimButton } from 'app/features/account/rewards/components/DistributionClaimButton'
+import formatAmount from 'app/utils/formatAmount'
 
 const Row = styled(XStack, {
   w: '100%',
@@ -154,7 +158,72 @@ export const Profile = (
   )
 }
 
+export const ActivityRewards = ({ children, ...props }: XStackProps) => {
+  const isPwa = usePwa()
+  const [queryParams] = useRewardsScreenParams()
+  const { data: distributions, isLoading } = useMonthlyDistributions()
+  const distribution =
+    distributions?.find((d) => d.number === queryParams.distribution) ?? distributions?.[0]
+  const shareAmount = distribution?.distribution_shares?.[0]?.amount
+  const { direction } = useScrollDirection()
+
+  const isVisible = distribution !== undefined && shareAmount !== undefined && shareAmount > 0
+
+  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' }}
+            />
+            <Stack ai="center" jc="space-between" gap="$3" pt="$5">
+              <Paragraph
+                fontFamily={'$mono'}
+                $gtXs={{ fontSize: '$10' }}
+                fontSize={'$9'}
+                fontWeight={'500'}
+                lh={40}
+              >
+                {shareAmount === undefined ? '' : `${formatAmount(shareAmount, 10, 0)} SEND`}
+              </Paragraph>
+              <Row {...props}>
+                <DistributionClaimButton distribution={distribution} />
+              </Row>
+            </Stack>
+          </Stack>
+        )}
+      </AnimatePresence>
+    </>
+  )
+}
+
 export const MobileButtonRowLayout = {
   Home: Home,
   Profile: Profile,
+  ActivityRewards: ActivityRewards,
 }
diff --git a/packages/app/features/account/rewards/activity/screen.tsx b/packages/app/features/account/rewards/activity/screen.tsx
@@ -26,6 +26,7 @@ import { useMonthlyDistributions, type UseDistributionsResultData } from 'app/ut
 import formatAmount from 'app/utils/formatAmount'
 import { zeroAddress } from 'viem'
 import { type PropsWithChildren, useRef, useId, useState } from 'react'
+import { DistributionClaimButton } from '../components/DistributionClaimButton'
 
 //@todo get this from the db
 const verificationTypesAndTitles = [
@@ -218,6 +219,7 @@ export function ActivityRewardsScreen() {
           distribution={distributions[selectedDistributionIndex]}
           distributionDate={distributionDates[selectedDistributionIndex]}
         />
+        <ClaimableRewardsCard distribution={distributions[selectedDistributionIndex]} />
       </YStack>
     </YStack>
   )
@@ -297,7 +299,7 @@ const DistributionRequirementsCard = ({
     distribution.distribution_verifications_summary.at(0)?.tag_registrations
 
   return (
-    <Card br={12} $theme-light={{ bc: '$color2' }} $gtMd={{ gap: '$4', p: '$7' }} p="$5">
+    <Card br={12} $gtMd={{ gap: '$4', p: '$7' }} p="$5">
       <Stack ai="center" jc="space-between" gap="$5" $gtXs={{ flexDirection: 'row' }}>
         <YStack gap="$2">
           <Label fontSize={'$5'} col={'$color10'}>
@@ -408,7 +410,6 @@ const PerkCard = ({
       jc={'space-between'}
       mih={208}
       $gtSm={{ maw: 331 }}
-      $theme-light={{ bc: '$color2' }}
       w={'100%'}
     >
       <XStack ai="center" gap="$2">
@@ -492,6 +493,34 @@ const MultiplierCard = ({ children }: PropsWithChildren<CardProps>) => {
   )
 }
 
+const ClaimableRewardsCard = ({
+  distribution,
+}: { distribution: UseDistributionsResultData[number] }) => {
+  const shareAmount = distribution.distribution_shares?.[0]?.amount
+  if (shareAmount === undefined || shareAmount === 0) return null
+  return (
+    <YStack f={1} w={'100%'} gap="$5" $lg={{ display: 'none' }}>
+      <H3 fontWeight={'600'} color={'$color12'}>
+        Total Claimable Rewards
+      </H3>
+      <Card br={'$6'} p="$7" ai={'center'} w={'100%'}>
+        <Stack ai="center" jc="space-between" fd="row" w="100%">
+          <Paragraph
+            fontFamily={'$mono'}
+            $gtXs={{ fontSize: '$10' }}
+            fontSize={'$9'}
+            fontWeight={'500'}
+            lh={40}
+          >
+            {shareAmount === undefined ? 'N/A' : `${formatAmount(shareAmount, 10, 0)} SEND`}
+          </Paragraph>
+          <DistributionClaimButton distribution={distribution} />
+        </Stack>
+      </Card>
+    </YStack>
+  )
+}
+
 const DistributionItem = ({
   isActive,
   value,