remove tvl from footr (#1596)

* remove tvl from footr

* add tooltip

* add space back

src/components/Footer/MarketStats/Tooltip.module.css

@@ -1,26 +0,0 @@
-.tooltipStats {
-  margin-bottom: calc(var(--spacer) / 3);
-  padding-bottom: calc(var(--spacer) / 3);
-  border-bottom: 1px solid var(--border-color);
-}
-
-.statsList {
-  composes: statsList from './index.module.css';
-  padding-bottom: 0;
-}
-
-.statsList,
-.note {
-  padding: calc(var(--spacer) / 4);
-}
-
-.note {
-  margin-bottom: 0;
-  padding-top: 0;
-  font-size: var(--font-size-mini);
-  color: var(--color-secondary);
-}
-
-.network {
-  font-weight: var(--font-weight-bold);
-}

src/components/Footer/MarketStats/Tooltip.tsx

@@ -1,47 +0,0 @@
-import React, { ReactElement } from 'react'
-import Conversion from '@shared/Price/Conversion'
-import PriceUnit from '@shared/Price/PriceUnit'
-import NetworkName from '@shared/NetworkName'
-import styles from './Tooltip.module.css'
-import { StatsValue } from './_types'
-import content from '../../../../content/footer.json'
-import Markdown from '@shared/Markdown'
-
-export default function MarketStatsTooltip({
-  totalValueLockedInOcean,
-  poolCount,
-  totalOceanLiquidity,
-  mainChainIds
-}: {
-  totalValueLockedInOcean: StatsValue
-  poolCount: StatsValue
-  totalOceanLiquidity: StatsValue
-  mainChainIds: number[]
-}): ReactElement {
-  return (
-    <>
-      <ul className={styles.statsList}>
-        {mainChainIds?.map((chainId, key) => (
-          <li className={styles.tooltipStats} key={key}>
-            <NetworkName networkId={chainId} className={styles.network} />
-            <br />
-            <Conversion
-              price={totalValueLockedInOcean?.[chainId] || '0'}
-              hideApproximateSymbol
-            />{' '}
-            <abbr title="Total Value Locked">TVL</abbr>
-            {' | '}
-            <strong>{poolCount?.[chainId] || '0'}</strong> pools
-            {' | '}
-            <PriceUnit
-              price={totalOceanLiquidity?.[chainId] || '0'}
-              symbol="OCEAN"
-              size="small"
-            />
-          </li>
-        ))}
-      </ul>
-      <Markdown className={styles.note} text={content.stats.note} />
-    </>
-  )
-}

src/components/Footer/MarketStats/Total.tsx

@@ -1,6 +1,4 @@
 import React, { ReactElement } from 'react'
-import Conversion from '@shared/Price/Conversion'
-import PriceUnit from '@shared/Price/PriceUnit'
 import { StatsTotal } from './_types'
 
 export default function MarketStatsTotal({
@@ -10,23 +8,9 @@ export default function MarketStatsTotal({
 }): ReactElement {
   return (
     <>
-      <p>
-        <strong>{total.orders}</strong> orders across{' '}
-        <strong>{total.nfts}</strong> assets with{' '}
-        <strong>{total.datatokens}</strong> different datatokens.
-      </p>
-      <Conversion
-        price={`${total.totalValueLockedInOcean}`}
-        hideApproximateSymbol
-      />{' '}
-      <abbr title="Total Value Locked">TVL</abbr> across{' '}
-      <strong>{total.pools}</strong> asset pools that contain{' '}
-      <PriceUnit
-        price={`${total.totalOceanLiquidity}`}
-        symbol="OCEAN"
-        size="small"
-      />
-      , plus datatokens for each pool.
+      <strong>{total.orders}</strong> orders across{' '}
+      <strong>{total.nfts}</strong> assets with{' '}
+      <strong>{total.datatokens}</strong> different datatokens.
     </>
   )
 }

src/components/Footer/MarketStats/_queries.ts

@@ -3,18 +3,9 @@ import { gql } from 'urql'
 export const queryGlobalStatistics = gql`
   query FooterStatsValues {
     globalStatistics {
-      poolCount
       nftCount
       datatokenCount
       orderCount
-      totalLiquidity {
-        value
-        token {
-          address
-          name
-          symbol
-        }
-      }
     }
   }
 `

src/components/Footer/MarketStats/_types.ts

@@ -3,9 +3,6 @@ export interface StatsValue {
 }
 
 export interface StatsTotal {
-  totalValueLockedInOcean: number
-  totalOceanLiquidity: number
-  pools: number
   nfts: number
   datatokens: number
   orders: number

src/components/Footer/MarketStats/index.tsx

@@ -1,6 +1,5 @@
 import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import { OperationContext } from 'urql'
-import Tooltip from '@shared/atoms/Tooltip'
 import { fetchData, getSubgraphUri } from '@utils/subgraph'
 import useNetworkMetadata, {
   filterNetworksByType
@@ -8,19 +7,15 @@ import useNetworkMetadata, {
 import { LoggerInstance } from '@oceanprotocol/lib'
 import styles from './index.module.css'
 import { FooterStatsValues_globalStatistics as FooterStatsValuesGlobalStatistics } from 'src/@types/subgraph/FooterStatsValues'
-import MarketStatsTooltip from './Tooltip'
 import MarketStatsTotal from './Total'
 import { queryGlobalStatistics } from './_queries'
-import { usePrices } from '@context/Prices'
-import { useUserPreferences } from '@context/UserPreferences'
-import Decimal from 'decimal.js'
-import { StatsTotal, StatsValue } from './_types'
+import { StatsTotal } from './_types'
 import { useMarketMetadata } from '@context/MarketMetadata'
+import Tooltip from '@shared/atoms/Tooltip'
+import Markdown from '@shared/Markdown'
+import content from '../../../../content/footer.json'
 
 const initialTotal: StatsTotal = {
-  totalValueLockedInOcean: 0,
-  totalOceanLiquidity: 0,
-  pools: 0,
   nfts: 0,
   datatokens: 0,
   orders: 0
@@ -29,17 +24,10 @@ const initialTotal: StatsTotal = {
 export default function MarketStats(): ReactElement {
   const { appConfig } = useMarketMetadata()
   const { networksList } = useNetworkMetadata()
-  const { currency } = useUserPreferences()
-  const { prices } = usePrices()
-
   const [mainChainIds, setMainChainIds] = useState<number[]>()
   const [data, setData] = useState<{
     [chainId: number]: FooterStatsValuesGlobalStatistics
   }>()
-  const [totalValueLockedInOcean, setTotalValueLockedInOcean] =
-    useState<StatsValue>()
-  const [totalOceanLiquidity, setTotalOceanLiquidity] = useState<StatsValue>()
-  const [poolCount, setPoolCount] = useState<StatsValue>()
   const [total, setTotal] = useState(initialTotal)
 
   //
@@ -98,34 +86,13 @@ export default function MarketStats(): ReactElement {
     const newTotal: StatsTotal = {
       ...initialTotal // always start calculating beginning from initial 0 values
     }
-    const newTVLInOcean: StatsValue = {}
-    const newTotalLiquidity: StatsValue = {}
-    const newPoolCount: StatsValue = {}
 
     for (const chainId of mainChainIds) {
-      const baseTokenValue = data[chainId]?.totalLiquidity[0]?.value
-
       try {
-        const totalValueLockedInOcean = baseTokenValue
-          ? new Decimal(baseTokenValue).mul(2)
-          : new Decimal(0)
-
-        newTVLInOcean[chainId] = `${totalValueLockedInOcean}`
-
-        const totalOceanLiquidity = Number(baseTokenValue) || 0
-
-        newTotalLiquidity[chainId] = `${totalOceanLiquidity}`
-
-        const poolCount = data[chainId]?.poolCount || 0
-
-        newPoolCount[chainId] = `${poolCount}`
         const nftCount = data[chainId]?.nftCount || 0
         const datatokenCount = data[chainId]?.datatokenCount || 0
         const orderCount = data[chainId]?.orderCount || 0
 
-        newTotal.totalValueLockedInOcean += totalValueLockedInOcean.toNumber()
-        newTotal.totalOceanLiquidity += totalOceanLiquidity
-        newTotal.pools += poolCount
         newTotal.nfts += nftCount
         newTotal.datatokens += datatokenCount
         newTotal.orders += orderCount
@@ -133,11 +100,9 @@ export default function MarketStats(): ReactElement {
         LoggerInstance.error('Error data manipulation: ', error.message)
       }
     }
-    setTotalValueLockedInOcean(newTVLInOcean)
-    setTotalOceanLiquidity(newTotalLiquidity)
-    setPoolCount(newPoolCount)
+
     setTotal(newTotal)
-  }, [data, mainChainIds, prices, currency])
+  }, [data, mainChainIds])
 
   return (
     <div className={styles.stats}>
@@ -146,12 +111,7 @@ export default function MarketStats(): ReactElement {
         <Tooltip
           className={styles.info}
           content={
-            <MarketStatsTooltip
-              totalValueLockedInOcean={totalValueLockedInOcean}
-              poolCount={poolCount}
-              totalOceanLiquidity={totalOceanLiquidity}
-              mainChainIds={mainChainIds}
-            />
+            <Markdown className={styles.note} text={content.stats.note} />
           }
         />
       </>