mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-26 11:16:51 +02:00
Matthias Kretschmann
89a63f7cb2
* NFT display tweaks * capitalization consistency * refactor * fix asset preview
80 lines
2.3 KiB
TypeScript
80 lines
2.3 KiB
TypeScript
import Copy from '@shared/atoms/Copy'
|
|
import External from '@images/external.svg'
|
|
import ExplorerLink from '@shared/ExplorerLink'
|
|
import { NftMetadata } from '@utils/nft'
|
|
import React, { ReactElement } from 'react'
|
|
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,
|
|
chainId,
|
|
isBlockscoutExplorer
|
|
}: {
|
|
nft: NftMetadata
|
|
address: string
|
|
chainId: number
|
|
isBlockscoutExplorer: boolean
|
|
}): ReactElement {
|
|
const openSeaSupported = openSeaNetworks
|
|
.concat(openSeaTestNetworks)
|
|
.includes(chainId)
|
|
|
|
const openSeaBaseUri = openSeaSupported
|
|
? 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 || nft.image} alt={nft?.name} />}
|
|
<div className={styles.info}>
|
|
{nft && <h5>{nft.name}</h5>}
|
|
{address && (
|
|
<span title={address} className={styles.address}>
|
|
{accountTruncate(address)} <Copy text={address} />
|
|
</span>
|
|
)}
|
|
<div className={styles.links}>
|
|
{address && (
|
|
<ExplorerLink
|
|
networkId={chainId}
|
|
path={
|
|
isBlockscoutExplorer ? `tokens/${address}` : `token/${address}`
|
|
}
|
|
>
|
|
View on Explorer
|
|
</ExplorerLink>
|
|
)}
|
|
|
|
{openSeaSupported && address && (
|
|
<a
|
|
href={openSeaUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className={explorerLinkStyles.link}
|
|
>
|
|
View on OpenSea <External />
|
|
</a>
|
|
)}
|
|
</div>
|
|
{!nft?.image_data && !nft?.image && (
|
|
<p className={styles.fallback}>This Data NFT has no image set.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|