Skip to content

Send a Transaction

Gasless transactions with Wagmi hooks

Use standard Wagmi hooks to send transactions. The ZeroDev connector turns transactions into UserOperations behind the scenes, so transactions can be sponsored when your project has a matching gas policy in the ZeroDev dashboard.

Before testing gasless transactions, make sure the chain in your Wagmi config, the ZeroDev Bundler RPC URL, and the dashboard gas policy all refer to the same network.

useSendTransaction

import { useState } from 'react'
import { isAddress, parseEther } from 'viem'
import { useAccount, useSendTransaction } from 'wagmi'
 
export function SendEth() {
  const { address, isConnected } = useAccount()
  const { sendTransaction, data, isPending, error } = useSendTransaction()
  const [to, setTo] = useState('')
  const [amount, setAmount] = useState('0.001')
 
  const handleSend = () => {
    if (!isConnected || !isAddress(to)) return
 
    sendTransaction({
      to,
      value: parseEther(amount),
    })
  }
 
  return (
    <div>
      <p>From: {address}</p>
      <input value={to} onChange={(e) => setTo(e.target.value)} />
      <input value={amount} onChange={(e) => setAmount(e.target.value)} />
      <button type="button" onClick={handleSend} disabled={isPending}>
        {isPending ? 'Sending...' : 'Send'}
      </button>
      {data ? <p>Transaction hash: {data}</p> : null}
      {error ? <p>Transaction failed: {error.message}</p> : null}
    </div>
  )
}

useWriteContract

import { parseAbi } from 'viem'
import { useWriteContract } from 'wagmi'
 
const NFT_ABI = parseAbi([
  'function mint(address _to) public',
])
 
export function MintNftGasless({
  contractAddress,
  recipient,
}: {
  contractAddress: `0x${string}`
  recipient: `0x${string}`
}) {
  const { writeContract, data, isPending, error } = useWriteContract()
 
  const mint = () =>
    writeContract({
      address: contractAddress,
      abi: NFT_ABI,
      functionName: 'mint',
      args: [recipient],
    })
 
  return (
    <div>
      <button type="button" onClick={mint} disabled={isPending}>
        {isPending ? 'Minting...' : 'Mint NFT'}
      </button>
      {data ? <p>Transaction hash: {data}</p> : null}
      {error ? <p>Mint failed: {error.message}</p> : null}
    </div>
  )
}

Next steps