From 06345080cf3303fa93e0a1b95accaa5e8499d9b6 Mon Sep 17 00:00:00 2001
From: Usame Algan <usame@safe.global>
Date: Thu, 31 Oct 2024 12:56:32 +0100
Subject: [PATCH] feat: Update activity points page design

---
 package.json                          |   1 +
 src/components/Points/index.tsx       | 207 +++++++++++++++-----------
 src/components/TokenLocking/index.tsx |   2 +-
 yarn.lock                             |  30 +++-
 4 files changed, 151 insertions(+), 89 deletions(-)

diff --git a/package.json b/package.json
index aaa710d..f63719e 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/components/Points/index.tsx b/src/components/Points/index.tsx
index 31f63ea..c0c2809 100644
--- a/src/components/Points/index.tsx
+++ b/src/components/Points/index.tsx
@@ -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>
+    </>
   )
 }
 
diff --git a/src/components/TokenLocking/index.tsx b/src/components/TokenLocking/index.tsx
index b8984fa..42148fc 100644
--- a/src/components/TokenLocking/index.tsx
+++ b/src/components/TokenLocking/index.tsx
@@ -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>
diff --git a/yarn.lock b/yarn.lock
index e8ab309..3a30b46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -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"
@@ -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==
@@ -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==
+
 tsort@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/tsort/-/tsort-0.0.1.tgz#e2280f5e817f8bf4275657fd0f9aebd44f5a2786"