mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-28 00:27:49 +02:00
* update * merge pr #1012 * fix header * fix * abort controller * up next.8 * build fix * update lock * fix * another fix * ssh fix * another ssh fix * remove optional * order mock * small cleanup * fix package * price updates * finish getPrice * fix consume * fix consume * getConsumeDetails comments * restore functionality after consumeDetails * fix some compute typings * more price fetching updates * 'minor' refactors and fixed build * package-lock fix * minor comments * minor naming changes * fix * fix pool badge * remove console.log
155 lines
4.5 KiB
TypeScript
155 lines
4.5 KiB
TypeScript
import React, { ReactElement, useEffect, useState } from 'react'
|
|
import { toast } from 'react-toastify'
|
|
import FileIcon from '@shared/FileIcon'
|
|
import Price from '@shared/Price'
|
|
import { useSiteMetadata } from '@hooks/useSiteMetadata'
|
|
import { useAsset } from '@context/Asset'
|
|
import { useWeb3 } from '@context/Web3'
|
|
import { usePricing } from '@hooks/usePricing'
|
|
import { useConsume } from '@hooks/useConsume'
|
|
import ButtonBuy from '@shared/ButtonBuy'
|
|
import { secondsToString } from '@utils/ddo'
|
|
import AlgorithmDatasetsListForCompute from './Compute/AlgorithmDatasetsListForCompute'
|
|
import styles from './Consume.module.css'
|
|
import { useIsMounted } from '@hooks/useIsMounted'
|
|
import { Asset, FileMetadata } from '@oceanprotocol/lib'
|
|
|
|
export default function Consume({
|
|
ddo,
|
|
accessDetails,
|
|
file,
|
|
isBalanceSufficient,
|
|
dtBalance,
|
|
fileIsLoading,
|
|
isConsumable,
|
|
consumableFeedback
|
|
}: {
|
|
ddo: Asset
|
|
accessDetails: AccessDetails
|
|
file: FileMetadata
|
|
isBalanceSufficient: boolean
|
|
dtBalance: string
|
|
fileIsLoading?: boolean
|
|
isConsumable?: boolean
|
|
consumableFeedback?: string
|
|
}): ReactElement {
|
|
const { accountId } = useWeb3()
|
|
const { appConfig } = useSiteMetadata()
|
|
const [hasPreviousOrder, setHasPreviousOrder] = useState(false)
|
|
const [previousOrderId, setPreviousOrderId] = useState<string>()
|
|
const { isInPurgatory, isAssetNetwork } = useAsset()
|
|
const { buyDT, pricingStepText, pricingError, pricingIsLoading } =
|
|
usePricing()
|
|
const { consumeStepText, consume, consumeError, isLoading } = useConsume()
|
|
const [isDisabled, setIsDisabled] = useState(true)
|
|
const [hasDatatoken, setHasDatatoken] = useState(false)
|
|
const [isConsumablePrice, setIsConsumablePrice] = useState(true)
|
|
const [assetTimeout, setAssetTimeout] = useState('')
|
|
const isMounted = useIsMounted()
|
|
|
|
useEffect(() => {
|
|
if (!ddo) return
|
|
|
|
const { timeout } = ddo.services[0]
|
|
setAssetTimeout(`${timeout}`)
|
|
}, [ddo])
|
|
|
|
useEffect(() => {
|
|
if (!accessDetails) return
|
|
|
|
setIsConsumablePrice(accessDetails.isConsumable)
|
|
setHasPreviousOrder(accessDetails.owned)
|
|
setPreviousOrderId(accessDetails.validOrderTx)
|
|
}, [accessDetails])
|
|
|
|
useEffect(() => {
|
|
setHasDatatoken(Number(dtBalance) >= 1)
|
|
}, [dtBalance])
|
|
|
|
useEffect(() => {
|
|
if (!accountId) return
|
|
setIsDisabled(
|
|
!isConsumable ||
|
|
((!isBalanceSufficient ||
|
|
!isAssetNetwork ||
|
|
typeof consumeStepText !== 'undefined' ||
|
|
pricingIsLoading ||
|
|
!isConsumablePrice) &&
|
|
!hasPreviousOrder &&
|
|
!hasDatatoken)
|
|
)
|
|
}, [
|
|
hasPreviousOrder,
|
|
isBalanceSufficient,
|
|
isAssetNetwork,
|
|
consumeStepText,
|
|
pricingIsLoading,
|
|
isConsumablePrice,
|
|
hasDatatoken,
|
|
isConsumable,
|
|
accountId
|
|
])
|
|
|
|
async function handleConsume() {
|
|
// if (!hasPreviousOrder && !hasDatatoken) {
|
|
// const tx = await buyDT('1', price, ddo)
|
|
// if (tx === undefined) return
|
|
// }
|
|
const error = await consume(
|
|
ddo.id,
|
|
ddo.services[0].datatokenAddress,
|
|
'access',
|
|
appConfig.marketFeeAddress,
|
|
previousOrderId
|
|
)
|
|
error || setHasPreviousOrder(true)
|
|
}
|
|
|
|
// Output errors in UI
|
|
useEffect(() => {
|
|
consumeError && toast.error(consumeError)
|
|
}, [consumeError])
|
|
|
|
useEffect(() => {
|
|
pricingError && toast.error(pricingError)
|
|
}, [pricingError])
|
|
|
|
const PurchaseButton = () => (
|
|
<ButtonBuy
|
|
action="download"
|
|
disabled={isDisabled}
|
|
hasPreviousOrder={hasPreviousOrder}
|
|
hasDatatoken={hasDatatoken}
|
|
dtSymbol={ddo?.datatokens[0]?.symbol}
|
|
dtBalance={dtBalance}
|
|
datasetLowPoolLiquidity={!isConsumablePrice}
|
|
onClick={handleConsume}
|
|
assetTimeout={secondsToString(parseInt(assetTimeout))}
|
|
assetType={ddo?.metadata?.type}
|
|
stepText={consumeStepText || pricingStepText}
|
|
isLoading={pricingIsLoading || isLoading}
|
|
priceType={accessDetails?.type}
|
|
isConsumable={isConsumable}
|
|
isBalanceSufficient={isBalanceSufficient}
|
|
consumableFeedback={consumableFeedback}
|
|
/>
|
|
)
|
|
|
|
return (
|
|
<aside className={styles.consume}>
|
|
<div className={styles.info}>
|
|
<div className={styles.filewrapper}>
|
|
<FileIcon file={file} isLoading={fileIsLoading} />
|
|
</div>
|
|
<div className={styles.pricewrapper}>
|
|
<Price accessDetails={accessDetails} conversion />
|
|
{!isInPurgatory && <PurchaseButton />}
|
|
</div>
|
|
</div>
|
|
{ddo?.metadata?.type === 'algorithm' && (
|
|
<AlgorithmDatasetsListForCompute algorithmDid={ddo.id} ddo={ddo} />
|
|
)}
|
|
</aside>
|
|
)
|
|
}
|