utils#formatCompact TypeScript Examples

TradingInfo: React.FC<{ globalData: any }> = ({ globalData }) => {
  const classes = useStyles();
  const lairInfo = useLairInfo();
  const [openStakeModal, setOpenStakeModal] = useState(false);

  const dQUICKAPY = useLairDQUICKAPY(lairInfo);

  const totalRewardsUSD = useTotalRewardsDistributed();

  return (
    <>
      {openStakeModal && (
        <StakeQuickModal
          open={openStakeModal}
          onClose={() => setOpenStakeModal(false)}
        />
      )}
      <Box className={classes.tradingSection}>
        {globalData ? (
          <Typography variant='h3'>
            {Number(globalData.oneDayTxns).toLocaleString()}
          </Typography>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>24H TRANSACTIONS</Typography>
      </Box>
      <Box className={classes.tradingSection}>
        {globalData ? (
          <Box display='flex'>
            <Typography variant='h6'>$</Typography>
            <Typography variant='h3'>
              {formatCompact(globalData.oneDayVolumeUSD)}
            </Typography>
          </Box>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>24H TRADING VOLUME</Typography>
      </Box>
      <Box className={classes.tradingSection}>
        {totalRewardsUSD ? (
          <Box display='flex'>
            <Typography variant='h6'>$</Typography>
            <Typography variant='h3'>
              {totalRewardsUSD.toLocaleString()}
            </Typography>
          </Box>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>24h REWARDS DISTRIBUTED</Typography>
      </Box>
      <Box className={classes.tradingSection}>
        {globalData ? (
          <Typography variant='h3'>
            {Number(globalData.pairCount).toLocaleString(undefined, {
              maximumFractionDigits: 0,
            })}
          </Typography>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>TOTAL TRADING PAIRS</Typography>
      </Box>
      <Box className={classes.tradingSection} pt='20px'>
        {dQUICKAPY ? (
          <Typography variant='h3'>{dQUICKAPY.toLocaleString()}%</Typography>
        ) : (
          <Skeleton variant='rect' width={100} height={45} />
        )}
        <Typography>dQUICK APY</Typography>
        <Typography variant='h4' onClick={() => setOpenStakeModal(true)}>
          stake {'>'}
        </Typography>
      </Box>
    </>
  );
}

AreaChart: React.FC<AreaChartProps> = ({
  backgroundColor = '#004ce6',
  categories = [],
  data = [],
  dates = [],
  yAxisValues,
  width = 500,
  height = 200,
}) => {
  const dark = useIsDarkMode();

  const strokeColor = '#00dced';
  const gradientColor = dark ? '#64fbd3' : '#D4F8FB';

  const yMax = yAxisValues
    ? Math.max(...yAxisValues.map((val) => Number(val)))
    : 0;
  const yMin = yAxisValues
    ? Math.min(...yAxisValues.map((val) => Number(val)))
    : 0;

  const options = {
    chart: {
      sparkline: {
        enabled: false,
      },
      toolbar: {
        show: false,
      },
      width: '100%',
      zoom: {
        enabled: false,
      },
    },
    dataLabels: {
      enabled: false,
    },
    stroke: {
      width: 2,
      colors: [strokeColor],
      curve: 'smooth' as any,
    },
    markers: {
      colors: [strokeColor],
      strokeWidth: 0,
    },
    fill: {
      type: 'gradient',
      colors: [gradientColor],
      gradient: {
        gradientToColors: [backgroundColor],
        shadeIntensity: 1,
        opacityFrom: 0.5,
        opacityTo: 0.15,
        stops: [0, 100],
      },
    },
    xaxis: {
      categories: categories.map(() => ''),
      axisBorder: {
        show: false,
      },
      tooltip: {
        enabled: false,
      },
      axisTicks: {
        show: false,
      },
      labels: {
        style: {
          colors: new Array(categories.length).fill(
            dark ? '#646464' : '#CACED3',
          ),
        },
      },
    },
    yaxis: {
      show: false,
      min: yAxisValues ? yMin : undefined,
      max: yAxisValues ? yMax : undefined,
      tickAmount: yAxisValues?.length,
    },
    grid: {
      show: false,
      padding: {
        left: 0,
        right: 0,
      },
      xaxis: {
        lines: {
          show: false,
        },
      },
    },
    legend: {
      show: false,
    },
    tooltip: {
      enabled: true,
      theme: dark ? 'dark' : 'light',
      fillSeriesColor: false,
      custom: ({ series, seriesIndex, dataPointIndex }: any) => {
        return (
          `<div class="tooltip" style="display: flex; flex-direction: column; box-shadow: none; border-radius: 12px; background: transparent;">` +
          `<span style="padding: 0.5rem; border: 1px solid ${
            dark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)'
          }; border-radius: 12px 12px 0 0; background: ${
            dark ? 'rgba(0, 0, 0, 0.91)' : 'rgba(255, 255, 255, 0.91)'
          }; color: ${dark ? '#646464' : '#8D97A0'};">` +
          dayjs(dates[dataPointIndex] * 1000).format('MMM DD, YYYY') +
          '</span>' +
          `<span style="padding: 0.5rem; border: 1px solid ${
            dark ? 'rgba(255, 255, 255, 0.15)' : 'rgba(0, 0, 0, 0.15)'
          }; border-top: none; border-radius: 0 0 12px 12px; background: ${
            dark ? 'rgba(0, 0, 0, 0.91)' : 'rgba(255, 255, 255, 0.91)'
          }; color: ${dark ? '#646464' : '#8D97A0'};"><b style="color: ${
            dark ? 'white' : 'rgba(0, 0, 0, 0.91)'
          };">$` +
          formatCompact(series[seriesIndex][dataPointIndex]) +
          '</b></span>' +
          '</div>'
        );
      },
    },
  };

  const series = [
    {
      name: 'Prices',
      data,
    },
  ];

  const classes = useStyles();

  return (
    <Box display='flex' mt={2.5} width={width}>
      <Box className={classes.chartContainer}>
        <Chart
          options={options}
          series={series}
          type='area'
          width='100%'
          height={height}
        />
        <Box className={classes.categoryValues}>
          {categories.map((val, ind) => (
            <Typography key={ind}>{val}</Typography>
          ))}
        </Box>
      </Box>
      {yAxisValues && (
        <Box className={classes.yAxis}>
          {yAxisValues.map((value, index) => (
            <Typography key={index}>
              $
              {// this is to show small numbers less than 0.0001
              value > 0.0001 ? formatCompact(value) : formatNumber(value)}
            </Typography>
          ))}
        </Box>
      )}
    </Box>
  );
}

SwapTokenDetails: React.FC<{
  token: Token;
}> = ({ token }) => {
  const classes = useStyles();
  const currency = unwrappedToken(token);
  const tokenAddress = token.address;
  const { palette } = useTheme();
  const latestBlock = useBlockNumber();
  const { tokenDetails, updateTokenDetails } = useTokenDetails();
  const [tokenData, setTokenData] = useState<any>(null);
  const [priceData, setPriceData] = useState<any>(null);
  const priceUp = Number(tokenData?.priceChangeUSD) > 0;
  const priceUpPercent = Number(tokenData?.priceChangeUSD).toFixed(2);
  const [isCopied, setCopied] = useCopyClipboard();
  const prices = priceData ? priceData.map((price: any) => price.close) : [];

  useEffect(() => {
    async function fetchTokenData() {
      const tokenDetail = tokenDetails.find(
        (item) => item.address === tokenAddress,
      );
      setTokenData(tokenDetail?.tokenData);
      setPriceData(tokenDetail?.priceData);
      const currentTime = dayjs.utc();
      const startTime = currentTime
        .subtract(1, 'day')
        .startOf('hour')
        .unix();
      const tokenPriceData = await getIntervalTokenData(
        tokenAddress,
        startTime,
        3600,
        latestBlock,
      );
      setPriceData(tokenPriceData);

      const [newPrice, oneDayPrice] = await getEthPrice();
      const tokenInfo = await getTokenInfo(newPrice, oneDayPrice, tokenAddress);
      if (tokenInfo) {
        const token0 = tokenInfo[0];
        setTokenData(token0);
        const tokenDetailToUpdate = {
          address: tokenAddress,
          tokenData: token0,
          priceData: tokenPriceData,
        };
        updateTokenDetails(tokenDetailToUpdate);
      }
    }
    fetchTokenData();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [tokenAddress]);

  return (
    <Box>
      <Box
        display='flex'
        alignItems='center'
        justifyContent='space-between'
        px={2}
        py={1.5}
      >
        <Box display='flex' alignItems='center'>
          <CurrencyLogo currency={currency} size='28px' />
          <Box ml={1}>
            <Typography variant='body2'>{currency.symbol}</Typography>
            {tokenData ? (
              <Box display='flex' alignItems='center'>
                <Typography variant='body2'>
                  ${formatNumber(tokenData.priceUSD)}
                </Typography>
                <Box
                  ml={0.5}
                  display='flex'
                  alignItems='center'
                  className={priceUp ? classes.success : classes.danger}
                >
                  {priceUp ? <ArrowDropUp /> : <ArrowDropDown />}
                  <Typography variant='body2'>{priceUpPercent}%</Typography>
                </Box>
              </Box>
            ) : (
              <Skeleton variant='rect' width={100} height={20} />
            )}
          </Box>
        </Box>
        {tokenData && priceData ? (
          <Box width={88} height={47} position='relative'>
            <Box position='absolute' top={-30} width={1}>
              {prices.length > 0 && (
                <LineChart
                  data={prices}
                  width='100%'
                  height={120}
                  color={priceUp ? palette.success.main : palette.error.main}
                />
              )}
            </Box>
          </Box>
        ) : (
          <Skeleton variant='rect' width={88} height={47} />
        )}
      </Box>
      <Box
        borderTop={`1px solid ${palette.secondary.light}`}
        borderBottom={`1px solid ${palette.secondary.light}`}
        px={2}
      >
        <Grid container>
          <Grid item xs={6}>
            <Box borderRight={`1px solid ${palette.secondary.light}`} py={1}>
              {tokenData ? (
                <Typography
                  variant='body2'
                  style={{ color: palette.text.secondary }}
                >
                  TVL: {formatCompact(tokenData?.totalLiquidityUSD)}
                </Typography>
              ) : (
                <Skeleton variant='rect' width={100} height={16} />
              )}
            </Box>
          </Grid>
          <Grid item xs={6}>
            <Box py={1} pl={2}>
              {tokenData ? (
                <Typography
                  variant='body2'
                  style={{ color: palette.text.secondary }}
                >
                  24h VOL: {formatCompact(tokenData?.oneDayVolumeUSD)}
                </Typography>
              ) : (
                <Skeleton variant='rect' width={100} height={16} />
              )}
            </Box>
          </Grid>
        </Grid>
      </Box>
      <Box
        display='flex'
        justifyContent='space-between'
        alignItems='center'
        py={1}
        px={2}
      >
        <a
          href={`https://polygonscan.com/token/${tokenAddress}`}
          target='_blank'
          rel='noopener noreferrer'
          style={{ textDecoration: 'none' }}
        >
          <Typography variant='body2' style={{ color: palette.primary.main }}>
            {shortenAddress(tokenAddress)}
          </Typography>
        </a>
        <Box
          display='flex'
          style={{ cursor: 'pointer', opacity: isCopied ? 0.5 : 1 }}
          onClick={() => {
            setCopied(tokenAddress);
          }}
        >
          <CopyIcon />
        </Box>
      </Box>
    </Box>
  );
}

SyrupCard: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
  syrup,
  dQUICKAPY,
}) => {
  const { palette, breakpoints } = useTheme();
  const isMobile = useMediaQuery(breakpoints.down('xs'));
  const [expanded, setExpanded] = useState(false);
  const classes = useStyles();

  const currency = unwrappedToken(syrup.token);

  const depositAmount = syrup.valueOfTotalStakedAmountInUSDC
    ? `$${syrup.valueOfTotalStakedAmountInUSDC.toLocaleString()}`
    : `${formatTokenAmount(syrup.totalStakedAmount)} ${
        syrup.stakingToken.symbol
      }`;

  return (
    <Box className={classes.syrupCard}>
      <Box
        display='flex'
        flexWrap='wrap'
        alignItems='center'
        width={1}
        padding={2}
        style={{ cursor: 'pointer' }}
        onClick={() => setExpanded(!expanded)}
      >
        {isMobile ? (
          <>
            <Box
              display='flex'
              alignItems='center'
              width={expanded ? 0.95 : 0.5}
            >
              <CurrencyLogo currency={currency} size='32px' />
              <Box ml={1.5}>
                <Typography variant='body2'>{currency.symbol}</Typography>
              </Box>
            </Box>
            {!expanded && (
              <Box width={0.45}>
                <SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
              </Box>
            )}
            <Box
              width={0.05}
              display='flex'
              justifyContent='flex-end'
              color={palette.primary.main}
            >
              {expanded ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
            </Box>
          </>
        ) : (
          <>
            <Box width={0.3} display='flex' alignItems='center'>
              <CurrencyLogo currency={currency} size='32px' />
              <Box ml={1.5}>
                <Typography variant='body2'>{currency.symbol}</Typography>
                <Box display='flex' mt={0.25}>
                  <Typography variant='caption'>
                    {syrup.rate >= 1000000
                      ? formatCompact(syrup.rate)
                      : syrup.rate.toLocaleString()}
                    <span style={{ color: palette.text.secondary }}>
                      {' '}
                      / day
                    </span>
                  </Typography>
                </Box>
                <Box display='flex' mt={0.25}>
                  <Typography variant='caption'>
                    $
                    {syrup.rewardTokenPriceinUSD
                      ? (
                          syrup.rate * syrup.rewardTokenPriceinUSD
                        ).toLocaleString()
                      : '-'}{' '}
                    <span style={{ color: palette.text.secondary }}>/ day</span>
                  </Typography>
                </Box>
              </Box>
            </Box>
            <Box width={0.3}>
              <Typography variant='body2'>{depositAmount}</Typography>
            </Box>
            <Box width={0.2} textAlign='left'>
              <SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
            </Box>
            <Box width={0.2} textAlign='right'>
              <Box
                display='flex'
                alignItems='center'
                justifyContent='flex-end'
                mb={0.25}
              >
                <CurrencyLogo currency={currency} size='16px' />
                <Typography variant='body2' style={{ marginLeft: 5 }}>
                  {formatTokenAmount(syrup.earnedAmount)}
                </Typography>
              </Box>
              <Typography
                variant='body2'
                style={{ color: palette.text.secondary }}
              >
                {getEarnedUSDSyrup(syrup)}
              </Typography>
            </Box>
          </>
        )}
      </Box>
      {expanded && syrup && (
        <SyrupCardDetails syrup={syrup} dQUICKAPY={dQUICKAPY} />
      )}
    </Box>
  );
}

SyrupCardDetails: React.FC<{ syrup: SyrupInfo; dQUICKAPY: string }> = ({
  syrup,
  dQUICKAPY,
}) => {
  const syrupCurrency = unwrappedToken(syrup.token);
  const { palette, breakpoints } = useTheme();
  const { t } = useTranslation();
  const isMobile = useMediaQuery(breakpoints.down('xs'));
  const [attemptingClaim, setAttemptingClaim] = useState(false);
  const [attemptingUnstake, setAttemptingUnstake] = useState(false);
  const [openStakeModal, setOpenStakeModal] = useState(false);
  const classes = useStyles();

  const stakingTokenPrice = useUSDCPriceToken(syrup.stakingToken);
  const stakingContract = useStakingContract(syrup?.stakingRewardAddress);
  const addTransaction = useTransactionAdder();
  const finalizedTransaction = useTransactionFinalizer();

  const { account } = useActiveWeb3React();
  const currency = syrup ? unwrappedToken(syrup.token) : undefined;

  const userLiquidityUnstaked = useTokenBalance(
    account ?? undefined,
    syrup.stakedAmount?.token,
  );

  const exactEnd = syrup ? syrup.periodFinish : 0;

  const depositAmount =
    syrup && syrup.valueOfTotalStakedAmountInUSDC
      ? `$${Number(syrup.valueOfTotalStakedAmountInUSDC).toLocaleString()}`
      : `${formatTokenAmount(syrup?.totalStakedAmount)} ${
          syrup?.stakingToken.symbol
        }`;

  const onClaimReward = async () => {
    if (syrup && stakingContract && syrup.stakedAmount) {
      setAttemptingClaim(true);
      await stakingContract
        .getReward({ gasLimit: 350000 })
        .then(async (response: TransactionResponse) => {
          addTransaction(response, {
            summary: `Claim accumulated` + syrup.token.symbol + `rewards`,
          });
          try {
            const receipt = await response.wait();
            finalizedTransaction(receipt, {
              summary: `Claim accumulated` + syrup.token.symbol + `rewards`,
            });
            setAttemptingClaim(false);
          } catch (e) {
            setAttemptingClaim(false);
          }
        })
        .catch((error: any) => {
          setAttemptingClaim(false);
          console.log(error);
        });
    }
  };

  const onWithdraw = async () => {
    if (syrup && stakingContract && syrup.stakedAmount) {
      setAttemptingUnstake(true);
      await stakingContract
        .exit({ gasLimit: 300000 })
        .then(async (response: TransactionResponse) => {
          addTransaction(response, {
            summary: `Withdraw deposited liquidity`,
          });
          try {
            const receipt = await response.wait();
            finalizedTransaction(receipt, {
              summary: `Withdraw deposited dQUICK`,
            });
            setAttemptingUnstake(false);
          } catch (e) {
            setAttemptingUnstake(false);
          }
        })
        .catch((error: any) => {
          setAttemptingUnstake(false);
          console.log(error);
        });
    }
  };

  const StakeButton = () => (
    <Box
      className={classes.syrupButton}
      onClick={() => setOpenStakeModal(true)}
    >
      <Typography variant='body2'>Stake</Typography>
    </Box>
  );

  const UnstakeButton = () => (
    <Box
      className={classes.syrupButton}
      style={{ opacity: attemptingUnstake ? 0.6 : 1 }}
      onClick={() => {
        if (!attemptingUnstake) {
          onWithdraw();
        }
      }}
    >
      <Typography variant='body2'>
        {attemptingUnstake ? 'Unstaking...' : 'Unstake'}
      </Typography>
    </Box>
  );

  const ClaimButton = () => (
    <Box
      className={classes.syrupButton}
      style={{ opacity: attemptingClaim ? 0.6 : 1 }}
      onClick={() => {
        if (!attemptingClaim) {
          onClaimReward();
        }
      }}
    >
      <Typography variant='body2'>
        {attemptingClaim ? 'Claiming...' : 'Claim'}
      </Typography>
    </Box>
  );

  return (
    <>
      {openStakeModal && syrup && (
        <StakeSyrupModal
          open={openStakeModal}
          onClose={() => setOpenStakeModal(false)}
          syrup={syrup}
        />
      )}
      {syrup && (
        <>
          <Divider />
          <Box padding={3}>
            {isMobile && (
              <Box mb={3}>
                <Box display='flex' justifyContent='space-between' mb={2}>
                  <Typography
                    variant='body2'
                    style={{ color: palette.text.secondary }}
                  >
                    {syrup.stakingToken.symbol} {t('deposits')}:
                  </Typography>
                  <Typography variant='body2'>{depositAmount}</Typography>
                </Box>
                <Box display='flex' justifyContent='space-between' mb={2}>
                  <Typography
                    variant='body2'
                    style={{ color: palette.text.secondary }}
                  >
                    {t('dailyRewards')}:
                  </Typography>
                  <Typography variant='body2'>
                    {syrup.rate >= 1000000
                      ? formatCompact(syrup.rate)
                      : syrup.rate.toLocaleString()}{' '}
                    {syrup.token.symbol}
                    <span style={{ color: palette.text.secondary }}>
                      {' '}
                      / {t('day')}
                    </span>
                  </Typography>
                </Box>
                <Box mb={2}>
                  <SyrupTimerLabel exactEnd={exactEnd} isEnded={syrup?.ended} />
                </Box>
                <Box display='flex' justifyContent='space-between' mb={3}>
                  <Box display='flex' alignItems='center'>
                    <Typography
                      variant='body2'
                      style={{ color: palette.text.secondary }}
                    >
                      APR:
                    </Typography>
                    <Box ml={0.5} height={16}>
                      <img src={CircleInfoIcon} alt={'arrow up'} />
                    </Box>
                  </Box>
                  <Box textAlign='right'>
                    <SyrupAPR syrup={syrup} dQUICKAPY={dQUICKAPY} />
                  </Box>
                </Box>
                <Divider />
              </Box>
            )}
            <Box
              display='flex'
              alignItems='center'
              justifyContent='space-between'
              mb={1}
            >
              <Typography
                variant='body2'
                style={{ color: palette.text.secondary }}
              >
                {t('inwallet')}
              </Typography>
              <Typography variant='body2'>
                <span style={{ color: palette.text.primary }}>
                  {userLiquidityUnstaked
                    ? formatTokenAmount(userLiquidityUnstaked)
                    : 0}{' '}
                  {syrup.stakingToken.symbol}
                </span>
                <span style={{ color: palette.text.secondary, marginLeft: 4 }}>
                  $
                  {userLiquidityUnstaked
                    ? (
                        stakingTokenPrice *
                        Number(userLiquidityUnstaked.toExact())
                      ).toLocaleString()
                    : 0}
                </span>
              </Typography>
            </Box>
            <Box
              display='flex'
              alignItems='center'
              justifyContent='space-between'
              mb={1}
            >
              <Typography
                variant='body2'
                style={{ color: palette.text.secondary }}
              >
                {t('staked')}
              </Typography>
              <Typography variant='body2'>
                <span style={{ color: palette.text.primary }}>
                  {formatTokenAmount(syrup.stakedAmount)}{' '}
                  {syrup.stakingToken.symbol}
                </span>
                <span style={{ color: palette.text.secondary, marginLeft: 4 }}>
                  {syrup.stakedAmount
                    ? `$${(
                        stakingTokenPrice * Number(syrup.stakedAmount.toExact())
                      ).toLocaleString()}`
                    : '-'}
                </span>
              </Typography>
            </Box>
            <Box
              display='flex'
              alignItems='center'
              justifyContent='space-between'
              mb={2}
            >
              <Typography
                variant='body2'
                style={{ color: palette.text.secondary }}
              >
                {t('earned')} {currency?.symbol}
              </Typography>
              <Box display='flex' alignItems='center'>
                <CurrencyLogo currency={currency} size='16px' />
                <Typography variant='body2' style={{ marginLeft: 4 }}>
                  <span style={{ color: palette.text.primary }}>
                    {formatTokenAmount(syrup.earnedAmount)}
                  </span>
                  <span
                    style={{ color: palette.text.secondary, marginLeft: 4 }}
                  >
                    {getEarnedUSDSyrup(syrup)}
                  </span>
                </Typography>
              </Box>
            </Box>
            <Box
              display='flex'
              flexWrap='wrap'
              alignItems='center'
              justifyContent='space-between'
            >
              {!isMobile && (
                <SyrupTimerLabel exactEnd={exactEnd} isEnded={syrup?.ended} />
              )}
              {isMobile ? (
                <>
                  {syrup.earnedAmount && syrup.earnedAmount.greaterThan('0') && (
                    <Box
                      width={1}
                      mb={1.5}
                      display='flex'
                      justifyContent='flex-end'
                    >
                      <ClaimButton />
                    </Box>
                  )}
                  <Box
                    width={1}
                    mb={1.5}
                    display='flex'
                    justifyContent={
                      syrup.stakedAmount && syrup.stakedAmount.greaterThan('0')
                        ? 'space-between'
                        : 'flex-end'
                    }
                  >
                    {!syrup.ended && <StakeButton />}
                    {syrup.stakedAmount &&
                      syrup.stakedAmount.greaterThan('0') && <UnstakeButton />}
                  </Box>
                </>
              ) : (
                <Box display='flex' flexWrap='wrap' my={1}>
                  {!syrup.ended && <StakeButton />}
                  {syrup.stakedAmount && syrup.stakedAmount.greaterThan('0') && (
                    <Box ml={1}>
                      <UnstakeButton />
                    </Box>
                  )}
                  {syrup.earnedAmount && syrup.earnedAmount.greaterThan('0') && (
                    <Box ml={1}>
                      <ClaimButton />
                    </Box>
                  )}
                </Box>
              )}
            </Box>
            {syrup.rewardRate?.greaterThan('0') && (
              <Box className={classes.dailyRateWrapper}>
                <Box
                  display='flex'
                  alignItems='center'
                  justifyContent={isMobile ? 'space-between' : 'flex-start'}
                  width={isMobile ? 1 : 'auto'}
                  flexWrap='wrap'
                >
                  <Box display='flex' mr={1}>
                    <Typography variant='body2' color='textSecondary'>
                      {t('yourRate')}:
                    </Typography>
                  </Box>
                  <Typography variant='body2' color='textPrimary'>
                    {formatMulDivTokenAmount(
                      syrup.rewardRate,
                      GlobalConst.utils.ONEDAYSECONDS,
                    )}{' '}
                    {syrupCurrency.symbol} / {t('day')}
                  </Typography>
                </Box>
              </Box>
            )}
          </Box>
        </>
      )}
    </>
  );
}

AnalyticsLiquidityChart: React.FC = () => {
  const { palette } = useTheme();
  const { globalData } = useGlobalData();
  const [durationIndex, setDurationIndex] = useState(
    GlobalConst.analyticChart.ONE_MONTH_CHART,
  );
  const [globalChartData, updateGlobalChartData] = useState<any[] | null>(null);

  useEffect(() => {
    const fetchChartData = async () => {
      updateGlobalChartData(null);
      const [newChartData] = await getChartData(
        durationIndex === GlobalConst.analyticChart.ALL_CHART
          ? 0
          : getChartStartTime(durationIndex),
      );
      if (newChartData) {
        const chartData = getLimitedData(
          newChartData,
          GlobalConst.analyticChart.CHART_COUNT,
        );
        updateGlobalChartData(chartData);
      }
    };
    fetchChartData();
  }, [updateGlobalChartData, durationIndex]);

  const liquidityPercentColor = getPriceColor(
    globalData ? Number(globalData.liquidityChangeUSD) : 0,
    palette,
  );

  const yAxisValues = useMemo(() => {
    if (globalChartData) {
      const dailyVolumes: number[] = globalChartData.map((value: any) =>
        Number(value.totalLiquidityUSD),
      );
      // this is for defining the scale for the liquidity values to present in graph. Liquidity values are more than 100M so set the min and max amount with rounding after dividing into 20000000 to show all liquidity values into the graph
      const minVolume =
        Math.floor(Math.min(...dailyVolumes) / 20000000) * 20000000;
      const maxVolume =
        Math.ceil(Math.max(...dailyVolumes) / 20000000) * 20000000;
      const values = [];
      // show 10 values in the y axis of the graph
      const step = (maxVolume - minVolume) / 10;
      for (let i = maxVolume; i >= minVolume; i -= step) {
        values.push(i);
      }
      return values;
    } else {
      return undefined;
    }
  }, [globalChartData]);

  return (
    <>
      <Box display='flex' justifyContent='space-between'>
        <Typography
          variant='caption'
          style={{ color: palette.text.disabled, fontWeight: 'bold' }}
        >
          LIQUIDITY
        </Typography>
        <ChartType
          typeTexts={GlobalData.analytics.CHART_DURATION_TEXTS}
          chartTypes={GlobalData.analytics.CHART_DURATIONS}
          chartType={durationIndex}
          setChartType={setDurationIndex}
        />
      </Box>
      {globalData ? (
        <Box mt={0.5} display='flex' alignItems='center'>
          <Typography variant='h5' style={{ color: palette.text.primary }}>
            ${formatCompact(globalData.totalLiquidityUSD)}
          </Typography>
          <Box
            ml={1}
            height={23}
            px={1}
            borderRadius={40}
            bgcolor={liquidityPercentColor.bgColor}
            color={liquidityPercentColor.textColor}
          >
            <Typography variant='caption'>
              {`${globalData.liquidityChangeUSD > 0 ? '+' : ''}
                      ${globalData.liquidityChangeUSD.toLocaleString()}`}
              %
            </Typography>
          </Box>
        </Box>
      ) : (
        <Box my={0.5}>
          <Skeleton variant='rect' width='100%' height={24} />
        </Box>
      )}
      <Box>
        <Typography style={{ color: palette.text.disabled }} variant='caption'>
          {dayjs().format('MMM DD, YYYY')}
        </Typography>
      </Box>
      <Box mt={2}>
        {globalChartData ? (
          <AreaChart
            data={globalChartData.map((value: any) =>
              Number(value.totalLiquidityUSD),
            )}
            yAxisValues={yAxisValues}
            dates={globalChartData.map((value: any) =>
              dayjs(value.date * 1000)
                .add(1, 'day')
                .unix(),
            )}
            width='100%'
            height={250}
            categories={getChartDates(globalChartData, durationIndex)}
          />
        ) : (
          <Skeleton variant='rect' width='100%' height={223} />
        )}
      </Box>
    </>
  );
}

AnalyticsVolumeChart: React.FC = () => {
  const { palette } = useTheme();
  const volumeTypes = [DAY_VOLUME, WEEK_VOLUME];
  const volumeTypeTexts = ['D', 'W'];
  const [volumeIndex, setVolumeIndex] = useState(DAY_VOLUME);
  const [durationIndex, setDurationIndex] = useState(
    GlobalConst.analyticChart.ONE_MONTH_CHART,
  );
  const [selectedVolumeIndex, setSelectedVolumeIndex] = useState(-1);
  const { globalData } = useGlobalData();
  const [globalChartData, updateGlobalChartData] = useState<any>(null);

  useEffect(() => {
    const fetchChartData = async () => {
      updateGlobalChartData(null);
      const [newChartData, newWeeklyData] = await getChartData(
        durationIndex === GlobalConst.analyticChart.ALL_CHART
          ? 0
          : getChartStartTime(durationIndex),
      );
      if (newChartData && newWeeklyData) {
        const dayItems = getLimitedData(
          newChartData,
          GlobalConst.analyticChart.CHART_COUNT,
        );
        const weekItems = getLimitedData(
          newWeeklyData,
          GlobalConst.analyticChart.CHART_COUNT,
        );
        updateGlobalChartData({ day: dayItems, week: weekItems });
      }
    };
    fetchChartData();
  }, [updateGlobalChartData, durationIndex]);

  const liquidityWeeks = useMemo(() => {
    if (globalChartData) {
      const dates: string[] = [];
      globalChartData.week.forEach((value: any, ind: number) => {
        const month = formatDateFromTimeStamp(Number(value.date), 'MMM');
        const monthLastDate =
          ind > 0
            ? formatDateFromTimeStamp(
                Number(globalChartData.week[ind - 1].date),
                'MMM',
              )
            : '';
        if (monthLastDate !== month) {
          dates.push(month);
        }
        if (
          durationIndex === GlobalConst.analyticChart.ONE_MONTH_CHART ||
          durationIndex === GlobalConst.analyticChart.THREE_MONTH_CHART
        ) {
          const dateStr = formatDateFromTimeStamp(Number(value.date), 'D');
          if (Number(dateStr) % 2 === 0) {
            //Select dates(one date per 2 weeks) for x axis values of volume chart on week mode
            dates.push(dateStr);
          }
        }
      });
      return dates;
    } else {
      return [];
    }
  }, [globalChartData, durationIndex]);

  const getVolumePercent = (volumeIndex: number) => {
    if (globalChartData && selectedVolumeIndex > 0) {
      const volumeDataArr = [globalChartData.day, globalChartData.week];
      const volumeData = volumeDataArr[volumeIndex];
      if (!volumeData || volumeData.length <= 1) return 0;
      const currentVolumeIndex = Math.min(
        selectedVolumeIndex,
        volumeData.length - 1,
      );
      const currentVolumeData = volumeData[currentVolumeIndex];
      const prevVolumeData = volumeData[currentVolumeIndex - 1];
      let currentVolume = 0;
      let prevVolume = 0;
      switch (volumeIndex) {
        case WEEK_VOLUME:
          currentVolume = currentVolumeData.weeklyVolumeUSD;
          prevVolume = prevVolumeData.weeklyVolumeUSD;
          break;
        case DAY_VOLUME:
          currentVolume = currentVolumeData.dailyVolumeUSD;
          prevVolume = prevVolumeData.dailyVolumeUSD;
          break;
      }
      if (prevVolume <= 0) return 0;
      return (currentVolume / prevVolume) * 100 - 100;
    } else if (globalData && selectedVolumeIndex === -1) {
      switch (volumeIndex) {
        case WEEK_VOLUME:
          return globalData.weeklyVolumeChange;
        case DAY_VOLUME:
          return globalData.volumeChangeUSD;
        default:
          return 0;
      }
    } else {
      return 0;
    }
  };

  const volumeDates = useMemo(() => {
    if (selectedVolumeIndex > -1) {
      if (volumeIndex === DAY_VOLUME) {
        return formatDateFromTimeStamp(
          Number(globalChartData.day[selectedVolumeIndex].date),
          'MMM DD, YYYY',
        );
      } else {
        const weekStart = formatDateFromTimeStamp(
          Number(
            globalChartData.week[Math.max(0, selectedVolumeIndex - 1)].date,
          ),
          'MMM DD, YYYY',
          selectedVolumeIndex > 0 ? 2 : -5,
        );
        const weekEnd = formatDateFromTimeStamp(
          Number(globalChartData.week[selectedVolumeIndex].date),
          'MMM DD, YYYY',
        );
        return `${weekStart} - ${weekEnd}`;
      }
    }
    return '';
  }, [globalChartData, selectedVolumeIndex, volumeIndex]);

  const barChartData = useMemo(() => {
    if (globalChartData) {
      return volumeIndex === WEEK_VOLUME
        ? globalChartData.week.map((value: any) => value.weeklyVolumeUSD)
        : globalChartData.day.map((value: any) => value.dailyVolumeUSD);
    } else {
      return [];
    }
  }, [globalChartData, volumeIndex]);

  const volumePercentColor = getPriceColor(
    Number(getVolumePercent(volumeIndex)),
    palette,
  );

  return (
    <>
      <Box>
        <Box display='flex' justifyContent='space-between'>
          <Typography
            variant='caption'
            style={{ color: palette.text.disabled, fontWeight: 'bold' }}
          >
            VOLUME {selectedVolumeIndex === -1 ? '(24hr)' : ''}
          </Typography>
          <ChartType
            chartTypes={volumeTypes}
            typeTexts={volumeTypeTexts}
            chartType={volumeIndex}
            setChartType={setVolumeIndex}
          />
        </Box>
        <Box
          mt={0.5}
          display='flex'
          alignItems='flex-start'
          justifyContent='space-between'
        >
          {globalChartData && globalData ? (
            <Box flex={1} mr={2}>
              <Box display='flex' alignItems='center'>
                <Typography
                  variant='h5'
                  style={{ color: palette.text.primary }}
                >
                  $
                  {formatCompact(
                    selectedVolumeIndex > -1
                      ? volumeIndex === DAY_VOLUME
                        ? globalChartData.day[selectedVolumeIndex]
                            .dailyVolumeUSD
                        : globalChartData.week[selectedVolumeIndex]
                            .weeklyVolumeUSD
                      : volumeIndex === DAY_VOLUME
                      ? globalData.oneDayVolumeUSD
                      : globalData.oneWeekVolume,
                  )}
                </Typography>
                <Box
                  ml={1}
                  height={23}
                  px={1}
                  borderRadius={40}
                  bgcolor={volumePercentColor.bgColor}
                  color={volumePercentColor.textColor}
                >
                  <Typography variant='caption'>
                    {`${getVolumePercent(volumeIndex) > 0 ? '+' : ''}
                      ${getVolumePercent(volumeIndex).toLocaleString()}`}
                    %
                  </Typography>
                </Box>
              </Box>
              <Box height={21}>
                <Typography
                  style={{ color: palette.text.disabled }}
                  variant='caption'
                >
                  {volumeDates}
                </Typography>
              </Box>
            </Box>
          ) : (
            <Box mr={2} flex={1}>
              <Skeleton variant='rect' width='100%' height={24} />
            </Box>
          )}
          <ChartType
            chartTypes={GlobalData.analytics.CHART_DURATIONS}
            typeTexts={GlobalData.analytics.CHART_DURATION_TEXTS}
            chartType={durationIndex}
            setChartType={setDurationIndex}
          />
        </Box>
      </Box>
      <Box mt={2}>
        {globalChartData ? (
          <BarChart
            height={200}
            data={barChartData}
            categories={
              volumeIndex === WEEK_VOLUME
                ? liquidityWeeks
                : getChartDates(globalChartData.day, durationIndex)
            }
            onHover={(ind) => setSelectedVolumeIndex(ind)}
            onMouseLeave={() => {
              setSelectedVolumeIndex(-1);
            }}
          />
        ) : (
          <Skeleton variant='rect' width='100%' height={250} />
        )}
      </Box>
    </>
  );
}

AnalyticsPairChart: React.FC<{ pairData: any }> = ({ pairData }) => {
  const classes = useStyles();
  const { palette } = useTheme();
  const match = useRouteMatch<{ id: string }>();
  const pairAddress = match.params.id;
  const [pairChartData, setPairChartData] = useState<any[] | null>(null);
  const [durationIndex, setDurationIndex] = useState(
    GlobalConst.analyticChart.ONE_MONTH_CHART,
  );

  const usingUtVolume =
    pairData &&
    pairData.oneDayVolumeUSD === 0 &&
    !!pairData.oneDayVolumeUntracked;
  const fees =
    pairData && (pairData.oneDayVolumeUSD || pairData.oneDayVolumeUSD === 0)
      ? usingUtVolume
        ? (
            Number(pairData.oneDayVolumeUntracked) *
            GlobalConst.utils.FEEPERCENT
          ).toLocaleString()
        : (
            Number(pairData.oneDayVolumeUSD) * GlobalConst.utils.FEEPERCENT
          ).toLocaleString()
      : '-';
  const [chartIndex, setChartIndex] = useState(CHART_VOLUME);
  const chartIndexes = [CHART_VOLUME, CHART_LIQUIDITY, CHART_FEES];
  const chartIndexTexts = ['Volume', 'Liquidity', 'Fees'];

  const chartData = useMemo(() => {
    if (!pairChartData) return;
    return pairChartData.map((item: any) => {
      switch (chartIndex) {
        case CHART_VOLUME:
          return Number(item.dailyVolumeUSD);
        case CHART_LIQUIDITY:
          return Number(item.reserveUSD);
        case CHART_FEES:
          return Number(item.dailyVolumeUSD) * GlobalConst.utils.FEEPERCENT;
        default:
          return;
      }
    });
  }, [pairChartData, chartIndex]);

  const currentData = useMemo(() => {
    if (!pairData) return;
    switch (chartIndex) {
      case CHART_VOLUME:
        return pairData.oneDayVolumeUSD;
      case CHART_LIQUIDITY:
        return pairData.reserveUSD ?? pairData.trackedReserveUSD;
      case CHART_FEES:
        return fees;
      default:
        return;
    }
  }, [pairData, chartIndex, fees]);

  const currentPercent = useMemo(() => {
    if (!pairData) return;
    switch (chartIndex) {
      case CHART_VOLUME:
        return pairData.volumeChangeUSD;
      case CHART_LIQUIDITY:
        return pairData.liquidityChangeUSD;
      case CHART_FEES:
        return usingUtVolume
          ? pairData.volumeChangeUntracked
          : pairData.volumeChangeUSD;
      default:
        return;
    }
  }, [pairData, chartIndex, usingUtVolume]);

  useEffect(() => {
    async function fetchPairChartData() {
      setPairChartData(null);
      const chartData = await getPairChartData(
        pairAddress,
        durationIndex === GlobalConst.analyticChart.ALL_CHART
          ? 0
          : getChartStartTime(durationIndex),
      );
      if (chartData && chartData.length > 0) {
        const newChartData = getLimitedData(
          chartData,
          GlobalConst.analyticChart.CHART_COUNT,
        );
        setPairChartData(newChartData);
      }
    }
    fetchPairChartData();
  }, [pairAddress, durationIndex]);

  const currentPercentColor = getPriceColor(Number(currentPercent), palette);

  return (
    <>
      <Box display='flex' flexWrap='wrap' justifyContent='space-between'>
        <Box mt={1.5}>
          <Typography variant='caption'>
            {chartIndexTexts[chartIndex]}
          </Typography>
          <Box mt={1}>
            {currentPercent && currentData ? (
              <>
                <Box display='flex' alignItems='center'>
                  <Typography
                    variant='h4'
                    style={{ color: palette.text.primary }}
                  >
                    $
                    {currentData > 100000
                      ? formatCompact(currentData)
                      : currentData.toLocaleString()}
                  </Typography>
                  <Box
                    className={classes.priceChangeWrapper}
                    ml={1}
                    bgcolor={currentPercentColor.bgColor}
                    color={currentPercentColor.textColor}
                  >
                    <Typography variant='body2'>
                      {getFormattedPrice(Number(currentPercent))}%
                    </Typography>
                  </Box>
                </Box>
                <Box>
                  <Typography variant='caption'>
                    {dayjs().format('MMM DD, YYYY')}
                  </Typography>
                </Box>
              </>
            ) : (
              <Skeleton variant='rect' width='120px' height='30px' />
            )}
          </Box>
        </Box>
        <Box display='flex' flexDirection='column' alignItems='flex-end'>
          <Box mt={1.5}>
            <ChartType
              chartTypes={chartIndexes}
              typeTexts={chartIndexTexts}
              chartType={chartIndex}
              setChartType={setChartIndex}
            />
          </Box>
          <Box mt={1.5}>
            <ChartType
              chartTypes={GlobalData.analytics.CHART_DURATIONS}
              typeTexts={GlobalData.analytics.CHART_DURATION_TEXTS}
              chartType={durationIndex}
              setChartType={setDurationIndex}
            />
          </Box>
        </Box>
      </Box>
      <Box mt={2} width={1}>
        {chartData && pairChartData ? (
          <AreaChart
            data={chartData}
            yAxisValues={getYAXISValuesAnalytics(chartData)}
            dates={pairChartData.map((value: any) =>
              dayjs(value.date * 1000)
                .add(1, 'day')
                .unix(),
            )}
            width='100%'
            height={240}
            categories={getChartDates(pairChartData, durationIndex)}
          />
        ) : (
          <Skeleton variant='rect' width='100%' height={217} />
        )}
      </Box>
    </>
  );
}

AnalyticsTokenChart: React.FC<{ token: any }> = ({ token }) => {
  const classes = useStyles();
  const { palette } = useTheme();
  const match = useRouteMatch<{ id: string }>();
  const tokenAddress = match.params.id;
  const [tokenChartData, updateTokenChartData] = useState<any>(null);
  const chartIndexes = [CHART_VOLUME, CHART_LIQUIDITY, CHART_PRICE];
  const chartIndexTexts = ['Volume', 'Liquidity', 'Price'];
  const [chartIndex, setChartIndex] = useState(CHART_VOLUME);
  const [durationIndex, setDurationIndex] = useState(
    GlobalConst.analyticChart.ONE_MONTH_CHART,
  );

  const chartData = useMemo(() => {
    if (!tokenChartData) return;
    return tokenChartData.map((item: any) => {
      switch (chartIndex) {
        case CHART_VOLUME:
          return Number(item.dailyVolumeUSD);
        case CHART_LIQUIDITY:
          return Number(item.totalLiquidityUSD);
        case CHART_PRICE:
          return Number(item.priceUSD);
        default:
          return;
      }
    });
  }, [tokenChartData, chartIndex]);

  const currentData = useMemo(() => {
    if (!token) return;
    switch (chartIndex) {
      case CHART_VOLUME:
        return token.oneDayVolumeUSD;
      case CHART_LIQUIDITY:
        return token.totalLiquidityUSD;
      case CHART_PRICE:
        return token.priceUSD;
      default:
        return;
    }
  }, [token, chartIndex]);

  const currentPercent = useMemo(() => {
    if (!token) return;
    switch (chartIndex) {
      case CHART_VOLUME:
        return token.volumeChangeUSD;
      case CHART_LIQUIDITY:
        return token.liquidityChangeUSD;
      case CHART_PRICE:
        return token.priceChangeUSD;
      default:
        return;
    }
  }, [token, chartIndex]);

  useEffect(() => {
    async function fetchTokenChartData() {
      updateTokenChartData(null);
      const chartData = await getTokenChartData(
        tokenAddress,
        durationIndex === GlobalConst.analyticChart.ALL_CHART
          ? 0
          : getChartStartTime(durationIndex),
      );
      if (chartData) {
        const newChartData = getLimitedData(
          chartData,
          GlobalConst.analyticChart.CHART_COUNT,
        );
        updateTokenChartData(newChartData);
      }
    }
    fetchTokenChartData();
  }, [updateTokenChartData, tokenAddress, durationIndex]);

  const currentPercentColor = getPriceColor(Number(currentPercent), palette);

  return (
    <>
      <Box display='flex' flexWrap='wrap' justifyContent='space-between'>
        <Box mt={1.5}>
          <Typography variant='caption'>
            {chartIndexTexts[chartIndex]}
          </Typography>
          <Box mt={1}>
            {currentData && currentPercent ? (
              <>
                <Box display='flex' alignItems='center'>
                  <Typography
                    variant='h4'
                    style={{ color: palette.text.primary }}
                  >
                    $
                    {currentData > 100000
                      ? formatCompact(currentData)
                      : formatNumber(currentData)}
                  </Typography>
                  <Box
                    className={classes.priceChangeWrapper}
                    ml={1}
                    bgcolor={currentPercentColor.bgColor}
                    color={currentPercentColor.textColor}
                  >
                    <Typography variant='body2'>
                      {getFormattedPrice(Number(currentPercent))}%
                    </Typography>
                  </Box>
                </Box>
                <Box>
                  <Typography variant='caption'>
                    {dayjs().format('MMM DD, YYYY')}
                  </Typography>
                </Box>
              </>
            ) : (
              <Skeleton variant='rect' width='120px' height='30px' />
            )}
          </Box>
        </Box>
        <Box display='flex' flexDirection='column' alignItems='flex-end'>
          <Box mt={1.5}>
            <ChartType
              chartTypes={chartIndexes}
              typeTexts={chartIndexTexts}
              chartType={chartIndex}
              setChartType={setChartIndex}
            />
          </Box>
          <Box mt={1.5}>
            <ChartType
              chartTypes={GlobalData.analytics.CHART_DURATIONS}
              typeTexts={GlobalData.analytics.CHART_DURATION_TEXTS}
              chartType={durationIndex}
              setChartType={setDurationIndex}
            />
          </Box>
        </Box>
      </Box>
      <Box mt={2} width={1}>
        {tokenChartData ? (
          <AreaChart
            data={chartData}
            yAxisValues={getYAXISValuesAnalytics(chartData)}
            dates={tokenChartData.map((value: any) =>
              dayjs(value.date * 1000)
                .add(1, 'day')
                .unix(),
            )}
            width='100%'
            height={240}
            categories={getChartDates(tokenChartData, durationIndex)}
          />
        ) : (
          <Skeleton variant='rect' width='100%' height={217} />
        )}
      </Box>
    </>
  );
}

LiquidityPoolRow: React.FC<{
  pair: any;
  key: number;
}> = ({ pair, key }) => {
  const classes = useStyles();
  const { palette, breakpoints } = useTheme();
  const daysCurrentYear = getDaysCurrentYear();
  const isMobile = useMediaQuery(breakpoints.down('xs'));

  const dayVolumeUSD =
    Number(
      pair.oneDayVolumeUSD ? pair.oneDayVolumeUSD : pair.oneDayVolumeUntracked,
    ) *
    GlobalConst.utils.FEEPERCENT *
    daysCurrentYear *
    100;
  const trackReserveUSD = Number(
    pair.oneDayVolumeUSD ? pair.trackedReserveUSD : pair.reserveUSD,
  );
  const apy =
    isNaN(dayVolumeUSD) || trackReserveUSD === 0
      ? 0
      : dayVolumeUSD / trackReserveUSD;
  const liquidity = pair.trackedReserveUSD
    ? pair.trackedReserveUSD
    : pair.reserveUSD;
  const volume = pair.oneDayVolumeUSD
    ? pair.oneDayVolumeUSD
    : pair.oneDayVolumeUntracked;
  const token0 = useCurrency(pair.token0.id);
  const token1 = useCurrency(pair.token1.id);
  return (
    <Box
      key={key}
      display='flex'
      flexWrap='wrap'
      className={classes.liquidityContent}
      padding={2}
    >
      <Box display='flex' alignItems='center' width={isMobile ? 1 : 0.5}>
        <DoubleCurrencyLogo
          currency0={token0 ?? undefined}
          currency1={token1 ?? undefined}
          size={28}
        />
        <Typography variant='body2' style={{ marginLeft: 12 }}>
          {pair.token0.symbol.toUpperCase()} /{' '}
          {pair.token1.symbol.toUpperCase()}
        </Typography>
      </Box>
      <Box
        width={isMobile ? 1 : 0.2}
        mt={isMobile ? 2.5 : 0}
        display='flex'
        justifyContent='space-between'
      >
        {isMobile && (
          <Typography variant='body2' style={{ color: palette.text.secondary }}>
            TVL
          </Typography>
        )}
        <Typography variant='body2'>${formatCompact(liquidity)}</Typography>
      </Box>
      <Box
        width={isMobile ? 1 : 0.15}
        mt={isMobile ? 1 : 0}
        display='flex'
        justifyContent='space-between'
      >
        {isMobile && (
          <Typography variant='body2' style={{ color: palette.text.secondary }}>
            24H Volume
          </Typography>
        )}
        <Typography variant='body2'>${formatCompact(volume)}</Typography>
      </Box>
      <Box
        width={isMobile ? 1 : 0.15}
        mt={isMobile ? 1 : 0}
        display='flex'
        justifyContent={isMobile ? 'space-between' : 'flex-end'}
      >
        {isMobile && (
          <Typography variant='body2' style={{ color: palette.text.secondary }}>
            APY
          </Typography>
        )}
        <Typography
          variant='body2'
          align='right'
          style={{
            color: apy < 0 ? palette.error.main : palette.success.main,
          }}
        >
          {apy.toFixed(2)}%
        </Typography>
      </Box>
    </Box>
  );
}