TypeScript SDK

SwapWidget

A widget for swapping tokens with cross-chain support

Example

Basic usage

By default, no tokens are selected in the widget UI.

You can set specific tokens to buy or sell by default by passing the prefill prop. User can change these selections in the widget UI.


<SwapWidget client={client} />;

Set an ERC20 token to Buy by default


<SwapWidget
  client={client}
  prefill={{
    buyToken: {
      // Base USDC
      chainId: 8453,
      tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
    },
  }}
/>;

Set a native token to Sell by default

By not specifying a tokenAddress, the native token will be used.


<SwapWidget
  client={client}
  prefill={{
    // Base native token (ETH)
    sellToken: {
      chainId: 8453,
    },
  }}
/>;

Set amount and token to Buy by default


<SwapWidget
  client={client}
  prefill={{
    buyToken: {
      // 0.1 Base USDC
      chainId: 8453,
      amount: "0.1",
      tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
    },
  }}
/>;

Set both buy and sell tokens by default


<SwapWidget
  client={client}
  prefill={{
    buyToken: {
      // Base USDC
      chainId: 8453,
      tokenAddress: "0x833589fcd6edb6e08f4c7c32d4f71b54bda02913",
    },
    sellToken: {
      // Polygon native token (MATIC)
      chainId: 137,
    },
  }}
/>;


function SwapWidget(props: SwapWidgetProps): Element;

Parameters

Props of type SwapWidgetProps to configure the SwapWidget component.

Type


let props: {
  className?: string;
  client: ThirdwebClient;
  connectOptions?: SwapWidgetConnectOptions;
  currency?: SupportedFiatCurrency;
  onCancel?: (quote: SwapPreparedQuote) => void;
  onError?: (error: Error, quote: SwapPreparedQuote) => void;
  onSuccess?: (quote: SwapPreparedQuote) => void;
  prefill?: {
    buyToken?: {
      amount?: string;
      chainId: number;
      tokenAddress?: string;
    };
    sellToken?: {
      amount?: string;
      chainId: number;
      tokenAddress?: string;
    };
  };
  showThirdwebBranding?: boolean;
  style?: React.CSSProperties;
  theme?: "light" | "dark" | Theme;
};

Returns


let returnType: Element;