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.
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 forconfirmations
: 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:

You can use it to handle errors when calling the wait
function.
And that's it 🎉
Thank you for reading this article