Batch transactions

Smart Wallet enables you to send multiple onchain calls in a single transaction, improving UX by reducing multi-step interactions to a single click. A common example is combining an ERC-20 approve with a swap operation.

You can submit batch transactions using the new wallet_sendCalls RPC method.

Check wallet compatibility for atomic batching

First, verify if your app supports atomic batching (This step is crucial if your app supports multiple wallet types)
Use the useCapabilities hook from Wagmi experimental features
Implement fallback functionality for unsupported wallets

Note: The useWriteContracts and useCapabilities hooks rely on new wallet RPC and may not be supported in all wallets.

app.tsx

import { useCapabilities } from 'wagmi/experimental'
function App() {
  const { data: capabilities } = useCapabilities() 
  // Returns capability object per chain:
  // {
  //   84532: {
  //     atomicBatch: {
  //       supported: true,
  //     },
  //   }  
  // }
  
  // Check if atomic batching is supported
  const isAtomicBatchSupported = capabilities?.[84532]?.atomicBatch?.supported
  
  return (
    <div>
      {isAtomicBatchSupported ? (
        <BatchTransactionComponent />
      ) : (
        <FallbackComponent />
      )}
    </div>
  )
}

Set up contract interactions

Import required hooks: useAccount and useWriteContracts from Wagmi
Define your smart contract ABI
Initialize the useWriteContracts hook for batch transactions
Create a transaction handling function that can process multiple contract calls

Important: Make sure your contract ABIs are correctly typed for better development experience.

app.tsx

import { useAccount } from 'wagmi'
import { useWriteContracts } from 'wagmi/experimental'
// Define your contract ABI
const abi = [
  {
    stateMutability: 'nonpayable',
    type: 'function',
    inputs: [{ name: 'to', type: 'address' }],
    name: 'safeMint',
    outputs: [],
  }
] as const
function BatchTransactionComponent() {
  const account = useAccount()
  const { writeContracts } = useWriteContracts()
  const handleBatchTransaction = () => {
    writeContracts({
      contracts: [
        {
          address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
          abi,
          functionName: "safeMint",
          args: [account.address],
        },
        // Add more contract interactions as needed
        {
          address: "0x119Ea671030FBf79AB93b436D2E20af6ea469a19",
          abi,
          functionName: "safeMint",
          args: [account.address],
        }
      ],
    })
  }
  return (
    <button 
      onClick={handleBatchTransaction}
      className="px-4 py-2 bg-blue-600 text-white rounded"
    >
      Execute Batch Transaction
    </button>
  )
}

Implement transaction status monitoring

Add the useCallsStatus hook to track transaction status
Configure polling interval for status updates
Display transaction status to users
Handle transaction completion and errors

Pro tip: The polling interval can be adjusted based on your needs, but 1 second is a good default.

app.tsx

import { useCallsStatus } from 'wagmi/experimental'
function BatchTransactionComponent() {
  const { data: id, writeContracts } = useWriteContracts()
  const { data: callsStatus } = useCallsStatus({
    id: id as string,
    query: {
      enabled: !!id,
      // Poll every second until confirmed
      refetchInterval: (data) =>
        data.state.data?.status === "CONFIRMED" ? false : 1000,
    },
  })
  // Example response structure:
  // {
  //   status: 'CONFIRMED',
  //   receipts: [
  //     {
  //       logs: [{
  //         address: '0x...',
  //         topics: ['0x...'],
  //         data: '0x...'
  //       }],
  //       status: 'success',
  //       blockHash: '0x...',
  //       blockNumber: 122414523n,
  //       gasUsed: 390000n,
  //       transactionHash: '0x...'
  //     }
  //   ]
  // }
  return (
    <div className="space-y-4">
      <button 
        onClick={handleBatchTransaction}
        className="px-4 py-2 bg-blue-600 text-white rounded"
      >
        Execute Batch Transaction
      </button>
      
      {callsStatus && (
        <div className="p-4 border rounded">
          <p className="font-semibold">
            Status: {callsStatus.status}
          </p>
          {callsStatus.status === 'CONFIRMED' && (
            <p className="text-green-600">
              Transaction confirmed! Hash: {callsStatus.receipts[0].transactionHash}
            </p>
          )}
        </div>
      )}
    </div>
  )
}