make datatoken balance work again in multiple places

src/components/Asset/AssetActions/Pool/Add/index.tsx

@@ -13,6 +13,7 @@ import DebugOutput from '@shared/DebugOutput'
 import { useWeb3 } from '@context/Web3'
 import { useAsset } from '@context/Asset'
 import content from '../../../../../../content/price.json'
+import { Datatoken } from '@oceanprotocol/lib'
 
 export interface FormAddLiquidity {
   amount: number
@@ -41,7 +42,7 @@ export default function Add({
   dtSymbol: string
   dtAddress: string
 }): ReactElement {
-  const { accountId, balance } = useWeb3()
+  const { accountId, balance, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
   const { debug } = useUserPreferences()
   const [txId, setTxId] = useState<string>()
@@ -67,13 +68,15 @@ export default function Add({
 
   // Get datatoken balance when datatoken selected
   useEffect(() => {
-    // if (!accountId || !isAssetNetwork || coin === 'OCEAN') return
-    // async function getDtBalance() {
-    //   const dtBalance = await ocean.datatokens.balance(dtAddress, accountId)
-    //   setDtBalance(dtBalance)
-    // }
-    // getDtBalance()
-  }, [accountId, dtAddress, coin])
+    if (!web3 || !accountId || !isAssetNetwork || coin === 'OCEAN') return
+
+    async function getDtBalance() {
+      const datatokenInstance = new Datatoken(web3)
+      const dtBalance = await datatokenInstance.balance(dtAddress, accountId)
+      setDtBalance(dtBalance)
+    }
+    getDtBalance()
+  }, [web3, accountId, dtAddress, coin])
 
   // Get maximum amount for either OCEAN or datatoken
   useEffect(() => {

src/components/Asset/AssetActions/Trade/index.tsx

@@ -5,11 +5,12 @@ import { useWeb3 } from '@context/Web3'
 
 import { isValidNumber } from '@utils/numbers'
 import Decimal from 'decimal.js'
+import { Datatoken } from '@oceanprotocol/lib'
 
 Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 })
 
 export default function Trade(): ReactElement {
-  const { accountId, balance } = useWeb3()
+  const { accountId, balance, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
   const [tokenBalance, setTokenBalance] = useState<PoolBalance>()
   const { price, ddo } = useAsset()
@@ -19,6 +20,7 @@ export default function Trade(): ReactElement {
   // Get datatoken balance, and combine with OCEAN balance from hooks into one object
   useEffect(() => {
     if (
+      !web3 ||
       !accountId ||
       !isAssetNetwork ||
       !balance?.ocean ||
@@ -28,17 +30,18 @@ export default function Trade(): ReactElement {
       return
 
     async function getTokenBalance() {
-      // const dtBalance = await ocean.datatokens.balance(
-      //   ddo.services[0].datatokenAddress,
-      //   accountId
-      // )
-      // setTokenBalance({
-      //   ocean: new Decimal(balance.ocean).toString(),
-      //   datatoken: new Decimal(dtBalance).toString()
-      // })
+      const datatokenInstance = new Datatoken(web3)
+      const dtBalance = await datatokenInstance.balance(
+        ddo.services[0].datatokenAddress,
+        accountId
+      )
+      setTokenBalance({
+        ocean: new Decimal(balance.ocean).toString(),
+        datatoken: new Decimal(dtBalance).toString()
+      })
     }
     getTokenBalance()
-  }, [balance.ocean, accountId, ddo, isAssetNetwork])
+  }, [web3, balance.ocean, accountId, ddo, isAssetNetwork])
 
   // Get maximum amount for either OCEAN or datatoken
   useEffect(() => {

src/components/Asset/AssetActions/index.tsx

@@ -1,7 +1,12 @@
 import React, { ReactElement, useState, useEffect } from 'react'
 import Compute from './Compute'
 import Consume from './Consume'
-import { Asset, FileMetadata, LoggerInstance } from '@oceanprotocol/lib'
+import {
+  Asset,
+  FileMetadata,
+  LoggerInstance,
+  Datatoken
+} from '@oceanprotocol/lib'
 import Tabs, { TabsItem } from '@shared/atoms/Tabs'
 import { compareAsBN } from '@utils/numbers'
 import Pool from './Pool'
@@ -24,7 +29,7 @@ export default function AssetActions({
   ddo: Asset
   price: BestPrice
 }): ReactElement {
-  const { accountId, balance } = useWeb3()
+  const { accountId, balance, web3 } = useWeb3()
   const { isAssetNetwork } = useAsset()
 
   // TODO: using this for the publish preview works fine, but produces a console warning
@@ -87,20 +92,22 @@ export default function AssetActions({
 
   // Get and set user DT balance
   useEffect(() => {
-    if (!accountId || !isAssetNetwork) return
+    if (!web3 || !accountId || !isAssetNetwork) return
+
     async function init() {
       try {
-        // const dtBalance = await ocean.datatokens.balance(
-        //   ddo.services[0].datatokenAddress,
-        //   accountId
-        // )
-        // setDtBalance(dtBalance)
+        const datatokenInstance = new Datatoken(web3)
+        const dtBalance = await datatokenInstance.balance(
+          ddo.services[0].datatokenAddress,
+          accountId
+        )
+        setDtBalance(dtBalance)
       } catch (e) {
         LoggerInstance.error(e.message)
       }
     }
     init()
-  }, [accountId, ddo, isAssetNetwork])
+  }, [web3, accountId, ddo, isAssetNetwork])
 
   // Check user balance against price
   useEffect(() => {