mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
remove tvl from footr (#1596)
* remove tvl from footr * add tooltip * add space back
This commit is contained in:
parent
7788086bcc
commit
cf3d268bef
@ -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);
|
|
||||||
}
|
|
@ -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} />
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
@ -1,6 +1,4 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import Conversion from '@shared/Price/Conversion'
|
|
||||||
import PriceUnit from '@shared/Price/PriceUnit'
|
|
||||||
import { StatsTotal } from './_types'
|
import { StatsTotal } from './_types'
|
||||||
|
|
||||||
export default function MarketStatsTotal({
|
export default function MarketStatsTotal({
|
||||||
@ -10,23 +8,9 @@ export default function MarketStatsTotal({
|
|||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<p>
|
|
||||||
<strong>{total.orders}</strong> orders across{' '}
|
<strong>{total.orders}</strong> orders across{' '}
|
||||||
<strong>{total.nfts}</strong> assets with{' '}
|
<strong>{total.nfts}</strong> assets with{' '}
|
||||||
<strong>{total.datatokens}</strong> different datatokens.
|
<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.
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -3,18 +3,9 @@ import { gql } from 'urql'
|
|||||||
export const queryGlobalStatistics = gql`
|
export const queryGlobalStatistics = gql`
|
||||||
query FooterStatsValues {
|
query FooterStatsValues {
|
||||||
globalStatistics {
|
globalStatistics {
|
||||||
poolCount
|
|
||||||
nftCount
|
nftCount
|
||||||
datatokenCount
|
datatokenCount
|
||||||
orderCount
|
orderCount
|
||||||
totalLiquidity {
|
|
||||||
value
|
|
||||||
token {
|
|
||||||
address
|
|
||||||
name
|
|
||||||
symbol
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
@ -3,9 +3,6 @@ export interface StatsValue {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export interface StatsTotal {
|
export interface StatsTotal {
|
||||||
totalValueLockedInOcean: number
|
|
||||||
totalOceanLiquidity: number
|
|
||||||
pools: number
|
|
||||||
nfts: number
|
nfts: number
|
||||||
datatokens: number
|
datatokens: number
|
||||||
orders: number
|
orders: number
|
||||||
|
@ -1,6 +1,5 @@
|
|||||||
import React, { ReactElement, useCallback, useEffect, useState } from 'react'
|
import React, { ReactElement, useCallback, useEffect, useState } from 'react'
|
||||||
import { OperationContext } from 'urql'
|
import { OperationContext } from 'urql'
|
||||||
import Tooltip from '@shared/atoms/Tooltip'
|
|
||||||
import { fetchData, getSubgraphUri } from '@utils/subgraph'
|
import { fetchData, getSubgraphUri } from '@utils/subgraph'
|
||||||
import useNetworkMetadata, {
|
import useNetworkMetadata, {
|
||||||
filterNetworksByType
|
filterNetworksByType
|
||||||
@ -8,19 +7,15 @@ import useNetworkMetadata, {
|
|||||||
import { LoggerInstance } from '@oceanprotocol/lib'
|
import { LoggerInstance } from '@oceanprotocol/lib'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { FooterStatsValues_globalStatistics as FooterStatsValuesGlobalStatistics } from 'src/@types/subgraph/FooterStatsValues'
|
import { FooterStatsValues_globalStatistics as FooterStatsValuesGlobalStatistics } from 'src/@types/subgraph/FooterStatsValues'
|
||||||
import MarketStatsTooltip from './Tooltip'
|
|
||||||
import MarketStatsTotal from './Total'
|
import MarketStatsTotal from './Total'
|
||||||
import { queryGlobalStatistics } from './_queries'
|
import { queryGlobalStatistics } from './_queries'
|
||||||
import { usePrices } from '@context/Prices'
|
import { StatsTotal } from './_types'
|
||||||
import { useUserPreferences } from '@context/UserPreferences'
|
|
||||||
import Decimal from 'decimal.js'
|
|
||||||
import { StatsTotal, StatsValue } from './_types'
|
|
||||||
import { useMarketMetadata } from '@context/MarketMetadata'
|
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 = {
|
const initialTotal: StatsTotal = {
|
||||||
totalValueLockedInOcean: 0,
|
|
||||||
totalOceanLiquidity: 0,
|
|
||||||
pools: 0,
|
|
||||||
nfts: 0,
|
nfts: 0,
|
||||||
datatokens: 0,
|
datatokens: 0,
|
||||||
orders: 0
|
orders: 0
|
||||||
@ -29,17 +24,10 @@ const initialTotal: StatsTotal = {
|
|||||||
export default function MarketStats(): ReactElement {
|
export default function MarketStats(): ReactElement {
|
||||||
const { appConfig } = useMarketMetadata()
|
const { appConfig } = useMarketMetadata()
|
||||||
const { networksList } = useNetworkMetadata()
|
const { networksList } = useNetworkMetadata()
|
||||||
const { currency } = useUserPreferences()
|
|
||||||
const { prices } = usePrices()
|
|
||||||
|
|
||||||
const [mainChainIds, setMainChainIds] = useState<number[]>()
|
const [mainChainIds, setMainChainIds] = useState<number[]>()
|
||||||
const [data, setData] = useState<{
|
const [data, setData] = useState<{
|
||||||
[chainId: number]: FooterStatsValuesGlobalStatistics
|
[chainId: number]: FooterStatsValuesGlobalStatistics
|
||||||
}>()
|
}>()
|
||||||
const [totalValueLockedInOcean, setTotalValueLockedInOcean] =
|
|
||||||
useState<StatsValue>()
|
|
||||||
const [totalOceanLiquidity, setTotalOceanLiquidity] = useState<StatsValue>()
|
|
||||||
const [poolCount, setPoolCount] = useState<StatsValue>()
|
|
||||||
const [total, setTotal] = useState(initialTotal)
|
const [total, setTotal] = useState(initialTotal)
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -98,34 +86,13 @@ export default function MarketStats(): ReactElement {
|
|||||||
const newTotal: StatsTotal = {
|
const newTotal: StatsTotal = {
|
||||||
...initialTotal // always start calculating beginning from initial 0 values
|
...initialTotal // always start calculating beginning from initial 0 values
|
||||||
}
|
}
|
||||||
const newTVLInOcean: StatsValue = {}
|
|
||||||
const newTotalLiquidity: StatsValue = {}
|
|
||||||
const newPoolCount: StatsValue = {}
|
|
||||||
|
|
||||||
for (const chainId of mainChainIds) {
|
for (const chainId of mainChainIds) {
|
||||||
const baseTokenValue = data[chainId]?.totalLiquidity[0]?.value
|
|
||||||
|
|
||||||
try {
|
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 nftCount = data[chainId]?.nftCount || 0
|
||||||
const datatokenCount = data[chainId]?.datatokenCount || 0
|
const datatokenCount = data[chainId]?.datatokenCount || 0
|
||||||
const orderCount = data[chainId]?.orderCount || 0
|
const orderCount = data[chainId]?.orderCount || 0
|
||||||
|
|
||||||
newTotal.totalValueLockedInOcean += totalValueLockedInOcean.toNumber()
|
|
||||||
newTotal.totalOceanLiquidity += totalOceanLiquidity
|
|
||||||
newTotal.pools += poolCount
|
|
||||||
newTotal.nfts += nftCount
|
newTotal.nfts += nftCount
|
||||||
newTotal.datatokens += datatokenCount
|
newTotal.datatokens += datatokenCount
|
||||||
newTotal.orders += orderCount
|
newTotal.orders += orderCount
|
||||||
@ -133,11 +100,9 @@ export default function MarketStats(): ReactElement {
|
|||||||
LoggerInstance.error('Error data manipulation: ', error.message)
|
LoggerInstance.error('Error data manipulation: ', error.message)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setTotalValueLockedInOcean(newTVLInOcean)
|
|
||||||
setTotalOceanLiquidity(newTotalLiquidity)
|
|
||||||
setPoolCount(newPoolCount)
|
|
||||||
setTotal(newTotal)
|
setTotal(newTotal)
|
||||||
}, [data, mainChainIds, prices, currency])
|
}, [data, mainChainIds])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.stats}>
|
<div className={styles.stats}>
|
||||||
@ -146,12 +111,7 @@ export default function MarketStats(): ReactElement {
|
|||||||
<Tooltip
|
<Tooltip
|
||||||
className={styles.info}
|
className={styles.info}
|
||||||
content={
|
content={
|
||||||
<MarketStatsTooltip
|
<Markdown className={styles.note} text={content.stats.note} />
|
||||||
totalValueLockedInOcean={totalValueLockedInOcean}
|
|
||||||
poolCount={poolCount}
|
|
||||||
totalOceanLiquidity={totalOceanLiquidity}
|
|
||||||
mainChainIds={mainChainIds}
|
|
||||||
/>
|
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
Loading…
Reference in New Issue
Block a user