2020-11-26 16:02:42 +01:00
|
|
|
import React, { ReactElement, useEffect, useState } 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'
|
|
|
|
import Button from '@shared/atoms/Button'
|
2020-12-10 14:30:40 +01:00
|
|
|
import Edit from '../AssetActions/Edit'
|
2021-03-25 08:34:07 +01:00
|
|
|
import EditComputeDataset from '../AssetActions/Edit/EditComputeDataset'
|
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-10-13 18:48:59 +02:00
|
|
|
import { useWeb3 } from '@context/Web3'
|
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'
|
2020-07-06 12:49:30 +02:00
|
|
|
|
2021-11-11 08:51:13 +01:00
|
|
|
export default function AssetContent({ ddo }: { ddo: Asset }): ReactElement {
|
2020-09-09 16:07:37 +02:00
|
|
|
const { debug } = useUserPreferences()
|
2021-03-17 11:44:26 +01:00
|
|
|
const { accountId } = useWeb3()
|
2021-11-11 08:51:13 +01:00
|
|
|
const { price, owner, isInPurgatory, purgatoryData, isAssetNetwork } =
|
|
|
|
useAsset()
|
2020-12-10 14:30:40 +01:00
|
|
|
const [showEdit, setShowEdit] = useState<boolean>()
|
2021-08-20 17:05:06 +02:00
|
|
|
const [isComputeType, setIsComputeType] = useState<boolean>(false)
|
2021-03-25 08:34:07 +01:00
|
|
|
const [showEditCompute, setShowEditCompute] = useState<boolean>()
|
2021-04-22 16:29:40 +02:00
|
|
|
const [isOwner, setIsOwner] = useState(false)
|
2021-03-25 08:34:07 +01:00
|
|
|
|
2021-11-11 08:51:13 +01:00
|
|
|
const serviceCompute = ddo.services.filter(
|
|
|
|
(service) => service.type === 'compute'
|
|
|
|
)[0]
|
|
|
|
|
2020-11-26 16:02:42 +01:00
|
|
|
useEffect(() => {
|
2021-04-22 16:29:40 +02:00
|
|
|
if (!accountId || !owner) return
|
|
|
|
|
|
|
|
const isOwner = accountId.toLowerCase() === owner.toLowerCase()
|
|
|
|
setIsOwner(isOwner)
|
2021-11-11 08:51:13 +01:00
|
|
|
setIsComputeType(Boolean(serviceCompute))
|
2021-08-20 17:05:06 +02:00
|
|
|
}, [accountId, price, owner, ddo])
|
2020-12-10 14:30:40 +01:00
|
|
|
|
|
|
|
function handleEditButton() {
|
|
|
|
setShowEdit(true)
|
|
|
|
}
|
2020-07-06 12:49:30 +02:00
|
|
|
|
2021-03-25 08:34:07 +01:00
|
|
|
function handleEditComputeButton() {
|
|
|
|
setShowEditCompute(true)
|
|
|
|
}
|
|
|
|
|
2020-12-10 14:30:40 +01:00
|
|
|
return showEdit ? (
|
2021-08-20 17:05:06 +02:00
|
|
|
<Edit setShowEdit={setShowEdit} isComputeType={isComputeType} />
|
2021-03-25 08:34:07 +01:00
|
|
|
) : showEditCompute ? (
|
|
|
|
<EditComputeDataset setShowEdit={setShowEditCompute} />
|
2020-12-10 14:30:40 +01:00
|
|
|
) : (
|
2021-07-26 15:48:24 +02:00
|
|
|
<>
|
|
|
|
<div className={styles.networkWrap}>
|
|
|
|
<NetworkName networkId={ddo.chainId} className={styles.network} />
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<article className={styles.grid}>
|
|
|
|
<div>
|
|
|
|
<div className={styles.content}>
|
|
|
|
<MetaMain />
|
|
|
|
<Bookmark did={ddo.id} />
|
2020-07-06 12:49:30 +02:00
|
|
|
|
2021-07-26 15:48:24 +02:00
|
|
|
{isInPurgatory ? (
|
|
|
|
<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}
|
2021-11-11 08:51:13 +01:00
|
|
|
text={ddo?.metadata.description || ''}
|
2021-07-26 15:48:24 +02:00
|
|
|
/>
|
2020-07-08 00:06:48 +02:00
|
|
|
|
2021-07-26 15:48:24 +02:00
|
|
|
<MetaSecondary />
|
2020-08-03 12:04:03 +02:00
|
|
|
|
2021-07-26 15:48:24 +02:00
|
|
|
{isOwner && isAssetNetwork && (
|
|
|
|
<div className={styles.ownerActions}>
|
|
|
|
<Button
|
|
|
|
style="text"
|
|
|
|
size="small"
|
|
|
|
onClick={handleEditButton}
|
|
|
|
>
|
|
|
|
Edit Metadata
|
|
|
|
</Button>
|
2021-11-11 08:51:13 +01:00
|
|
|
{serviceCompute && ddo?.metadata.type === 'dataset' && (
|
2021-07-26 15:48:24 +02:00
|
|
|
<>
|
|
|
|
<span className={styles.separator}>|</span>
|
|
|
|
<Button
|
|
|
|
style="text"
|
|
|
|
size="small"
|
|
|
|
onClick={handleEditComputeButton}
|
|
|
|
>
|
|
|
|
Edit Compute Settings
|
|
|
|
</Button>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
)}
|
2020-10-28 23:59:14 +01:00
|
|
|
|
2021-07-26 15:48:24 +02:00
|
|
|
<MetaFull />
|
|
|
|
<EditHistory />
|
|
|
|
{debug === true && <DebugOutput title="DDO" output={ddo} />}
|
|
|
|
</div>
|
2020-10-20 20:56:54 +02:00
|
|
|
</div>
|
|
|
|
|
2021-07-26 15:48:24 +02:00
|
|
|
<div className={styles.actions}>
|
|
|
|
<AssetActions />
|
|
|
|
</div>
|
|
|
|
</article>
|
|
|
|
</>
|
2020-07-06 12:49:30 +02:00
|
|
|
)
|
|
|
|
}
|