TypeScript SDK

useSendTransaction

A hook to send a transaction with from the user's connected wallet.

You can send a transaction with a prepared contract call, a prepared transaction, or using a write Extension.

Example

Sending a prepared contract call


import { useSendTransaction } from "thirdweb/react";
import { getContract, prepareContractCall } from "thirdweb";
import { sepolia } from "thirdweb/chains";
 
const contract = getContract({
  address: "0x...",
  chain: sepolia,
  client,
});
 
const { mutate: sendTx, data: transactionResult } =
  useSendTransaction();
 
const onClick = () => {
  const transaction = prepareContractCall({
    contract,
    method: "function transfer(address to, uint256 value)",
    params: [to, value],
  });
  sendTx(transaction);
};

Using a write extension


import { useSendTransaction } from "thirdweb/react";
import { mintTo } from "thirdweb/extensions/erc721";
 
const { mutate: sendTx, data: transactionResult } =
  useSendTransaction();
 
const onClick = () => {
  const transaction = mintTo({
    contract,
    to: "0x...",
    nft: {
      name: "NFT Name",
      description: "NFT Description",
      image: "https://example.com/image.png",
    },
  });
  sendTx(transaction);
};

Sending a prepared transaction


import { useSendTransaction } from "thirdweb/react";
import { prepareTransaction } from "thirdweb";
import { sepolia } from "thirdweb/chains";
 
const { mutate: sendTx, data: transactionResult } =
  useSendTransaction();
 
const onClick = () => {
  // Send 0.1 SepoliaETH to an address
  const transaction = prepareTransaction({
    to: "0x...",
    value: toWei("0.1"),
    chain: sepolia,
    client: thirdwebClient,
    // Specify a token required for the transaction
    erc20Value: {
      amountWei: toWei("0.1"),
      tokenAddress: "0x...",
    },
  });
  sendTx(transaction);
};

When the wallet does not have enough funds to send the transaction, a modal is shown to the user to buy the required funds and then continue with the transaction.

You can configure the pay modal by passing a SendTransactionPayModalConfig object to the payModal config.


import { useSendTransaction } from "thirdweb/react";
 
const sendTx = useSendTransaction({
  payModal: {
    theme: "light",
  },
});

By default, the pay modal is enabled. You can disable it by passing payModal: false to the config.


import { useSendTransaction } from "thirdweb/react";
 
const sendTx = useSendTransaction({
  payModal: false,
});


function useSendTransaction(
  config: SendTransactionConfig,
): UseMutationResult<
  {
    chain: Readonly;
    client: ThirdwebClient;
    maxBlocksWaitTime?: number;
    readonly transactionHash: `0x${string}`;
  },
  Error,
  PreparedTransaction<any>
>;

Parameters

Configuration for the useSendTransaction hook. Refer to SendTransactionConfig for more details.

Type


let config: {
  gasless?: GaslessOptions;
  payModal?: SendTransactionPayModalConfig;
};

Returns


let returnType: UseMutationResult<
  {
    chain: Readonly;
    client: ThirdwebClient;
    maxBlocksWaitTime?: number;
    readonly transactionHash: `0x${string}`;
  },
  Error,
  PreparedTransaction<any>
>;

A UseMutationResult object to send a transaction.