Transactions

Sending a transaction in react is done via the useSendTransaction hook. The hook returns a React Query mutate function that you can call with a transaction object created with prepareContractCall or prepareTransaction.

Note that unlike in TypeScript core, useSendTransaction does not require passing the active Account, it will used the current active account from the React context.

Try out the demo for yourself in the sending transactions playground

import { prepareContractCall, getContract } from "thirdweb";
import { useSendTransaction } from "thirdweb/react";
 
const contract = getContract({
  client,
  chain,
  address: "0x...",
});
 
const MyComponent = () => {
  const { mutate: sendTransaction, isPending } = useSendTransaction();
 
  const onClick = async () => {
    const transaction = prepareContractCall({
      contract,
      method: "function mint(address to)",
      params: ["0x..."],
      value: 0,
    });
    sendTransaction(transaction);
  };
};

Extensions are a way to make complex transactions in a type-safe way with a simple API.

import { getContract } from "thirdweb";
import { useSendTransaction } from "thirdweb/react";
import { mintTo } from "thirdweb/extensions/erc721";
 
const contract = getContract({
  client,
  chain,
  address: "0x...",
});
 
const MyComponent = () => {
  const { mutate: sendTransaction, isPending } = useSendTransaction();
 
  const onClick = async () => {
    const transaction = mintTo({
      contract,
      to: "0x...",
      nft: {
        name: "NFT Name",
        description: "NFT Description",
        image: "https://example.com/image.png",
      },
    });
    sendTransaction(transaction);
  };
};

Check out all the available extensions for more details.

Check out the transaction hooks reference for more details.