thirdwebDocs
GitHub

TransactionButton

TransactionButton component is used to render a button that triggers a transaction. It shows a "Switch Network" button if the connected wallet is on a different chain than the transaction.

Example

Basic usage

<TransactionButton
  transaction={() => {}}
  onTransactionConfirmed={handleSuccess}
  onError={handleError}
>
  Confirm Transaction
</TransactionButton>;

Customize the styling by passing the unstyled prop and your inline styles and/or classes:

<TransactionButton
  transaction={() => {}}
  unstyled
  className="bg-white text-black rounded-md p-4 flex items-center justify-center"
>
  Confirm Transaction
</TransactionButton>;

Handle errors

<TransactionButton
  transaction={() => ...}
  onError={(err) => {
    alert(err.message);
    // Add your own logic here
  }}
>
  Confirm Transaction
</TransactionButton>

Alert when a transaction is sent

<TransactionButton
  transaction={() => ...}
  onTransactionSent={(tx) => {
    alert("transaction sent!");
    // Add your own logic here. For example, a toast
  }}
>
  Confirm Transaction
</TransactionButton>

Alert when a transaction is completed

<TransactionButton
  transaction={() => ...}
  onTransactionConfirmed={(tx) => {
    alert("transaction sent!");
    console.log(tx);
    // Add your own logic here. For example, a toast
  }}
>
  Confirm Transaction
</TransactionButton>

The onClick prop, if provided, will be called before the transaction is sent.

<TransactionButton
  onClick={() => alert("Transaction is about to be sent")}
  transaction={...}
>
  ...
</TransactionButton>

Attach custom Pay metadata

<TransactionButton
  payModal={{
    // This image & title will show up in the Pay modal
    metadata: {
      name: "Van Gogh Starry Night",
      image: "https://unsplash.com/starry-night.png",
    },
  }}
>
  ...
</TransactionButton>;

Gasless usage with thirdweb Engine

<TransactionButton
  gasless={{
    provider: "engine",
    relayerUrl:
      "https://thirdweb.engine-***.thirdweb.com/relayer/***",
    relayerForwarderAddress: "0x...",
  }}
>
  ...
</TransactionButton>;

Gasless usage with OpenZeppelin

<TransactionButton
  gasless={{
    provider: "openzeppelin",
    relayerUrl: "https://...",
    relayerForwarderAddress: "0x...",
  }}
>
  ...
</TransactionButton>;
function TransactionButton(props: TransactionButtonProps): Element;

Parameters

The props for this component. Refer to TransactionButtonProps for details.

Type

let props: {
  children: React.ReactNode;
  className?: string;
  disabled?: boolean;
  gasless?: GaslessOptions;
  onClick?: () => void;
  onError?: (error: Error) => void;
  onTransactionConfirmed?: (receipt: TransactionReceipt) => void;
  onTransactionSent?: (
    transactionResult: WaitForReceiptOptions,
  ) => void;
  style?: React.CSSProperties;
  theme?: "dark" | "light" | Theme;
  transaction: () =>
    | Promise<PreparedTransaction<any>>;
  type?: HTMLButtonElement["type"];
  unstyled?: boolean;
};

Returns

let returnType: Element;