completed task - update analytics page with total tvl, tvl, and dragon lair info

public/locales/en.json

@@ -699,5 +699,7 @@
   "proposals": "Proposals",
   "termsofuse": "Terms of Use",
   "walletDescription": "Connecting your wallet is like \"logging in\" on Web3. Select your wallet from the options to get started.",
-  "failedToFetchAnalyticsSearch": "Failed to fetch tokens and pairs."
+  "failedToFetchAnalyticsSearch": "Failed to fetch tokens and pairs.",
+  "liquidityLocked": "LIQUIDITY LOCKED",
+  "totalTVL": "TOTAL TVL"
 }

src/index.scss

@@ -239,6 +239,10 @@ wcm-modal {
   display: flex;
 }
 
+.flex-grow-1 {
+  flex-grow: 1;
+}
+
 .flex-col {
   flex-direction: column;
 }

src/pages/AnalyticsPage/AnalyticsExtraInfo.tsx

@@ -0,0 +1,95 @@
+import { Box, Grid, Typography } from '@material-ui/core';
+import Skeleton from '@material-ui/lab/Skeleton';
+
+import { formatCompact, useLairDQUICKAPY } from 'utils';
+import { useNewLairInfo } from 'state/stake/hooks';
+import { DLQUICK } from 'constants/v3/addresses';
+import { useUSDCPriceFromAddress } from 'utils/useUSDCPrice';
+
+import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from 'react';
+
+interface AnalyticsInfoProps {
+  data: any;
+  chainId: any;
+}
+
+const AnalyticsExtraInfo: React.FC<AnalyticsInfoProps> = ({
+  data,
+  chainId,
+}) => {
+  const { t } = useTranslation();
+
+  const [rewards, setRewards] = useState('0');
+  const [totalTVL, setTotalTVL] = useState('0');
+  const lairInfo = useNewLairInfo();
+  const dQUICKAPY = useLairDQUICKAPY(true, lairInfo);
+  const quickToken = DLQUICK[chainId];
+  const quickPrice = useUSDCPriceFromAddress(quickToken?.address);
+
+  useEffect(() => {
+    if (lairInfo && quickPrice) {
+      const balance = Number(lairInfo.totalQuickBalance.toExact());
+      if (balance > 0) {
+        const newReward = balance * quickPrice;
+        const totalTVLValue = data.totalLiquidityUSD + newReward;
+
+        const formattedReward = formatCompact(newReward, 18, 3, 3);
+        // if (formattedReward !== rewards && rewards !== '0') {
+        setRewards(formattedReward);
+        // }
+
+        const formattedTotalTVL = formatCompact(totalTVLValue, 18, 5, 5);
+        // if (formattedTotalTVL !== totalTVL && totalTVL !== '0') {
+        setTotalTVL(formattedTotalTVL);
+        // }
+      }
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [quickPrice, lairInfo, dQUICKAPY, data]);
+
+  return (
+    <Box mb={3}>
+      <Grid container spacing={4}>
+        <Grid item xs={12} sm={12} md={4}>
+          <Box className='panel'>
+            <span className='text-disabled text-bold text-uppercase'>
+              {t('totalTVL')}
+            </span>
+            {totalTVL === '0' ? (
+              <Skeleton width='100%' height={40} />
+            ) : (
+              <h5>${totalTVL}</h5>
+            )}
+          </Box>
+        </Grid>
+        <Grid item xs={12} sm={12} md={4}>
+          <Box className='panel'>
+            <span className='text-disabled text-bold text-uppercase'>
+              {t('liquidityLocked')}
+            </span>
+            {data ? (
+              <h5>${formatCompact(data.totalLiquidityUSD, 18, 5, 5)}</h5>
+            ) : (
+              <Skeleton width='100%' height={40} />
+            )}
+          </Box>
+        </Grid>
+        <Grid item xs={12} sm={12} md={4}>
+          <Box className='panel'>
+            <span className='text-disabled text-bold text-uppercase'>
+              {t('dragonLair')}
+            </span>
+            {totalTVL === '0' ? (
+              <Skeleton width='100%' height={40} />
+            ) : (
+              <h5>${rewards}</h5>
+            )}
+          </Box>
+        </Grid>
+      </Grid>
+    </Box>
+  );
+};
+
+export default AnalyticsExtraInfo;

src/pages/AnalyticsPage/AnalyticsOverview.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { Box, Grid } from '@material-ui/core';
+import { Box, Grid, Typography } from '@material-ui/core';
 import { useHistory } from 'react-router-dom';
 import Skeleton from '@material-ui/lab/Skeleton';
 import { ArrowForwardIos } from '@material-ui/icons';
@@ -14,6 +14,8 @@ import { useTranslation } from 'react-i18next';
 import { useDispatch } from 'react-redux';
 import { setAnalyticsLoaded } from 'state/analytics/actions';
 import { useActiveWeb3React, useAnalyticsVersion } from 'hooks';
+import AnalyticsExtraInfo from './AnalyticsExtraInfo';
+import { ChainId } from '@uniswap/sdk';
 
 dayjs.extend(utc);
 
@@ -121,6 +123,9 @@ const AnalyticsOverview: React.FC = () => {
 
   return (
     <Box width='100%' mb={3}>
+      {(chainId === ChainId.DOGECHAIN || chainId === ChainId.MATIC) && (
+        <AnalyticsExtraInfo data={globalData} chainId={chainId} />
+      )}
       <Grid container spacing={4}>
         <Grid item xs={12} sm={12} md={6}>
           <Box className='panel' width={1}>