More Send Rewards Tweaks

0xsend · Oct 19, 2024 · c506aa6 · c506aa6
1 parent e66a766
commit c506aa6
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 38 deletions.
diff --git a/apps/next/pages/account/rewards/activity.tsx b/apps/next/pages/account/rewards/activity.tsx
@@ -10,7 +10,7 @@ export const Page: NextPageWithLayout = () => {
   return (
     <>
       <Head>
-        <title>Send | Send Rewards</title>
+        <title>Send | Activity Rewards</title>
       </Head>
       <ActivityRewardsScreen />
     </>
@@ -19,20 +19,10 @@ export const Page: NextPageWithLayout = () => {
 
 export const getServerSideProps = userProtectedGetSSP()
 
-const subheader =
-  'Register at least 1 Sendtag, maintain the minimum balance, avoid selling, and refer others for a bonus multiplier. '
-
 Page.getLayout = (children) => (
   <MobileButtonRowLayout.ActivityRewards>
     <HomeLayout
-      TopNav={
-        <TopNav
-          header="Send Rewards"
-          showLogo
-          subheader={subheader}
-          button={ButtonOption.PROFILE}
-        />
-      }
+      TopNav={<TopNav header="Activity Rewards" showLogo button={ButtonOption.PROFILE} />}
     >
       {children}
     </HomeLayout>

diff --git a/packages/app/components/TopNav.tsx b/packages/app/components/TopNav.tsx
@@ -224,7 +224,6 @@ export function TopNav({
                       fontWeight={'300'}
                       col="$color10"
                       lineHeight={32}
-                      $gtLg={{ ml: isSubRoute ? '$4' : '$0' }}
                       display={selectedCoin ? 'none' : 'flex'}
                       als={'center'}
                     >
@@ -239,7 +238,7 @@ export function TopNav({
                   fontWeight={'300'}
                   col="$color10"
                   lineHeight={32}
-                  $gtLg={{ ml: isSubRoute ? '$4' : '$0' }}
+                  //ml= {isSubRoute ? '$4' : '$0' }
                   display={isSubRoute ? 'flex' : 'none'}
                   als={'center'}
                 >
@@ -268,7 +267,7 @@ export function TopNav({
             lineHeight={24}
             py="$3"
             $gtSm={{ py: '$6' }}
-            $gtLg={{ pl: '$1', pb: '$6', pt: '$0', ...{ ml: isSubRoute ? '$4' : '$1' } }}
+            $gtLg={{ pl: '$1', pb: '$6', pt: '$0' }}
             col="$color10"
           >
             {subheader}

diff --git a/packages/app/features/account/rewards/activity/__snapshots__/screen.test.tsx.snap b/packages/app/features/account/rewards/activity/__snapshots__/screen.test.tsx.snap
@@ -9,7 +9,6 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
         "flexDirection": "column",
         "gap": 39,
         "paddingBottom": 88,
-        "paddingTop": 32,
       }
     }
   >
@@ -110,7 +109,6 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
         style={
           {
             "flexDirection": "column",
-            "maxWidth": 463,
             "paddingBottom": 18,
             "paddingLeft": 18,
             "paddingRight": 18,
@@ -156,7 +154,9 @@ exports[`ActivityRewardsScreen renders: ActivityRewardsScreen 1`] = `
           }
           suppressHighlighting={true}
         >
-          Register at least 1 Sendtag, maintain the minimum balance, avoid selling, and refer others for a bonus multiplier.
+          Register at least 1 Sendtag, maintain the minimum balance,
+          <br />
+           avoid selling, and refer others for a bonus multiplier.
         </Text>
       </View>
     </View>

diff --git a/packages/app/features/account/rewards/activity/screen.tsx b/packages/app/features/account/rewards/activity/screen.tsx
@@ -56,7 +56,7 @@ export function ActivityRewardsScreen() {
 
   if (isLoading)
     return (
-      <YStack f={1} pt={'$6'} gap={'$7'}>
+      <YStack f={1} gap={'$7'}>
         <Header />
         <Stack w="100%" f={1} jc={'center'} ai={'center'}>
           <Spinner color="$color" size="large" />
@@ -65,7 +65,7 @@ export function ActivityRewardsScreen() {
     )
   if (!distributions || !distributions[selectedDistributionIndex])
     return (
-      <YStack f={1} pt={'$6'} gap={'$7'}>
+      <YStack f={1} gap={'$7'}>
         <Header />
         <Stack w="100%" f={1} jc={'center'} ai={'center'}>
           <Paragraph color={'$color10'} size={'$5'}>
@@ -91,7 +91,7 @@ export function ActivityRewardsScreen() {
   }
 
   return (
-    <YStack f={1} pb={'$12'} pt={'$6'} gap={'$7'}>
+    <YStack f={1} pb={'$12'} gap={'$7'}>
       <Header />
       <XStack w={'100%'} jc={'space-between'} ai={'center'}>
         <H3 fontWeight={'600'} color={'$color12'}>
@@ -255,7 +255,7 @@ const Header = () => (
       colors={['$darkest', 'transparent', '$darkest']}
     />
 
-    <YStack p="$4" pt={'$3'} maw={463} position="absolute" zIndex={1}>
+    <YStack p="$4" pt={'$3'} position="absolute" zIndex={1}>
       <H1 tt={'uppercase'} color={'white'} size={'$9'} $gtMd={{ size: '$10' }}>
         Unlock <br />
         Extra Rewards
@@ -267,8 +267,8 @@ const Header = () => (
           size: '$5',
         }}
       >
-        Register at least 1 Sendtag, maintain the minimum balance, avoid selling, and refer others
-        for a bonus multiplier.
+        Register at least 1 Sendtag, maintain the minimum balance,
+        <br /> avoid selling, and refer others for a bonus multiplier.
       </Paragraph>
     </YStack>
   </Stack>
@@ -282,7 +282,7 @@ const DistributionRequirementsCard = ({
     isLoading: isLoadingSnapshotBalance,
     error: snapshotBalanceError,
   } = useReadSendTokenBalanceOf({
-    chainId: distribution.chain_id ?? 8453,
+    chainId: (distribution.chain_id ?? 8453) as keyof typeof sendTokenAddress,
     args: [distribution.distribution_shares.at(0)?.address ?? zeroAddress],
     blockNumber: distribution.snapshot_block_num
       ? BigInt(distribution.snapshot_block_num)
@@ -395,7 +395,7 @@ const SendPerksCards = ({ distribution }: { distribution: UseDistributionsResult
                 <H3 fontWeight={'600'} color={'$color12'}>
                   {title}
                 </H3>
-                <Paragraph fontWeight={'500'} color={'$color12'}>
+                <Paragraph fontSize={'$6'} fontWeight={'400'} color={'$color10'}>
                   + {verificationValues?.[verificationType]?.fixed_value.toLocaleString() ?? 0} SEND{' '}
                   {details ?? ''}
                 </Paragraph>

diff --git a/packages/app/features/account/rewards/screen.tsx b/packages/app/features/account/rewards/screen.tsx
@@ -28,11 +28,17 @@ export function RewardsScreen() {
   })
 
   return (
-    <YStack pt={'$size.3.5'} $gtLg={{ pt: 0 }} f={1} $gtMd={{ ml: '$4' }}>
+    <YStack pt={'$size.3.5'} $gtLg={{ pt: 0 }} f={1}>
       <YStack pb={'$size.3.5'}>
         <YStack w={'100%'} mb={'$size.3.5'} gap={'$size.0.9'}>
-          <H1 size={'$9'} fontWeight={'900'} color="$color12" tt={'uppercase'}>
-            Claim Your Network Benefits
+          <H1
+            size={'$9'}
+            fontWeight={'900'}
+            color="$color12"
+            tt={'uppercase'}
+            verticalAlign={'middle'}
+          >
+            Invest Time, EARN Send
           </H1>
           <Paragraph color={'$color10'} size={'$5'}>
             Participate in the Send Ecosystem and earn Send Tokens. Your Network! Your Rewards!
@@ -80,7 +86,14 @@ const Section = ({
   claimStatus?: 'Claimable' | 'Claimed' | 'Upcoming Reward'
 }) => {
   return (
-    <YStack f={1} pos={'relative'} overflow="hidden" borderRadius={'$6'} backgroundColor={'$black'}>
+    <YStack
+      f={1}
+      pos={'relative'}
+      overflow="hidden"
+      borderRadius={'$6'}
+      backgroundColor={'$black'}
+      maw={500}
+    >
       <Image
         pos={'absolute'}
         br={'$6'}
@@ -106,19 +119,16 @@ const Section = ({
           p={'$size.0.75'}
           pr={'$size.0.9'}
           borderRadius={'$4'}
-          backgroundColor={'$color1'}
+          backgroundColor={'#1F352A'}
         >
           <IconSend size={24} color="$primary" />
-          <Paragraph size={'$5'}>{title}</Paragraph>
+          <Paragraph size={'$5'} color="$white">
+            {title}
+          </Paragraph>
         </XStack>
         <XStack gap={'$size.1'} jc="space-between">
           <YStack w="100%">
-            <Paragraph
-              fontWeight={400}
-              color={'$color10'}
-              $theme-light={{ color: '$color3' }}
-              size={'$5'}
-            >
+            <Paragraph fontWeight={400} color={'$white'} size={'$5'}>
               {isLoading ? '' : claimStatus}
             </Paragraph>
             <XStack ai={'center'} jc="space-between">