diff --git a/src/components/LiquidityPoolList/LiquidityPoolList.tsx b/src/components/LiquidityPoolList/LiquidityPoolList.tsx index 158e3a5e..af2b0ea5 100644 --- 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 = ({ data, network, copyAddressHandler, - isLoading + isLoading, + showAPY }) => { const { classes } = useStyles() const [page, setPage] = React.useState(1) @@ -144,6 +146,7 @@ const LiquidityPoolList: React.FC = ({ 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 = ({ 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 index 5060897b..c928616f 100644 --- 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 = ({ @@ -34,7 +35,8 @@ const Card: React.FC = ({ symbolFrom, symbolTo, volume, - network + network, + showAPY }) => { const { classes } = useStyles() const navigate = useNavigate() @@ -114,7 +116,7 @@ const Card: React.FC = ({ {shortenAddress(symbolFrom ?? '')} - {shortenAddress(symbolTo ?? '')} - {apy !== undefined && ( + {apy !== undefined && showAPY && ( 1000 ? '>1000%' : apy === 0 ? '-' : apy.toFixed(2) + '%'}`} diff --git a/src/components/PopularPools/PopularPools.tsx b/src/components/PopularPools/PopularPools.tsx index 1188d06c..6f1721fd 100644 --- 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 = ({ pools, isLoading, network }) => { +const PopularPools: React.FC = ({ pools, isLoading, network, showAPY }) => { const { classes } = useStyles() const isLgDown = useMediaQuery(theme.breakpoints.down('lg')) @@ -65,6 +66,7 @@ const PopularPools: React.FC = ({ pools, isLoading, network }) => isUnknownTo={pool.isUnknownTo} isLoading={isLoading} network={network} + showAPY={showAPY} /> ))} diff --git a/src/components/Stats/PoolList/PoolList.tsx b/src/components/Stats/PoolList/PoolList.tsx index 56b976f3..46e6672e 100644 --- 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 = ({ data, network, copyAddressHandler, - isLoading + isLoading, + showAPY }) => { const { classes } = useStyles() const [page, setPage] = React.useState(1) @@ -142,6 +144,7 @@ const PoolList: React.FC = ({ 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 = ({ 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 index ef9c3de2..743ff1b6 100644 --- 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 index 3859b6a9..ad034a39 100644 --- 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 = ({ @@ -64,7 +66,8 @@ const PoolListItem: React.FC = ({ isUnknownFrom, isUnknownTo, poolAddress, - copyAddressHandler + copyAddressHandler, + showAPY }) => { const { classes } = useStyles() @@ -120,7 +123,9 @@ const PoolListItem: React.FC = ({ {displayType === 'token' ? ( {!isMd ? {tokenIndex} : null} @@ -160,7 +165,7 @@ const PoolListItem: React.FC = ({ - {!isSmd ? ( + {!isSmd && showAPY ? ( {`${apr > 1000 ? '>1000%' : apr === 0 ? '-' : apr.toFixed(2) + '%'}`} = ({ )} ) : ( - + {!isMd && ( No @@ -223,7 +233,7 @@ const PoolListItem: React.FC = ({ ) : null} - {!isSmd ? ( + {!isSmd && showAPY ? ( ({ } } }, - + 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 index 75050efd..25bdc58e 100644 --- a/src/components/Stats/TokenListItem/TokenListItem.tsx +++ b/src/components/Stats/TokenListItem/TokenListItem.tsx @@ -51,7 +51,6 @@ const TokenListItem: React.FC = ({ 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 = ({ }) } - console.log(isSm) - return ( {displayType === 'tokens' ? ( diff --git a/src/containers/PopularPoolsWrapper/PopularPoolsWrapper.tsx b/src/containers/PopularPoolsWrapper/PopularPoolsWrapper.tsx index 5a782f4f..926fe0ed 100644 --- 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 ( - + ) } diff --git a/src/containers/WrappedPoolList/WrappedPoolList.tsx b/src/containers/WrappedPoolList/WrappedPoolList.tsx index 3890188c..11fe3904 100644 --- 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} /> ) diff --git a/src/containers/WrappedStats/WrappedStats.tsx b/src/containers/WrappedStats/WrappedStats.tsx index 740d7265..d5e07769 100644 --- 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 ( {liquidityPlotData.length === 0 && !isLoadingStats ? ( @@ -270,6 +272,7 @@ export const WrappedStats: React.FC = () => { network={currentNetwork} copyAddressHandler={copyAddressHandler} isLoading={isLoadingStats} + showAPY={showAPY} /> )}