Skip to main content

Send transactions

Handle EVM transactions in your Wagmi dapp. With the SDK, you can:

  • Send transactions.
  • Track transaction status in real time.
  • Estimate gas costs accurately.
  • Handle transaction errors gracefully.
  • Manage complex transaction patterns.

Wagmi provides hooks for sending transactions and tracking their status. The following are examples of sending a basic transaction and an advanced transaction with gas estimation.

Send a basic transaction​

import { parseEther } from "viem"
import { useSendTransaction, useWaitForTransactionReceipt } from "wagmi"

function SendTransaction() {
  const { 
    data: hash,
    error,
    isPending,
    sendTransaction
  } = useSendTransaction()

  const { 
    isLoading: isConfirming,
    isSuccess: isConfirmed 
  } = useWaitForTransactionReceipt({
    hash
  })

  async function handleSend() {
    sendTransaction({
      to: "0x...", 
      value: parseEther("0.1")  // 0.1 ETH
    })
  }

  return (
    <div>
      <button 
        onClick={handleSend}
        disabled={isPending}
      >
        {isPending ? "Confirming..." : "Send 0.1 ETH"}
      </button>

      {hash && (
        <div>
          Transaction Hash: {hash}
          {isConfirming && <div>Waiting for confirmation...</div>}
          {isConfirmed && <div>Transaction confirmed!</div>}
        </div>
      )}

      {error && <div>Error: {error.message}</div>}
    </div>
  )
}

Send an advanced transaction with gas estimation​

import { parseEther } from "viem"
import { 
  useSendTransaction, 
  useWaitForTransactionReceipt,
  useEstimateGas
} from "wagmi"

function AdvancedTransaction() {
  const transaction = {
    to: "0x...",
    value: parseEther("0.1"),
    data: "0x..." // Optional contract interaction data
  }

  // Estimate gas
  const { data: gasEstimate } = useEstimateGas(transaction)

  const { sendTransaction } = useSendTransaction({
    ...transaction,
    gas: gasEstimate,
    onSuccess: (hash) => {
      console.log("Transaction sent:", hash)
    }
  })

  return <button onClick={() => sendTransaction()}>Send with Gas Estimate</button>
}

Best practices​

Follow these best practices when handling transactions.

Transaction security​

  • Always validate inputs before sending transactions.
  • Check wallet balances to ensure sufficient funds.
  • Verify addresses are valid.

Error handling​

  • Handle common errors like user rejection and insufficient funds.
  • Provide clear error messages to users.
  • Implement proper error recovery flows.
  • Consider network congestion in gas estimates.

User experience​

  • Display clear loading states during transactions.
  • Show transaction progress in real time.
  • Provide detailed transaction information.

Common errors​

Error codeDescriptionSolution
4001User rejected transactionShow a retry option and a clear error message.
-32603Insufficient fundsCheck the balance before sending a transaction.
-32000Gas too lowIncrease the gas limit or add a buffer to the estimation.
-32002Request already pendingPrevent multiple concurrent transactions.

Next steps​

See the following guides to add more functionality to your dapp:

On this page