mirror of
https://github.com/oceanprotocol/market.git
synced 2024-12-02 05:57:29 +01:00
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
This commit is contained in:
parent
4a102722b7
commit
90a8bc00bb
@ -1,18 +1,20 @@
|
|||||||
import React, { ReactElement } from 'react'
|
import React, { ReactElement } from 'react'
|
||||||
import styles from './index.module.css'
|
import styles from './index.module.css'
|
||||||
import { Asset } from '@oceanprotocol/lib'
|
import { AssetExtended } from 'src/@types/AssetExtended'
|
||||||
import { decodeTokenURI } from '@utils/nft'
|
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 Tooltip from '@shared/atoms/Tooltip'
|
||||||
import NftTooltip from './NftTooltip'
|
import NftTooltip from './NftTooltip'
|
||||||
import Logo from '@shared/atoms/Logo'
|
import Logo from '@shared/atoms/Logo'
|
||||||
|
import { FormPublishData } from '../../../Publish/_types'
|
||||||
|
import { useFormikContext } from 'formik'
|
||||||
|
|
||||||
export default function MetaMain({
|
export default function MetaMain({
|
||||||
asset,
|
asset,
|
||||||
nftPublisher
|
nftPublisher
|
||||||
}: {
|
}: {
|
||||||
asset: Asset
|
asset: AssetExtended
|
||||||
nftPublisher: string
|
nftPublisher: string
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
|
const nftMetadata = decodeTokenURI(asset?.nft?.tokenURI)
|
||||||
@ -20,12 +22,28 @@ export default function MetaMain({
|
|||||||
const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
|
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}>
|
<div className={styles.nftImage}>
|
||||||
{nftMetadata?.image_data ? (
|
{nftImage ? (
|
||||||
<img src={nftMetadata?.image_data} alt={asset?.nft?.name} />
|
<img src={nftImage} alt={asset?.nft?.name} />
|
||||||
) : (
|
) : (
|
||||||
<Logo noWordmark />
|
<Logo noWordmark />
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user