thirdwebDocs
Bridge

Swap Tokens

You can use the SwapWidget component to easily integrate a token swap interface into your app

import { SwapWidget } from "thirdweb/react";
 
const client = createThirdwebClient({
  clientId: "YOUR_CLIENT_ID",
});
 
function Example() {
  return <SwapWidget client={client} />;
}

Live Playground

React

Swap Widget Playground

Try out the Swap Widget in our live playground

Configuring default token selection

By default, no tokens are selected in the widget UI. You can configure the default token selection for the swap widget by passing in the prefill prop. it only sets the default token selection, User can change these selections in the widget UI

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

To configure a native token to sell by default, you can omit the tokenAddress property.

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

Set amount and token to Buy by default

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

Set both buy and sell tokens by default

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

Key Features

  • Cross-chain swaps - Exchange tokens across 50+ supported chains
  • Real-time quotes - Get up-to-date pricing and execution estimates
  • Route optimization - Find the best path for any token pair
  • Price comparison - Compare multiple routes to maximize output
  • Status tracking - Monitor cross-chain transaction progress

Going Further

API Reference