useSendTransaction

Hook for sending a transaction.

import { useSendTransaction } from 'wagmi'

Usage

import { useSendTransaction, usePrepareSendTransaction } from 'wagmi'

function App() {
  const { config } = usePrepareSendTransaction({
    request: { to: 'moxey.eth', value: BigNumber.from('10000000000000000') },
  })
  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>
  )
}

💡

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

Return Value

{
  data?: TransactionResponse
  error?: Error
  isError: boolean
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  sendTransaction: ((args?: SendTransactionArgs) => void) | undefined
  sendTransactionAsync: ((args?: SendTransactionArgs) => Promise<TransactionResponse>) | undefined
  reset: () => void
  status: 'idle' | 'error' | 'loading' | 'success'
}

Configuration

mode

This is automatically populated when using usePrepareSendTransaction hook.

recklesslyUnprepared: Allow to pass through an adhoc unprepared request. Note: This has UX pitfalls, it is highly recommended to not use this and instead prepare the request upfront using the usePrepareSendTransaction hook.
prepared: The request has been prepared with parameters required for sending a transaction via the usePrepareSendTransaction hook

import { useSendTransaction } from 'wagmi'

function App() {
  const { sendTransaction } = useSendTransaction({
    mode: 'recklesslyUnprepared',
    request: {
      to: 'moxey.eth',
      value: BigNumber.from('10000000000000000'),
    },
  })
}

request (optional)

This is automatically populated when using usePrepareSendTransaction hook.

The request to use when sending the transaction.

import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'

function App() {
  const { config } = usePrepareSendTransaction({ ... })
  const { sendTransaction } = useSendTransaction({
    ...config,
    request: config.request
  })
}

onError (optional)

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

import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'

function App() {
  const { config } = usePrepareSendTransaction({ ... })
  const { sendTransaction } = useSendTransaction({
    ...config,
    onError(error) {
      console.log('Error', error)
    },
  })
}

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.

import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'

function App() {
  const { config } = usePrepareSendTransaction({ ... })
  const { sendTransaction } = useSendTransaction({
    ...config,
    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).

import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'

function App() {
  const { config } = usePrepareSendTransaction({ ... })
  const { sendTransaction } = useSendTransaction({
    ...config,
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  })
}

onSuccess (optional)

Function to invoke when send transaction is successful.

import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'

function App() {
  const { config } = usePrepareSendTransaction({ ... })
  const { sendTransaction } = useSendTransaction({
    ...config,
    onSuccess(data) {
      console.log('Success', data)
    },
  })
}

Override Config

It is possible to pass through override config. Any override config prefixed with recklesslySetUnprepared means that it will break the previously prepared config. It will need to prepare the request again at the time of invoking sendTransaction/sendTransactionAsync.

💡

This usage is not recommended. It comes with UX pitfalls. Only use it as a last resort.

import { usePrepareSendTransaction, useSendTransaction } from 'wagmi'

function App() {
  const { config } = usePrepareSendTransaction({
    request: { to: 'moxey.eth', value: BigNumber.from('10000000000000000') },
  })
  const { data, isLoading, isSuccess, sendTransaction } =
    useSendTransaction(config)

  return (
    <div>
      <button
        disabled={!sendTransaction}
        onClick={() => sendTransaction({
          recklesslySetUnpreparedRequest: {
            to: 'awkweb.eth',
            value: BigNumber.from('10000000000000000'),
          }}
        })}>
        Send Transaction
      </button>
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
    </div>
  )
}

Reckless Usage

It is possible to use useSendTransaction without pairing it with usePrepareSendTransaction by using "recklessly unprepared" mode.

💡

This usage is not recommended. It comes with UX pitfalls. Only use it as a last resort.

import { useSendTransaction } from 'wagmi'

function App() {
  const { data, isLoading, isSuccess, sendTransaction } = useSendTransaction({
    mode: 'recklesslyUnprepared',
    to: 'moxey.eth',
    value: BigNumber.from('10000000000000000'),
  })

  return (
    <div>
      <button onClick={() => sendTransaction()}>Send Transaction</button>
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
    </div>
  )
}