feat: Add view for SAP redeem (#203)

.github/workflows/build/action.yml

@@ -21,3 +21,4 @@ runs:
         NEXT_PUBLIC_IS_PRODUCTION: ${{ inputs.is-production }}
         NEXT_PUBLIC_WC_BRIDGE: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_WC_BRIDGE }}
         NEXT_PUBLIC_WC_PROJECT_ID: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_WC_PROJECT_ID }}
+        NEXT_PUBLIC_FINGERPRINT_KEY: ${{ fromJSON(inputs.secrets).NEXT_PUBLIC_FINGERPRINT_KEY }}

package.json

@@ -2,7 +2,7 @@
   "name": "safe-dao-governance-app",
   "homepage": "https://github.com/safe-global/safe-dao-governance-app",
   "license": "GPL-3.0",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "scripts": {
     "build": "next build && next export",
     "lint": "tsc && next lint",
@@ -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",

src/components/Claim/index.tsx

@@ -2,10 +2,8 @@ import {
   Grid,
   Typography,
   Button,
-  Paper,
   Box,
   Stack,
-  SvgIcon,
   Divider,
   TextField,
   CircularProgress,
@@ -15,7 +13,6 @@ import { useState, type ReactElement, ChangeEvent } from 'react'
 
 import PaperContainer from '../PaperContainer'
 
-import StarIcon from '@/public/images/star.svg'
 import { maxDecimals, minMaxValue, mustBeFloat } from '@/utils/validation'
 import { useIsTokenPaused } from '@/hooks/useIsTokenPaused'
 import { useSafeTokenAllocation } from '@/hooks/useSafeTokenAllocation'
@@ -175,29 +172,6 @@ const ClaimOverview = (): ReactElement => {
               </Typography>
             </InfoAlert>
 
-            <Paper
-              sx={{
-                p: 3,
-                backgroundColor: ({ palette }) => palette.background.default,
-                color: ({ palette }) => palette.text.primary,
-                position: 'relative',
-                height: '100%',
-                display: 'flex',
-                flexDirection: 'column',
-                gap: 1,
-              }}
-            >
-              <Stack direction="row" spacing={2} alignItems="center" fontSize={38}>
-                <SvgIcon component={StarIcon} inheritViewBox fontSize="inherit" />
-                <Box>
-                  <Typography variant="subtitle1" fontWeight={700}>
-                    Claim your tokens as rewards!
-                  </Typography>
-                  <Typography variant="body2">You get more tokens if you are active in activity program.</Typography>
-                </Box>
-              </Stack>
-            </Paper>
-
             <Divider />
 
             <Box>

src/components/Points/ClaimButton.tsx

@@ -0,0 +1,25 @@
+import { Box, Button } from '@mui/material'
+import { useCoolMode } from '@/hooks/useCoolMode'
+
+const ClaimButton = ({ startClaiming, text }: { startClaiming: () => void; text: string }) => {
+  const particlesRef = useCoolMode('./images/token.svg')
+
+  return (
+    <Box ref={particlesRef}>
+      <Button
+        variant="contained"
+        color="primary"
+        sx={{
+          backgroundColor: 'static.main',
+          color: 'text.primary',
+          '&:hover': { backgroundColor: 'static.main' },
+        }}
+        onClick={startClaiming}
+      >
+        {text}
+      </Button>
+    </Box>
+  )
+}
+
+export default ClaimButton