useSendTransaction

Hook for sending a transaction.

import { useSendTransaction } from 'wagmi'

Usage

import { useSendTransaction } from 'wagmi'

function App() {
  const { data, isIdle, isError, isLoading, isSuccess, sendTransaction } =
    useSendTransaction({
      request: {
        to: 'awkweb.eth',
        value: BigNumber.from('1000000000000000000'), // 1 ETH
      },
    })

  return (
    <div>
      {isIdle && (
        <button disabled={loading} onClick={() => sendTransaction()}>
          Send Transaction
        </button>
      )}
      {isLoading && <div>Check Wallet</div>}
      {isSuccess && <div>Transaction: {JSON.stringify(data)}</div>}
      {isError && <div>Error sending transaction</div>}
    </div>
  )
}

Return Value

{
  data?: TransactionResponse
  error?: Error
  isError: boolean
  isIdle: boolean
  isLoading: boolean
  isSuccess: boolean
  sendTransaction: (args? SendTransactionArgs) => void
  sendTransactionAsync: (args? SendTransactionArgs) => Promise<TransactionResponse>
  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 connector attempts to switch to it before sending the transaction.

import { useSendTransaction } from 'wagmi'

function App() {
  const sendTransaction = useSendTransaction({
    chainId: 1,
    request: {
      to: 'awkweb.eth',
      value: BigNumber.from('1000000000000000000'), // 1 ETH
    },
  })
}

request (optional)

Object to use when creating transaction. See TransactionRequest for more info.

import { useSendTransaction } from 'wagmi'

function App() {
  const sendTransaction = useSendTransaction({
    request: {
      to: 'awkweb.eth',
      value: BigNumber.from('1000000000000000000'), // 1 ETH
    },
  })
}

onError (optional)

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

import { useSendTransaction } from 'wagmi'

function App() {
  const sendTransaction = useSendTransaction({
    request: {
      to: 'awkweb.eth',
      value: BigNumber.from('1000000000000000000'), // 1 ETH
    },
    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 { useSendTransaction } from 'wagmi'

function App() {
  const sendTransaction = useSendTransaction({
    request: {
      to: 'awkweb.eth',
      value: BigNumber.from('1000000000000000000'), // 1 ETH
    },
    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 { useSendTransaction } from 'wagmi'

function App() {
  const sendTransaction = useSendTransaction({
    request: {
      to: 'awkweb.eth',
      value: BigNumber.from('1000000000000000000'), // 1 ETH
    },
    onSettled(data, error) {
      console.log('Settled', { data, error })
    },
  })
}

onSuccess (optional)

Function to invoke when send transaction is successful.

import { useSendTransaction } from 'wagmi'

function App() {
  const sendTransaction = useSendTransaction({
    request: {
      to: 'awkweb.eth',
      value: BigNumber.from('1000000000000000000'), // 1 ETH
    },
    onSuccess(data) {
      console.log('Success', data)
    },
  })
}