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

import React, { ReactElement } from 'react'
import { useAsset } from '@context/Asset'
import { useWeb3 } from '@context/Web3'
import ExplorerLink from '@shared/ExplorerLink'
import Publisher from '@shared/Publisher'
import AddToken from '@shared/AddToken'
import Time from '@shared/atoms/Time'
import AssetType from '@shared/AssetType'
import styles from './MetaMain.module.css'
import { getServiceByName } from '@utils/ddo'
import { Asset } from '@oceanprotocol/lib'

export default function MetaMain({ ddo }: { ddo: Asset }): ReactElement {
  const { isAssetNetwork } = useAsset()
  const { web3ProviderInfo } = useWeb3()

  const isCompute = Boolean(getServiceByName(ddo, 'compute'))
  const accessType = isCompute ? 'compute' : 'access'
  const blockscoutNetworks = [1287, 2021000, 2021001, 44787, 246, 1285]
  const isBlockscoutExplorer = blockscoutNetworks.includes(ddo?.chainId)

  const dataTokenName = ddo?.datatokens[0]?.name
  const dataTokenSymbol = ddo?.datatokens[0]?.symbol

  return (
    <aside className={styles.meta}>
      <header className={styles.asset}>
        <AssetType
          type={ddo?.metadata.type}
          accessType={accessType}
          className={styles.assetType}
        />
        <ExplorerLink
          className={styles.datatoken}
          networkId={ddo?.chainId}
          path={
            isBlockscoutExplorer
              ? `tokens/${ddo?.services[0].datatokenAddress}`
              : `token/${ddo?.services[0].datatokenAddress}`
          }
        >
          {`${dataTokenName} — ${dataTokenSymbol}`}
        </ExplorerLink>

        {web3ProviderInfo?.name === 'MetaMask' && isAssetNetwork && (
          <span className={styles.addWrap}>
            <AddToken
              address={ddo?.services[0].datatokenAddress}
              symbol={(ddo as Asset)?.datatokens[0]?.symbol}
              logo="https://raw.githubusercontent.com/oceanprotocol/art/main/logo/datatoken.png"
              text={`Add ${(ddo as Asset)?.datatokens[0]?.symbol} to wallet`}
              className={styles.add}
              minimal
            />
          </span>
        )}
      </header>

      <div className={styles.byline}>
        Published By <Publisher account={(ddo as Asset)?.nft?.owner} />
        <p>
          <Time date={ddo?.metadata.created} relative />
          {ddo?.metadata.created !== ddo?.metadata.updated && (
            <>
              {' — '}
              <span className={styles.updated}>
                updated <Time date={ddo?.metadata.updated} relative />
              </span>
            </>
          )}
        </p>
      </div>
    </aside>
  )
}