How to make a transaction to wait until the first one get mined in React

Question

I have a function that allows users to approve a smart contract to spend an amount of token on their behalf. The problem that I faced is when I trigger the function pay 2 transactions pop up, approve and transfer(normal). For a better user experience, I would like to wait until the first transaction gets mined and then call the second transaction.

Ps: I'm using web3.js

I tried to use :

.on('transitionsHash', hash => {})

But it didn't work.

Thank you

async function pay() {
  setActivePayment(true);
  const contractAddress = "0xc6988e2EfB0a11a529666b2cG43322Ce8A4C85a6";
  token.methods
  .approve(contractAddress, amount)
  .send({from : account,
         maxPriorityFeePerGas: null,
         maxFeePerGas: null})
  .then(
  await token.methods
  .transfer(contractAddress, amount)
  .send({from : account,
         maxPriorityFeePerGas: null,
         maxFeePerGas: null
  })
  .once("error", (err)=> {
    console.log(err);
    setActivePayment(false);
    showAlert(true, "Something went wrong...!");
  })
  .then((receipt)=> {
    setActivePayment(false);
  }))
}

Answer 1

Referring to https://web3js.readthedocs.io/en/v1.2.11/web3-eth-contract.html?highlight=transactionHash#id36

If you would like to wait until its mined you should use on 'receipt' or 'confirmation'.

Else if you would like to simply move on once the transaction hash is available on 'transactionHash' would be sufficient where the user should be able to see the pending transaction if they were to search for the txHash on etherscan.

You mentioned you attempted to use .on('transitionsHash', hash => {}), which likely did not work as it seems there's a typo. it should be 'transactionHash' rather than 'transitionsHash'