diff --git a/src/components/@shared/TokenApproval/ButtonApprove.tsx b/src/components/@shared/TokenApproval/ButtonApprove.tsx index 4583200c5..9583d494c 100644 --- a/src/components/@shared/TokenApproval/ButtonApprove.tsx +++ b/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 ? ( - + ) : infiniteApproval ? ( approveTokens(`${2 ** 53 - 1}`)} > - Approve {coin}{' '} + Approve {tokenSymbol}{' '} ) : ( approveTokens(amount)}> - Approve {amount} {coin} + Approve {amount} {tokenSymbol} ) diff --git a/src/components/@shared/TokenApproval/index.tsx b/src/components/@shared/TokenApproval/index.tsx index 6d598571b..f93ecab76 100644 --- a/src/components/@shared/TokenApproval/index.tsx +++ b/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({ ) : ( diff --git a/src/components/Asset/AssetActions/Pool/Actions.tsx b/src/components/Asset/AssetActions/Pool/Actions.tsx index bc06418fa..83791e69c 100644 --- a/src/components/Asset/AssetActions/Pool/Actions.tsx +++ b/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 = ( ) + const config = getOceanConfig(ddo?.chainId) + const tokenAddress = config.oceanTokenAddress + const tokenSymbol = config.oceanTokenSymbol + return ( <> @@ -50,7 +57,8 @@ export default function Actions({ ) : (