Merge pull request #824 from invariant-labs/dev

Update staging env
invariant-labs · Dec 21, 2024 · 194c52a · 194c52a
2 parents 541931c + c2d680f
commit 194c52a
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 20 deletions.
diff --git a/src/components/LiquidityPoolList/LiquidityPoolList.tsx b/src/components/LiquidityPoolList/LiquidityPoolList.tsx
@@ -36,6 +36,7 @@ export interface PoolListInterface {
   network: NetworkType
   copyAddressHandler: (message: string, variant: VariantType) => void
   isLoading: boolean
+  showAPY: boolean
 }
 
 import { Keypair } from '@solana/web3.js'
@@ -77,7 +78,8 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
   data,
   network,
   copyAddressHandler,
-  isLoading
+  isLoading,
+  showAPY
 }) => {
   const { classes } = useStyles()
   const [page, setPage] = React.useState(1)
@@ -144,6 +146,7 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
             onSort={setSortType}
             sortType={sortType}
             network={network}
+            showAPY={showAPY}
           />
           {data.length > 0 || isLoading ? (
             paginator(page).map((element, index) => (
@@ -173,6 +176,7 @@ const LiquidityPoolList: React.FC<PoolListInterface> = ({
                 isUnknownTo={element.isUnknownTo}
                 poolAddress={element.poolAddress}
                 copyAddressHandler={copyAddressHandler}
+                showAPY={showAPY}
               />
             ))
           ) : (

diff --git a/src/components/PopularPools/Card/Card.tsx b/src/components/PopularPools/Card/Card.tsx
@@ -17,6 +17,7 @@ import { DECIMAL } from '@invariant-labs/sdk/lib/utils'
 export interface ICard extends PopularPoolData {
   isLoading: boolean
   network: NetworkType
+  showAPY: boolean
 }
 
 const Card: React.FC<ICard> = ({
@@ -34,7 +35,8 @@ const Card: React.FC<ICard> = ({
   symbolFrom,
   symbolTo,
   volume,
-  network
+  network,
+  showAPY
 }) => {
   const { classes } = useStyles()
   const navigate = useNavigate()
@@ -114,7 +116,7 @@ const Card: React.FC<ICard> = ({
                 {shortenAddress(symbolFrom ?? '')} - {shortenAddress(symbolTo ?? '')}
               </Typography>
               <Grid container gap='8px'>
-                {apy !== undefined && (
+                {apy !== undefined && showAPY && (
                   <StatsLabel
                     title='APY'
                     value={`${apy > 1000 ? '>1000%' : apy === 0 ? '-' : apy.toFixed(2) + '%'}`}

diff --git a/src/components/PopularPools/PopularPools.tsx b/src/components/PopularPools/PopularPools.tsx
@@ -13,9 +13,10 @@ export interface IPopularPools {
   pools: PopularPoolData[]
   isLoading: boolean
   network: NetworkType
+  showAPY: boolean
 }
 
-const PopularPools: React.FC<IPopularPools> = ({ pools, isLoading, network }) => {
+const PopularPools: React.FC<IPopularPools> = ({ pools, isLoading, network, showAPY }) => {
   const { classes } = useStyles()
 
   const isLgDown = useMediaQuery(theme.breakpoints.down('lg'))
@@ -65,6 +66,7 @@ const PopularPools: React.FC<IPopularPools> = ({ pools, isLoading, network }) =>
               isUnknownTo={pool.isUnknownTo}
               isLoading={isLoading}
               network={network}
+              showAPY={showAPY}
             />
           ))}
         </Slider>

diff --git a/src/components/Stats/PoolList/PoolList.tsx b/src/components/Stats/PoolList/PoolList.tsx
@@ -37,6 +37,7 @@ export interface PoolListInterface {
   network: NetworkType
   copyAddressHandler: (message: string, variant: VariantType) => void
   isLoading: boolean
+  showAPY: boolean
 }
 
 const ITEMS_PER_PAGE = 10
@@ -75,7 +76,8 @@ const PoolList: React.FC<PoolListInterface> = ({
   data,
   network,
   copyAddressHandler,
-  isLoading
+  isLoading,
+  showAPY
 }) => {
   const { classes } = useStyles()
   const [page, setPage] = React.useState(1)
@@ -142,6 +144,7 @@ const PoolList: React.FC<PoolListInterface> = ({
           onSort={setSortType}
           sortType={sortType}
           network={network}
+          showAPY={showAPY}
         />
         {data.length > 0 || isLoading ? (
           paginator(page).map((element, index) => (
@@ -171,6 +174,7 @@ const PoolList: React.FC<PoolListInterface> = ({
               isUnknownTo={element.isUnknownTo}
               poolAddress={element.poolAddress}
               copyAddressHandler={copyAddressHandler}
+              showAPY={showAPY}
             />
           ))
         ) : (

diff --git a/src/components/Stats/PoolList/Stats.PoolList.stories.tsx b/src/components/Stats/PoolList/Stats.PoolList.stories.tsx
@@ -99,6 +99,7 @@ export const Primary: Story = {
     data: poolsList,
     network: NetworkType.Local,
     copyAddressHandler: fn(),
-    isLoading: false
+    isLoading: false,
+    showAPY: true
   }
 }
diff --git a/src/components/Stats/PoolListItem/PoolListItem.tsx b/src/components/Stats/PoolListItem/PoolListItem.tsx
@@ -15,6 +15,7 @@ import { TooltipHover } from '@components/TooltipHover/TooltipHover'
 import { VariantType } from 'notistack'
 import FileCopyOutlinedIcon from '@mui/icons-material/FileCopyOutlined'
 import { apyToApr } from '@utils/uiUtils'
+import classNames from 'classnames'
 
 interface IProps {
   TVL?: number
@@ -42,6 +43,7 @@ interface IProps {
   isUnknownTo?: boolean
   poolAddress?: string
   copyAddressHandler?: (message: string, variant: VariantType) => void
+  showAPY: boolean
 }
 
 const PoolListItem: React.FC<IProps> = ({
@@ -64,7 +66,8 @@ const PoolListItem: React.FC<IProps> = ({
   isUnknownFrom,
   isUnknownTo,
   poolAddress,
-  copyAddressHandler
+  copyAddressHandler,
+  showAPY
 }) => {
   const { classes } = useStyles()
 
@@ -120,7 +123,9 @@ const PoolListItem: React.FC<IProps> = ({
       {displayType === 'token' ? (
         <Grid
           container
-          classes={{ container: classes.container }}
+          classes={{
+            container: classNames(classes.container, { [classes.containerNoAPY]: !showAPY })
+          }}
           style={hideBottomLine ? { border: 'none' } : undefined}>
           {!isMd ? <Typography>{tokenIndex}</Typography> : null}
           <Grid className={classes.imageContainer}>
@@ -160,7 +165,7 @@ const PoolListItem: React.FC<IProps> = ({
               </TooltipHover>
             </Grid>
           </Grid>
-          {!isSmd ? (
+          {!isSmd && showAPY ? (
             <Typography className={classes.row}>
               {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`}
               <span
@@ -201,7 +206,12 @@ const PoolListItem: React.FC<IProps> = ({
           )}
         </Grid>
       ) : (
-        <Grid container classes={{ container: classes.container, root: classes.header }}>
+        <Grid
+          container
+          classes={{
+            container: classNames(classes.container, { [classes.containerNoAPY]: !showAPY }),
+            root: classes.header
+          }}>
           {!isMd && (
             <Typography style={{ lineHeight: '11px' }}>
               N<sup>o</sup>
@@ -223,7 +233,7 @@ const PoolListItem: React.FC<IProps> = ({
               <ArrowDropDownIcon className={classes.icon} />
             ) : null}
           </Typography>
-          {!isSmd ? (
+          {!isSmd && showAPY ? (
             <Typography
               className={classes.row}
               style={{ cursor: 'pointer' }}

diff --git a/src/components/Stats/PoolListItem/Stats.PoolListItem.stories.tsx b/src/components/Stats/PoolListItem/Stats.PoolListItem.stories.tsx
@@ -30,7 +30,8 @@ export const Header: Story = {
     displayType: 'header',
     onSort: fn(),
     sortType: SortTypePoolList.TVL_DESC,
-    network: NetworkType.Mainnet
+    network: NetworkType.Mainnet,
+    showAPY: true
   }
 }
 
@@ -48,6 +49,7 @@ export const Token: Story = {
     volume: 1000000000,
     TVL: 500000000,
     hideBottomLine: false,
-    network: NetworkType.Mainnet
+    network: NetworkType.Mainnet,
+    showAPY: true
   }
 }
diff --git a/src/components/Stats/PoolListItem/style.ts b/src/components/Stats/PoolListItem/style.ts
@@ -38,7 +38,9 @@ export const useStyles = makeStyles()(() => ({
       }
     }
   },
-
+  containerNoAPY: {
+    gridTemplateColumns: '5% auto 12% 15% 12% 160px'
+  },
   imageContainer: {
     display: 'flex',
     alignItems: 'center'

diff --git a/src/components/Stats/TokenListItem/TokenListItem.tsx b/src/components/Stats/TokenListItem/TokenListItem.tsx
@@ -51,7 +51,6 @@ const TokenListItem: React.FC<IProps> = ({
   const { classes } = useStyles()
   // const isNegative = priceChange < 0
 
-  const isSm = useMediaQuery(theme.breakpoints.down('sm'))
   const isMd = useMediaQuery(theme.breakpoints.down('md'))
 
   const networkUrl = useMemo(() => {
@@ -81,8 +80,6 @@ const TokenListItem: React.FC<IProps> = ({
       })
   }
 
-  console.log(isSm)
-
   return (
     <Grid>
       {displayType === 'tokens' ? (

diff --git a/src/containers/PopularPoolsWrapper/PopularPoolsWrapper.tsx b/src/containers/PopularPoolsWrapper/PopularPoolsWrapper.tsx
@@ -89,13 +89,22 @@ export const PopularPoolsWrapper: React.FC = () => {
     return data
   }, [poolsList])
 
+  const showAPY = useMemo(() => {
+    return list.some(pool => pool.apy !== 0)
+  }, [list])
+
   useEffect(() => {
     dispatch(actions.getCurrentStats())
   }, [])
 
   return (
     <Grid container>
-      <PopularPools pools={list} isLoading={isLoadingStats} network={currentNetwork} />
+      <PopularPools
+        pools={list}
+        isLoading={isLoadingStats}
+        network={currentNetwork}
+        showAPY={showAPY}
+      />
     </Grid>
   )
 }

diff --git a/src/containers/WrappedPoolList/WrappedPoolList.tsx b/src/containers/WrappedPoolList/WrappedPoolList.tsx
@@ -40,6 +40,10 @@ export const WrappedPoolList: React.FC = () => {
     })
   }, [isLoadingStats, poolsList, deferredSearchPoolsValue])
 
+  const showAPY = useMemo(() => {
+    return filteredPoolsList.some(pool => pool.apy !== 0)
+  }, [filteredPoolsList])
+
   const copyAddressHandler = (message: string, variant: VariantType) => {
     dispatch(
       snackbarActions.add({
@@ -114,6 +118,7 @@ export const WrappedPoolList: React.FC = () => {
         network={currentNetwork}
         copyAddressHandler={copyAddressHandler}
         isLoading={isLoadingStats}
+        showAPY={showAPY}
       />
     </div>
   )

diff --git a/src/containers/WrappedStats/WrappedStats.tsx b/src/containers/WrappedStats/WrappedStats.tsx
@@ -126,6 +126,10 @@ export const WrappedStats: React.FC = () => {
     return acc
   }, [allFarms])
 
+  const showAPY = useMemo(() => {
+    return filteredPoolsList.some(pool => pool.apy !== 0)
+  }, [filteredPoolsList])
+
   const copyAddressHandler = (message: string, variant: VariantType) => {
     dispatch(
       snackbarActions.add({
@@ -136,8 +140,6 @@ export const WrappedStats: React.FC = () => {
     )
   }
 
-  console.log(liquidityPlotData.length, isLoadingStats)
-
   return (
     <Grid container className={classes.wrapper} direction='column'>
       {liquidityPlotData.length === 0 && !isLoadingStats ? (
@@ -270,6 +272,7 @@ export const WrappedStats: React.FC = () => {
             network={currentNetwork}
             copyAddressHandler={copyAddressHandler}
             isLoading={isLoadingStats}
+            showAPY={showAPY}
           />
         </>
       )}