referral modal

src/components/Modals/RefferalModal/ReferralModal.tsx

@@ -0,0 +1,124 @@
+import useStyles from './style'
+import { Box, Button, Divider, Grid, Hidden, Popover, Typography } from '@mui/material'
+import AnimatedButton, { ProgressState } from '@components/AnimatedButton/AnimatedButton'
+import classNames from 'classnames'
+import { useEffect, useState } from 'react'
+
+export interface IRefferalModal {
+  open: boolean
+  onClose: () => void
+  onConfirm: () => void
+  success: boolean
+  inProgress: boolean
+  referrerAddress: string
+  connected: boolean
+  handleConnectWallet: () => void
+}
+export const ReferralModal = ({
+  open,
+  onClose,
+  onConfirm,
+  success,
+  inProgress,
+  referrerAddress,
+  connected,
+  handleConnectWallet
+}: IRefferalModal) => {
+  const { classes } = useStyles()
+  const [progress, setProgress] = useState<ProgressState>('none')
+
+  useEffect(() => {
+    let timeoutId1: NodeJS.Timeout
+    let timeoutId2: NodeJS.Timeout
+
+    if (!inProgress && progress === 'progress') {
+      setProgress(success ? 'approvedWithSuccess' : 'approvedWithFail')
+
+      timeoutId1 = setTimeout(() => {
+        setProgress(success ? 'success' : 'failed')
+      }, 1000)
+
+      timeoutId2 = setTimeout(() => {
+        setProgress('none')
+      }, 3000)
+    }
+
+    return () => {
+      clearTimeout(timeoutId1)
+      clearTimeout(timeoutId2)
+    }
+  }, [success, inProgress])
+
+  return (
+    <Popover
+      classes={{ paper: classes.paper }}
+      open={open}
+      onClose={onClose}
+      className={classes.popover}
+      anchorReference='none'
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'left'
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center'
+      }}>
+      <Grid container className={classes.backgroundContainer}>
+        <Grid container className={classes.container}>
+          <Grid item className={classes.referralModalHeader}>
+            <Typography component='h1'>Confirm your invitation</Typography>
+            <Button className={classes.referralModalClose} onClick={onClose} aria-label='Close' />
+          </Grid>
+          <Grid item className={classes.infoContainer}>
+            <Grid item className={classes.referrerContainer}>
+              <Typography className={classes.greySmallText}>
+                You have been invited to join the Invariant Points program by:
+              </Typography>
+              <Typography className={classes.whiteBigText}>{referrerAddress}</Typography>
+            </Grid>
+            <Typography className={classes.greySmallText}>
+              Please confirm the use of this referral code. You can only use one code per wallet.
+            </Typography>
+            <Grid className={classes.splittedContainer}>
+              <Box className={classes.splittedContainerItem}>
+                <Typography className={classes.greySmallText}>You'll get:</Typography>
+                <Typography className={classes.whiteSmallText}>• 10% discount on fees</Typography>
+                <Typography className={classes.whiteSmallText}>• Benefit</Typography>
+              </Box>
+              <Hidden mdDown>
+                <Divider orientation='vertical' flexItem className={classes.divider} />
+              </Hidden>
+              <Box className={classes.splittedContainerItem}>
+                <Typography className={classes.greySmallText}>Your friend'll get:</Typography>
+                <Typography className={classes.whiteSmallText}>
+                  • 10% of your total points
+                </Typography>
+                <Typography className={classes.whiteSmallText}>• Benefit</Typography>
+              </Box>
+            </Grid>
+            {connected ? (
+              <AnimatedButton
+                content={'Confirm'}
+                className={classNames(
+                  classes.confirmButton,
+                  progress === 'none' ? classes.buttonText : null
+                )}
+                onClick={() => {
+                  onConfirm()
+                  setProgress('progress')
+                }}
+                progress={progress}
+              />
+            ) : (
+              <Button className={classes.confirmButton} onClick={handleConnectWallet}>
+                Connect wallet
+              </Button>
+            )}
+          </Grid>
+        </Grid>
+      </Grid>
+    </Popover>
+  )
+}
+export default ReferralModal

src/components/Modals/RefferalModal/style.ts

@@ -0,0 +1,159 @@
+import { Theme } from '@mui/material'
+import { colors, typography } from '@static/theme'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()((theme: Theme) => {
+  return {
+    popover: {
+      marginTop: 'max(calc(50vh - 247px), 0px)',
+      marginLeft: 'calc(50vw - 279px)',
+      [theme.breakpoints.down(671)]: {
+        display: 'flex',
+        marginLeft: 'auto',
+        justifyContent: 'center',
+        marginTop: 'auto'
+      }
+    },
+    backgroundContainer: {
+      background: colors.invariant.component,
+      borderRadius: 24,
+      width: 558,
+      [theme.breakpoints.down(558)]: {
+        maxWidth: '100vw'
+      }
+    },
+    container: {
+      width: '100%',
+      overflow: 'hidden',
+      padding: 24,
+      background: colors.invariant.mixedLinearGradient,
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      gap: 24
+    },
+    infoContainer: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gap: 24
+    },
+    referrerContainer: {
+      width: '100%',
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'flex-start',
+      alignItems: 'center',
+      gap: 8
+    },
+    splittedContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      width: '100%',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      gap: 24,
+      [theme.breakpoints.down('md')]: {
+        flexDirection: 'column'
+      },
+      [theme.breakpoints.down(558)]: {
+        maxWidth: 'calc(100vw-48px)'
+      }
+    },
+    splittedContainerItem: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: 8,
+      justifyContent: 'center',
+      alignItems: 'center',
+      width: '45%'
+    },
+    divider: {
+      border: '2px solid',
+      borderColor: colors.invariant.light
+    },
+    referralModalHeader: {
+      width: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      position: 'relative',
+      '& h1': {
+        ...typography.heading2,
+        flex: 1,
+        textAlign: 'center',
+        [theme.breakpoints.down('sm')]: {
+          marginTop: 30
+        }
+      }
+    },
+    referralModalClose: {
+      position: 'absolute',
+      right: 0,
+      minWidth: 0,
+      height: 20,
+      '&:after': {
+        content: '"\u2715"',
+        fontSize: 22,
+        position: 'absolute',
+        color: 'white',
+        top: '50%',
+        right: '0%',
+        transform: 'translateY(-50%)'
+      },
+      '&:hover': {
+        backgroundColor: '#1B191F'
+      }
+    },
+    paper: {
+      background: 'transparent',
+      boxShadow: 'none',
+      maxWidth: 671,
+      maxHeight: '100vh',
+      '&::-webkit-scrollbar': {
+        width: 6,
+        background: colors.invariant.component
+      },
+      '&::-webkit-scrollbar-thumb': {
+        background: colors.invariant.light,
+        borderRadius: 6
+      }
+    },
+    confirmButton: {
+      color: colors.invariant.black,
+      ...typography.body1,
+      textTransform: 'none',
+      background: colors.invariant.pinkLinearGradientOpacity,
+      borderRadius: 16,
+      height: 44,
+      width: 185,
+      '&:hover': {
+        background: colors.invariant.pinkLinearGradient,
+        boxShadow: `0 0 16px ${colors.invariant.pink}`,
+        '@media (hover: none)': {
+          background: colors.invariant.pinkLinearGradientOpacity,
+          boxShadow: 'none'
+        }
+      }
+    },
+    buttonText: {
+      WebkitPaddingBefore: '2px',
+      [theme.breakpoints.down('sm')]: {
+        WebkitPaddingBefore: 0
+      }
+    },
+    greySmallText: {
+      ...typography.body2,
+      color: colors.invariant.textGrey
+    },
+    whiteSmallText: {
+      ...typography.body2,
+      color: colors.invariant.text
+    },
+    whiteBigText: { ...typography.heading4, color: colors.invariant.text }
+  }
+})
+
+export default useStyles

src/pages/LeaderboardPage/LeaderboardPage.tsx

@@ -4,6 +4,7 @@ import { Grid } from '@mui/material'
 import { LeaderboardWrapper } from './components/LeaderboardWrapper'
 import { InfoComponent } from './components/InfoComponent/InfoComponent'
 import { Rewards } from './components/Rewards/Rewards'
+import Referrals from './components/Referrals/Referrals'
 
 export const LeaderBoardPage: React.FC = () => {
   const { classes } = useStyles()
@@ -18,6 +19,7 @@ export const LeaderBoardPage: React.FC = () => {
       </Grid>
       {alignment === 'leaderboard' ? <InfoComponent /> : null}
       {alignment === 'claim' ? <Rewards /> : null}
+      {alignment === 'referrals' ? <Referrals /> : null}
     </>
   )
 }

src/pages/LeaderboardPage/components/LeaderboardWrapper.tsx

@@ -223,6 +223,8 @@ export const LeaderboardWrapper: React.FC<LeaderboardWrapperProps> = ({
                   return 'Frequent questions'
                 case 'claim':
                   return 'Claim'
+                case 'referrals':
+                  return 'Referrals'
                 default:
                   return 0
               }