merge main into v4-c2d

package-lock.json

@@ -10,7 +10,7 @@
       "hasInstallScript": true,
       "license": "Apache-2.0",
       "dependencies": {
-        "@coingecko/cryptoformat": "^0.4.4",
+        "@coingecko/cryptoformat": "^0.5.4",
         "@loadable/component": "^5.15.2",
         "@oceanprotocol/art": "^3.2.0",
         "@oceanprotocol/lib": "^1.0.0",
@@ -2136,9 +2136,9 @@
       }
     },
     "node_modules/@coingecko/cryptoformat": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.4.4.tgz",
-      "integrity": "sha512-AF4rgGY+BmSiks+ZjD4nVX+04a5CEriP3a/WA6xQicR+MHu+TSrAfHwts+IwsRsBTJ4wZAPEaPVyOzPo6zW98w==",
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.5.4.tgz",
+      "integrity": "sha512-qAHbG/TjKbyPE0hRCeET1+8qBs4dtpXVyXDeSj0xhENLPBFW9tNTY2OOYr9Fw5fAylHJkCdhdn7Htk18ZSyxFw==",
       "engines": {
         "node": ">=10"
       }
@@ -43149,9 +43149,9 @@
       }
     },
     "@coingecko/cryptoformat": {
-      "version": "0.4.4",
-      "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.4.4.tgz",
-      "integrity": "sha512-AF4rgGY+BmSiks+ZjD4nVX+04a5CEriP3a/WA6xQicR+MHu+TSrAfHwts+IwsRsBTJ4wZAPEaPVyOzPo6zW98w=="
+      "version": "0.5.4",
+      "resolved": "https://registry.npmjs.org/@coingecko/cryptoformat/-/cryptoformat-0.5.4.tgz",
+      "integrity": "sha512-qAHbG/TjKbyPE0hRCeET1+8qBs4dtpXVyXDeSj0xhENLPBFW9tNTY2OOYr9Fw5fAylHJkCdhdn7Htk18ZSyxFw=="
     },
     "@colors/colors": {
       "version": "1.5.0",

package.json

@@ -17,12 +17,12 @@
     "type-check": "tsc --noEmit",
     "deploy:s3": "bash scripts/deploy-s3.sh",
     "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:build": "cross-env NODE_ENV=test build-storybook"
   },
   "dependencies": {
-    "@coingecko/cryptoformat": "^0.4.4",
+    "@coingecko/cryptoformat": "^0.5.4",
     "@loadable/component": "^5.15.2",
     "@oceanprotocol/art": "^3.2.0",
     "@oceanprotocol/lib": "^1.0.0",

src/@context/Asset.tsx

@@ -18,7 +18,7 @@ import { getAccessDetails } from '@utils/accessDetailsAndPricing'
 import { useIsMounted } from '@hooks/useIsMounted'
 import { useMarketMetadata } from './MarketMetadata'
 
-interface AssetProviderValue {
+export interface AssetProviderValue {
   isInPurgatory: boolean
   purgatoryData: Purgatory
   asset: AssetExtended

src/@context/MarketMetadata/_queries.ts

@@ -5,7 +5,9 @@ export const opcQuery = gql`
     opc(id: 1) {
       swapOceanFee
       swapNonOceanFee
-      approvedTokens
+      approvedTokens {
+        id
+      }
       id
     }
   }

src/@context/MarketMetadata/index.tsx

@@ -36,7 +36,7 @@ function MarketMetadataProvider({
 
         opcData.push({
           chainId: appConfig.chainIdsSupported[i],
-          approvedTokens: response.data?.opc.approvedTokens,
+          approvedTokens: response.data?.opc.approvedTokens?.map((x) => x.id),
           swapApprovedFee: response.data?.opc.swapOceanFee,
           swapNotApprovedFee: response.data?.opc.swapNonOceanFee
         } as OpcFee)

src/components/Asset/AssetContent/MetaMain/MetaAsset.tsx

@@ -5,13 +5,14 @@ import AddToken from '@shared/AddToken'
 import ExplorerLink from '@shared/ExplorerLink'
 import Publisher from '@shared/Publisher'
 import React, { ReactElement } from 'react'
+import { AssetExtended } from 'src/@types/AssetExtended'
 import styles from './MetaAsset.module.css'
 
 export default function MetaAsset({
   asset,
   isBlockscoutExplorer
 }: {
-  asset: Asset
+  asset: AssetExtended
   isBlockscoutExplorer: boolean
 }): ReactElement {
   const { isAssetNetwork } = useAsset()

src/components/Asset/AssetContent/MetaMain/MetaInfo.tsx

@@ -1,16 +1,17 @@
-import { Asset } from '@oceanprotocol/lib'
+import { useAsset } from '@context/Asset'
 import AssetType from '@shared/AssetType'
 import Time from '@shared/atoms/Time'
 import Publisher from '@shared/Publisher'
 import { getServiceByName } from '@utils/ddo'
 import React, { ReactElement } from 'react'
+import { AssetExtended } from 'src/@types/AssetExtended'
 import styles from './MetaInfo.module.css'
 
 export default function MetaInfo({
   asset,
   nftPublisher
 }: {
-  asset: Asset
+  asset: AssetExtended
   nftPublisher: string
 }): ReactElement {
   const isCompute = Boolean(getServiceByName(asset, 'compute'))

src/components/Asset/AssetContent/MetaMain/index.module.css

@@ -13,32 +13,3 @@
   height: calc(var(--spacer) * 2);
   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);
-}

src/components/Asset/AssetContent/MetaMain/index.tsx

@@ -1,14 +1,11 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
-import { AssetExtended } from 'src/@types/AssetExtended'
-import { decodeTokenURI } from '@utils/nft'
 import MetaAsset from './MetaAsset'
 import MetaInfo from './MetaInfo'
-import Tooltip from '@shared/atoms/Tooltip'
-import NftTooltip from './NftTooltip'
-import Logo from '@shared/atoms/Logo'
-import { FormPublishData } from '../../../Publish/_types'
-import { useFormikContext } from 'formik'
+import Nft from '../Nft'
+import { AssetExtended } from 'src/@types/AssetExtended'
+
+const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
 
 export default function MetaMain({
   asset,
@@ -17,51 +14,12 @@ export default function MetaMain({
   asset: AssetExtended
   nftPublisher: string
 }): ReactElement {
-  const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
-
-  const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
   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 (
     <aside className={styles.meta}>
       <header className={styles.asset}>
-        <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>
+        <Nft isBlockscoutExplorer={isBlockscoutExplorer} />
         <MetaAsset asset={asset} isBlockscoutExplorer={isBlockscoutExplorer} />
       </header>
 

src/components/Asset/AssetContent/Nft/NftTooltip.tsx

@@ -7,6 +7,11 @@ import styles from './NftTooltip.module.css'
 import explorerLinkStyles from '@shared/ExplorerLink/index.module.css'
 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({
   nft,
   address,
@@ -18,26 +23,23 @@ export default function NftTooltip({
   chainId: number
   isBlockscoutExplorer: boolean
 }): ReactElement {
-  // Currently Ocean NFTs are not displayed correctly on OpenSea
-  // Code prepared to easily integrate this feature once this is fixed
-  //
-  // 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)
+  const openSeaSupported = openSeaNetworks
+    .concat(openSeaTestNetworks)
     .includes(chainId)
 
   const openSeaBaseUri = openSeaSupported
-    ? openseaTestNetworks.includes(chainId)
+    ? openSeaTestNetworks.includes(chainId)
       ? 'https://testnets.opensea.io'
       : 'https://opensea.io'
     : undefined
 
+  const openSeaUrl = `${openSeaBaseUri}/assets/${
+    chainId === 137 ? 'matic' : ''
+  }/${address}/1`
+
   return (
     <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}>
         {nft && <h5>{nft.name}</h5>}
         {address && (
@@ -53,25 +55,23 @@ export default function NftTooltip({
                 isBlockscoutExplorer ? `tokens/${address}` : `token/${address}`
               }
             >
-              View on explorer
+              View on Explorer
             </ExplorerLink>
           )}
 
-          {openSeaSupported && nft && address && (
+          {openSeaSupported && address && (
             <a
-              href={`${openSeaBaseUri}/assets/${address}/1`}
+              href={openSeaUrl}
               target="_blank"
               rel="noreferrer"
               className={explorerLinkStyles.link}
             >
-              View on OpeanSea <External />
+              View on OpenSea <External />
             </a>
           )}
         </div>
-        {!nft?.image_data && (
-          <p className={styles.fallback}>
-            This Data NFT was not created on Ocean Market
-          </p>
+        {!nft?.image_data && !nft?.image && (
+          <p className={styles.fallback}>This Data NFT has no image set.</p>
         )}
       </div>
     </div>

src/components/Asset/AssetContent/Nft/index.module.css

@@ -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);
+}

src/components/Asset/AssetContent/Nft/index.tsx

@@ -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>
+  )
+}

src/components/Footer/MarketStats/index.tsx

@@ -61,7 +61,9 @@ export default function MarketStats(): ReactElement {
   //
   const getMarketStats = useCallback(async () => {
     if (!mainChainIds?.length) return
-
+    const newData: {
+      [chainId: number]: FooterStatsValuesGlobalStatistics
+    } = {}
     for (const chainId of mainChainIds) {
       const context: OperationContext = {
         url: `${getSubgraphUri(
@@ -73,15 +75,12 @@ export default function MarketStats(): ReactElement {
       try {
         const response = await fetchData(queryGlobalStatistics, null, context)
         if (!response?.data?.globalStatistics) return
-
-        setData((prevState) => ({
-          ...prevState,
-          [chainId]: response.data.globalStatistics[0]
-        }))
+        newData[chainId] = response.data.globalStatistics[0]
       } catch (error) {
         LoggerInstance.error('Error fetching global stats: ', error.message)
       }
     }
+    setData(newData)
   }, [mainChainIds])
 
   //
@@ -96,10 +95,12 @@ export default function MarketStats(): ReactElement {
   //
   useEffect(() => {
     if (!data || !mainChainIds?.length) return
-
     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
@@ -109,25 +110,15 @@ export default function MarketStats(): ReactElement {
           ? new Decimal(baseTokenValue).mul(2)
           : new Decimal(0)
 
-        setTotalValueLockedInOcean((prevState) => ({
-          ...prevState,
-          [chainId]: `${totalValueLockedInOcean}`
-        }))
+        newTVLInOcean[chainId] = `${totalValueLockedInOcean}`
 
         const totalOceanLiquidity = Number(baseTokenValue) || 0
 
-        setTotalOceanLiquidity((prevState) => ({
-          ...prevState,
-          [chainId]: `${totalOceanLiquidity}`
-        }))
+        newTotalLiquidity[chainId] = `${totalOceanLiquidity}`
 
         const poolCount = data[chainId]?.poolCount || 0
 
-        setPoolCount((prevState) => ({
-          ...prevState,
-          [chainId]: `${poolCount}`
-        }))
-
+        newPoolCount[chainId] = `${poolCount}`
         const nftCount = data[chainId]?.nftCount || 0
         const datatokenCount = data[chainId]?.datatokenCount || 0
         const orderCount = data[chainId]?.orderCount || 0
@@ -142,7 +133,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])