Merge pull request #496 from invariant-labs/dev

Update staging env

src/components/Modals/FAQModal/FAQModal.tsx

@@ -0,0 +1,189 @@
+import React, { useState } from 'react'
+import { Grid, Popover, Typography, Box, Fade } from '@mui/material'
+import useStyles from './styles'
+import icons from '@static/icons'
+
+export interface IFAQModal {
+  open: boolean
+  handleClose: () => void
+}
+
+export const FAQModal: React.FC<IFAQModal> = ({ open, handleClose }) => {
+  const { classes } = useStyles()
+  const [currentIndex, setCurrentIndex] = useState(0)
+  const [fadeIn, setFadeIn] = useState(true)
+
+  const faqArray = [
+    {
+      title: 'Concentration Slider',
+      content: (
+        <Grid display='flex' flexDirection='column' justifyContent='space-between' minHeight={300}>
+          <Typography className={classes.text}>
+            The rule is simple - the more concentrated your position is, the more points you earn.
+            <br />
+            To simplify the process of concentrating your position, we’ve created a feature called
+            the "Concentration Slider." Its functionality is straightforward: the higher the
+            multiplier, the more concentrated your liquidity becomes within a narrower range.
+          </Typography>
+          <Grid container justifyContent='center'>
+            <img src={icons.slider} alt='slider' />
+          </Grid>
+          <Typography className={classes.text}>
+            To help you use it effectively, let us explain how it works👉
+          </Typography>
+        </Grid>
+      )
+    },
+    {
+      title: 'What is Concentration?',
+      content: (
+        <Grid display='flex' flexDirection='column' justifyContent='space-between' minHeight={300}>
+          <Typography className={classes.text} mt={3}>
+            Concentration refers to focusing liquidity within a specific price range.
+          </Typography>
+          <Typography className={classes.text}>
+            Unlike full-range liquidity (classic AMMs), where liquidity is spread across an infinite
+            range (from 0 to ∞), concentrated liquidity narrows this range, making it more efficient
+            and effective.
+          </Typography>
+          <Typography className={classes.text} mb={3}>
+            The narrower the range, the higher the concentration and the more impactful your
+            liquidity becomes.
+          </Typography>
+        </Grid>
+      )
+    },
+    {
+      title: 'How Does Concentration Impact Points?',
+      content: (
+        <Grid display='flex' flexDirection='column' justifyContent='space-between' minHeight={300}>
+          <Typography className={classes.text}>
+            Concentration can significantly boost the points you earn. The scoring system rewards
+            efficient positions, and higher concentration means your liquidity works more
+            effectively within a tighter range.
+          </Typography>
+          <Typography className={classes.text}>Example:</Typography>
+          <ul>
+            <li className={classes.text}>
+              <Typography className={classes.text}>
+                A $100 position with 2x concentration earns 10 points per day.
+              </Typography>
+            </li>
+            <li className={classes.text}>
+              <Typography className={classes.text}>
+                The same $100 position with 2000x concentration earns 10,000 points per day.
+              </Typography>
+            </li>
+          </ul>
+          <Typography className={classes.text}>
+            That’s 1,000x more points in the same timeframe, simply because of higher concentration.
+          </Typography>
+          <Typography className={classes.text}>
+            Think of the multiplier in the Concentration Slider as a guide to how much more your
+            position can earn in points.
+          </Typography>
+        </Grid>
+      )
+    },
+    {
+      title: 'How to Use Concentration',
+      content: (
+        <Grid display='flex' flexDirection='column' minHeight={300}>
+          <ol
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              justifyContent: 'space-between',
+              height: 'max-content',
+              flex: 1
+            }}>
+            <li className={classes.text}>
+              <Typography className={classes.text}>
+                Start Small: Experiment by setting narrower ranges for your liquidity around the
+                current market price.
+              </Typography>
+            </li>
+            <li className={classes.text}>
+              <Typography className={classes.text}>
+                Monitor Price Movement: Keep an eye on price changes. If the price moves out of your
+                range, your position stops earning points and fees. To resume, you&#39;ll need to
+                rebalance (link do docs) within the new price range.
+              </Typography>
+            </li>
+            <li className={classes.text}>
+              <Typography className={classes.text}>
+                Practice Makes Perfect: The most skilled users open and close hundreds of positions
+                to refine their strategies.
+              </Typography>
+            </li>
+          </ol>
+
+          <Typography className={classes.text} mt={3}>
+            For detailed guides and tips, check out our docs(link) and join the Discord(link) for
+            support.
+          </Typography>
+        </Grid>
+      )
+    }
+  ]
+
+  const handleNext = () => {
+    setFadeIn(false)
+    setTimeout(() => {
+      setCurrentIndex(prevIndex => (prevIndex + 1) % faqArray.length)
+      setFadeIn(true)
+    }, 200)
+  }
+
+  const handlePrevious = () => {
+    setFadeIn(false)
+    setTimeout(() => {
+      setCurrentIndex(prevIndex => (prevIndex - 1 + faqArray.length) % faqArray.length)
+      setFadeIn(true)
+    }, 200)
+  }
+
+  return (
+    <div className={classes.modalContainer}>
+      <Popover
+        open={open}
+        anchorReference='none'
+        classes={{
+          root: classes.popoverRoot,
+          paper: classes.paper
+        }}
+        onClose={handleClose}
+        style={{
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center'
+        }}>
+        <Box className={classes.root}>
+          <Grid container justifyContent='space-between' alignItems='center'>
+            <div style={{ width: '16px', height: '16px' }} />
+            <Typography className={classes.subTitle}>How to make more Points?</Typography>
+            <Grid className={classes.topCloseButton} onClick={handleClose}>
+              {'\u2715'}
+            </Grid>
+          </Grid>
+
+          <Grid className={classes.titleContainer}>
+            <button className={classes.arrowBtn} onClick={handlePrevious}>
+              <img src={icons.arrowLeft} alt='arrow back' />
+            </button>
+            <Typography className={classes.title}>{faqArray[currentIndex].title}</Typography>
+            <button className={classes.arrowBtn} onClick={handleNext}>
+              <img src={icons.arrowRight} alt='arrow forward' />
+            </button>
+          </Grid>
+
+          <Fade in={fadeIn} timeout={200}>
+            <div>{faqArray[currentIndex].content}</div>
+          </Fade>
+        </Box>
+      </Popover>
+    </div>
+  )
+}
+
+export default FAQModal

src/components/Modals/FAQModal/styles.ts

@@ -0,0 +1,150 @@
+import { colors, theme, typography } from '@static/theme'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()(() => {
+  return {
+    modalContainer: {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      display: 'flex',
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      pointerEvents: 'none',
+      zIndex: 1300
+    },
+    popoverRoot: {
+      position: 'fixed',
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      overflow: 'auto',
+      top: 0
+    },
+    paper: {
+      position: 'relative',
+      margin: 'auto',
+      marginTop: 100,
+      maxWidth: '90%',
+      background: 'transparent',
+      boxShadow: 'none',
+      overflow: 'visible'
+    },
+    root: {
+      background: `
+        radial-gradient(49.85% 49.85% at 50% 100%, rgba(46, 224, 154, 0.25) 0%, rgba(46, 224, 154, 0) 75%),
+        radial-gradient(50.2% 50.2% at 50% 0%, rgba(239, 132, 245, 0.25) 0%, rgba(239, 132, 245, 0) 75%),
+        ${colors.invariant.component}
+      `,
+      display: 'flex',
+      justifyContent: 'center',
+      flexDirection: 'column',
+      width: 623,
+      maxWidth: '100%',
+      height: 'max-content',
+      borderRadius: 24,
+      padding: 24,
+      boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.5)',
+      gap: 24,
+      [theme.breakpoints.down('sm')]: {
+        width: 'calc(100% - 32px)',
+        padding: '16px 20px'
+      },
+
+      li: {
+        color: colors.invariant.textGrey
+      }
+    },
+    title: {
+      ...typography.heading2,
+      textAlign: 'center',
+      minWidth: 320,
+      [theme.breakpoints.down('md')]: {
+        minWidth: 'auto',
+        marginInline: 8
+      }
+    },
+    titleContainer: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: 'auto',
+      paddingInline: 24,
+      [theme.breakpoints.down('sm')]: {
+        paddingInline: 0
+      }
+    },
+    subTitle: {
+      ...typography.body2,
+      color: colors.invariant.textGrey,
+      textAlign: 'center'
+    },
+    buttonList: {
+      marginTop: 12
+    },
+    modalFooter: {
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      flexDirection: 'column',
+      marginTop: 24
+    },
+    buttonPrimary: {
+      height: 40,
+      width: 200,
+      pointerEvents: 'auto',
+
+      marginTop: '5px',
+      color: colors.invariant.componentBcg,
+      ...typography.body1,
+      textTransform: 'none',
+      borderRadius: 14,
+      background: colors.invariant.pinkLinearGradientOpacity,
+
+      '&:hover': {
+        background: colors.invariant.pinkLinearGradient,
+        boxShadow: '0px 0px 16px rgba(239, 132, 245, 0.35)',
+        '@media (hover: none)': {
+          background: colors.invariant.pinkLinearGradientOpacity,
+          boxShadow: 'none'
+        }
+      }
+    },
+
+    topCloseButton: {
+      pointerEvents: 'auto',
+      display: 'flex',
+      justifyContent: 'flex-end',
+      fontSize: 20,
+      paddingInline: 8,
+      textAlign: 'center',
+      verticalAlign: 'middle',
+      transition: 'transform 0.2s',
+
+      '&:hover': {
+        cursor: 'pointer',
+        transform: 'scale(1.1)'
+      }
+    },
+    arrowBtn: {
+      background: 'none',
+      outline: 'none',
+      border: 'none',
+      padding: 0,
+      '&:hover': {
+        cursor: 'pointer',
+        filter: 'brightness(1.5)'
+      }
+    },
+    text: {
+      ...typography.body3,
+      letterSpacing: '-0.6px',
+      color: colors.invariant.textGrey
+    }
+  }
+})
+
+export default useStyles

src/components/NewPosition/DepositSelector/style.ts

@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui'
 export const useStyles = makeStyles()(theme => {
   return {
     wrapper: {
-      borderRadius: 10,
+      borderRadius: 24,
       backgroundColor: colors.invariant.component,
       padding: '16px 24px 16px 24px',
       flex: '1 1 0%',