Implement overview section

package.json

@@ -22,15 +22,15 @@
     "@emotion/styled": "^11.11.5",
     "@invariant-labs/locker-eclipse-sdk": "^0.0.20",
     "@invariant-labs/points-sdk": "^0.0.3",
-    "@invariant-labs/sdk-eclipse": "^0.0.63",
-    "@irys/web-upload": "^0.0.14",
-    "@irys/web-upload-solana": "^0.1.7",
+    "@invariant-labs/sdk-eclipse": "^0.0.85",
+    "@irys/web-upload": "0.0.14",
+    "@irys/web-upload-solana": "0.1.7",
     "@metaplex-foundation/js": "^0.20.1",
     "@metaplex-foundation/mpl-token-metadata": "^2.13.0",
     "@mui/icons-material": "^5.15.15",
     "@mui/material": "^5.15.15",
     "@mui/x-charts": "^7.22.3",
-    "@nightlylabs/wallet-selector-solana": "^0.3.14",
+    "@nightlylabs/wallet-selector-solana": "^0.3.13",
     "@nivo/bar": "^0.87.0",
     "@nivo/line": "^0.86.0",
     "@project-serum/sol-wallet-adapter": "^0.2.5",

src/components/EmptyPlaceholder/EmptyPlaceholder.tsx

@@ -10,24 +10,35 @@ export interface IEmptyPlaceholder {
   className?: string
   style?: React.CSSProperties
   withButton?: boolean
+  mainTitle?: string
+  roundedCorners?: boolean
+  blurWidth?: string
   buttonName?: string
+  height?: string
+  newVersion?: boolean
 }
 
 export const EmptyPlaceholder: React.FC<IEmptyPlaceholder> = ({
   desc,
   onAction,
   withButton = true,
-  buttonName
+  buttonName,
+  mainTitle,
+  height,
+  newVersion = false,
+  roundedCorners = false
 }) => {
-  const { classes } = useStyles()
+  const { classes } = useStyles({ newVersion, roundedCorners, height })
 
   return (
     <>
       <Grid className={classNames(classes.blur, 'blurLayer')} />
       <Grid className={classNames(classes.container, 'blurLayer')}>
         <Grid className={classNames(classes.root, 'blurInfo')}>
           <img className={classes.img} src={icons.empty} alt='Not connected' />
-          <Typography className={classes.desc}>It's empty here...</Typography>
+          <Typography className={classes.desc}>
+            {mainTitle ? mainTitle : `It's empty here...`}
+          </Typography>
           {desc?.length && <Typography className={classes.desc}>{desc}</Typography>}
           {withButton && (
             <Button className={classes.button} onClick={onAction} variant='contained'>

src/components/EmptyPlaceholder/style.ts

@@ -1,59 +1,69 @@
 import { colors, typography } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
 
-export const useStyles = makeStyles()(() => ({
-  container: {
-    width: '100%',
-    height: '370px',
-    zIndex: 14
-  },
-  root: {
-    zIndex: 10,
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingBottom: 25,
-    width: '100%',
-    height: '100%',
-    p: {
-      textAlign: 'center'
-    }
-  },
-  img: {
-    paddingBottom: 25
-  },
-  blur: {
-    width: '100%',
-    height: '370px',
-    backgroundColor: 'rgba(12, 11, 13, 0.8)',
-    position: 'absolute',
-    zIndex: 13,
-    borderRadius: 10
-  },
-  desc: {
-    ...typography.body2,
-    fontWeight: 500,
-    lineHeight: '20px',
-    color: colors.invariant.lightHover
-  },
-  button: {
-    height: 40,
-    width: 200,
-    marginTop: 20,
-    color: colors.invariant.componentBcg,
-    ...typography.body1,
-    textTransform: 'none',
-    borderRadius: 14,
-    background: colors.invariant.pinkLinearGradientOpacity,
+interface StyleProps {
+  newVersion?: boolean
+  height?: string
+  roundedCorners?: boolean
+}
+
+export const useStyles = makeStyles<StyleProps>()(
+  (_theme, { newVersion, roundedCorners, height }) => ({
+    container: {
+      width: '100%',
+      height: height ? height : '370px',
+      zIndex: 14
+    },
+    root: {
+      zIndex: 10,
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingBottom: 25,
+      width: '100%',
+      height: '100%',
+      p: {
+        textAlign: 'center'
+      }
+    },
+    img: {
+      paddingBottom: 25
+    },
+    blur: {
+      width: '100%',
+      height: height ? height : '370px',
+      position: 'absolute',
+      zIndex: 13,
+      borderRadius: newVersion || !roundedCorners ? 0 : 10,
+      background: newVersion
+        ? 'linear-gradient(360deg, rgba(32, 41, 70, 0.8) 0%, rgba(17, 25, 49, 0.8) 100%), linear-gradient(180deg, #010514 0%, rgba(1, 5, 20, 0) 100%)'
+        : 'rgba(12, 11, 13, 0.8)'
+    },
+    desc: {
+      ...typography.body2,
+      fontWeight: 500,
+      lineHeight: '20px',
+      color: colors.invariant.lightHover
+    },
+    button: {
+      height: 40,
+      width: 200,
+      marginTop: 20,
+      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'
+      '&:hover': {
+        background: colors.invariant.pinkLinearGradient,
+        boxShadow: '0px 0px 16px rgba(239, 132, 245, 0.35)',
+        '@media (hover: none)': {
+          background: colors.invariant.pinkLinearGradientOpacity,
+          boxShadow: 'none'
+        }
       }
     }
-  }
-}))
+  })
+)

src/components/FooterNavbar/style.ts

@@ -11,11 +11,10 @@ const useStyles = makeStyles()(() => {
       width: '100%',
       height: '65px',
       background: colors.invariant.component,
-      borderTop: `2px solid ${colors.invariant.light}`,
       marginTop: '12px',
       position: 'sticky',
       bottom: 0,
-      zIndex: 1200
+      zIndex: 15
     },
     navbox: {
       maxHeight: 65,
@@ -46,10 +45,9 @@ const useStyles = makeStyles()(() => {
     activeBox: {
       position: 'absolute',
       width: '100%',
-      padding: '0 1px 0 1px',
       height: 2,
-      top: -2,
-      left: -1,
+      top: 0,
+      left: 0,
       background: colors.invariant.pinkGreenLinearGradient
     }
   }

src/components/Leaderboard/Claim/styles.ts

@@ -88,7 +88,6 @@ export const useStyles = makeStyles()(() => ({
     transition: 'all 0.3s ease',
     '&:hover': {
       background: 'linear-gradient(180deg, #3FF2AB 0%, #25B487 100%)',
-      transform: 'translateY(-2px)',
       boxShadow: '0 4px 15px rgba(46, 224, 154, 0.35)'
     },
     '&:active': {

src/components/Leaderboard/InfoComponent/styles.ts

@@ -80,11 +80,9 @@ export const useStyles = makeStyles()(() => ({
     transition: 'all 0.3s ease',
     '&:hover': {
       background: 'linear-gradient(180deg, #3FF2AB 0%, #25B487 100%)',
-      transform: 'translateY(-2px)',
       boxShadow: '0 4px 15px rgba(46, 224, 154, 0.35)'
     },
     '&:active': {
-      transform: 'translateY(1px)',
       boxShadow: '0 2px 8px rgba(46, 224, 154, 0.35)'
     }
   },

src/components/Leaderboard/LeaderboardList/LeaderboardItem/LeaderboardLpItem.tsx

@@ -93,10 +93,10 @@ const LeaderboardLpItem: React.FC<LeaderboardLpItemProps> = props => {
     navigator.clipboard
       .writeText(address.toString())
       .then(() => {
-        copyAddressHandler('Address copied', 'success')
+        copyAddressHandler('Address copied!', 'success')
       })
       .catch(() => {
-        copyAddressHandler('Failed to copy address', 'error')
+        copyAddressHandler('Failed to copy address!', 'error')
       })
   }
 

src/components/Leaderboard/LeaderboardList/LeaderboardItem/LeaderboardSwapItem.tsx

@@ -92,10 +92,10 @@ const LeaderboardSwapItem: React.FC<LeaderboardSwapItemProps> = props => {
     navigator.clipboard
       .writeText(address.toString())
       .then(() => {
-        copyAddressHandler('Address copied', 'success')
+        copyAddressHandler('Address copied!', 'success')
       })
       .catch(() => {
-        copyAddressHandler('Failed to copy address', 'error')
+        copyAddressHandler('Failed to copy address!', 'error')
       })
   }
 

src/components/Leaderboard/LeaderboardList/LeaderboardItem/LeaderboardTotalItem.tsx

@@ -100,10 +100,10 @@ const LeaderboardTotalItem: React.FC<LeaderboardTotalItemProps> = props => {
     navigator.clipboard
       .writeText(address.toString())
       .then(() => {
-        copyAddressHandler('Address copied', 'success')
+        copyAddressHandler('Address copied!', 'success')
       })
       .catch(() => {
-        copyAddressHandler('Failed to copy address', 'error')
+        copyAddressHandler('Failed to copy address!', 'error')
       })
   }
 

src/components/Leaderboard/Switcher/LeaderboardSwitcher/style.ts

@@ -15,7 +15,7 @@ export const useStyles = makeStyles()((theme: Theme) => {
     },
     leaderboardTypeButton: {
       position: 'relative',
-      zIndex: 10,
+      zIndex: 1301,
       width: 140,
       height: 32,
       borderRadius: 10,

src/components/Leaderboard/Switcher/styles.ts

@@ -1,4 +1,3 @@
-// styles.ts
 import { colors, typography } from '@static/theme'
 import { makeStyles } from 'tss-react/mui'
 

src/components/Leaderboard/YourProgress/BlurOverlay.tsx

@@ -18,7 +18,7 @@ export const BlurOverlay: React.FC<IBlurOverlayProps> = ({ isConnected }) => {
             top: '50%',
             left: '50%',
             backdropFilter: 'blur(2px)',
-            zIndex: '2'
+            zIndex: '999'
           }}
         />
       ) : null}

src/components/Modals/Faucet/Faucet.tsx

@@ -49,7 +49,7 @@ export const Faucet: React.FC<IProps> = ({ anchorEl, open, handleClose, onFaucet
     } else {
       dispatch(
         snackbarsActions.add({
-          message: 'Captcha failed. Please try again',
+          message: 'Captcha failed. Please try again.',
           variant: 'error',
           persist: false
         })

src/components/Modals/LockLiquidityModal/LockLiquidityModal.tsx

@@ -79,6 +79,11 @@ export const LockLiquidityModal = ({
       onClose={onClose}
       className={classes.popover}
       anchorReference='none'
+      slotProps={{
+        root: {
+          onClick: e => e.stopPropagation()
+        }
+      }}
       anchorOrigin={{
         vertical: 'top',
         horizontal: 'left'

src/components/Modals/PositionViewActionPopover/PositionViewActionPopover.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import classNames from 'classnames'
+import useStyles from './style'
+import { Button, Grid, Popover, Typography } from '@mui/material'
+
+export interface IPositionViewActionPopover {
+  open: boolean
+  anchorEl: HTMLButtonElement | null
+  unclaimedFeesInUSD: number
+  closePosition: () => void
+  claimFee: () => void
+  handleClose: () => void
+  onLockPosition: () => void
+  isLocked: boolean
+}
+
+export const PositionViewActionPopover: React.FC<IPositionViewActionPopover> = ({
+  anchorEl,
+  open,
+  handleClose,
+  isLocked,
+  claimFee,
+  closePosition,
+  onLockPosition,
+  unclaimedFeesInUSD
+}) => {
+  const { classes } = useStyles()
+
+  return (
+    <Popover
+      open={open}
+      anchorEl={anchorEl}
+      classes={{ paper: classes.paper }}
+      onClose={handleClose}
+      slotProps={{
+        root: {
+          onClick: e => e.stopPropagation()
+        }
+      }}
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'center'
+      }}
+      transformOrigin={{
+        vertical: 'top',
+        horizontal: 'center'
+      }}>
+      <Grid className={classes.root}>
+        <Grid className={classes.list} container alignContent='space-around' direction='column'>
+          <Button
+            disabled={unclaimedFeesInUSD <= 0}
+            className={classNames(classes.listItem)}
+            onClick={() => {
+              claimFee()
+              handleClose()
+            }}>
+            <Typography className={classes.name}>Claim fee</Typography>
+          </Button>
+          <Button
+            className={classNames(classes.listItem)}
+            disabled={isLocked}
+            onClick={() => {
+              closePosition()
+              handleClose()
+            }}>
+            <Typography className={classes.name}>Close position</Typography>
+          </Button>
+        </Grid>
+        <Button
+          className={classNames(classes.listItem)}
+          disabled={isLocked}
+          onClick={() => {
+            onLockPosition()
+            handleClose()
+          }}>
+          <Typography className={classes.name}>Lock position</Typography>
+        </Button>
+      </Grid>
+    </Popover>
+  )
+}
+
+export default PositionViewActionPopover