get datatoken balance for use in consume/compute

src/components/organisms/AssetActions/Compute.tsx

@@ -19,10 +19,12 @@ import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 
 export default function Compute({
   ddo,
-  isBalanceSufficient
+  isBalanceSufficient,
+  dtBalance
 }: {
   ddo: DDO
   isBalanceSufficient: boolean
+  dtBalance: string
 }): ReactElement {
   const { ocean } = useOcean()
   const { compute, isLoading, computeStepText, computeError } = useCompute()

src/components/organisms/AssetActions/Consume.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import { toast } from 'react-toastify'
 import { File as FileMetadata, DDO } from '@oceanprotocol/lib'
 import Button from '../../atoms/Button'
@@ -13,11 +13,13 @@ import { useSiteMetadata } from '../../../hooks/useSiteMetadata'
 export default function Consume({
   ddo,
   file,
-  isBalanceSufficient
+  isBalanceSufficient,
+  dtBalance
 }: {
   ddo: DDO
   file: FileMetadata
   isBalanceSufficient: boolean
+  dtBalance: string
 }): ReactElement {
   const { ocean } = useOcean()
   const { marketFeeAddress } = useSiteMetadata()
@@ -25,22 +27,20 @@ export default function Consume({
 
   const isDisabled = !ocean || !isBalanceSufficient
 
-  if (consumeError) {
+  async function handleConsume() {
-    toast.error(consumeError)
+    await consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
   }
 
+  useEffect(() => {
+    consumeError && toast.error(consumeError)
+  }, [consumeError])
+
   const PurchaseButton = () => (
     <div>
       {consumeStepText ? (
         <Loader message={consumeStepText} />
       ) : (
-        <Button
+        <Button style="primary" onClick={handleConsume} disabled={isDisabled}>
-          style="primary"
-          onClick={() =>
-            consume(ddo.id, ddo.dataToken, 'access', marketFeeAddress)
-          }
-          disabled={isDisabled}
-        >
           Buy
         </Button>
       )}

src/components/organisms/AssetActions/index.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement, useState, useEffect } from 'react'
 import styles from './index.module.css'
 import Compute from './Compute'
 import Consume from './Consume'
-import { DDO } from '@oceanprotocol/lib'
+import { DDO, Logger } from '@oceanprotocol/lib'
 import Tabs from '../../atoms/Tabs'
 import { useOcean, useMetadata } from '@oceanprotocol/react'
 import compareAsBN from '../../../utils/compareAsBN'
@@ -10,13 +10,32 @@ import Pool from './Pool'
 import { AdditionalInformationMarket } from '../../../@types/MetaData'
 
 export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
-  const { balance } = useOcean()
+  const { ocean, balance, accountId } = useOcean()
   const { price } = useMetadata(ddo)
   const [isBalanceSufficient, setIsBalanceSufficient] = useState<boolean>()
+  const [dtBalance, setDtBalance] = useState<string>()
 
   const isCompute = Boolean(ddo.findServiceByType('compute'))
   const { attributes } = ddo.findServiceByType('metadata')
 
+  // Get and set user DT balance
+  useEffect(() => {
+    if (!ocean || !accountId) return
+
+    async function init() {
+      try {
+        const dtBalance = await ocean.datatokens.balance(
+          ddo.dataToken,
+          accountId
+        )
+        setDtBalance(dtBalance)
+      } catch (e) {
+        Logger.error(e.message)
+      }
+    }
+    init()
+  }, [ocean, accountId, ddo.dataToken])
+
   // Check user balance against price
   useEffect(() => {
     if (!price || !price.value || !balance || !balance.ocean) return
@@ -29,10 +48,15 @@ export default function AssetActions({ ddo }: { ddo: DDO }): ReactElement {
   }, [balance, price])
 
   const UseContent = isCompute ? (
-    <Compute ddo={ddo} isBalanceSufficient={isBalanceSufficient} />
+    <Compute
+      ddo={ddo}
+      dtBalance={dtBalance}
+      isBalanceSufficient={isBalanceSufficient}
+    />
   ) : (
     <Consume
       ddo={ddo}
+      dtBalance={dtBalance}
       isBalanceSufficient={isBalanceSufficient}
       file={attributes.main.files[0]}
     />