Batching transactions

Batching transactions allows sending multiple transactions in a single user operation. This can be useful to save on fees, reduce number of user confimations or to ensure that multiple transactions are executed atomically.

A typical example is to do an approval and a transfer in a single userOperation. This way, the transfer will only happen if the approval is successful.

import {
  useActiveAccount,
  useSendBatchTransaction,
} from "thirdweb/react";
import { approve, transferFrom } from "thirdweb/extensions/erc20";
 
const smartAccount = useActiveAccount();
const { mutate: sendBatchTransaction } = useSendBatchTransaction();
 
const approveAndTransfer = async () => {
  const transactions = [
    approve({
      contract,
      spender: "0x...",
      value: 100,
    }),
    transferFrom({
      contract,
      from: "0x...",
      to: "0x...",
      amount: 100,
    }),
  ];
  await sendBatchTransaction(transactions);
};