2020-08-11 08:20:40 +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-10-19 11:33:06 +02:00
|
|
|
import { DDO, Logger } from '@oceanprotocol/lib'
|
2020-07-23 12:26:08 +02:00
|
|
|
import Tabs from '../../atoms/Tabs'
|
2020-08-20 14:22:32 +02:00
|
|
|
import { useOcean, useMetadata } from '@oceanprotocol/react'
|
2020-08-11 09:30:17 +02:00
|
|
|
import compareAsBN from '../../../utils/compareAsBN'
|
2020-08-18 17:14:54 +02:00
|
|
|
import Pool from './Pool'
|
2020-07-08 17:57:53 +02:00
|
|
|
|
2020-08-26 08:48:22 +02:00
|
|
|
export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
|
2020-10-19 11:33:06 +02:00
|
|
|
const { ocean, balance, accountId } = useOcean()
|
2020-10-27 17:34:22 +01:00
|
|
|
// const { price } = useMetadata(ddo)
|
|
|
|
// TODO: quick hack for
|
|
|
|
// https://github.com/oceanprotocol/market/issues/145
|
|
|
|
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>(true)
|
2020-10-19 11:33:06 +02:00
|
|
|
const [dtBalance, setDtBalance] = useState<string>()
|
2020-08-11 08:20:40 +02:00
|
|
|
|
2020-08-05 13:21:14 +02:00
|
|
|
const isCompute = Boolean(ddo.findServiceByType('compute'))
|
2020-08-26 08:48:22 +02:00
|
|
|
const { attributes } = ddo.findServiceByType('metadata')
|
2020-08-07 18:12:39 +02:00
|
|
|
|
2020-10-19 11:33:06 +02:00
|
|
|
// Get and set user DT balance
|
|
|
|
useEffect(() => {
|
|
|
|
if (!ocean || !accountId) return
|
|
|
|
|
|
|
|
async function init() {
|
|
|
|
try {
|
|
|
|
const dtBalance = await ocean.datatokens.balance(
|
|
|
|
ddo.dataToken,
|
|
|
|
accountId
|
|
|
|
)
|
|
|
|
setDtBalance(dtBalance)
|
|
|
|
} catch (e) {
|
|
|
|
Logger.error(e.message)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
init()
|
|
|
|
}, [ocean, accountId, ddo.dataToken])
|
|
|
|
|
2020-10-27 17:34:22 +01:00
|
|
|
// TODO: quick hack for
|
|
|
|
// https://github.com/oceanprotocol/market/issues/145
|
|
|
|
|
2020-08-11 08:20:40 +02:00
|
|
|
// Check user balance against price
|
2020-10-27 17:34:22 +01:00
|
|
|
// useEffect(() => {
|
|
|
|
// if (!price || !price.value || !balance || !balance.ocean || !dtBalance)
|
|
|
|
// return
|
2020-08-11 08:20:40 +02:00
|
|
|
|
2020-10-27 17:34:22 +01:00
|
|
|
// setIsBalanceSufficient(
|
|
|
|
// compareAsBN(balance.ocean, `${price.value}`) || Number(dtBalance) >= 1
|
|
|
|
// )
|
2020-08-11 08:20:40 +02:00
|
|
|
|
2020-10-27 17:34:22 +01:00
|
|
|
// return () => {
|
|
|
|
// setIsBalanceSufficient(false)
|
|
|
|
// }
|
|
|
|
// }, [balance, price, dtBalance])
|
2020-08-11 08:20:40 +02:00
|
|
|
|
2020-07-23 12:26:08 +02:00
|
|
|
const UseContent = isCompute ? (
|
2020-10-19 11:33:06 +02:00
|
|
|
<Compute
|
|
|
|
ddo={ddo}
|
|
|
|
dtBalance={dtBalance}
|
|
|
|
isBalanceSufficient={isBalanceSufficient}
|
|
|
|
/>
|
2020-07-23 12:26:08 +02:00
|
|
|
) : (
|
2020-08-11 08:20:40 +02:00
|
|
|
<Consume
|
|
|
|
ddo={ddo}
|
2020-10-19 11:33:06 +02:00
|
|
|
dtBalance={dtBalance}
|
2020-08-11 08:20:40 +02:00
|
|
|
isBalanceSufficient={isBalanceSufficient}
|
2020-08-26 08:48:22 +02:00
|
|
|
file={attributes.main.files[0]}
|
2020-08-11 08:20:40 +02:00
|
|
|
/>
|
2020-07-08 17:57:53 +02:00
|
|
|
)
|
2020-07-23 12:26:08 +02:00
|
|
|
|
|
|
|
const tabs = [
|
|
|
|
{
|
|
|
|
title: 'Use',
|
|
|
|
content: UseContent
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
2020-09-23 13:55:53 +02:00
|
|
|
// Check from metadata, cause that is available earlier
|
2020-10-20 18:23:08 +02:00
|
|
|
const hasPool = ddo.price?.type === 'pool'
|
2020-09-23 13:55:53 +02:00
|
|
|
|
|
|
|
hasPool &&
|
|
|
|
tabs.push({
|
|
|
|
title: 'Pool',
|
|
|
|
content: <Pool ddo={ddo} />
|
|
|
|
})
|
|
|
|
|
2020-07-23 12:26:08 +02:00
|
|
|
return <Tabs items={tabs} className={styles.actions} />
|
2020-07-08 17:57:53 +02:00
|
|
|
}
|