more generic TokenApproval props, more logging

src/components/@shared/TokenApproval/ButtonApprove.tsx

@@ -7,19 +7,19 @@ import content from '../../../../content/price.json'
 
 export function ButtonApprove({
   amount,
-  coin,
+  tokenSymbol,
   approveTokens,
   isLoading
 }: {
   amount: string
-  coin: string
+  tokenSymbol: string
   approveTokens: (amount: string) => void
   isLoading: boolean
 }): ReactElement {
   const { infiniteApproval } = useUserPreferences()
 
   return isLoading ? (
-    <Loader message={`Approving ${coin}...`} />
+    <Loader message={`Approving ${tokenSymbol}...`} />
   ) : infiniteApproval ? (
     <Button
       style="primary"
@@ -27,16 +27,22 @@ export function ButtonApprove({
       disabled={parseInt(amount) < 1}
       onClick={() => approveTokens(`${2 ** 53 - 1}`)}
     >
-      Approve {coin}{' '}
+      Approve {tokenSymbol}{' '}
       <Tooltip
-        content={content.pool.tooltips.approveInfinite.replace('COIN', coin)}
+        content={content.pool.tooltips.approveInfinite.replace(
+          'COIN',
+          tokenSymbol
+        )}
       />
     </Button>
   ) : (
     <Button style="primary" size="small" onClick={() => approveTokens(amount)}>
-      Approve {amount} {coin}
+      Approve {amount} {tokenSymbol}
       <Tooltip
-        content={content.pool.tooltips.approveSpecific.replace('COIN', coin)}
+        content={content.pool.tooltips.approveSpecific.replace(
+          'COIN',
+          tokenSymbol
+        )}
       />
     </Button>
   )

src/components/@shared/TokenApproval/index.tsx

@@ -2,7 +2,6 @@ import React, { ReactElement, useCallback, useEffect, useState } from 'react'
 import { useAsset } from '@context/Asset'
 import { useWeb3 } from '@context/Web3'
 import Decimal from 'decimal.js'
-import { getOceanConfig } from '@utils/ocean'
 import { ButtonApprove } from './ButtonApprove'
 import { allowance, approve, LoggerInstance } from '@oceanprotocol/lib'
 
@@ -10,24 +9,20 @@ export default function TokenApproval({
   actionButton,
   disabled,
   amount,
-  coin
+  tokenAddress,
+  tokenSymbol
 }: {
   actionButton: JSX.Element
   disabled: boolean
   amount: string
-  coin: string
+  tokenAddress: string
+  tokenSymbol: string
 }): ReactElement {
-  const { ddo, price, isAssetNetwork } = useAsset()
+  const { price, isAssetNetwork } = useAsset()
   const [tokenApproved, setTokenApproved] = useState(false)
   const [loading, setLoading] = useState(false)
   const { web3, accountId } = useWeb3()
 
-  const config = getOceanConfig(ddo.chainId)
-
-  const tokenAddress =
-    coin === 'OCEAN'
-      ? config.oceanTokenAddress
-      : ddo.services[0].datatokenAddress
   const spender = price?.address
 
   const checkTokenApproval = useCallback(async () => {
@@ -39,6 +34,7 @@ export default function TokenApproval({
       accountId,
       spender
     )
+    LoggerInstance.log(`[token approval] allowanceValue: ${allowanceValue}`)
 
     if (!allowanceValue) return
 
@@ -57,9 +53,12 @@ export default function TokenApproval({
 
     try {
       const tx = await approve(web3, accountId, tokenAddress, spender, amount)
-      LoggerInstance.log(`Approve tokens tx:`, tx)
+      LoggerInstance.log(`[token approval] Approve tokens tx:`, tx)
     } catch (error) {
-      LoggerInstance.error(`Approve tokens tx failed:`, error.message)
+      LoggerInstance.error(
+        `[token approval] Approve tokens tx failed:`,
+        error.message
+      )
     } finally {
       await checkTokenApproval()
       setLoading(false)
@@ -78,7 +77,7 @@ export default function TokenApproval({
       ) : (
         <ButtonApprove
           amount={amount}
-          coin={coin}
+          tokenSymbol={tokenSymbol}
           approveTokens={approveTokens}
           isLoading={loading}
         />

src/components/Asset/AssetActions/Pool/Actions.tsx

@@ -6,6 +6,8 @@ import ExplorerLink from '@shared/ExplorerLink'
 import SuccessConfetti from '@shared/SuccessConfetti'
 import { useWeb3 } from '@context/Web3'
 import TokenApproval from '@shared/TokenApproval'
+import { getOceanConfig } from '@utils/ocean'
+import { useAsset } from '@context/Asset'
 
 export default function Actions({
   isLoading,
@@ -29,6 +31,7 @@ export default function Actions({
   isDisabled?: boolean
 }): ReactElement {
   const { networkId } = useWeb3()
+  const { ddo } = useAsset()
 
   const actionButton = (
     <Button
@@ -41,6 +44,10 @@ export default function Actions({
     </Button>
   )
 
+  const config = getOceanConfig(ddo?.chainId)
+  const tokenAddress = config.oceanTokenAddress
+  const tokenSymbol = config.oceanTokenSymbol
+
   return (
     <>
       <div className={styles.actions}>
@@ -50,7 +57,8 @@ export default function Actions({
           <TokenApproval
             actionButton={actionButton}
             amount={amount}
-            coin={coin || 'OCEAN'}
+            tokenAddress={tokenAddress}
+            tokenSymbol={tokenSymbol}
             disabled={isDisabled}
           />
         ) : (