Onchain Transaction Component

Enable seamless onchain transactions for any contract with fiat or crypto with amounts calculated and automatic execution after funds are confirmed.

Documentation

Transactions

Let your users pay for onchain transactions with fiat or crypto on any chain.
Amounts are calculated automatically from the transaction, and will get executed after the user has obtained the necessary funds via onramp or swap.

Code

import { claimTo } from "thirdweb/extensions/erc1155";
import {
  TransactionWidget,
  useActiveAccount,
} from "thirdweb/react";

function App() {
  const account = useActiveAccount();
  const { data: nft } = useReadContract(getNFT, {
    contract: nftContract,
    tokenId: 0n,
  });

  return (
    <TransactionWidget
      amount={"0.001"}
      client={THIRDWEB_CLIENT}
      theme={theme === "light" ? "light" : "dark"}
      transaction={claimTo({
        contract: nftContract,
        quantity: 1n,
        tokenId: 2n,
        to: account?.address || "",
      })}
      title={nft?.metadata?.name}
      description={nft?.metadata?.description}
      image={nft?.metadata?.image}
    />
  );
}

Preview

Automatic Onramp

Any transaction with value will automatically trigger onramp to fund the wallet if needed before executing the transaction.

Code

import { transfer } from "thirdweb/extensions/erc1155";
import {
  TransactionButton,
  useActiveAccount,
} from "thirdweb/react";

function App() {
  const account = useActiveAccount();

  return (
    <TransactionButton
      client={client}
      transaction={() => {
        if (!account) {
          throw new Error("No wallet connected");
        }
        return transfer({
          contract: usdcContract,
          amount: "50",
          to: account.address,
        });
      }}
    >
      Buy VIP Pass
    </TransactionButton>
  );
}

Preview