Merge pull request #334 from invariant-labs/staging

Update prod
invariant-labs · Dec 30, 2024 · 55b683d · 55b683d
2 parents 2e21596 + d3e9b26
commit 55b683d
Show file tree

Hide file tree

Showing 26 changed files with 4,721 additions and 2,596 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/PopularPools/Card/Card.tsx b/src/components/PopularPools/Card/Card.tsx
@@ -50,11 +50,14 @@ const Card: React.FC<ICard> = ({
   const airdropIconRef = useRef<any>(null)
 
   const [isPromotedPoolPopoverOpen, setIsPromotedPoolPopoverOpen] = useState(false)
-  const { promotedPools, pointsPerSecond } = useSelector(leaderboardSelectors.config)
+  const { promotedPools } = useSelector(leaderboardSelectors.config)
   const apr = apyToApr(apy ?? 0)
 
-  const isPromoted = useMemo(() => {
-    return promotedPools?.includes(poolAddress?.toString() ?? '')
+  const { isPromoted, pointsPerSecond } = useMemo(() => {
+    if (!poolAddress) return { isPromoted: false, pointsPerSecond: '00' }
+    const promotedPool = promotedPools.find(pool => pool.address === poolAddress.toString())
+    if (!promotedPool) return { isPromoted: false, pointsPerSecond: '00' }
+    return { isPromoted: true, pointsPerSecond: promotedPool.pointsPerSecond }
   }, [promotedPools, poolAddress])
 
   const handleOpenPosition = () => {

diff --git a/src/containers/WrappedPoolList/WrappedPoolList.tsx b/src/containers/WrappedPoolList/WrappedPoolList.tsx
@@ -12,7 +12,7 @@ import { network } from '@store/selectors/solanaConnection'
 import { actions } from '@store/reducers/stats'
 import { actions as leaderboardActions } from '@store/reducers/leaderboard'
 import LiquidityPoolList from '@components/LiquidityPoolList/LiquidityPoolList'
-import { getPointsPerSecond, getPromotedPools } from '@store/selectors/leaderboard'
+import { getPromotedPools } from '@store/selectors/leaderboard'
 
 export const WrappedPoolList: React.FC = () => {
   const { classes } = useStyles()
@@ -22,7 +22,6 @@ export const WrappedPoolList: React.FC = () => {
   const currentNetwork = useSelector(network)
   const [searchPoolsValue, setSearchPoolsValue] = useState<string>('')
   const isLoadingStats = useSelector(isLoading)
-  const pointsPerSecond = useSelector(getPointsPerSecond)
   const promotedPools = useSelector(getPromotedPools)
   const filteredPoolsList = useMemo(() => {
     return poolsList.filter(poolData => {
@@ -117,8 +116,10 @@ export const WrappedPoolList: React.FC = () => {
           isUnknownFrom: poolData.tokenXDetails?.isUnknown ?? false,
           isUnknownTo: poolData.tokenYDetails?.isUnknown ?? false,
           poolAddress: poolData.poolAddress.toString(),
-          pointsPerSecond: pointsPerSecond,
-          isPromoted: promotedPools.some(pool => pool === poolData.poolAddress.toString())
+          pointsPerSecond:
+            promotedPools.find(pool => pool.address === poolData.poolAddress.toString())
+              ?.pointsPerSecond || '0',
+          isPromoted: promotedPools.some(pool => pool.address === poolData.poolAddress.toString())
         }))}
         network={currentNetwork}
         copyAddressHandler={copyAddressHandler}

diff --git a/src/containers/WrappedStats/WrappedStats.tsx b/src/containers/WrappedStats/WrappedStats.tsx
@@ -26,7 +26,7 @@ import SearchIcon from '@static/svg/lupaDark.svg'
 import { actions as leaderboardActions } from '@store/reducers/leaderboard'
 import { actions as snackbarActions } from '@store/reducers/snackbars'
 import { VariantType } from 'notistack'
-import { getPointsPerSecond, getPromotedPools } from '@store/selectors/leaderboard'
+import { getPromotedPools } from '@store/selectors/leaderboard'
 
 export const WrappedStats: React.FC = () => {
   const { classes } = useStyles()
@@ -42,7 +42,6 @@ export const WrappedStats: React.FC = () => {
   const liquidityPlotData = useSelector(liquidityPlot)
   const isLoadingStats = useSelector(isLoading)
   const currentNetwork = useSelector(network)
-  const pointsPerSecond = useSelector(getPointsPerSecond)
   const promotedPools = useSelector(getPromotedPools)
   const [searchTokensValue, setSearchTokensValue] = useState<string>('')
   const [searchPoolsValue, setSearchPoolsValue] = useState<string>('')
@@ -215,8 +214,12 @@ export const WrappedStats: React.FC = () => {
               isUnknownFrom: poolData.tokenXDetails?.isUnknown ?? false,
               isUnknownTo: poolData.tokenYDetails?.isUnknown ?? false,
               poolAddress: poolData.poolAddress.toString(),
-              pointsPerSecond: pointsPerSecond,
-              isPromoted: promotedPools.some(pool => pool === poolData.poolAddress.toString())
+              pointsPerSecond:
+                promotedPools.find(pool => pool.address === poolData.poolAddress.toString())
+                  ?.pointsPerSecond || '0',
+              isPromoted: promotedPools.some(
+                pool => pool.address === poolData.poolAddress.toString()
+              )
             }))}
             network={currentNetwork}
             copyAddressHandler={copyAddressHandler}

diff --git a/src/pages/BondsPage/styles.ts b/src/pages/BondsPage/styles.ts
@@ -8,7 +8,7 @@ const useStyles = makeStyles()(theme => {
       backgroundColor: 'transparent',
       marginTop: 45,
       paddingInline: 94,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('lg')]: {
         paddingInline: 80

diff --git a/src/pages/FarmsPage/style.ts b/src/pages/FarmsPage/style.ts
@@ -8,7 +8,7 @@ const useStyles = makeStyles()(theme => {
       backgroundColor: 'transparent',
       marginTop: 45,
       paddingInline: 94,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('lg')]: {
         paddingInline: 80

diff --git a/src/pages/LeaderboardPage/components/LeaderboardBanner/NormalBanner.tsx b/src/pages/LeaderboardPage/components/LeaderboardBanner/NormalBanner.tsx
@@ -50,7 +50,7 @@ export const NormalBanner = ({ onClose, isHiding }: INormalBannerProps) => {
           }}
         />
         <span>
-          Invariant Points are available now! Check out your progress and rewards
+          Invariant Points are live! TETH/ETH is now the next pool distributing points! Check it out
           <span
             style={{
               color: colors.invariant.pink,

diff --git a/src/pages/LeaderboardPage/components/LeaderboardWrapper.tsx b/src/pages/LeaderboardPage/components/LeaderboardWrapper.tsx
@@ -41,8 +41,18 @@ export const LeaderboardWrapper: React.FC<LeaderboardWrapperProps> = ({
   const promotedPools = useSelector(getPromotedPools)
   const poolsList = useSelector(poolsStatsWithTokensDetails)
   const promotedPoolsData = promotedPools
-    .map(pool => poolsList.find(poolWithData => poolWithData.poolAddress.toString() === pool))
+    .map(promotedPool =>
+      poolsList.find(poolWithData => poolWithData.poolAddress.toString() === promotedPool.address)
+    )
     .filter(poolData => !!poolData)
+    .map(poolWithData => {
+      return {
+        ...poolWithData,
+        pointsPerSecond: promotedPools.find(
+          promotedPool => poolWithData.poolAddress.toString() === promotedPool.address
+        )!.pointsPerSecond
+      }
+    })
   useEffect(() => {
     dispatch(actions.getLeaderboardData({ page: 1, itemsPerPage }))
     dispatch(actions.getLeaderboardConfig())

diff --git a/src/pages/LeaderboardPage/components/PoolList/PoolList.tsx b/src/pages/LeaderboardPage/components/PoolList/PoolList.tsx
@@ -24,6 +24,7 @@ export interface PoolListInterface {
       accumulatedFarmsSingleTick: number
     }
     poolAddress: string
+    pointsPerSecond: string
   }>
   network: NetworkType
   copyAddressHandler: (message: string, variant: VariantType) => void
@@ -94,6 +95,7 @@ const PoolList: React.FC<PoolListInterface> = ({
                   addressTo={element.addressTo}
                   network={network}
                   poolAddress={element.poolAddress}
+                  pointsPerSecond={element.pointsPerSecond}
                   copyAddressHandler={copyAddressHandler}
                   showAPY={showAPY}
                 />
@@ -124,6 +126,7 @@ const PoolList: React.FC<PoolListInterface> = ({
                   addressTo={element.addressFrom}
                   network={network}
                   poolAddress={element.poolAddress}
+                  pointsPerSecond={element.pointsPerSecond}
                   copyAddressHandler={copyAddressHandler}
                   showAPY={showAPY}
                 />

diff --git a/src/pages/LeaderboardPage/components/PoolListItem/PoolListItem.tsx b/src/pages/LeaderboardPage/components/PoolListItem/PoolListItem.tsx
@@ -6,13 +6,14 @@ import { useNavigate } from 'react-router-dom'
 import icons from '@static/icons'
 import { NetworkType } from '@store/consts/static'
 import { TooltipHover } from '@components/TooltipHover/TooltipHover'
-import { addressToTicker, initialXtoY, parseFeeToPathFee } from '@utils/utils'
+import { addressToTicker, formatNumberWithCommas, parseFeeToPathFee, printBN } from '@utils/utils'
 import { DECIMAL } from '@invariant-labs/sdk-eclipse/lib/utils'
 import { apyToApr, shortenAddress } from '@utils/uiUtils'
 import { VariantType } from 'notistack'
 import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined'
 
 import classNames from 'classnames'
+import { BN } from '@coral-xyz/anchor'
 
 export interface IProps {
   fee?: number
@@ -27,6 +28,7 @@ export interface IProps {
   addressTo?: string
   network: NetworkType
   apy?: number
+  pointsPerSecond?: string
   apyData?: {
     fees: number
     accumulatedFarmsAvg: number
@@ -51,6 +53,7 @@ const PoolListItem: React.FC<IProps> = ({
   network,
   poolAddress,
   copyAddressHandler,
+  pointsPerSecond,
   apy = 0,
   showAPY
 }) => {
@@ -60,17 +63,8 @@ const PoolListItem: React.FC<IProps> = ({
   const isMd = useMediaQuery(theme.breakpoints.down('md'))
 
   const handleOpenPosition = () => {
-    const revertRatio = initialXtoY(addressFrom ?? '', addressTo ?? '')
-
-    const tokenA = revertRatio
-      ? addressToTicker(network, addressTo ?? '')
-      : addressToTicker(network, addressFrom ?? '')
-    const tokenB = revertRatio
-      ? addressToTicker(network, addressFrom ?? '')
-      : addressToTicker(network, addressTo ?? '')
-
     navigate(
-      `/newPosition/${tokenA}/${tokenB}/${parseFeeToPathFee(Math.round(fee * 10 ** (DECIMAL - 2)))}`,
+      `/newPosition/${addressToTicker(network, addressFrom ?? '')}/${addressToTicker(network, addressTo ?? '')}/${parseFeeToPathFee(Math.round(fee * 10 ** (DECIMAL - 2)))}`,
       { state: { referer: 'stats' } }
     )
   }
@@ -150,7 +144,11 @@ const PoolListItem: React.FC<IProps> = ({
             </Typography>
           ) : null}
           <Typography>{fee}%</Typography>
-          <Typography>8,640,000</Typography>
+          <Typography>
+            {formatNumberWithCommas(
+              printBN(new BN(pointsPerSecond, 'hex').muln(24).muln(60).muln(60), 0)
+            )}
+          </Typography>
 
           {!isSm && (
             <Box className={classes.action}>

diff --git a/src/pages/LeaderboardPage/components/PoolListItem/Variants/CustomPoolListItem.tsx b/src/pages/LeaderboardPage/components/PoolListItem/Variants/CustomPoolListItem.tsx
@@ -8,9 +8,10 @@ import classNames from 'classnames'
 import { useNavigate } from 'react-router-dom'
 import { useStyles } from './style'
 import { DECIMAL } from '@invariant-labs/sdk-eclipse/lib/utils'
-import { addressToTicker, initialXtoY, parseFeeToPathFee } from '@utils/utils'
+import { addressToTicker, formatNumberWithCommas, parseFeeToPathFee, printBN } from '@utils/utils'
 import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined'
 import { IProps } from '../PoolListItem'
+import { BN } from '@coral-xyz/anchor'
 
 export const CustomPoolListItem: React.FC<IProps> = ({
   fee = 0,
@@ -27,24 +28,16 @@ export const CustomPoolListItem: React.FC<IProps> = ({
   poolAddress,
   copyAddressHandler,
   apy = 0,
+  pointsPerSecond,
   showAPY
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
   const isMd = useMediaQuery(theme.breakpoints.down('md'))
 
   const handleOpenPosition = () => {
-    const revertRatio = initialXtoY(addressFrom ?? '', addressTo ?? '')
-
-    const tokenA = revertRatio
-      ? addressToTicker(network, addressTo ?? '')
-      : addressToTicker(network, addressFrom ?? '')
-    const tokenB = revertRatio
-      ? addressToTicker(network, addressFrom ?? '')
-      : addressToTicker(network, addressTo ?? '')
-
     navigate(
-      `/newPosition/${tokenA}/${tokenB}/${parseFeeToPathFee(Math.round(fee * 10 ** (DECIMAL - 2)))}`,
+      `/newPosition/${addressToTicker(network, addressFrom ?? '')}/${addressToTicker(network, addressTo ?? '')}/${parseFeeToPathFee(Math.round(fee * 10 ** (DECIMAL - 2)))}`,
       { state: { referer: 'stats' } }
     )
   }
@@ -190,7 +183,9 @@ export const CustomPoolListItem: React.FC<IProps> = ({
               </Typography>
 
               <Typography style={{ ...typography.heading4, color: colors.invariant.text }}>
-                8,640,000
+                {formatNumberWithCommas(
+                  printBN(new BN(pointsPerSecond, 'hex').muln(24).muln(60).muln(60), 0)
+                )}
               </Typography>
             </Box>
           </Grid>

diff --git a/src/pages/LeaderboardPage/components/RewardedPools/RewardedPools.tsx b/src/pages/LeaderboardPage/components/RewardedPools/RewardedPools.tsx
@@ -9,10 +9,13 @@ import { ExtendedPoolStatsData } from '@store/selectors/stats'
 import { colors, theme, typography } from '@static/theme'
 import infoIcon from '@static/svg/info.svg'
 
+export interface ExtendedPoolStatsDataWithPoints extends ExtendedPoolStatsData {
+  pointsPerSecond: string
+}
 interface IProps {
   network: NetworkType
   copyAddressHandler: (message: string, variant: VariantType) => void
-  rewardedPoolsData: ExtendedPoolStatsData[]
+  rewardedPoolsData: ExtendedPoolStatsDataWithPoints[]
 }
 
 export const RewardedPools: React.FC<IProps> = ({
@@ -50,7 +53,8 @@ export const RewardedPools: React.FC<IProps> = ({
           },
           isUnknownFrom: poolData.tokenXDetails?.isUnknown ?? false,
           isUnknownTo: poolData.tokenYDetails?.isUnknown ?? false,
-          poolAddress: poolData.poolAddress.toString()
+          poolAddress: poolData.poolAddress.toString(),
+          pointsPerSecond: poolData.pointsPerSecond
         }
       }),
     [rewardedPoolsData]

diff --git a/src/pages/ListPage/styles.ts b/src/pages/ListPage/styles.ts
@@ -9,7 +9,7 @@ const useStyles = makeStyles()(theme => {
       backgroundColor: 'transparent',
       marginTop: 45,
       paddingInline: 40,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('sm')]: {
         paddingInline: 8

diff --git a/src/pages/NewPositionPage/styles.ts b/src/pages/NewPositionPage/styles.ts
@@ -9,7 +9,7 @@ const useStyles = makeStyles()(() => {
       backgroundColor: 'transparent',
       paddingInline: 200,
       marginTop: 45,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('lg')]: {
         paddingInline: 40

diff --git a/src/pages/PortfolioPage/styles.ts b/src/pages/PortfolioPage/styles.ts
@@ -9,7 +9,7 @@ const useStyles = makeStyles()(theme => {
       backgroundColor: 'transparent',
       marginTop: 45,
       paddingInline: 94,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('lg')]: {
         paddingInline: 80

diff --git a/src/pages/RootPage.tsx b/src/pages/RootPage.tsx
@@ -16,7 +16,7 @@ import { NormalBanner } from './LeaderboardPage/components/LeaderboardBanner/Nor
 import { NetworkType } from '@store/consts/static'
 import { network } from '@store/selectors/solanaConnection'
 
-const BANNER_STORAGE_KEY = 'invariant-banner-state'
+const BANNER_STORAGE_KEY = 'invariant-banner-state-2'
 const BANNER_HIDE_DURATION = 1000 * 60 * 60 * 24 // 24 hours
 
 const RootPage: React.FC = memo(() => {
@@ -105,12 +105,12 @@ const RootPage: React.FC = memo(() => {
     <>
       {signerStatus === Status.Initialized && <EventsHandlers />}
       <div id={toBlur}>
-        {showHeader && currentNetwork === NetworkType.Mainnet && (
-          <>
-            <NormalBanner onClose={handleBannerClose} isHiding={isHiding} />
-          </>
-        )}
         <Grid className={classes.root}>
+          {showHeader && currentNetwork === NetworkType.Mainnet && (
+            <>
+              <NormalBanner onClose={handleBannerClose} isHiding={isHiding} />
+            </>
+          )}
           <HeaderWrapper />
           <Grid className={classes.body}>
             <Outlet />

diff --git a/src/pages/SingleFarmPage/style.ts b/src/pages/SingleFarmPage/style.ts
@@ -9,7 +9,7 @@ const useStyles = makeStyles()(() => {
       backgroundColor: 'transparent',
       paddingInline: 200,
       marginTop: 45,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('lg')]: {
         paddingInline: 40

diff --git a/src/pages/SinglePositionPage/styles.ts b/src/pages/SinglePositionPage/styles.ts
@@ -7,7 +7,7 @@ const useStyles = makeStyles()((theme: Theme) => {
       backgroundColor: 'transparent',
       marginTop: 45,
       paddingInline: 138,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('lg')]: {
         paddingInline: 36

diff --git a/src/pages/SolanaCreator/styles.ts b/src/pages/SolanaCreator/styles.ts
@@ -9,7 +9,7 @@ const useStyles = makeStyles()(() => {
       backgroundColor: 'transparent',
       paddingInline: 200,
       marginTop: 45,
-      minHeight: '70vh',
+      minHeight: '60vh',
 
       [theme.breakpoints.down('lg')]: {
         paddingInline: 40

diff --git a/src/pages/StatsPage/styles.ts b/src/pages/StatsPage/styles.ts
@@ -4,7 +4,7 @@ import { makeStyles } from 'tss-react/mui'
 export const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
-    minHeight: '70vh',
+    minHeight: '60vh',
     marginTop: '65px',
     justifyContent: 'center',
     alignItems: 'center',

diff --git a/src/pages/SwapPage/styles.ts b/src/pages/SwapPage/styles.ts
@@ -4,7 +4,7 @@ const useStyles = makeStyles()(() => {
   return {
     container: {
       display: 'flex',
-      minHeight: '70vh',
+      minHeight: '60vh',
       marginTop: '65px',
       justifyContent: 'center',
       backgroundColor: 'transparent',