2022-02-25 11:33:07 +01:00
|
|
|
import React, { ReactElement, useState, useEffect } from 'react'
|
2021-10-27 12:27:14 +02:00
|
|
|
import Markdown from '@shared/Markdown'
|
2020-07-06 12:49:30 +02:00
|
|
|
import MetaFull from './MetaFull'
|
|
|
|
import MetaSecondary from './MetaSecondary'
|
2020-07-08 17:57:53 +02:00
|
|
|
import AssetActions from '../AssetActions'
|
2021-10-13 18:48:59 +02:00
|
|
|
import { useUserPreferences } from '@context/UserPreferences'
|
2020-10-28 23:59:14 +01:00
|
|
|
import Bookmark from './Bookmark'
|
2021-10-18 20:44:33 +02:00
|
|
|
import { useAsset } from '@context/Asset'
|
2021-10-13 18:48:59 +02:00
|
|
|
import Alert from '@shared/atoms/Alert'
|
2021-10-18 20:44:33 +02:00
|
|
|
import DebugOutput from '@shared/DebugOutput'
|
2020-12-10 14:30:40 +01:00
|
|
|
import MetaMain from './MetaMain'
|
2021-03-04 18:31:10 +01:00
|
|
|
import EditHistory from './EditHistory'
|
2021-03-25 08:34:07 +01:00
|
|
|
import styles from './index.module.css'
|
2021-10-18 20:44:33 +02:00
|
|
|
import NetworkName from '@shared/NetworkName'
|
2021-10-27 12:27:14 +02:00
|
|
|
import content from '../../../../content/purgatory.json'
|
2022-03-16 20:01:51 +01:00
|
|
|
import Web3 from 'web3'
|
2022-06-23 17:53:05 +02:00
|
|
|
import Button from '@shared/atoms/Button'
|
2020-07-06 12:49:30 +02:00
|
|
|
|
2021-11-23 13:53:09 +01:00
|
|
|
export default function AssetContent({
|
2022-02-03 15:31:43 +01:00
|
|
|
asset
|
2021-11-23 13:53:09 +01:00
|
|
|
}: {
|
2022-02-03 15:31:43 +01:00
|
|
|
asset: AssetExtended
|
2021-11-23 13:53:09 +01:00
|
|
|
}): ReactElement {
|
2022-06-23 17:53:05 +02:00
|
|
|
const { isInPurgatory, purgatoryData, isOwner, isAssetNetwork } = useAsset()
|
2022-03-16 20:01:51 +01:00
|
|
|
const { debug } = useUserPreferences()
|
|
|
|
const [receipts, setReceipts] = useState([])
|
|
|
|
const [nftPublisher, setNftPublisher] = useState<string>()
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
setNftPublisher(
|
|
|
|
Web3.utils.toChecksumAddress(
|
|
|
|
receipts?.find((e) => e.type === 'METADATA_CREATED')?.nft?.owner
|
|
|
|
)
|
|
|
|
)
|
|
|
|
}, [receipts])
|
2022-02-25 11:33:07 +01:00
|
|
|
|
2021-11-23 13:53:09 +01:00
|
|
|
return (
|
2021-07-26 15:48:24 +02:00
|
|
|
<>
|
|
|
|
<div className={styles.networkWrap}>
|
2022-02-03 12:29:39 +01:00
|
|
|
<NetworkName networkId={asset?.chainId} className={styles.network} />
|
2021-07-26 15:48:24 +02:00
|
|
|
</div>
|
|
|
|
|
|
|
|
<article className={styles.grid}>
|
|
|
|
<div>
|
|
|
|
<div className={styles.content}>
|
2022-03-16 20:01:51 +01:00
|
|
|
<MetaMain asset={asset} nftPublisher={nftPublisher} />
|
2022-02-03 15:31:43 +01:00
|
|
|
{asset?.accessDetails?.datatoken !== null && (
|
|
|
|
<Bookmark did={asset?.id} />
|
|
|
|
)}
|
2022-01-19 17:30:04 +01:00
|
|
|
{isInPurgatory === true ? (
|
2021-07-26 15:48:24 +02:00
|
|
|
<Alert
|
2021-10-27 12:27:14 +02:00
|
|
|
title={content.asset.title}
|
2021-07-26 15:48:24 +02:00
|
|
|
badge={`Reason: ${purgatoryData?.reason}`}
|
2021-10-27 12:27:14 +02:00
|
|
|
text={content.asset.description}
|
2021-07-26 15:48:24 +02:00
|
|
|
state="error"
|
2020-12-02 14:37:01 +01:00
|
|
|
/>
|
2021-07-26 15:48:24 +02:00
|
|
|
) : (
|
|
|
|
<>
|
|
|
|
<Markdown
|
|
|
|
className={styles.description}
|
2022-07-26 13:48:30 +02:00
|
|
|
text={asset?.metadata?.description || ''}
|
2021-07-26 15:48:24 +02:00
|
|
|
/>
|
2022-02-03 12:29:39 +01:00
|
|
|
<MetaSecondary ddo={asset} />
|
2021-07-26 15:48:24 +02:00
|
|
|
</>
|
|
|
|
)}
|
2022-02-03 12:29:39 +01:00
|
|
|
<MetaFull ddo={asset} />
|
2022-03-16 20:01:51 +01:00
|
|
|
<EditHistory receipts={receipts} setReceipts={setReceipts} />
|
2022-02-03 12:29:39 +01:00
|
|
|
{debug === true && <DebugOutput title="DDO" output={asset} />}
|
2021-07-26 15:48:24 +02:00
|
|
|
</div>
|
2020-10-20 20:56:54 +02:00
|
|
|
</div>
|
|
|
|
|
2021-07-26 15:48:24 +02:00
|
|
|
<div className={styles.actions}>
|
2022-02-03 15:31:43 +01:00
|
|
|
<AssetActions asset={asset} />
|
2022-02-25 11:33:07 +01:00
|
|
|
{isOwner && isAssetNetwork && (
|
2021-11-23 13:53:09 +01:00
|
|
|
<div className={styles.ownerActions}>
|
2022-06-23 17:53:05 +02:00
|
|
|
<Button style="text" size="small" to={`/asset/${asset?.id}/edit`}>
|
|
|
|
Edit Asset
|
|
|
|
</Button>
|
2021-11-23 13:53:09 +01:00
|
|
|
</div>
|
2022-02-25 11:33:07 +01:00
|
|
|
)}
|
2021-07-26 15:48:24 +02:00
|
|
|
</div>
|
|
|
|
</article>
|
|
|
|
</>
|
2020-07-06 12:49:30 +02:00
|
|
|
)
|
|
|
|
}
|