2020-08-05 13:21:14 +02:00
|
|
|
import React, { ReactElement, useState, useEffect } from 'react'
|
2020-07-08 17:57:53 +02:00
|
|
|
import styles from './index.module.css'
|
|
|
|
import Compute from './Compute'
|
|
|
|
import Consume from './Consume'
|
2020-07-16 13:39:02 +02:00
|
|
|
import { MetadataMarket } from '../../../@types/Metadata'
|
2020-07-21 14:04:32 +02:00
|
|
|
import { DDO } from '@oceanprotocol/lib'
|
2020-07-23 12:26:08 +02:00
|
|
|
import Tabs from '../../atoms/Tabs'
|
2020-08-05 13:21:14 +02:00
|
|
|
import { useMetadata } from '@oceanprotocol/react'
|
2020-07-08 17:57:53 +02:00
|
|
|
|
|
|
|
export default function AssetActions({
|
|
|
|
metadata,
|
2020-07-21 13:21:22 +02:00
|
|
|
ddo
|
2020-07-08 17:57:53 +02:00
|
|
|
}: {
|
2020-07-16 13:39:02 +02:00
|
|
|
metadata: MetadataMarket
|
2020-07-21 13:21:22 +02:00
|
|
|
ddo: DDO
|
2020-07-08 17:57:53 +02:00
|
|
|
}): ReactElement {
|
2020-08-05 13:21:14 +02:00
|
|
|
const { getBestPrice } = useMetadata(ddo.id)
|
|
|
|
const [price, setPrice] = useState<string>()
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
async function init() {
|
|
|
|
const price = await getBestPrice(ddo.dataToken)
|
2020-08-06 13:00:22 +02:00
|
|
|
setPrice(price)
|
2020-08-05 13:21:14 +02:00
|
|
|
}
|
|
|
|
init()
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
const isCompute = Boolean(ddo.findServiceByType('compute'))
|
2020-07-23 12:26:08 +02:00
|
|
|
const UseContent = isCompute ? (
|
2020-08-05 13:21:14 +02:00
|
|
|
<Compute ddo={ddo} price={price} />
|
2020-07-23 12:26:08 +02:00
|
|
|
) : (
|
2020-08-05 13:21:14 +02:00
|
|
|
<Consume ddo={ddo} price={price} file={metadata.main.files[0]} />
|
2020-07-08 17:57:53 +02:00
|
|
|
)
|
2020-07-23 12:26:08 +02:00
|
|
|
|
|
|
|
const tabs = [
|
|
|
|
{
|
|
|
|
title: 'Use',
|
|
|
|
content: UseContent
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Trade',
|
|
|
|
content: 'Trade Me'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
|
|
|
return <Tabs items={tabs} className={styles.actions} />
|
2020-07-08 17:57:53 +02:00
|
|
|
}
|