rewards landing

0xsend · Oct 4, 2024 · 2d09578 · 2d09578
1 parent d6997bb
commit 2d09578
Show file tree

Hide file tree

Showing 3 changed files with 130 additions and 0 deletions.
diff --git a/apps/next/pages/account/rewards.tsx → apps/next/pages/account/rewards/activity.tsx b/apps/next/pages/account/rewards.tsx → apps/next/pages/account/rewards/activity.tsx
diff --git a/apps/next/pages/account/rewards/index.tsx b/apps/next/pages/account/rewards/index.tsx
@@ -0,0 +1,26 @@
+import { LandingScreen } from 'app/features/account/rewards/landing/screen'
+import Head from 'next/head'
+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'
+
+export const Page: NextPageWithLayout = () => {
+  return (
+    <>
+      <Head>
+        <title>Send | Send Rewards</title>
+      </Head>
+      <LandingScreen />
+    </>
+  )
+}
+
+export const getServerSideProps = userProtectedGetSSP()
+Page.getLayout = (children) => (
+  <HomeLayout TopNav={<TopNav header="Rewards" button={ButtonOption.PROFILE} />}>
+    {children}
+  </HomeLayout>
+)
+
+export default Page
diff --git a/packages/app/features/account/rewards/landing/screen.tsx b/packages/app/features/account/rewards/landing/screen.tsx
@@ -0,0 +1,104 @@
+import { YStack, H1, Paragraph, XStack, LinkableButton, Button, Stack } from '@my/ui'
+import { IconArrowRight, IconSend } from 'app/components/icons'
+import { ImageBackground } from 'react-native'
+
+export function LandingScreen() {
+  return (
+    <YStack pt={'$size.3.5'} $gtLg={{ pt: 0 }} f={1} $gtMd={{ ml: '$4' }}>
+      <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>
+          <Paragraph color={'$color10'} size={'$5'}>
+            Participate in the Send Ecosystem and earn Send Tokens. Your Network! Your Rewards!
+          </Paragraph>
+        </YStack>
+
+        <YStack $gtLg={{ flexDirection: 'row' }} gap={'$size.3.5'}>
+          {/* @TODO: href, reward */}
+          <Section
+            title="Activity Rewards"
+            href="/account/rewards/activity"
+            reward="120,000 SEND"
+          />
+          <Section title="Lock &amp; Earn" href="/" reward="120,000 SEND" />
+        </YStack>
+      </YStack>
+    </YStack>
+  )
+}
+
+const Section = ({
+  title,
+  href,
+  reward,
+}: {
+  title: string
+  href: string
+  reward: string
+}) => {
+  return (
+    <YStack f={1} pos={'relative'} overflow="hidden" borderRadius={'$6'} backgroundColor={'$black'}>
+      <ImageBackground
+        source={{
+          uri: 'https://s3-alpha-sig.figma.com/img/a668/3317/565155fe10db1fac429e21394136ac1e?Expires=1728864000&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=lHAA3T2b8PvLZWTVGP0egRR8mq~tvCuqZu5OLOCYVg9bf6IGUdnGHNU5RLf3zrLFe39BQVHKLWuIqGiVcObSgIbB867T58RDosDsW2OSZHFW2aCwqSfC6~AgoircuJoFSzCApoNYLMDxv4NCU3IBcgG3uyGjd245j0vAvKEaTAn0vZ4LGbzSxaq5--5jSMNurFDK~fxHN6qQYzPP-CcqAqKrylgOmbb2hLq8RCZoT8Aw37pS~RpASfa-TQ4yIBZLxZgjnu7Ty8xrQPl2iERY8l~zGaKEpcscj8tvx22NqytwsNEjqrlPSye87dEGz1gB~UZZGQGY235AW9kLun8ezA__',
+        }}
+        resizeMode="cover"
+      >
+        <Stack
+          pos="absolute"
+          t={0}
+          l={0}
+          h="100%"
+          w="100%"
+          backgroundColor={'black'}
+          opacity={0.2}
+        />
+
+        <YStack p="$size.3.5" gap={'$size.11'}>
+          <XStack
+            gap={6}
+            ai="center"
+            alignSelf="flex-start"
+            pos={'relative'}
+            p={'$size.0.75'}
+            pr={'$size.0.9'}
+            borderRadius={'$4'}
+            backgroundColor={'$color1'}
+          >
+            <IconSend size={24} color="$primary" />
+            <Paragraph size={'$5'}>{title}</Paragraph>
+          </XStack>
+          <XStack gap={'$size.1'} jc="space-between">
+            <YStack w="100%">
+              <Paragraph
+                fontWeight={400}
+                color={'$color10'}
+                $theme-light={{ color: '$color3' }}
+                size={'$5'}
+              >
+                Claimable
+              </Paragraph>
+              <XStack ai={'center'} jc="space-between">
+                <Paragraph
+                  fontWeight={500}
+                  ff={'$mono'}
+                  size={'$9'}
+                  $theme-light={{ color: '$color0' }}
+                >
+                  {reward}
+                </Paragraph>
+                <LinkableButton href={href} unstyled borderRadius={'$3'} p={'$size.0.5'}>
+                  <Button.Icon>
+                    <IconArrowRight size={26} color={'$primary'} />
+                  </Button.Icon>
+                </LinkableButton>
+              </XStack>
+            </YStack>
+          </XStack>
+        </YStack>
+      </ImageBackground>
+    </YStack>
+  )
+}