Merge remote-tracking branch 'origin/token-locking' into feat/analytics

src/components/Claim/index.tsx

@@ -16,6 +16,7 @@ import { useState, type ReactElement, ChangeEvent } from 'react'
 import PaperContainer from '../PaperContainer'
 
 import TitleStar from '@/public/images/leaderboard-title-star.svg'
+import StarIcon from '@/public/images/star.svg'
 import { maxDecimals, minMaxValue, mustBeFloat } from '@/utils/validation'
 import { useIsTokenPaused } from '@/hooks/useIsTokenPaused'
 import { useSafeTokenAllocation } from '@/hooks/useSafeTokenAllocation'
@@ -59,7 +60,7 @@ const ClaimOverview = (): ReactElement => {
   const isWrongChain = useIsWrongChain()
   const router = useRouter()
 
-  const [amount, setAmount] = useState('')
+  const [amount, setAmount] = useState('0')
   const [isMaxAmountSelected, setIsMaxAmountSelected] = useState(false)
   const [amountError, setAmountError] = useState<string>()
   const [creatingTxs, setCreatingTxs] = useState(false)
@@ -173,11 +174,11 @@ const ClaimOverview = (): ReactElement => {
                 gap: 1,
               }}
             >
-              <Stack direction="row" spacing={2} alignItems="center">
-                <SvgIcon fontSize="large" component={TitleStar} />
+              <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
+                    Claim your tokens as rewards!
                   </Typography>
                   <Typography variant="body2">You get more tokens if you are active in activity program.</Typography>
                 </Box>

src/components/ClaimCard/index.tsx

@@ -34,7 +34,7 @@ export const ClaimCard = ({
   return (
     <Paper sx={{ p: 3, backgroundColor: 'background.default', position: 'relative' }}>
       <Typography marginBottom={3} fontWeight={700}>
-        {isClaimable ? 'Claim now' : 'Claim at the end of the season'}
+        {isClaimable ? 'Claim now' : 'Claim in future (vesting)'}
 
         {!isClaimable && (
           <Tooltip

src/components/InfoAlert/index.tsx

@@ -5,7 +5,7 @@ import type { ReactElement } from 'react'
 
 export const InfoAlert = ({ children, ...props }: BoxProps): ReactElement => {
   return (
-    <Box display="flex" gap={1} color="text.secondary" {...props}>
+    <Box display="flex" gap={1} color="border.main" {...props}>
       <InfoOutlined
         sx={{
           height: '16px',

src/components/OverviewLinks/index.tsx

@@ -27,10 +27,8 @@ const SafeDaoCard = () => {
         <SvgIcon component={Hat} inheritViewBox color="info" />
       </div>
       <Box>
-        <Typography variant="h3" fontWeight={700}>
-          What is
-          <br />
-          Safe{`{DAO}`}?
+        <Typography variant="h3" fontWeight={700} mt={5}>
+          What is Safe DAO?
         </Typography>
         <Link href={AppRoutes.safedao} component={NextLink} ref={linkRef}>
           Learn more

src/components/SelectedDelegate/index.tsx

@@ -86,8 +86,8 @@ export const SelectedDelegate = ({
       </Card>
       {hint && (
         <InfoAlert mt={2}>
-          <Typography variant="body2">
-            You only delegate your voting power and not the ownership of your Safe Tokens.
+          <Typography variant="body2" color="text.secondary">
+            You only delegate your voting power and not the ownership over your tokens.
           </Typography>
         </InfoAlert>
       )}

src/components/TockenUnlocking/UnlockTokenWidget.tsx

@@ -1,5 +1,5 @@
 import SafeToken from '@/public/images/token.svg'
-import { getBoostFunction } from '@/utils/boost'
+import { floorNumber, getBoostFunction } from '@/utils/boost'
 import css from './styles.module.css'
 import { Stack, Grid, Typography, TextField, InputAdornment, Button, CircularProgress } from '@mui/material'
 import { formatUnits, parseUnits } from 'ethers/lib/utils'
@@ -17,6 +17,7 @@ import { SEASON2_START } from '../TokenLocking/BoostGraph/graphConstants'
 import Track from '../Track'
 import { LOCK_EVENTS } from '@/analytics/lockEvents'
 import { trackSafeAppEvent } from '@/utils/analytics'
+import MilesReceipt from '@/components/TokenLocking/MilesReceipt'
 
 export const UnlockTokenWidget = ({
   lockHistory,
@@ -25,6 +26,7 @@ export const UnlockTokenWidget = ({
   lockHistory: LockHistory[]
   currentlyLocked: BigNumberish
 }) => {
+  const [receiptOpen, setReceiptOpen] = useState<boolean>(false)
   const [unlockAmount, setUnlockAmount] = useState('0')
   const [unlockAmountError, setUnlockAmountError] = useState<string>()
 
@@ -71,6 +73,7 @@ export const UnlockTokenWidget = ({
     try {
       await sdk.txs.send({ txs: [unlockTx] })
       trackSafeAppEvent(LOCK_EVENTS.UNLOCK_SUCCESS.action)
+      setReceiptOpen(true)
     } catch (err) {
       console.error(err)
     }
@@ -141,6 +144,13 @@ export const UnlockTokenWidget = ({
           />
         </Grid>
       </Grid>
+      <MilesReceipt
+        open={receiptOpen}
+        onClose={() => setReceiptOpen(false)}
+        amount={unlockAmount}
+        newFinalBoost={floorNumber(newBoostFunction({ x: SEASON2_START }), 2)}
+        isUnlock
+      />
     </Stack>
   )
 }

src/components/TokenLocking/LockTokenWidget.tsx

@@ -12,7 +12,7 @@ import { useSafeAppsSDK } from '@gnosis.pm/safe-apps-react-sdk'
 import { useState, ChangeEvent, useMemo, useCallback } from 'react'
 import { BigNumberish } from 'ethers'
 import { useChainId } from '@/hooks/useChainId'
-import { getBoostFunction } from '@/utils/boost'
+import { floorNumber, getBoostFunction } from '@/utils/boost'
 import { useLockHistory } from '@/hooks/useLockHistory'
 import { useDebounce } from '@/hooks/useDebounce'
 import { SEASON2_START } from './BoostGraph/graphConstants'
@@ -22,8 +22,10 @@ import { BoostBreakdown } from './BoostBreakdown'
 import Track from '../Track'
 import { LOCK_EVENTS } from '@/analytics/lockEvents'
 import { trackSafeAppEvent } from '@/utils/analytics'
+import MilesReceipt from '@/components/TokenLocking/MilesReceipt'
 
 export const LockTokenWidget = ({ safeBalance }: { safeBalance: BigNumberish | undefined }) => {
+  const [receiptOpen, setReceiptOpen] = useState<boolean>(false)
   const { sdk } = useSafeAppsSDK()
   const chainId = useChainId()
   const startTime = CHAIN_START_TIMESTAMPS[chainId]
@@ -85,6 +87,7 @@ export const LockTokenWidget = ({ safeBalance }: { safeBalance: BigNumberish | u
     try {
       await sdk.txs.send({ txs: [approveTx, lockTx] })
       trackSafeAppEvent(LOCK_EVENTS.LOCK_SUCCESS.action)
+      setReceiptOpen(true)
     } catch (error) {
       console.error(error)
     }
@@ -166,6 +169,12 @@ export const LockTokenWidget = ({ safeBalance }: { safeBalance: BigNumberish | u
           </Grid>
         </Grid>
       </Stack>
+      <MilesReceipt
+        open={receiptOpen}
+        onClose={() => setReceiptOpen(false)}
+        amount={amount}
+        newFinalBoost={floorNumber(newBoostFunction({ x: SEASON2_START }), 2)}
+      />
     </>
   )
 }