fix preview nft on step preview in publish (#1226)

* fix preview nft on step preview in publish

* remove image data from asset interface

* change dataImage implementation

- remove FormPublishData hook
- get NFT image from asset

* improved documentation

* restore formikContext and add warnings

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

@@ -1,18 +1,20 @@
 import React, { ReactElement } from 'react'
 import styles from './index.module.css'
-import { Asset } from '@oceanprotocol/lib'
+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'
 
 export default function MetaMain({
   asset,
   nftPublisher
 }: {
-  asset: Asset
+  asset: AssetExtended
   nftPublisher: string
 }): ReactElement {
   const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
@@ -20,12 +22,28 @@ export default function MetaMain({
   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}>
-          {nftMetadata?.image_data ? (
-            <img src={nftMetadata?.image_data} alt={asset?.nft?.name} />
+          {nftImage ? (
+            <img src={nftImage} alt={asset?.nft?.name} />
           ) : (
             <Logo noWordmark />
           )}