Docs

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

<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>;

Parameters

Returns