refactor consume

src/components/organisms/AssetActions/Consume.tsx

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