diff --git a/src/components/Footer/MarketStats/Tooltip.module.css b/src/components/Footer/MarketStats/Tooltip.module.css deleted file mode 100644 index 430fc33ea..000000000 --- a/src/components/Footer/MarketStats/Tooltip.module.css +++ /dev/null @@ -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); -} diff --git a/src/components/Footer/MarketStats/Tooltip.tsx b/src/components/Footer/MarketStats/Tooltip.tsx deleted file mode 100644 index d2802d98d..000000000 --- a/src/components/Footer/MarketStats/Tooltip.tsx +++ /dev/null @@ -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 ( - <> - - - - ) -} diff --git a/src/components/Footer/MarketStats/Total.tsx b/src/components/Footer/MarketStats/Total.tsx index 06f6f7fdd..e23a426c1 100644 --- a/src/components/Footer/MarketStats/Total.tsx +++ b/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 ( <> -

- {total.orders} orders across{' '} - {total.nfts} assets with{' '} - {total.datatokens} different datatokens. -

- {' '} - TVL across{' '} - {total.pools} asset pools that contain{' '} - - , plus datatokens for each pool. + {total.orders} orders across{' '} + {total.nfts} assets with{' '} + {total.datatokens} different datatokens. ) } diff --git a/src/components/Footer/MarketStats/_queries.ts b/src/components/Footer/MarketStats/_queries.ts index d63f75f1c..d6edcc6a0 100644 --- a/src/components/Footer/MarketStats/_queries.ts +++ b/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 - } - } } } ` diff --git a/src/components/Footer/MarketStats/_types.ts b/src/components/Footer/MarketStats/_types.ts index f9ed299fe..7f3d89939 100644 --- a/src/components/Footer/MarketStats/_types.ts +++ b/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 diff --git a/src/components/Footer/MarketStats/index.tsx b/src/components/Footer/MarketStats/index.tsx index d50d8ff2b..665be6cd1 100644 --- a/src/components/Footer/MarketStats/index.tsx +++ b/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() const [data, setData] = useState<{ [chainId: number]: FooterStatsValuesGlobalStatistics }>() - const [totalValueLockedInOcean, setTotalValueLockedInOcean] = - useState() - const [totalOceanLiquidity, setTotalOceanLiquidity] = useState() - const [poolCount, setPoolCount] = useState() 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 (
@@ -146,12 +111,7 @@ export default function MarketStats(): ReactElement { + } />