usePrepareSendTransaction

Hook for preparing a transaction to be sent via useSendTransaction.

Eagerly fetches the parameters required for sending a transaction such as the gas estimate and resolving an ENS address (if required).

import { usePrepareSendTransaction } from 'wagmi'

Usage

usePrepareSendTransaction gives back a "prepared config" to be sent through to useSendTransaction.

import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'
 
function App() {
  const { config, error } = usePrepareSendTransaction({
    to: 'moxey.eth',
    value: parseEther('1'),
  })
  const { sendTransaction } = useSendTransaction(config)
 
  return (
    <>
      <button disabled={!sendTransaction} onClick={() => sendTransaction?.()}>
        Send Transaction
      </button>
      {error && (
        <div>An error occurred preparing the transaction: {error.message}</div>
      )}
    </>
  )
}
💡

Note: The sendTransaction function will be undefined if the request has not been prepared (still in-flight or errored), or the end-user is not connected to a wallet.

Return value

{
  data?: PrepareSendTransactionResult
  error?: Error
  isIdle: boolean
  isLoading: boolean
  isFetching: boolean
  isSuccess: boolean
  isError: boolean
  isFetched: boolean
  isFetchedAfterMount: boolean
  isRefetching: boolean
  refetch: (options: {
    throwOnError: boolean
    cancelRefetch: boolean
  }) => Promise<PrepareSendTransactionResult>
  status: 'idle' | 'error' | 'loading' | 'success'
}

Configuration

chainId (optional)

Checks the current chain to make sure it is the same as chainId. If chainId is not the current chain, the Action will throw an error.

const { config } = usePrepareSendTransaction({
  chainId: 1,
  to: 'jxom.eth',
  value: parseEther('1'),
})

account (optional)

The Account to send the transaction from.

const { config } = usePrepareSendTransaction({
  account: '0xf39fd6e51aad88f6f4ce6ab8827279cfffb92266',
  to: 'jxom.eth',
  value: parseEther('1'),
})

gasPrice (optional)

The price (in wei) to pay per gas. Only applies to Legacy Transactions.

const { config } = usePrepareSendTransaction({
  to: 'jxom.eth',
  value: parseEther('1'),
  gasPrice: parseGwei('20'),
})

maxFeePerGas (optional)

Total fee per gas (in wei), inclusive of maxPriorityFeePerGas. Only applies to EIP-1559 Transactions

const { config } = usePrepareSendTransaction({
  to: 'jxom.eth',
  value: parseEther('1'),
  maxFeePerGas: parseGwei('20'),
})

maxPriorityFeePerGas (optional)

Max priority fee per gas (in wei). Only applies to EIP-1559 Transactions

const { config } = usePrepareSendTransaction({
  to: 'jxom.eth',
  value: parseEther('1'),
  maxPriorityFeePerGas: parseGwei('20'),
})

nonce (optional)

Unique number identifying this transaction.

const { config } = usePrepareSendTransaction({
  to: 'jxom.eth',
  value: parseEther('1'),
  nonce: 69,
})

value (optional)

Value in wei sent with this transaction.

const { config } = usePrepareSendTransaction({
  to: 'jxom.eth',
  value: parseEther('1'),
})

cacheTime (optional)

Time (in ms) which the data should remain in the cache.

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  cacheTime: 2_000,
})

enabled (optional)

Set this to false to disable this query from automatically running. Defaults to true.

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  enabled: false,
})

scopeKey (optional)

Scopes the cache to a given context. Hooks that have identical context will share the same cache.

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  scopeKey: 'wagmi',
})

staleTime (optional)

Time (in ms) after data is considered stale. If set to Infinity the data will never be considered stale.

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  staleTime: 2_000,
})

suspense (optional)

Set this to true to enable suspense mode.

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  suspense: true,
})

onSuccess (optional)

Function to invoke when fetching new data is successful.

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  onSuccess(data) {
    console.log('Success', data)
  },
})

onError (optional)

Function to invoke when an error is thrown while fetching new data.

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  onError(error) {
    console.log('Error', error)
  },
})

onSettled (optional)

Function to invoke when fetching is settled (either successfully fetched, or an error has thrown).

const { config } = usePrepareSendTransaction({
  to: 'awkweb.eth',
  value: parseEther('1'),
  onSettled(data, error) {
    console.log('Settled', { data, error })
  },
})