2020-08-11 08:20:40 +02:00
|
|
|
import React, { ReactElement, useState, useEffect } from 'react'
|
2020-07-08 17:57:53 +02:00
|
|
|
import Compute from './Compute'
|
|
|
|
import Consume from './Consume'
|
2022-02-03 15:31:43 +01:00
|
|
|
import { FileMetadata, LoggerInstance, Datatoken } from '@oceanprotocol/lib'
|
2021-11-23 13:53:09 +01:00
|
|
|
import Tabs, { TabsItem } from '@shared/atoms/Tabs'
|
2021-10-13 18:48:59 +02:00
|
|
|
import { compareAsBN } from '@utils/numbers'
|
2020-08-18 17:14:54 +02:00
|
|
|
import Pool from './Pool'
|
2020-11-16 16:21:15 +01:00
|
|
|
import Trade from './Trade'
|
2021-10-13 18:48:59 +02:00
|
|
|
import { useAsset } from '@context/Asset'
|
|
|
|
import { useWeb3 } from '@context/Web3'
|
|
|
|
import Web3Feedback from '@shared/Web3Feedback'
|
2022-02-04 16:58:11 +01:00
|
|
|
import { getFileDidInfo, getFileUrlInfo } from '@utils/provider'
|
2021-10-13 18:48:59 +02:00
|
|
|
import { getOceanConfig } from '@utils/ocean'
|
|
|
|
import { useCancelToken } from '@hooks/useCancelToken'
|
|
|
|
import { useIsMounted } from '@hooks/useIsMounted'
|
|
|
|
import styles from './index.module.css'
|
2021-11-23 13:53:09 +01:00
|
|
|
import { useFormikContext } from 'formik'
|
|
|
|
import { FormPublishData } from 'src/components/Publish/_types'
|
2022-02-03 15:31:43 +01:00
|
|
|
import { AssetExtended } from 'src/@types/AssetExtended'
|
2022-02-07 15:58:47 +01:00
|
|
|
import PoolProvider from '@context/Pool'
|
2020-07-08 17:57:53 +02:00
|
|
|
|
2021-11-23 13:53:09 +01:00
|
|
|
export default function AssetActions({
|
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-01-14 18:40:05 +01:00
|
|
|
const { accountId, balance, web3 } = useWeb3()
|
2021-11-23 13:53:09 +01:00
|
|
|
const { isAssetNetwork } = useAsset()
|
2022-01-14 15:38:30 +01:00
|
|
|
|
|
|
|
// TODO: using this for the publish preview works fine, but produces a console warning
|
|
|
|
// on asset details page as there is no formik context there:
|
|
|
|
// Warning: Formik context is undefined, please verify you are calling useFormikContext()
|
|
|
|
// as child of a <Formik> component.
|
2022-01-13 19:17:09 +01:00
|
|
|
const formikState = useFormikContext<FormPublishData>()
|
2021-01-21 16:02:48 +01:00
|
|
|
|
2020-10-29 21:34:53 +01:00
|
|
|
const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
|
2020-10-19 11:33:06 +02:00
|
|
|
const [dtBalance, setDtBalance] = useState<string>()
|
2021-11-11 14:40:38 +01:00
|
|
|
const [fileMetadata, setFileMetadata] = useState<FileMetadata>()
|
2021-06-10 10:39:24 +02:00
|
|
|
const [fileIsLoading, setFileIsLoading] = useState<boolean>(false)
|
2021-11-11 08:51:13 +01:00
|
|
|
const isCompute = Boolean(
|
2022-02-03 15:31:43 +01:00
|
|
|
asset?.services.filter((service) => service.type === 'compute')[0]
|
2021-11-11 08:51:13 +01:00
|
|
|
)
|
2020-08-07 18:12:39 +02:00
|
|
|
|
2021-07-06 08:51:37 +02:00
|
|
|
const [isConsumable, setIsConsumable] = useState<boolean>(true)
|
|
|
|
const [consumableFeedback, setConsumableFeedback] = useState<string>('')
|
2021-09-24 13:56:42 +02:00
|
|
|
const newCancelToken = useCancelToken()
|
|
|
|
const isMounted = useIsMounted()
|
2021-08-16 12:02:01 +02:00
|
|
|
|
2021-11-11 08:51:13 +01:00
|
|
|
// useEffect(() => {
|
|
|
|
// if (!ddo || !accountId || !ocean || !isAssetNetwork) return
|
|
|
|
|
|
|
|
// async function checkIsConsumable() {
|
|
|
|
// const consumable = await ocean.assets.isConsumable(
|
|
|
|
// ddo,
|
|
|
|
// accountId.toLowerCase()
|
|
|
|
// )
|
|
|
|
// if (consumable) {
|
|
|
|
// setIsConsumable(consumable.result)
|
|
|
|
// setConsumableFeedback(consumable.message)
|
|
|
|
// }
|
|
|
|
// }
|
|
|
|
// checkIsConsumable()
|
|
|
|
// }, [accountId, isAssetNetwork, ddo, ocean])
|
2021-07-06 08:51:37 +02:00
|
|
|
|
2021-06-10 10:39:24 +02:00
|
|
|
useEffect(() => {
|
2022-02-03 15:31:43 +01:00
|
|
|
const oceanConfig = getOceanConfig(asset?.chainId)
|
2021-08-23 12:15:13 +02:00
|
|
|
if (!oceanConfig) return
|
2021-08-16 12:02:01 +02:00
|
|
|
|
2021-07-12 15:56:23 +02:00
|
|
|
async function initFileInfo() {
|
|
|
|
setFileIsLoading(true)
|
2021-11-23 13:53:09 +01:00
|
|
|
const providerUrl =
|
2022-01-13 19:17:09 +01:00
|
|
|
formikState?.values?.services[0].providerUrl.url ||
|
2022-02-04 16:58:11 +01:00
|
|
|
asset?.services[0]?.serviceEndpoint
|
2021-11-23 13:53:09 +01:00
|
|
|
|
2021-07-12 15:56:23 +02:00
|
|
|
try {
|
2022-02-04 16:58:11 +01:00
|
|
|
const fileInfoResponse = formikState?.values?.services?.[0].files?.[0]
|
|
|
|
.url
|
|
|
|
? await getFileUrlInfo(
|
|
|
|
formikState?.values?.services?.[0].files?.[0].url,
|
|
|
|
providerUrl
|
|
|
|
)
|
|
|
|
: await getFileDidInfo(asset?.id, asset?.services[0]?.id, providerUrl)
|
2021-09-24 13:56:42 +02:00
|
|
|
fileInfoResponse && setFileMetadata(fileInfoResponse[0])
|
2021-11-23 13:53:09 +01:00
|
|
|
setFileIsLoading(false)
|
2021-07-12 15:56:23 +02:00
|
|
|
} catch (error) {
|
2021-12-10 12:33:47 +01:00
|
|
|
LoggerInstance.error(error.message)
|
2021-07-12 15:56:23 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
initFileInfo()
|
2022-02-03 15:31:43 +01:00
|
|
|
}, [asset, isMounted, newCancelToken, formikState?.values?.services])
|
2021-06-10 10:39:24 +02:00
|
|
|
|
2020-10-19 11:33:06 +02:00
|
|
|
// Get and set user DT balance
|
|
|
|
useEffect(() => {
|
2022-01-14 18:40:05 +01:00
|
|
|
if (!web3 || !accountId || !isAssetNetwork) return
|
|
|
|
|
2020-10-19 11:33:06 +02:00
|
|
|
async function init() {
|
|
|
|
try {
|
2022-01-14 18:40:05 +01:00
|
|
|
const datatokenInstance = new Datatoken(web3)
|
|
|
|
const dtBalance = await datatokenInstance.balance(
|
2022-02-03 15:31:43 +01:00
|
|
|
asset.services[0].datatokenAddress,
|
2022-01-14 18:40:05 +01:00
|
|
|
accountId
|
|
|
|
)
|
|
|
|
setDtBalance(dtBalance)
|
2020-10-19 11:33:06 +02:00
|
|
|
} catch (e) {
|
2021-12-10 12:33:47 +01:00
|
|
|
LoggerInstance.error(e.message)
|
2020-10-19 11:33:06 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
init()
|
2022-02-03 15:31:43 +01:00
|
|
|
}, [web3, accountId, asset, isAssetNetwork])
|
2020-10-19 11:33:06 +02:00
|
|
|
|
2020-08-11 08:20:40 +02:00
|
|
|
// Check user balance against price
|
2020-10-29 21:34:53 +01:00
|
|
|
useEffect(() => {
|
2022-02-03 15:31:43 +01:00
|
|
|
if (asset?.accessDetails?.type === 'free') setIsBalanceSufficient(true)
|
|
|
|
if (
|
|
|
|
!asset?.accessDetails?.price ||
|
|
|
|
!accountId ||
|
|
|
|
!balance?.ocean ||
|
|
|
|
!dtBalance
|
|
|
|
)
|
2022-02-03 12:29:39 +01:00
|
|
|
return
|
2020-08-11 08:20:40 +02:00
|
|
|
|
2020-10-29 21:34:53 +01:00
|
|
|
setIsBalanceSufficient(
|
2022-02-03 15:31:43 +01:00
|
|
|
compareAsBN(balance.ocean, `${asset?.accessDetails.price}`) ||
|
2022-02-03 12:29:39 +01:00
|
|
|
Number(dtBalance) >= 1
|
2020-10-29 21:34:53 +01:00
|
|
|
)
|
2020-08-11 08:20:40 +02:00
|
|
|
|
2020-10-29 21:34:53 +01:00
|
|
|
return () => {
|
|
|
|
setIsBalanceSufficient(false)
|
|
|
|
}
|
2022-02-03 15:31:43 +01:00
|
|
|
}, [balance, accountId, asset?.accessDetails, 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
|
2022-02-03 15:31:43 +01:00
|
|
|
ddo={asset}
|
|
|
|
accessDetails={asset?.accessDetails}
|
2020-10-19 11:33:06 +02:00
|
|
|
dtBalance={dtBalance}
|
2021-06-10 10:39:24 +02:00
|
|
|
file={fileMetadata}
|
|
|
|
fileIsLoading={fileIsLoading}
|
2021-07-06 08:51:37 +02:00
|
|
|
isConsumable={isConsumable}
|
|
|
|
consumableFeedback={consumableFeedback}
|
2020-10-19 11:33:06 +02:00
|
|
|
/>
|
2020-07-23 12:26:08 +02:00
|
|
|
) : (
|
2020-08-11 08:20:40 +02:00
|
|
|
<Consume
|
2022-02-03 15:31:43 +01:00
|
|
|
ddo={asset}
|
|
|
|
accessDetails={asset?.accessDetails}
|
2020-10-19 11:33:06 +02:00
|
|
|
dtBalance={dtBalance}
|
2020-08-11 08:20:40 +02:00
|
|
|
isBalanceSufficient={isBalanceSufficient}
|
2021-06-10 10:39:24 +02:00
|
|
|
file={fileMetadata}
|
|
|
|
fileIsLoading={fileIsLoading}
|
2021-07-06 08:51:37 +02:00
|
|
|
isConsumable={isConsumable}
|
|
|
|
consumableFeedback={consumableFeedback}
|
2020-08-11 08:20:40 +02:00
|
|
|
/>
|
2020-07-08 17:57:53 +02:00
|
|
|
)
|
2020-07-23 12:26:08 +02:00
|
|
|
|
2021-11-23 13:53:09 +01:00
|
|
|
const tabs: TabsItem[] = [
|
2020-07-23 12:26:08 +02:00
|
|
|
{
|
|
|
|
title: 'Use',
|
|
|
|
content: UseContent
|
|
|
|
}
|
|
|
|
]
|
|
|
|
|
2022-02-03 15:31:43 +01:00
|
|
|
asset?.accessDetails?.type === 'dynamic' &&
|
2020-11-16 16:21:15 +01:00
|
|
|
tabs.push(
|
|
|
|
{
|
|
|
|
title: 'Pool',
|
2021-11-23 13:53:09 +01:00
|
|
|
content: <Pool />,
|
2022-02-03 15:31:43 +01:00
|
|
|
disabled: !asset?.accessDetails.datatoken
|
2020-11-16 16:21:15 +01:00
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'Trade',
|
2021-11-23 13:53:09 +01:00
|
|
|
content: <Trade />,
|
2022-02-03 15:31:43 +01:00
|
|
|
disabled: !asset?.accessDetails.datatoken
|
2020-11-16 16:21:15 +01:00
|
|
|
}
|
|
|
|
)
|
2020-09-23 13:55:53 +02:00
|
|
|
|
2021-05-27 13:58:52 +02:00
|
|
|
return (
|
|
|
|
<>
|
2022-02-07 15:58:47 +01:00
|
|
|
<PoolProvider>
|
|
|
|
<Tabs items={tabs} className={styles.actions} />
|
|
|
|
<Web3Feedback
|
|
|
|
networkId={asset?.chainId}
|
|
|
|
isAssetNetwork={isAssetNetwork}
|
|
|
|
/>
|
|
|
|
</PoolProvider>
|
2021-05-27 13:58:52 +02:00
|
|
|
</>
|
|
|
|
)
|
2020-07-08 17:57:53 +02:00
|
|
|
}
|