Skip to content
Documentation
/
Hooks
/
useWaitForTransaction

useWaitForTransaction

Hook for declaratively waiting until transaction is processed. Pairs well with useContractWrite and useTransaction.

import { useWaitForTransaction } from 'wagmi'

Usage

import { useWaitForTransaction } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, wait] = useWaitForTransaction({
    hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060',
  })

  if (loading) return <div>Processing…</div>
  if (error) return <div>Transaction error</div>
  return <div>Transaction: {JSON.stringify(data)}</div>
}

Return Values

result

{
  data?: TransactionReceipt
  error?: Error
  loading?: boolean
}

wait

(config?: {
  confirmations?: number
  hash?: string
  timeout?: number
  wait?: TransactionResponse['wait']
}) => Promise<{ data?: TransactionReceipt; error?: Error }>

Configuration

confirmations (optional)

Waits until confirmations number of blocks are mined on top of the block containing the transaction. Defaults to 1. If confirmations is 0, hook will not wait and return immediately without blocking, likely resulting in data being null.

import { useWaitForTransaction } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, wait] = useWaitForTransaction({
    confirmations: 1,
    hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060',
  })

  return ...
}

hash (optional)

Transaction hash to monitor.

import { useWaitForTransaction } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, wait] = useWaitForTransaction({
    hash: '0x7be10a9c3440cdc09f7e9b36b7b162e0a377cae104742f6ee43e8f2fea6cfdcf',
  })

  return ...
}

skip (optional)

Skips automatically waiting for transaction to process on mount. Defaults to false. Useful if you want to call wait manually at some other point.

import { useWaitForTransaction } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, wait] = useWaitForTransaction({
    hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060',
    skip: true,
  })

  return ...
}

timeout (optional)

Maximum amount of time to wait before timing out in milliseconds. Defaults to 0 (will wait until transaction processes).

import { useWaitForTransaction } from 'wagmi'

const App = () => {
  const [{ data, error, loading }, wait] = useWaitForTransaction({
    hash: '0x5c504ed432cb51138bcf09aa5e8a410dd4a1e204ef84bfed1be16dfba1b22060',
    timeout: 2000, // 2 seconds
  })

  return ...
}

wait (optional)

Function that resolves to processed transaction receipt. Works well with useContractWrite and useTransaction results hash or wait.

import { useTransaction, useWaitForTransaction } from 'wagmi'

const App = () => {
  const [result, sendTransaction] = useTransaction()
  const [{ data, error, loading }, wait] = useWaitForTransaction({
    wait: result.data?.wait
  })

  return ...
}
useTransaction
useWebSocketProvider