mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 05:41:41 +02:00
refactor consume
This commit is contained in:
parent
be9fde8827
commit
a5815669c7
|
@ -19,3 +19,9 @@
|
||||||
.feedback {
|
.feedback {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.hasTokens {
|
||||||
|
font-size: var(--font-size-small);
|
||||||
|
color: var(--color-secondary);
|
||||||
|
margin-top: calc(var(--spacer) / 4);
|
||||||
|
}
|
||||||
|
|
|
@ -7,7 +7,7 @@ import Price from '../../atoms/Price'
|
||||||
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
import Web3Feedback from '../../molecules/Wallet/Feedback'
|
||||||
import styles from './Consume.module.css'
|
import styles from './Consume.module.css'
|
||||||
import Loader from '../../atoms/Loader'
|
import Loader from '../../atoms/Loader'
|
||||||
import { useOcean, useConsume } from '@oceanprotocol/react'
|
import { useOcean, useConsume, usePricing } from '@oceanprotocol/react'
|
||||||
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
|
||||||
|
|
||||||
export default function Consume({
|
export default function Consume({
|
||||||
|
@ -23,25 +23,31 @@ export default function Consume({
|
||||||
}): ReactElement {
|
}): ReactElement {
|
||||||
const { ocean } = useOcean()
|
const { ocean } = useOcean()
|
||||||
const { marketFeeAddress } = useSiteMetadata()
|
const { marketFeeAddress } = useSiteMetadata()
|
||||||
|
const { buyDT, pricingStepText, pricingError } = usePricing()
|
||||||
const { consumeStepText, consume, consumeError } = useConsume()
|
const { consumeStepText, consume, consumeError } = useConsume()
|
||||||
|
|
||||||
const isDisabled = !ocean || !isBalanceSufficient
|
const isDisabled =
|
||||||
|
!ocean || !isBalanceSufficient || consumeStepText || pricingStepText
|
||||||
|
const hasDatatoken = Number(dtBalance) >= 1
|
||||||
|
|
||||||
async function handleConsume() {
|
async function handleConsume() {
|
||||||
|
!hasDatatoken && (await buyDT(ddo.dataToken, '1'))
|
||||||
await consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
|
await consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Output errors in UI
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
consumeError && toast.error(consumeError)
|
consumeError && toast.error(consumeError)
|
||||||
}, [consumeError])
|
pricingError && toast.error(pricingError)
|
||||||
|
}, [consumeError, pricingError])
|
||||||
|
|
||||||
const PurchaseButton = () => (
|
const PurchaseButton = () => (
|
||||||
<div>
|
<div>
|
||||||
{consumeStepText ? (
|
{consumeStepText || pricingStepText ? (
|
||||||
<Loader message={consumeStepText} />
|
<Loader message={consumeStepText || pricingStepText} />
|
||||||
) : (
|
) : (
|
||||||
<Button style="primary" onClick={handleConsume} disabled={isDisabled}>
|
<Button style="primary" onClick={handleConsume} disabled={isDisabled}>
|
||||||
Buy
|
{hasDatatoken ? 'Download' : 'Buy'}
|
||||||
</Button>
|
</Button>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -55,6 +61,12 @@ export default function Consume({
|
||||||
</div>
|
</div>
|
||||||
<div className={styles.pricewrapper}>
|
<div className={styles.pricewrapper}>
|
||||||
<Price ddo={ddo} conversion />
|
<Price ddo={ddo} conversion />
|
||||||
|
{hasDatatoken && (
|
||||||
|
<div className={styles.hasTokens}>
|
||||||
|
You own {dtBalance} {ddo.dataTokenInfo?.symbol || 'DT'} so you can
|
||||||
|
use this asset without paying again.
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
<PurchaseButton />
|
<PurchaseButton />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -38,14 +38,17 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
|
||||||
|
|
||||||
// Check user balance against price
|
// Check user balance against price
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!price || !price.value || !balance || !balance.ocean) return
|
if (!price || !price.value || !balance || !balance.ocean || !dtBalance)
|
||||||
|
return
|
||||||
|
|
||||||
setIsBalanceSufficient(compareAsBN(balance.ocean, `${price.value}`))
|
setIsBalanceSufficient(
|
||||||
|
compareAsBN(balance.ocean, `${price.value}`) || Number(dtBalance) >= 1
|
||||||
|
)
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
setIsBalanceSufficient(false)
|
setIsBalanceSufficient(false)
|
||||||
}
|
}
|
||||||
}, [balance, price])
|
}, [balance, price, dtBalance])
|
||||||
|
|
||||||
const UseContent = isCompute ? (
|
const UseContent = isCompute ? (
|
||||||
<Compute
|
<Compute
|
||||||
|
|
Loading…
Reference in New Issue
Block a user