Skip to content

Commit cc82f49

Browse files
stormcloud266stormcloud266
committed
rewards landing
1 parent 1ff344e commit cc82f49

File tree

4 files changed

+132
-1
lines changed

4 files changed

+132
-1
lines changed

‎apps/next/pages/account/rewards.tsx ‎apps/next/pages/account/rewards/activity.tsx

File renamed without changes.

‎apps/next/pages/account/rewards/index.tsx

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { LandingScreen } from 'app/features/account/rewards/landing/screen'
2+
import Head from 'next/head'
3+
import { userProtectedGetSSP } from 'utils/userProtected'
4+
import type { NextPageWithLayout } from 'next-app/pages/_app'
5+
import { HomeLayout } from 'app/features/home/layout.web'
6+
import { ButtonOption, TopNav } from 'app/components/TopNav'
7+
8+
export const Page: NextPageWithLayout = () => {
9+
return (
10+
<>
11+
<Head>
12+
<title>Send | Send Rewards</title>
13+
</Head>
14+
<LandingScreen />
15+
</>
16+
)
17+
}
18+
19+
export const getServerSideProps = userProtectedGetSSP()
20+
Page.getLayout = (children) => (
21+
<HomeLayout TopNav={<TopNav header="Rewards" button={ButtonOption.PROFILE} />}>
22+
{children}
23+
</HomeLayout>
24+
)
25+
26+
export default Page

‎packages/app/features/account/rewards/landing/screen.tsx

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import { YStack, H1, Paragraph, XStack, LinkableButton, Button, Stack } from '@my/ui'
2+
import { IconArrowRight, IconSend } from 'app/components/icons'
3+
import { ImageBackground } from 'react-native'
4+
5+
export function LandingScreen() {
6+
return (
7+
<YStack pt={'$size.3.5'} $gtLg={{ pt: 0 }} f={1} $gtMd={{ ml: '$4' }}>
8+
<YStack pb={'$size.3.5'}>
9+
<YStack w={'100%'} mb={'$size.3.5'} gap={'$size.0.9'}>
10+
<H1 size={'$9'} fontWeight={'900'} color="$color12" tt={'uppercase'}>
11+
Claim Your Network Benefits
12+
</H1>
13+
<Paragraph color={'$color10'} size={'$5'}>
14+
Participate in the Send Ecosystem and earn Send Tokens. Your Network! Your Rewards!
15+
</Paragraph>
16+
</YStack>
17+
18+
<YStack $gtLg={{ flexDirection: 'row' }} gap={'$size.3.5'}>
19+
{/* @TODO: href, reward */}
20+
<Section
21+
title="Activity Rewards"
22+
href="/account/rewards/activity"
23+
reward="120,000 SEND"
24+
/>
25+
<Section title="Lock &amp; Earn" href="/" reward="120,000 SEND" />
26+
</YStack>
27+
</YStack>
28+
</YStack>
29+
)
30+
}
31+
32+
const Section = ({
33+
title,
34+
href,
35+
reward,
36+
}: {
37+
title: string
38+
href: string
39+
reward: string
40+
}) => {
41+
return (
42+
<YStack f={1} pos={'relative'} overflow="hidden" borderRadius={'$6'} backgroundColor={'$black'}>
43+
<ImageBackground
44+
source={{
45+
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__',
46+
}}
47+
resizeMode="cover"
48+
>
49+
<Stack
50+
pos="absolute"
51+
t={0}
52+
l={0}
53+
h="100%"
54+
w="100%"
55+
backgroundColor={'black'}
56+
opacity={0.2}
57+
/>
58+
59+
<YStack p="$size.3.5" gap={'$size.11'}>
60+
<XStack
61+
gap={6}
62+
ai="center"
63+
alignSelf="flex-start"
64+
pos={'relative'}
65+
p={'$size.0.75'}
66+
pr={'$size.0.9'}
67+
borderRadius={'$4'}
68+
backgroundColor={'$color1'}
69+
>
70+
<IconSend size={24} color="$primary" />
71+
<Paragraph size={'$5'}>{title}</Paragraph>
72+
</XStack>
73+
<XStack gap={'$size.1'} jc="space-between">
74+
<YStack w="100%">
75+
<Paragraph
76+
fontWeight={400}
77+
color={'$color10'}
78+
$theme-light={{ color: '$color3' }}
79+
size={'$5'}
80+
>
81+
Claimable
82+
</Paragraph>
83+
<XStack ai={'center'} jc="space-between">
84+
<Paragraph
85+
fontWeight={500}
86+
ff={'$mono'}
87+
size={'$9'}
88+
$theme-light={{ color: '$color0' }}
89+
>
90+
{reward}
91+
</Paragraph>
92+
<LinkableButton href={href} unstyled borderRadius={'$3'} p={'$size.0.5'}>
93+
<Button.Icon>
94+
<IconArrowRight size={26} color={'$primary'} />
95+
</Button.Icon>
96+
</LinkableButton>
97+
</XStack>
98+
</YStack>
99+
</XStack>
100+
</YStack>
101+
</ImageBackground>
102+
</YStack>
103+
)
104+
}

‎packages/playwright/tests/account-rewards.onboarded.spec.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,6 @@ test.beforeEach(async ({ page }) => {
1212
test('can visit rewards page', async ({ page }) => {
1313
await page.goto('/account/rewards')
1414
await expect(page).toHaveURL('/account/rewards')
15-
await expect(page.getByRole('heading', { name: 'Send Rewards', exact: true })).toBeVisible()
15+
await expect(page.getByText('Rewards', { exact: true })).toBeVisible()
16+
await expect(page.getByRole('heading', { name: 'Claim Your Network Benefits' })).toBeVisible()
1617
})

0 commit comments

Comments
 (0)