mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
merge main into v4-c2d
This commit is contained in:
commit
9545788e3d
14
package-lock.json
generated
14
package-lock.json
generated
@ -10,7 +10,7 @@
|
|||||||
"hasInstallScript": true,
|
"hasInstallScript": true,
|
||||||
"license": "Apache-2.0",
|
"license": "Apache-2.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@coingecko/cryptoformat": "^0.4.4",
|
"@coingecko/cryptoformat": "^0.5.4",
|
||||||
"@loadable/component": "^5.15.2",
|
"@loadable/component": "^5.15.2",
|
||||||
"@oceanprotocol/art": "^3.2.0",
|
"@oceanprotocol/art": "^3.2.0",
|
||||||
"@oceanprotocol/lib": "^1.0.0",
|
"@oceanprotocol/lib": "^1.0.0",
|
||||||
@ -2136,9 +2136,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@coingecko/cryptoformat": {
|
"node_modules/@coingecko/cryptoformat": {
|
||||||
"version": "0.4.4",
|
"version": "0.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.4.4.tgz",
|
"resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.5.4.tgz",
|
||||||
"integrity": "sha512-AF4rgGY+BmSiks+ZjD4nVX+04a5CEriP3a/WA6xQicR+MHu+TSrAfHwts+IwsRsBTJ4wZAPEaPVyOzPo6zW98w==",
|
"integrity": "sha512-qAHbG/TjKbyPE0hRCeET1+8qBs4dtpXVyXDeSj0xhENLPBFW9tNTY2OOYr9Fw5fAylHJkCdhdn7Htk18ZSyxFw==",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">=10"
|
"node": ">=10"
|
||||||
}
|
}
|
||||||
@ -43149,9 +43149,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@coingecko/cryptoformat": {
|
"@coingecko/cryptoformat": {
|
||||||
"version": "0.4.4",
|
"version": "0.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.4.4.tgz",
|
"resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.5.4.tgz",
|
||||||
"integrity": "sha512-AF4rgGY+BmSiks+ZjD4nVX+04a5CEriP3a/WA6xQicR+MHu+TSrAfHwts+IwsRsBTJ4wZAPEaPVyOzPo6zW98w=="
|
"integrity": "sha512-qAHbG/TjKbyPE0hRCeET1+8qBs4dtpXVyXDeSj0xhENLPBFW9tNTY2OOYr9Fw5fAylHJkCdhdn7Htk18ZSyxFw=="
|
||||||
},
|
},
|
||||||
"@colors/colors": {
|
"@colors/colors": {
|
||||||
"version": "1.5.0",
|
"version": "1.5.0",
|
||||||
|
@ -17,12 +17,12 @@
|
|||||||
"type-check": "tsc --noEmit",
|
"type-check": "tsc --noEmit",
|
||||||
"deploy:s3": "bash scripts/deploy-s3.sh",
|
"deploy:s3": "bash scripts/deploy-s3.sh",
|
||||||
"postinstall": "husky install",
|
"postinstall": "husky install",
|
||||||
"codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.rinkeby.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/",
|
"codegen:apollo": "apollo client:codegen --endpoint=https://v4.subgraph.ropsten.oceanprotocol.com/subgraphs/name/oceanprotocol/ocean-subgraph --target typescript --tsFileExtension=d.ts --outputFlat src/@types/subgraph/",
|
||||||
"storybook": "cross-env NODE_ENV=test start-storybook -p 6006 --quiet",
|
"storybook": "cross-env NODE_ENV=test start-storybook -p 6006 --quiet",
|
||||||
"storybook:build": "cross-env NODE_ENV=test build-storybook"
|
"storybook:build": "cross-env NODE_ENV=test build-storybook"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@coingecko/cryptoformat": "^0.4.4",
|
"@coingecko/cryptoformat": "^0.5.4",
|
||||||
"@loadable/component": "^5.15.2",
|
"@loadable/component": "^5.15.2",
|
||||||
"@oceanprotocol/art": "^3.2.0",
|
"@oceanprotocol/art": "^3.2.0",
|
||||||
"@oceanprotocol/lib": "^1.0.0",
|
"@oceanprotocol/lib": "^1.0.0",
|
||||||
|
@ -18,7 +18,7 @@ import { getAccessDetails } from '@utils/accessDetailsAndPricing'
|
|||||||
import { useIsMounted } from '@hooks/useIsMounted'
|
import { useIsMounted } from '@hooks/useIsMounted'
|
||||||
import { useMarketMetadata } from './MarketMetadata'
|
import { useMarketMetadata } from './MarketMetadata'
|
||||||
|
|
||||||
interface AssetProviderValue {
|
export interface AssetProviderValue {
|
||||||
isInPurgatory: boolean
|
isInPurgatory: boolean
|
||||||
purgatoryData: Purgatory
|
purgatoryData: Purgatory
|
||||||
asset: AssetExtended
|
asset: AssetExtended
|
||||||
|
@ -5,7 +5,9 @@ export const opcQuery = gql`
|
|||||||
opc(id: 1) {
|
opc(id: 1) {
|
||||||
swapOceanFee
|
swapOceanFee
|
||||||
swapNonOceanFee
|
swapNonOceanFee
|
||||||
approvedTokens
|
approvedTokens {
|
||||||
|
id
|
||||||
|
}
|
||||||
id
|
id
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -36,7 +36,7 @@ function MarketMetadataProvider({
|
|||||||
|
|
||||||
opcData.push({
|
opcData.push({
|
||||||
chainId: appConfig.chainIdsSupported[i],
|
chainId: appConfig.chainIdsSupported[i],
|
||||||
approvedTokens: response.data?.opc.approvedTokens,
|
approvedTokens: response.data?.opc.approvedTokens?.map((x) => x.id),
|
||||||
swapApprovedFee: response.data?.opc.swapOceanFee,
|
swapApprovedFee: response.data?.opc.swapOceanFee,
|
||||||
swapNotApprovedFee: response.data?.opc.swapNonOceanFee
|
swapNotApprovedFee: response.data?.opc.swapNonOceanFee
|
||||||
} as OpcFee)
|
} as OpcFee)
|
||||||
|
@ -5,13 +5,14 @@ import AddToken from '@shared/AddToken'
|
|||||||
import ExplorerLink from '@shared/ExplorerLink'
|
import ExplorerLink from '@shared/ExplorerLink'
|
||||||
import Publisher from '@shared/Publisher'
|
import Publisher from '@shared/Publisher'
|
||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
|
import { AssetExtended } from 'src/@types/AssetExtended'
|
||||||
import styles from './MetaAsset.module.css'
|
import styles from './MetaAsset.module.css'
|
||||||
|
|
||||||
export default function MetaAsset({
|
export default function MetaAsset({
|
||||||
asset,
|
asset,
|
||||||
isBlockscoutExplorer
|
isBlockscoutExplorer
|
||||||
}: {
|
}: {
|
||||||
asset: Asset
|
asset: AssetExtended
|
||||||
isBlockscoutExplorer: boolean
|
isBlockscoutExplorer: boolean
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { isAssetNetwork } = useAsset()
|
const { isAssetNetwork } = useAsset()
|
||||||
|
@ -1,16 +1,17 @@
|
|||||||
import { Asset } from '@oceanprotocol/lib'
|
import { useAsset } from '@context/Asset'
|
||||||
import AssetType from '@shared/AssetType'
|
import AssetType from '@shared/AssetType'
|
||||||
import Time from '@shared/atoms/Time'
|
import Time from '@shared/atoms/Time'
|
||||||
import Publisher from '@shared/Publisher'
|
import Publisher from '@shared/Publisher'
|
||||||
import { getServiceByName } from '@utils/ddo'
|
import { getServiceByName } from '@utils/ddo'
|
||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
|
import { AssetExtended } from 'src/@types/AssetExtended'
|
||||||
import styles from './MetaInfo.module.css'
|
import styles from './MetaInfo.module.css'
|
||||||
|
|
||||||
export default function MetaInfo({
|
export default function MetaInfo({
|
||||||
asset,
|
asset,
|
||||||
nftPublisher
|
nftPublisher
|
||||||
}: {
|
}: {
|
||||||
asset: Asset
|
asset: AssetExtended
|
||||||
nftPublisher: string
|
nftPublisher: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const isCompute = Boolean(getServiceByName(asset, 'compute'))
|
const isCompute = Boolean(getServiceByName(asset, 'compute'))
|
||||||
|
@ -13,32 +13,3 @@
|
|||||||
height: calc(var(--spacer) * 2);
|
height: calc(var(--spacer) * 2);
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nftImage {
|
|
||||||
position: relative;
|
|
||||||
margin: 0;
|
|
||||||
border-right: 1px solid var(--border-color);
|
|
||||||
width: calc(var(--spacer) * 2);
|
|
||||||
height: calc(var(--spacer) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nftImage img,
|
|
||||||
.nftImage > svg:first-of-type {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nftImage > svg:first-of-type {
|
|
||||||
transform: scale(0.7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nftImage .tooltip {
|
|
||||||
position: absolute;
|
|
||||||
padding: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nftImage .tooltip svg {
|
|
||||||
fill: var(--font-color-text);
|
|
||||||
}
|
|
||||||
|
@ -1,14 +1,11 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { AssetExtended } from 'src/@types/AssetExtended'
|
|
||||||
import { decodeTokenURI } from '@utils/nft'
|
|
||||||
import MetaAsset from './MetaAsset'
|
import MetaAsset from './MetaAsset'
|
||||||
import MetaInfo from './MetaInfo'
|
import MetaInfo from './MetaInfo'
|
||||||
import Tooltip from '@shared/atoms/Tooltip'
|
import Nft from '../Nft'
|
||||||
import NftTooltip from './NftTooltip'
|
import { AssetExtended } from 'src/@types/AssetExtended'
|
||||||
import Logo from '@shared/atoms/Logo'
|
|
||||||
import { FormPublishData } from '../../../Publish/_types'
|
const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
|
||||||
import { useFormikContext } from 'formik'
|
|
||||||
|
|
||||||
export default function MetaMain({
|
export default function MetaMain({
|
||||||
asset,
|
asset,
|
||||||
@ -17,51 +14,12 @@ export default function MetaMain({
|
|||||||
asset: AssetExtended
|
asset: AssetExtended
|
||||||
nftPublisher: string
|
nftPublisher: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
|
|
||||||
|
|
||||||
const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
|
|
||||||
const isBlockscoutExplorer = blockscoutNetworks.includes(asset?.chainId)
|
const isBlockscoutExplorer = blockscoutNetworks.includes(asset?.chainId)
|
||||||
|
|
||||||
// TODO: using this for the publish preview works fine, but produces a console warning
|
|
||||||
// on asset details page as there is no formik context there:
|
|
||||||
// Warning: Formik context is undefined, please verify you are calling useFormikContext()
|
|
||||||
// as child of a <Formik> component.
|
|
||||||
const formikState = useFormikContext<FormPublishData>()
|
|
||||||
|
|
||||||
// checking if the NFT has an image associated (tokenURI)
|
|
||||||
// if tokenURI is undefined, then we are in Preview
|
|
||||||
// for Preview we need to show accessDetails.dataImage
|
|
||||||
// as this is where the NFT's SVG (during publish) is stored
|
|
||||||
const nftImage = nftMetadata?.image_data
|
|
||||||
? nftMetadata.image_data
|
|
||||||
: formikState?.values?.metadata?.nft?.image_data
|
|
||||||
? formikState.values.metadata.nft.image_data
|
|
||||||
: null
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<aside className={styles.meta}>
|
<aside className={styles.meta}>
|
||||||
<header className={styles.asset}>
|
<header className={styles.asset}>
|
||||||
<div className={styles.nftImage}>
|
<Nft isBlockscoutExplorer={isBlockscoutExplorer} />
|
||||||
{nftImage ? (
|
|
||||||
<img src={nftImage} alt={asset?.nft?.name} />
|
|
||||||
) : (
|
|
||||||
<Logo noWordmark />
|
|
||||||
)}
|
|
||||||
|
|
||||||
{(nftMetadata || asset?.nftAddress) && (
|
|
||||||
<Tooltip
|
|
||||||
className={styles.tooltip}
|
|
||||||
content={
|
|
||||||
<NftTooltip
|
|
||||||
nft={nftMetadata}
|
|
||||||
address={asset?.nftAddress}
|
|
||||||
chainId={asset?.chainId}
|
|
||||||
isBlockscoutExplorer={isBlockscoutExplorer}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<MetaAsset asset={asset} isBlockscoutExplorer={isBlockscoutExplorer} />
|
<MetaAsset asset={asset} isBlockscoutExplorer={isBlockscoutExplorer} />
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
@ -7,6 +7,11 @@ import styles from './NftTooltip.module.css'
|
|||||||
import explorerLinkStyles from '@shared/ExplorerLink/index.module.css'
|
import explorerLinkStyles from '@shared/ExplorerLink/index.module.css'
|
||||||
import { accountTruncate } from '@utils/web3'
|
import { accountTruncate } from '@utils/web3'
|
||||||
|
|
||||||
|
// Supported OpenSea networks:
|
||||||
|
// https://support.opensea.io/hc/en-us/articles/4404027708051-Which-blockchains-does-OpenSea-support-
|
||||||
|
const openSeaNetworks = [1, 137]
|
||||||
|
const openSeaTestNetworks = [4]
|
||||||
|
|
||||||
export default function NftTooltip({
|
export default function NftTooltip({
|
||||||
nft,
|
nft,
|
||||||
address,
|
address,
|
||||||
@ -18,26 +23,23 @@ export default function NftTooltip({
|
|||||||
chainId: number
|
chainId: number
|
||||||
isBlockscoutExplorer: boolean
|
isBlockscoutExplorer: boolean
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
// Currently Ocean NFTs are not displayed correctly on OpenSea
|
const openSeaSupported = openSeaNetworks
|
||||||
// Code prepared to easily integrate this feature once this is fixed
|
.concat(openSeaTestNetworks)
|
||||||
//
|
|
||||||
// Supported OpeanSea networks:
|
|
||||||
// https://support.opensea.io/hc/en-us/articles/4404027708051-Which-blockchains-does-OpenSea-support-
|
|
||||||
const openseaNetworks = [1, 137]
|
|
||||||
const openseaTestNetworks = [4]
|
|
||||||
const openSeaSupported = openseaNetworks
|
|
||||||
.concat(openseaTestNetworks)
|
|
||||||
.includes(chainId)
|
.includes(chainId)
|
||||||
|
|
||||||
const openSeaBaseUri = openSeaSupported
|
const openSeaBaseUri = openSeaSupported
|
||||||
? openseaTestNetworks.includes(chainId)
|
? openSeaTestNetworks.includes(chainId)
|
||||||
? 'https://testnets.opensea.io'
|
? 'https://testnets.opensea.io'
|
||||||
: 'https://opensea.io'
|
: 'https://opensea.io'
|
||||||
: undefined
|
: undefined
|
||||||
|
|
||||||
|
const openSeaUrl = `${openSeaBaseUri}/assets/${
|
||||||
|
chainId === 137 ? 'matic' : ''
|
||||||
|
}/${address}/1`
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={styles.wrapper}>
|
<div className={styles.wrapper}>
|
||||||
{nft && <img src={nft.image_data} alt={nft?.name} />}
|
{nft && <img src={nft.image_data || nft.image} alt={nft?.name} />}
|
||||||
<div className={styles.info}>
|
<div className={styles.info}>
|
||||||
{nft && <h5>{nft.name}</h5>}
|
{nft && <h5>{nft.name}</h5>}
|
||||||
{address && (
|
{address && (
|
||||||
@ -53,25 +55,23 @@ export default function NftTooltip({
|
|||||||
isBlockscoutExplorer ? `tokens/${address}` : `token/${address}`
|
isBlockscoutExplorer ? `tokens/${address}` : `token/${address}`
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
View on explorer
|
View on Explorer
|
||||||
</ExplorerLink>
|
</ExplorerLink>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{openSeaSupported && nft && address && (
|
{openSeaSupported && address && (
|
||||||
<a
|
<a
|
||||||
href={`${openSeaBaseUri}/assets/${address}/1`}
|
href={openSeaUrl}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
className={explorerLinkStyles.link}
|
className={explorerLinkStyles.link}
|
||||||
>
|
>
|
||||||
View on OpeanSea <External />
|
View on OpenSea <External />
|
||||||
</a>
|
</a>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{!nft?.image_data && (
|
{!nft?.image_data && !nft?.image && (
|
||||||
<p className={styles.fallback}>
|
<p className={styles.fallback}>This Data NFT has no image set.</p>
|
||||||
This Data NFT was not created on Ocean Market
|
|
||||||
</p>
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
28
src/components/Asset/AssetContent/Nft/index.module.css
Normal file
28
src/components/Asset/AssetContent/Nft/index.module.css
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
.nftImage {
|
||||||
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
border-right: 1px solid var(--border-color);
|
||||||
|
width: calc(var(--spacer) * 2);
|
||||||
|
height: calc(var(--spacer) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nftImage img,
|
||||||
|
.nftImage > svg:first-of-type {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nftImage > svg:first-of-type {
|
||||||
|
transform: scale(0.7);
|
||||||
|
}
|
||||||
|
|
||||||
|
.nftImage .tooltip {
|
||||||
|
position: absolute;
|
||||||
|
padding: 0;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nftImage .tooltip svg {
|
||||||
|
fill: var(--font-color-text);
|
||||||
|
}
|
60
src/components/Asset/AssetContent/Nft/index.tsx
Normal file
60
src/components/Asset/AssetContent/Nft/index.tsx
Normal file
@ -0,0 +1,60 @@
|
|||||||
|
import { useAsset } from '@context/Asset'
|
||||||
|
import Tooltip from '@shared/atoms/Tooltip'
|
||||||
|
import { decodeTokenURI } from '@utils/nft'
|
||||||
|
import { useFormikContext } from 'formik'
|
||||||
|
import React from 'react'
|
||||||
|
import { FormPublishData } from 'src/components/Publish/_types'
|
||||||
|
import Logo from '@shared/atoms/Logo'
|
||||||
|
import NftTooltip from './NftTooltip'
|
||||||
|
import styles from './index.module.css'
|
||||||
|
|
||||||
|
export default function Nft({
|
||||||
|
isBlockscoutExplorer
|
||||||
|
}: {
|
||||||
|
isBlockscoutExplorer: boolean
|
||||||
|
}) {
|
||||||
|
const { asset } = useAsset()
|
||||||
|
const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
|
||||||
|
|
||||||
|
// TODO: using this for the publish preview works fine, but produces a console warning
|
||||||
|
// on asset details page as there is no formik context there:
|
||||||
|
// Warning: Formik context is undefined, please verify you are calling useFormikContext()
|
||||||
|
// as child of a <Formik> component.
|
||||||
|
const formikState = useFormikContext<FormPublishData>()
|
||||||
|
|
||||||
|
// checking if the NFT has an image associated (tokenURI)
|
||||||
|
// if tokenURI is undefined, then we are in Preview
|
||||||
|
// for Preview we need to show accessDetails.dataImage
|
||||||
|
// as this is where the NFT's SVG (during publish) is stored
|
||||||
|
const nftImage = nftMetadata?.image_data
|
||||||
|
? nftMetadata.image_data
|
||||||
|
: nftMetadata?.image
|
||||||
|
? nftMetadata.image
|
||||||
|
: formikState?.values?.metadata?.nft?.image_data
|
||||||
|
? formikState.values.metadata.nft.image_data
|
||||||
|
: null
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={styles.nftImage}>
|
||||||
|
{nftImage ? (
|
||||||
|
<img src={nftImage} alt={asset?.nft?.name} />
|
||||||
|
) : (
|
||||||
|
<Logo noWordmark />
|
||||||
|
)}
|
||||||
|
|
||||||
|
{(nftMetadata || asset?.nftAddress) && (
|
||||||
|
<Tooltip
|
||||||
|
className={styles.tooltip}
|
||||||
|
content={
|
||||||
|
<NftTooltip
|
||||||
|
nft={nftMetadata}
|
||||||
|
address={asset?.nftAddress}
|
||||||
|
chainId={asset?.chainId}
|
||||||
|
isBlockscoutExplorer={isBlockscoutExplorer}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
@ -61,7 +61,9 @@ export default function MarketStats(): ReactElement {
|
|||||||
//
|
//
|
||||||
const getMarketStats = useCallback(async () => {
|
const getMarketStats = useCallback(async () => {
|
||||||
if (!mainChainIds?.length) return
|
if (!mainChainIds?.length) return
|
||||||
|
const newData: {
|
||||||
|
[chainId: number]: FooterStatsValuesGlobalStatistics
|
||||||
|
} = {}
|
||||||
for (const chainId of mainChainIds) {
|
for (const chainId of mainChainIds) {
|
||||||
const context: OperationContext = {
|
const context: OperationContext = {
|
||||||
url: `${getSubgraphUri(
|
url: `${getSubgraphUri(
|
||||||
@ -73,15 +75,12 @@ export default function MarketStats(): ReactElement {
|
|||||||
try {
|
try {
|
||||||
const response = await fetchData(queryGlobalStatistics, null, context)
|
const response = await fetchData(queryGlobalStatistics, null, context)
|
||||||
if (!response?.data?.globalStatistics) return
|
if (!response?.data?.globalStatistics) return
|
||||||
|
newData[chainId] = response.data.globalStatistics[0]
|
||||||
setData((prevState) => ({
|
|
||||||
...prevState,
|
|
||||||
[chainId]: response.data.globalStatistics[0]
|
|
||||||
}))
|
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
LoggerInstance.error('Error fetching global stats: ', error.message)
|
LoggerInstance.error('Error fetching global stats: ', error.message)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
setData(newData)
|
||||||
}, [mainChainIds])
|
}, [mainChainIds])
|
||||||
|
|
||||||
//
|
//
|
||||||
@ -96,10 +95,12 @@ export default function MarketStats(): ReactElement {
|
|||||||
//
|
//
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!data || !mainChainIds?.length) return
|
if (!data || !mainChainIds?.length) return
|
||||||
|
|
||||||
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
|
const baseTokenValue = data[chainId]?.totalLiquidity[0]?.value
|
||||||
@ -109,25 +110,15 @@ export default function MarketStats(): ReactElement {
|
|||||||
? new Decimal(baseTokenValue).mul(2)
|
? new Decimal(baseTokenValue).mul(2)
|
||||||
: new Decimal(0)
|
: new Decimal(0)
|
||||||
|
|
||||||
setTotalValueLockedInOcean((prevState) => ({
|
newTVLInOcean[chainId] = `${totalValueLockedInOcean}`
|
||||||
...prevState,
|
|
||||||
[chainId]: `${totalValueLockedInOcean}`
|
|
||||||
}))
|
|
||||||
|
|
||||||
const totalOceanLiquidity = Number(baseTokenValue) || 0
|
const totalOceanLiquidity = Number(baseTokenValue) || 0
|
||||||
|
|
||||||
setTotalOceanLiquidity((prevState) => ({
|
newTotalLiquidity[chainId] = `${totalOceanLiquidity}`
|
||||||
...prevState,
|
|
||||||
[chainId]: `${totalOceanLiquidity}`
|
|
||||||
}))
|
|
||||||
|
|
||||||
const poolCount = data[chainId]?.poolCount || 0
|
const poolCount = data[chainId]?.poolCount || 0
|
||||||
|
|
||||||
setPoolCount((prevState) => ({
|
newPoolCount[chainId] = `${poolCount}`
|
||||||
...prevState,
|
|
||||||
[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
|
||||||
@ -142,7 +133,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, prices, currency])
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user