Failing to trying to approve contract using ethers.js (CALL_EXCEPTION or cannot estimate gas)

Question

I am having trouble calling a simple ERC-20 approve function from the front end on the Arbitrum network. Any insight is greatly appreciated. I will outline my code below.

I am retrieving the provider from wagmi-hooks useSigner.

const {
    data: signer,
    isError: isSignerError,
    isLoading: isSignerLoading,
  } = useSigner()

In the same file, I have a simple approve function which is called onClick:

const approve = async (e) => {
    e.preventDefault()
    try {
      const token = new ethers.Contract(
        TOKEN_ADDRESS,
        erc20ABI,
        signer
      )
      const decimals = await token.decimals()
      const decimalAmount = ethers.utils.parseUnits(lockAmount, decimals)
      const tx = await token.approve(CONTRACT, decimalAmount)
      await tx.wait()
    } catch (error) {
      console.log('error: ', error)
    }
  }

The ERC-20 abi is imported from a separate file.

The arguments for the approve function are a simple contract address string & decimalAmount is passed through as:

{
    "type": "BigNumber",
    "hex": "0x0bebc200"
}

When running this code I get the cannot estimate gas error:

So if I append the gasLimit property to the approve function:

const tx = await token.approve(CONTRACT, decimalAmount, {
        gasLimit: 1000000,
      })

I will be able to submit the transaction. However, after I do this I run into another error which is when the transaction is processing, almost instantly I am returned with this CALL_EXCEPTION error (formatted for readability):

Error: transaction failed [ See: https://links.ethers.org/v5-errors-CALL_EXCEPTION ] (transactionHash="0x2993ab1eea05115a78da82f3c0e136ce5633c0552c1d56ba79b3611dd2a6a7f7",
"transaction="{
   "hash":"0x2993ab1eea05115a78da82f3c0e136ce5633c0552c1d56ba79b3611dd2a6a7f7",
   "type":2,
   "accessList":null,
   "blockHash":null,
   "blockNumber":null,
   "transactionIndex":null,
   "confirmations":0,
   "from":"0x7b9F73088C0f45F0DBC7bcCDd22a696E7ee72FF8",
   "gasPrice":{
      "type":"BigNumber",
      "hex":"0x080befc0"
   },
   "maxPriorityFeePerGas":{
      "type":"BigNumber",
      "hex":"0x00"
   },
   "maxFeePerGas":{
      "type":"BigNumber",
      "hex":"0x080befc0"
   },
   "gasLimit":{
      "type":"BigNumber",
      "hex":"0x0f4240"
   },
   "to":"0xfF4c3F6Ee1d541ADcc3D37b7C9AE29303A71f2db",
   "value":{
      "type":"BigNumber",
      "hex":"0x00"
   },
   "nonce":18,
   "data":"0x095ea7b3000000000000000000000000a51eb21215ff9a6774f73a744bbf26b889603134000000000000000000000000000000000000000000000000000000000bebc200",
   "r":"0x71d25a2425c9b2a2fa39ff1a94a85222d723e1155c3b64c4bdc716b4809a21ce",
   "s":"0x76903228e3a0704c53e6e3a90144cb34bff3104fe8ff006f693f75f7a9593758",
   "v":0,
   "creates":null,
   "chainId":0
},
"receipt="{
   "to":"0xfF4c3F6Ee1d541ADcc3D37b7C9AE29303A71f2db",
   "from":"0x7b9F73088C0f45F0DBC7bcCDd22a696E7ee72FF8",
   "contractAddress":null,
   "transactionIndex":1,
   "gasUsed":{
      "type":"BigNumber",
      "hex":"0x04f46e"
   },
   "logsBloom":"0x00000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000",
   "blockHash":"0x28bbf932ad526175fd664231cb58e06809d8178a9bbeab9c60c3180df66283c7",
   "transactionHash":"0x2993ab1eea05115a78da82f3c0e136ce5633c0552c1d56ba79b3611dd2a6a7f7",
   "logs":[
      
   ],
   "blockNumber":58469110,
   "confirmations":1,
   "cumulativeGasUsed":{
      "type":"BigNumber",
      "hex":"0x04f46e"
   },
   "effectiveGasPrice":{
      "type":"BigNumber",
      "hex":"0x05f5e100"
   },
   "status":0,
   "type":2,
   "byzantium":true
}, code=CALL_EXCEPTION, version=providers/5.7.2)

Does anyone have any ideas on how I can solve this or where best to look?

Should I be adding the gasLimit... or is this part of the problem?

Thanks

Answer 1

Make your approval approve for max amount.

const approve = async (e) => {
    e.preventDefault()
    try {
      const token = new ethers.Contract(
        TOKEN_ADDRESS,
        erc20ABI,
        signer
      )
      // const decimals = await token.decimals()
      // const decimalAmount = ethers.utils.parseUnits(lockAmount, decimals)
      const tx = await token.approve(CONTRACT,  ethers.constants.MaxUint256)
      await tx.wait()
    } catch (error) {
      console.log('error: ', error)
    }
  }

Answer 2

Try running your contract method in

https://workspace.web3client.app/evm?web3ClientToken=50f4540e-e813-48a0-8cac-e2bd762a86ea

It has a code feature <> on clicking will generate the code needed for you out of the box.