oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-16 02:04:54 +01:00
Code Releases Activity

refactor consume

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-07-18 02:06:42 +02:00
parent c5a3715982
commit 902c4eedca
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/components/organisms/AssetActions/Consume.tsx
View File

@ -1,5 +1,6 @@
import React, { ReactElement } from 'react' import React, { ReactElement } from 'react'
import { fromWei } from 'web3-utils' import { fromWei } from 'web3-utils'
import { toast } from 'react-toastify'
import compareAsBN, { Comparisson } from '../../../utils/compareAsBN' import compareAsBN, { Comparisson } from '../../../utils/compareAsBN'
import Button from '../../atoms/Button' import Button from '../../atoms/Button'
import File from '../../atoms/File' import File from '../../atoms/File'
@ -7,7 +8,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, useMetadata } from '@oceanprotocol/react'
import { MetadataMarket } from '../../../@types/Metadata' import { MetadataMarket } from '../../../@types/Metadata'
export default function Consume({ export default function Consume({
@ -17,32 +18,34 @@ export default function Consume({
did: string did: string
metadata: MetadataMarket metadata: MetadataMarket
}): ReactElement { }): ReactElement {
const { ocean, balanceInOcean } = useOcean() const { ddo } = useMetadata(did)
const { consume, consumeStepText, isLoading } = useConsume()
const { price } = metadata.main
const file = metadata.main.files[0] const file = metadata.main.files[0]
const isFree = price === '0' const { cost } = ddo.findServiceByType('access').attributes.main
const isBalanceSufficient =
isFree || compareAsBN(balanceInOcean, fromWei(price), Comparisson.gte)
const isDisabled = !ocean || !isBalanceSufficient || isLoading
const PurchaseButton = () => { const { ocean } = useOcean()
if (typeof window === 'undefined') { const { consumeStepText, consume, consumeError } = useConsume()
return null
}
return isLoading ? ( const isFree = cost === '0'
// const isBalanceSufficient =
// isFree || compareAsBN(balanceInOcean, fromWei(cost), Comparisson.gte)
const isDisabled = !ocean
if (consumeError) {
toast.error(consumeError)
}
const PurchaseButton = () =>
consumeStepText ? (
<Loader message={consumeStepText} /> <Loader message={consumeStepText} />
) : ( ) : (
<Button <Button
style="primary" style="primary"
onClick={() => consume(did)} onClick={() => consume(did, ddo.dataToken, 'access')}
disabled={isDisabled} disabled={isDisabled}
> >
{isFree ? 'Download' : 'Buy'} {isFree ? 'Download' : 'Buy'}
</Button> </Button>
) )
}
return ( return (
<aside className={styles.consume}> <aside className={styles.consume}>
@ -51,13 +54,13 @@ export default function Consume({
<File file={file} /> <File file={file} />
</div> </div>
<div className={styles.pricewrapper}> <div className={styles.pricewrapper}>
<Price price={price} className={styles.price} /> <Price price={cost} className={styles.price} />
<PurchaseButton /> <PurchaseButton />
</div> </div>
</div> </div>
<footer className={styles.feedback}> <footer className={styles.feedback}>
<Web3Feedback isBalanceInsufficient={!isBalanceSufficient} /> <Web3Feedback isBalanceInsufficient />
</footer> </footer>
</aside> </aside>
) )