TypeScript SDK

Widgets.TransactionWidget

Widget a prebuilt UI for purchasing a specific token.

Example

Default configuration

By default, the TransactionWidget component will allows users to fund their wallets with crypto or fiat on any of the supported chains..


<TransactionWidget
  client={client}
  transaction={prepareTransaction({
    to: "0x...",
    chain: ethereum,
    client: client,
  })}
  amount="0.1"
/>;

Customize the UI

You can customize the UI of the TransactionWidget component by passing a custom theme object to the theme prop.


<TransactionWidget
  client={client}
  transaction={prepareTransaction({
    to: "0x...",
    chain: ethereum,
    client: client,
    value: toUnits("0.001", 18),
  })}
  theme={darkTheme({
    colors: {
      modalBg: "red",
    },
  })}
/>;

Refer to the Theme type for more details.

Update the Title

You can update the title of the widget by passing a title prop to the TransactionWidget component.


<TransactionWidget
  transaction={prepareTransaction({
    to: "0x...",
    chain: ethereum,
    client: client,
    value: toUnits("0.001", 18),
  })}
  client={client}
  title="Transaction ETH"
/>;

Configure the wallet connection

You can customize the wallet connection flow by passing a connectOptions object to the TransactionWidget component.


<TransactionWidget
  client={client}
  transaction={prepareTransaction({
    to: "0x...",
    chain: ethereum,
    client: client,
    value: toUnits("0.001", 18),
  })}
  connectOptions={{
    connectModal: {
      size: "compact",
      title: "Sign in",
    },
  }}
/>;

Refer to the TransactionWidgetConnectOptions type for more details.


function TransactionWidget(props: TransactionWidgetProps): Element;

Parameters

Props of type TransactionWidgetProps to configure the TransactionWidget component.

Type


let props: {
  activeWallet?: Wallet;
  amount?: string;
  className?: string;
  client: ThirdwebClient;
  connectOptions?: TransactionWidgetConnectOptions;
  currency?: SupportedFiatCurrency;
  description?: string;
  feePayer?: "user" | "seller";
  hiddenWallets?: Array<WalletId>;
  image?: string;
  locale?: LocaleId;
  onCancel?: () => void;
  onError?: (error: Error) => void;
  onSuccess?: () => void;
  paymentLinkId?: string;
  paymentMethods?: Array<"crypto" | "card">;
  presetOptions?: [number, number, number];
  purchaseData?: PurchaseData;
  showThirdwebBranding?: boolean;
  style?: React.CSSProperties;
  supportedTokens?: SupportedTokens;
  theme?: "light" | "dark" | Theme;
  title?: string;
  tokenAddress?: Address;
  transaction: PreparedTransaction;
};

Returns


let returnType: Element;