2021-11-23 13:53:09 +01:00
|
|
|
import React, { ReactElement, useEffect, useState } from 'react'
|
2021-10-28 12:33:29 +02:00
|
|
|
import styles from './index.module.css'
|
2021-11-01 15:42:55 +01:00
|
|
|
import { FormPublishData } from '../_types'
|
2021-10-28 12:33:29 +02:00
|
|
|
import { useFormikContext } from 'formik'
|
2021-11-23 13:53:09 +01:00
|
|
|
import AssetContent from 'src/components/Asset/AssetContent'
|
|
|
|
import { transformPublishFormToDdo } from '../_utils'
|
2022-02-14 17:27:36 +01:00
|
|
|
import { ZERO_ADDRESS } from '@oceanprotocol/lib'
|
2020-12-10 14:30:40 +01:00
|
|
|
|
2021-10-28 12:33:29 +02:00
|
|
|
export default function Preview(): ReactElement {
|
2022-02-14 17:27:36 +01:00
|
|
|
const [asset, setAsset] = useState<AssetExtended>()
|
2021-10-28 12:33:29 +02:00
|
|
|
const { values } = useFormikContext<FormPublishData>()
|
2021-05-27 13:58:52 +02:00
|
|
|
|
2021-11-23 13:53:09 +01:00
|
|
|
useEffect(() => {
|
|
|
|
async function makeDdo() {
|
2022-02-14 17:27:36 +01:00
|
|
|
const asset = (await transformPublishFormToDdo(values)) as AssetExtended
|
2021-11-23 13:53:09 +01:00
|
|
|
// dummy BestPrice to trigger certain AssetActions
|
2022-02-14 17:27:36 +01:00
|
|
|
asset.accessDetails = {
|
2021-11-23 13:53:09 +01:00
|
|
|
type: values.pricing.type,
|
2022-02-14 17:27:36 +01:00
|
|
|
addressOrId: ZERO_ADDRESS,
|
2022-11-15 15:35:26 +01:00
|
|
|
templateId: 1,
|
2022-08-02 11:53:22 +02:00
|
|
|
price: `${values.pricing.price}`,
|
2022-02-03 12:29:39 +01:00
|
|
|
baseToken: {
|
2022-02-14 17:27:36 +01:00
|
|
|
address: ZERO_ADDRESS,
|
2022-08-03 14:48:57 +02:00
|
|
|
name: values.pricing?.baseToken?.symbol || 'OCEAN',
|
|
|
|
symbol: values.pricing?.baseToken?.symbol || 'OCEAN'
|
2022-02-03 12:29:39 +01:00
|
|
|
},
|
|
|
|
datatoken: {
|
2022-02-14 17:27:36 +01:00
|
|
|
address: ZERO_ADDRESS,
|
2022-02-03 12:29:39 +01:00
|
|
|
name: '',
|
|
|
|
symbol: ''
|
|
|
|
},
|
2022-02-14 17:27:36 +01:00
|
|
|
isPurchasable: true,
|
|
|
|
isOwned: false,
|
2022-08-02 11:53:22 +02:00
|
|
|
validOrderTx: '',
|
|
|
|
publisherMarketOrderFee: '0'
|
2021-11-23 13:53:09 +01:00
|
|
|
}
|
2022-02-14 17:27:36 +01:00
|
|
|
setAsset(asset)
|
2021-11-23 13:53:09 +01:00
|
|
|
}
|
|
|
|
makeDdo()
|
|
|
|
}, [values])
|
2021-05-27 13:58:52 +02:00
|
|
|
|
2021-02-16 10:27:02 +01:00
|
|
|
return (
|
|
|
|
<div className={styles.preview}>
|
|
|
|
<h2 className={styles.previewTitle}>Preview</h2>
|
|
|
|
|
2021-11-23 13:53:09 +01:00
|
|
|
<h3 className={styles.assetTitle}>{values.metadata.name}</h3>
|
2022-02-14 17:27:36 +01:00
|
|
|
{asset && <AssetContent asset={asset} />}
|
2021-02-16 10:27:02 +01:00
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|