useSendTransaction

Hook for sending a transaction.

This is a wrapper around viem's sendTransaction.

import { useSendTransaction } from 'wagmi'

Usage

import { useSendTransaction, usePrepareSendTransaction } from 'wagmi'
 
function App() {
  const { data, isLoading, isSuccess, sendTransaction } = useSendTransaction({
    to: 'moxey.eth',
    value: parseEther('0.01'),
  })
 
  return (
    <div>
      <button onClick={() => sendTransaction()}>Send Transaction</button>
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
    </div>
  )
}

💡

It is highly recommended to pair useSendTransaction with the usePrepareSendTransaction hook to avoid UX pitfalls.

Prepared Usage

import { useSendTransaction, usePrepareSendTransaction } from 'wagmi'
 
function App() {
  const { config } = usePrepareSendTransaction({
    to: 'moxey.eth',
    value: parseEther('0.01'),
  })
  const { data, isLoading, isSuccess, sendTransaction } =
    useSendTransaction(config)
 
  return (
    <div>
      <button disabled={!sendTransaction} onClick={() => sendTransaction?.()}>
        Send Transaction
      </button>
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
    </div>
  )
}

Return Value

{
  data?: { hash: Hex }
  error?: Error
  isError: boolean
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  sendTransaction: ((args?: SendTransactionArgs) => void)
  sendTransactionAsync: ((args?: SendTransactionArgs) => Promise<{ hash: Hex }>)
  reset: () => void
  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 { sendTransaction } = useSendTransaction({
  chainId: 1,
  to: 'jxom.eth',
  value: parseEther('1'),
})

account (optional)

The Account to send the transaction from.

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

gasPrice (optional)

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

const { sendTransaction } = useSendTransaction({
  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 { sendTransaction } = useSendTransaction({
  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 { sendTransaction } = useSendTransaction({
  to: 'jxom.eth',
  value: parseEther('1'),
  maxPriorityFeePerGas: parseGwei('20'),
})

nonce (optional)

Unique number identifying this transaction.

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

value (optional)

Value in wei sent with this transaction.

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

onError (optional)

Function to invoke when an error is thrown while attempting to send.

const { sendTransaction } = useSendTransaction({
  to: 'moxey.eth',
  value: parseEther('0.01'),
  onError(error) {
    console.log('Error', error)
  },
})

onMutate (optional)

Function fires before send transaction function and is passed same variables send transaction function would receive. Value returned from this function will be passed to both onError and onSettled functions in event of a send transaction failure.

const { sendTransaction } = useSendTransaction({
  to: 'moxey.eth',
  value: parseEther('0.01'),
  onMutate({ args, overrides }) {
    console.log('Mutate', { args, overrides })
  },
})

onSettled (optional)

Function to invoke when send transaction is settled (either successfully sent, or an error has thrown).

const { sendTransaction } = useSendTransaction({
  to: 'moxey.eth',
  value: parseEther('0.01'),
  onSettled(data, error) {
    console.log('Settled', { data, error })
  },
})

onSuccess (optional)

Function to invoke when send transaction is successful.

const { sendTransaction } = useSendTransaction({
  to: 'moxey.eth',
  value: parseEther('0.01'),
  onSuccess(data) {
    console.log('Success', data)
  },
})

usePublicClient useSignMessage