Skip to content

Commit

Permalink
feat: Update activity points page design
Browse files Browse the repository at this point in the history
  • Loading branch information
@usame-algan
usame-algan committed Oct 31, 2024
1 parent 4c9bc09 commit 0634508
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 89 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@
"@emotion/react": "^11.10.5",
"@emotion/server": "^11.10.0",
"@emotion/styled": "^11.10.5",
"@fingerprintjs/fingerprintjs-pro-react": "^2.6.3",
"@mui/icons-material": "^5.15.15",
"@mui/material": "^5.11.5",
"@mui/x-date-pickers": "^7.1.1",
Expand Down
207 changes: 120 additions & 87 deletions src/components/Points/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,114 +1,147 @@
import { useCampaignInfo } from '@/hooks/useCampaigns'
import { Grid, Typography, Stack, Box, SvgIcon, Divider, useMediaQuery } from '@mui/material'
import { useMemo, useState } from 'react'
import { Grid, Typography, Stack, Box, Divider, Button } from '@mui/material'
import { ExternalLink } from '../ExternalLink'
import PaperContainer from '../PaperContainer'
import SafePassDisclaimer from '../SafePassDisclaimer'
import { ActivityPointsFeed } from './ActivityPointsFeed'
import { CampaignInfo } from './CampaignInfo'
import { CampaignLeaderboard } from './CampaignLeaderboard'
import CampaignTabs from './CampaignTabs'
import StarIcon from '@/public/images/leaderboard-title-star.svg'
import css from './styles.module.css'
import { TotalPoints } from './TotalPoints'
import { useTheme } from '@mui/material/styles'
import { useGlobalCampaignId } from '@/hooks/useGlobalCampaignId'
import { CampaignTitle } from './CampaignTitle'
import { CampaignPromo } from './CampaignPromo'
import { useOwnCampaignRank } from '@/hooks/useLeaderboard'
import PointsCounter from '@/components/PointsCounter'
import SafeToken from '@/public/images/token.svg'

const Points = () => {
const globalCampaignId = useGlobalCampaignId()

const [selectedCampaignId, setSelectedCampaignId] = useState<string>(globalCampaignId)
const campaign = useCampaignInfo(selectedCampaignId)

const isGlobalCampaign = useMemo(
() => globalCampaignId === selectedCampaignId,
[globalCampaignId, selectedCampaignId],
)
const theme = useTheme()
const isSmallScreen = useMediaQuery(theme.breakpoints.down('lg'))
const { data: globalRank } = useOwnCampaignRank(globalCampaignId)

return (
<Grid container spacing={3} direction="row">
<Grid item xs={12} mt={4} mb={1} className={css.pageTitle} display="flex" flexDirection="row" alignItems="center">
<Typography variant="h2">{'Get rewards with Safe{Pass}'}</Typography>
<Box ml="auto">
<ExternalLink href="https://safe.global/pass">{'What is Safe{Pass}'}</ExternalLink>
</Box>
<>
<Grid container spacing={3} direction="row">
<Grid
item
xs={12}
mt={4}
mb={4}
className={css.pageTitle}
display="flex"
flexDirection="row"
alignItems="center"
>
<Typography variant="h1">{'Get your Safe{Pass} rewards'}</Typography>
<Box ml="auto">
<ExternalLink href="https://safe.global/pass">{'What is Safe{Pass}'}</ExternalLink>
</Box>
</Grid>
</Grid>

<Grid item xs={12} lg={8}>
<Stack spacing={3}>
{isSmallScreen && <TotalPoints />}
<Grid container spacing={3}>
<Grid item xs={12} lg={7}>
<PaperContainer>
<Stack direction="row" spacing={2} mb={2}>
{!isSmallScreen && <SvgIcon component={StarIcon} inheritViewBox sx={{ width: '27px', height: '27px' }} />}
<Stack spacing={1}>
<Typography variant="h5" fontWeight={700} fontSize="24px">
Points activity feed
</Typography>
<Stack gap={2} alignItems="flex-start" p={4}>
<Typography variant="h3" fontWeight={700} fontSize="32px">
Rewards Await! 🏆
</Typography>

{!isSmallScreen && (
<Typography variant="body2" color="text.secondary">
Earn points by engaging with Safe and our campaign partners. Depending on the campaign, you&apos;ll
be rewarded for various activities suggested by our partners. You can also earn points for regular
Safe activities.
<Typography color="text.secondary" mb={2}>
You&apos;ve made it to the finish line! The rewards program has officially ended, but the points
you&apos;ve earned are just the beginning. It’s time to get SAFE tokens your way.
</Typography>

<Button variant="contained">Start claiming</Button>
</Stack>
</PaperContainer>
</Grid>

<Grid item xs={12} lg={5}>
<Stack spacing={3} justifyContent="stretch" height="100%">
<PaperContainer
sx={{
height: 1,
justifyContent: 'center',
background: 'linear-gradient(180deg, #B0FFC9 0%, #D7F6FF 99.5%)',
color: 'static.main',
}}
>
<Stack gap={2} alignItems="center">
<Typography variant="overline">Reward tokens</Typography>
<SafeToken />
<Stack direction="row" gap={1}>
<PointsCounter value={2365} variant="h2" fontWeight={700} fontSize="44px" />
<Typography fontWeight={700} fontSize="44px" lineHeight="1">
SAFE
</Typography>
)}
</Stack>
<Typography>Available from 15.01.2026</Typography>
</Stack>
</PaperContainer>
</Stack>
</Grid>
</Grid>

<Grid container pt={3}>
<Grid item xs={12} lg={7}>
<PaperContainer sx={{ borderTopRightRadius: 0, borderBottomRightRadius: 0 }}>
<Stack p={4}>
<Typography variant="h3" fontWeight={700} fontSize="32px" mb={2}>
Your score calculation
</Typography>
<Typography>Your total rewarded tokens were calculated based on your total points.</Typography>
</Stack>
<Divider />
<Stack direction={{ lg: 'row', md: 'column' }} spacing={4}>
<CampaignTabs onChange={setSelectedCampaignId} selectedCampaignId={selectedCampaignId} />
<Box width="100%">
<Stack
direction="row"
alignItems="center"
justifyContent="space-between"
spacing={2}
mb={2}
minHeight="60px"
>
<Box width="100%">
{campaign && (
<CampaignTitle
variant="h5"
fontWeight={700}
fontSize="24px"
campaign={campaign}
showDates
suppressStatusDot
/>
)}
{isGlobalCampaign && (
<Typography variant="body2" color="text.secondary">
In this view you can see the points total from all currently active campaigns and regular Safe
activities.
</Typography>
)}
</Box>
</Stack>
<ActivityPointsFeed campaign={campaign} />
</Box>
</PaperContainer>
</Grid>
<Grid item xs={12} lg={5}>
<PaperContainer
sx={{ borderTopLeftRadius: 0, borderBottomLeftRadius: 0, height: '100%', justifyContent: 'center' }}
>
<Stack direction="row" alignItems="center" justifyContent="center" spacing={2} minHeight="60px">
{globalRank && (
<>
<Stack alignItems="center">
<PointsCounter value={globalRank.position} variant="h2" fontWeight={700} fontSize="44px" />
<Typography color="text.secondary" mt={1}>
Leaderboard score
</Typography>
</Stack>

<Divider orientation="vertical" sx={{ height: '80px', margin: '0 24px 0 40px' }} />

<Stack alignItems="center">
<PointsCounter value={globalRank.totalPoints} variant="h2" fontWeight={700} fontSize="44px" />
<Typography color="text.secondary" mt={1}>
Total points
</Typography>
</Stack>
</>
)}
</Stack>
</PaperContainer>
</Grid>
</Grid>

<Grid container spacing={3} pt={3}>
<Grid item xs={12} lg={6}>
<PaperContainer>
<Stack p={4}>
<Typography variant="h4" fontWeight={700} fontSize="24px" mb={2}>
How to claim?
</Typography>
<Typography>Description text.</Typography>
</Stack>
</PaperContainer>
</Grid>
<Grid item xs={12} lg={6}>
<PaperContainer>
<CampaignLeaderboard campaign={campaign} />
<Stack p={4}>
<Typography variant="h4" fontWeight={700} fontSize="24px" mb={2}>
When can I get tokens?
</Typography>
<Typography>Description text.</Typography>
</Stack>
</PaperContainer>
</Stack>
</Grid>
<Grid item xs={12} lg={4}>
<Stack spacing={3} justifyContent="stretch" height="100%">
{!isSmallScreen && <TotalPoints />}
<CampaignPromo />
<CampaignInfo campaign={campaign} />
</Stack>
</Grid>
</Grid>
<Grid item xs={12}>
<Grid item xs={12} mt={2}>
<SafePassDisclaimer />
</Grid>
</Grid>
</>
)
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/TokenLocking/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const TokenLocking = () => {
return (
<Grid container spacing={3} direction="row-reverse">
<Grid item xs={12} mt={4} mb={1} className={css.pageTitle} display="flex" flexDirection="row" alignItems="center">
<Typography variant="h2">{'Get rewards with Safe{Pass}'}</Typography>
<Typography variant="h2">{'Get your Safe{Pass} rewards'}</Typography>
<Box ml="auto">
<ExternalLink href="https://safe.global/pass">{'What is Safe{Pass}'}</ExternalLink>
</Box>
Expand Down
30 changes: 29 additions & 1 deletion yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1895,6 +1895,29 @@
"@ethersproject/properties" "^5.7.0"
"@ethersproject/strings" "^5.7.0"

"@fingerprintjs/fingerprintjs-pro-react@^2.6.3":
version "2.6.3"
resolved "https://registry.yarnpkg.com/@fingerprintjs/fingerprintjs-pro-react/-/fingerprintjs-pro-react-2.6.3.tgz#f04e043514d141e41b9397648e7e567f84395415"
integrity sha512-/axCq/cfjZkIM+WFZM/05FQvqtNfdKbIFKU6b2yrwPKlgT8BqWkAq8XvFX6JCPlq8/udVLJjFEDCK+1JQh1L6g==
dependencies:
"@fingerprintjs/fingerprintjs-pro-spa" "^1.3.1"
fast-deep-equal "3.1.3"

"@fingerprintjs/fingerprintjs-pro-spa@^1.3.1":
version "1.3.2"
resolved "https://registry.yarnpkg.com/@fingerprintjs/fingerprintjs-pro-spa/-/fingerprintjs-pro-spa-1.3.2.tgz#80654b554ec5e260a0627162f88918a1fd5bab21"
integrity sha512-s1YGsx1XQLmjU+av4UrUHNxyzwPHyZRB0GXJQFOJK8ZHCYc2SNukxnJmZA++bNBa8twU3wW+QgSJhA4Prjnd0g==
dependencies:
"@fingerprintjs/fingerprintjs-pro" "^3.11.0"
tslib "^2.7.0"

"@fingerprintjs/fingerprintjs-pro@^3.11.0":
version "3.11.2"
resolved "https://registry.yarnpkg.com/@fingerprintjs/fingerprintjs-pro/-/fingerprintjs-pro-3.11.2.tgz#22e0df80904390c1f66dc9d2f12bd190ba02c458"
integrity sha512-KRRCDAwSEbSUgbZYD0k70uWdo/nv62YaQEz012/Uaa1XzgvHbrcvIaDVSVZr2Wmv34d1jg+szpp4m3Mcstmq3g==
dependencies:
tslib "^2.4.1"

"@floating-ui/core@^1.0.0":
version "1.6.0"
resolved "https://registry.yarnpkg.com/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
Expand Down Expand Up @@ -6277,7 +6300,7 @@ ext@^1.1.2:
dependencies:
type "^2.7.2"

fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
fast-deep-equal@3.1.3, fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
version "3.1.3"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
Expand Down Expand Up @@ -10022,6 +10045,11 @@ tslib@^2.3.1:
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.3.tgz#24944ba2d990940e6e982c4bea147aba80209913"
integrity sha512-mSxlJJwl3BMEQCUNnxXBU9jP4JBktcEGhURcPR6VQVlnP0FdDEsIaz0C35dXNGLyRfrATNofF0F5p2KPxQgB+w==

tslib@^2.4.1, tslib@^2.7.0:
version "2.8.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.0.tgz#d124c86c3c05a40a91e6fdea4021bd31d377971b"
integrity sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==

[email protected]:
version "0.0.1"
resolved "https://registry.yarnpkg.com/tsort/-/tsort-0.0.1.tgz#e2280f5e817f8bf4275657fd0f9aebd44f5a2786"
Expand Down

0 comments on commit 0634508

Please sign in to comment.