NFT display tweaks (#1507)

* NFT display tweaks

* capitalization consistency

* refactor

* fix asset preview

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