Bridge

Swap widget component

The Swap widget component makes it easy to add cross-chain token swaps to your app

• Cross-chain token swaps across 90+ blockchains
• Route optimization to find the best path for any token pair
• Customizable UI - use prebuilt themes or override with your brand colors
• Display fiat values in multiple currencies

You will need a thirdweb project client id to use the SwapWidget component. You can get your clientId by creating a project in the thirdweb dashboard.

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

Make sure to wrap the component containing SwapWidget with the ThirdwebProvider component.

import { ThirdwebProvider } from "thirdweb/react";
 
function App() {
  return (
    <ThirdwebProvider>
      <YourApp />
    </ThirdwebProvider>
  );
}

By default, no tokens are selected in the widget UI. You can configure the default token selection by passing in the prefill prop. It only sets the default token selection - users can change these selections in the widget UI.

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

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,
    },
  }}
/>;

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

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

SwapWidget Component

View the API reference for the SwapWidget component

Swap Widget Playground

Try out the Swap Widget in our live playground