Not able to call solidity contract function (public payable function) from React

Question

I am using truffle framework to deploy my solidity smart contract on local Ganache GUI.

Everything is on my local. I have configured the truffle config to use local ganache blockchain.

On the front-end app I am using ReactJS with ethers.js. I am also using Metamask (chrome extension) in which I have setup the local ganache RPC correctly (I believe).

THIS IS WORKING CORRECTLY -
I have public testfxn on my solidity contract deployed on local ganache. This testfxn function just returns a uint value 123.
Now from the front-end react app, I click a button - it opens metamask ---- this react app then correctly invokes the testfxn and I am correctly able to console log 123 (the smart contract's returned value)
Working code (React using ethers.js) -

      const accounts = await provider.send("eth_requestAccounts", []);
      console.log(accounts);  // logs correctly the account
      const signer = provider.getSigner(accounts[0]);

      const balance = await provider.getBalance(accounts[0]);

      const balanceInEther = ethers.utils.formatEther(balance);

      const contractInstance = new ethers.Contract(
                      "0x9bd3fdf893 ..... f36597E5e224f95", 
                      contractABI, 
                      signer)

      const testcall = await contractInstance.testfxn();
      console.log(testcall);    // CORRECTLY logs 123

Definition of testfxn (on solidity contract deployed on ganache):-

    function testfxn() public pure returns( uint ){
        return 123;
    }

BELOW CODE IS NOT WORKING-
Instead of calling textfxn if I call troublefxn ..... I get the error.
Non-working code (in react) -

      const accounts = await provider.send("eth_requestAccounts", []);
      console.log(accounts);  // logs correctly the account
      const signer = provider.getSigner(accounts[0]);

      const balance = await provider.getBalance(accounts[0]);

      const balanceInEther = ethers.utils.formatEther(balance);

      const contractInstance = new ethers.Contract(
                      "0x9bd3fdf893 ..... f36597E5e224f95", 
                      contractABI, 
                      signer)

        await contractInstance.troublefxn(5,
                                            {value: ethers.utils.parseEther("8.0")}
                                            );

       // Get error exception - 

Error exception -

    "code": -32603,
    "message": "Internal JSON-RPC error.",
    "data": {
        "message": "VM Exception while processing transaction: revert",
        "code": -32000,
        ...

troublefxn definition on solidity contract -

    function troublefxn(  uint f1, 
        ) public payable {

        some_state_variable = f1;
    }

What am I doing wrong in calling troublefxn from my react app ?

Answer 1

You probably need to call wait() on the transaction.

Make the transaction a variable

const tx = await contractInstance.troublefxn({value: ethers.utils.parseEther("8.0")});

and then call await tx.wait()

which will wait for the transaction to be mined.