TypeScript SDK

BridgeWidget

A combined widget for swapping or buying tokens with cross-chain support.

This component renders two tabs – "Swap" and "Buy" – and orchestrates the appropriate flow by composing SwapWidget and BuyWidget under the hood.

The Swap tab enables token-to-token swaps (including cross-chain).
The Buy tab enables purchasing a specific token; by default, it uses card onramp in this widget.

Example

Basic usage


<BridgeWidget
  client={client}
  currency="USD"
  theme="dark"
  showThirdwebBranding
  buy={{
    // Buy 0.1 native tokens on Base
    amount: "0.1",
    chainId: 8453,
  }}
/>;

Prefill swap tokens and configure buy


<BridgeWidget
  client={client}
  swap={{
    prefill: {
      buyToken: {
        // Base USDC
        chainId: 8453,
        tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
      },
      sellToken: {
        // Polygon native token (MATIC)
        chainId: 137,
      },
    },
  }}
  buy={{
    amount: "100",
    chainId: 8453,
    tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
    buttonLabel: "Buy USDC",
  }}
/>;


function BridgeWidget(props: BridgeWidgetProps): Element;

Parameters

Props of type BridgeWidgetProps to configure the BridgeWidget component.

Type


let props: {
  buy: {
    amount: string;
    buttonLabel?: string;
    chainId: number;
    className?: string;
    country?: string;
    onCancel?: (quote: BuyOrOnrampPrepareResult | undefined) => void;
    onError?: (
      error: Error,
      quote: BuyOrOnrampPrepareResult | undefined,
    ) => void;
    onSuccess?: (quote: BuyOrOnrampPrepareResult) => void;
    presetOptions?: [number, number, number];
    purchaseData?: PurchaseData;
    tokenAddress?: string;
  };
  client: ThirdwebClient;
  currency?: SupportedFiatCurrency;
  showThirdwebBranding?: boolean;
  swap?: {
    className?: string;
    onCancel?: (quote: SwapPreparedQuote) => void;
    onDisconnect?: () => void;
    onError?: (error: Error, quote: SwapPreparedQuote) => void;
    onSuccess?: (quote: SwapPreparedQuote) => void;
    persistTokenSelections?: boolean;
    prefill?: {
      buyToken?: {
        amount?: string;
        chainId: number;
        tokenAddress?: string;
      };
      sellToken?: {
        amount?: string;
        chainId: number;
        tokenAddress?: string;
      };
    };
    style?: React.CSSProperties;
  };
  theme?: "light" | "dark" | Theme;
};

Returns


let returnType: Element;