TypeScript SDK

useSendAndConfirmTransaction

A hook to send a transaction and confirm the transaction with users's connected wallet

Example


import { useSendAndConfirmTransaction } from "thirdweb/react";
const { mutate: sendAndConfirmTx, data: transactionReceipt } =
  useSendAndConfirmTransaction();
 
// later
sendAndConfirmTx(tx);

Gasless usage with thirdweb Engine


import { useSendAndConfirmTransaction } from "thirdweb/react";
const mutation = useSendAndConfirmTransaction({
  gasless: {
    provider: "engine",
    relayerUrl:
      "https://thirdweb.engine-***.thirdweb.com/relayer/***",
    relayerForwarderAddress: "0x...",
  },
});

Gasless usage with OpenZeppelin


import { useSendAndConfirmTransaction } from "thirdweb/react";
const mutation = useSendAndConfirmTransaction({
  gasless: {
    provider: "openzeppelin",
    relayerUrl: "https://...",
    relayerForwarderAddress: "0x...",
  },
});

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 { useSendAndConfirmTransaction } from "thirdweb/react";
 
const sendAndConfirmTx = useSendAndConfirmTransaction({
  payModal: {
    theme: "light",
  },
});

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


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


function useSendAndConfirmTransaction(
  config: SendAndConfirmTransactionConfig,
): UseMutationResult<
  TransactionReceipt,
  Error,
  PreparedTransaction<any>
>;

Parameters

Type


let config: SendAndConfirmTransactionConfig;

Returns


let returnType: UseMutationResult<
  TransactionReceipt,
  Error,
  PreparedTransaction<any>
>;

A mutation object to send a transaction.