How to wait for a transaction to complete in your React app using Wagmi

In this tutorial, we are going to learn how to wait for a transaction to complete in your React application using Wagmi and how to get information about that transaction.

After sending a transaction or getting a transaction that is still pending, you might want to wait for that transaction to be completed and confirmed on the blockchain to inform users that the transaction was successful or failed or just display information about it.

For that, you can either use the wait function inside the data object after sending or getting a transaction using Wagmi or use the useWaitForTransaction hook.

Here is an example that shows how to use useWaitForTransaction and then the same example with wait:

import {
  useSendTransaction,
  useWaitForTransaction,
  usePrepareSendTransaction
} from 'wagmi';
import { utils } from 'ethers'

export const WaitForTransaction = () => {
  // send Ethereum
  const { config } = usePrepareSendTransaction({
    request: {
      to: "0x5b8f1310A956ee1521A7bB56160451C786289aa9",
      value: utils.parseEther("0.1")
    }
  })
  const {
    data,
    isLoading,
    sendTransaction
  } = useSendTransaction(config)

  // Wait for the transaction using the hook
  // Won't do anything if the hash passed in the parameters is null
  
  const {
    data: txReceipt,
    error: txError,
    isLoading: txLoading,
  } = useWaitForTransaction({ confirmations: 1, hash: data?.hash });
  
  if (isLoading) return <p>Confirm on your wallet</p>
  
  if (!data) {
    return (
      <button onClick={() => sendTransaction()}>
        Send transaction
      </button>
    )
  }
  
  if (txReceipt) {
    return (
      <p>
        The transaction was successful, the receipt:
        {JSON.stringify(txReceipt)}
      </p>
    )
  }
  
  return <p>The transaction is pending....</p>
}

The same example but with the wait function:

import {
  useSendTransaction,
  useWaitForTransaction,
  usePrepareSendTransaction
} from 'wagmi';
import { utils } from 'ethers'

export const WaitForTransaction = () => {
  const [receipt, setReceipt] = useState()
  
  // send Ethereum
  const { config } = usePrepareSendTransaction({
    request: {
      to: "0x5b8f1310A956ee1521A7bB56160451C786289aa9",
      value: utils.parseEther("0.1")
    }
  })
  const {
    data,
    isLoading,
    sendTransaction
  } = useSendTransaction(config)

  useEffect(() => {
    if (data?.wait) {
      data
        .wait(1)
        .then((txReceipt) => {
          console.log('The transaction was successful');
          setReceipt(txReceipt)
        })
        .catch((err) => {
          console.log('The transaction failed:', err);
        });
    }
  }, [data]);
  
  if (isLoading) return <p>Confirm on your wallet</p>
  
  if (!data) {
    return (
      <button onClick={() => sendTransaction()}>
        Send transaction
      </button>
    )
  }
  
  if (txReceipt) {
    return (
      <p>
        The transaction was successful, the receipt:
        {JSON.stringify(txReceipt)}
      </p>
    )
  }
  
  return <p>The transaction is pending....</p>
}

The wait function will take in parameters the number of confirmations to wait for and will return a Promise. When that Promise is resolved, it means the transaction has the confirmations you wanted to wait for so it's not pending anymore and it returns a TransactionReceipt.

If the transaction fails, the Promise will reject and return an error.

The useWaitForTransaction hook also returns a TransactionReceipt but takes in parameter an object with the following properties:

• hash: the hash of the transaction to wait for
• confirmations: the number of confirmations to wait for (1 by default)

There are other options you can pass to the useWaitForTransaction hook but these are the ones we use the most.

Check out the documentation to see all the arguments you can pass to the hook.

The default number of confirmations for both the wait function and the useWaitForTransaction hook is 1 and it's enough in most cases.

Both functions return a TransactionReceipt, a type that comes from Ethers JS.

Check out all the properties of that object in the documentation here.

The error thrown if the transaction failed is also an error type that comes from Ethers JS. Unfortunately, that error doesn't have all the information you need to know why it failed and handle specific errors differently in your code.

We'll make a tutorial on how to handle errors properly using Wagmi but in the meantime, you can check out how to handle errors with Ethers JS:

How to handle errors when sending transactions using Ethers JS

In this tutorial, we are going to learn how to handle errors that might happen when you send a transaction using Ethers JS and JavaScript.

0xDev0xDev

You can use it to handle errors when calling the wait function.

And that's it 🎉

Thank you for reading this article