mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 05:41:41 +02:00
NFT display tweaks (#1507)
* NFT display tweaks * capitalization consistency * refactor * fix asset preview
This commit is contained in:
parent
a1856d79a4
commit
89a63f7cb2
|
@ -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,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>
|
||||||
|
)
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user