useWaitForTransactionReceipt

Hook that waits for the transaction to be included on a block, and then returns the transaction receipt. If the transaction reverts, then the action will throw an error. Replacement detection (e.g. sped up transactions) is also supported.

Import

import { useWaitForTransactionReceipt } from '@permissionless/wagmi'

Usage

index.tsx

import {
    useSendTransaction,
    useWaitForTransactionReceipt 
} from "@permissionless/wagmi"
 
function App() {
  const { 
    sendTransaction, 
    data: transactionReference, 
    isPending
  } = useSendTransaction()
 
  const { data: receipt, } =
    useWaitForTransactionReceipt({ 
      id: transactionReference 
    }) 
 
  return (
    <div style={{ marginTop: 60 }}>
      <h2>Send test transaction</h2>
      {isPending && <div>Sending transaction...</div>}
      {transactionReference && isReceiptPending && (
        <div>Awaiting confirmation of transaction.</div>
      )}
      {receipt && <div>{receipt.status}</div>}
      <button onClick={() => sendTransaction({ 
          to: '0xd2135CfB216b74109775236E36d4b433F1DF507B', 
          value: parseEther('0.01'), 
        }) 
      } type="button">
        Send Transaction
      </button>
    </div>
  )
}

Parameters

import { type UseWaitForTransactionReceiptParameters } from '@permissionless/wagmi'

chainId

config['chains'][number]['id'] | undefined

ID of chain to use when fetching data.

index.ts

import { useWaitForTransactionReceipt } from 'wagmi'
import { mainnet } from 'wagmi/chains'
 
function App() {
  const result = useWaitForTransactionReceipt({
    chainId: mainnet.id, 
    hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d',
  })
}

config

Config | undefined

Config to use instead of retrieving from the from nearest WagmiProvider.

::: code-group

index.tsx

import { useWaitForTransactionReceipt } from 'wagmi'
import { config } from './config'
 
function App() {
  const result = useWaitForTransactionReceipt({
    hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d',
    config, 
  })
}

config.ts

import { http, createConfig } from 'wagmi'
import { mainnet, sepolia } from 'wagmi/chains'
 
export const config = createConfig({
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
  },
})

:::

confirmations

number | undefined

The number of confirmations (blocks that have passed) to wait before resolving.

index.ts

import { useWaitForTransactionReceipt } from 'wagmi'
 
function App() {
  const result = useWaitForTransactionReceipt({
    confirmations: 2, 
    hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d',
  })
}

onReplaced

(({ reason: 'replaced' | 'repriced' | 'cancelled'; replacedTransaction: Transaction; transaction: Transaction; transactionReceipt: TransactionReceipt }) => void) | undefined

Optional callback to emit if the transaction has been replaced.

index.ts

import { useWaitForTransactionReceipt } from 'wagmi'
 
function App() {
  const result = useWaitForTransactionReceipt({
    hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d',
    onReplaced: replacement => console.log(replacement), 
  })
}

pollingInterval

number | undefined

Polling frequency (in milliseconds).
Defaults to the Config's pollingInterval config.

index.ts

import { useWaitForTransactionReceipt } from 'wagmi'
 
function App() {
  const result = useWaitForTransactionReceipt({
    hash: '0x4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d',
    pollingInterval: 1_000, 
  })
}

id

string | undefined

The transaction reference to wait for. enabled set to false if hash is undefined.

index.ts

import { useWaitForTransactionReceipt } from 'wagmi'
 
function App() {
  const result = useWaitForTransactionReceipt({
    id: '4ca7ee652d57678f26e887c149ab0735f41de37bcad58c9f6d3ed5824f15b74d', 
  })
}

query

Same query object that you can pass to useWaitForTransactionReceipt hook from wagmi.

Return Type

import { type UseWaitForTransactionReceiptReturnType } from 'wagmi'

Same return type as useWaitForTransactionReceipt from wagmi.