The Cross-chain Route Widget lets you add cross-chain token routing feature to your app. Under the hood, it uses the Enso API to find the best route, and bridge the tokens to the destination chain via Stargate.

Highly customizable, the widget allows you to configure various parameters, including:

  • Source and destination chains: configure specific source and destination chains for the routing process.
  • input and output tokens: allow free choice or restrict to specific tokens for specialized use cases.
  • The output project: destination project for the output token for building protocol-specific flows.

Cross-chain Widget

Try it out!

Cross-chain Widget

Source code

Integrate

Integrate cross-chain routing widget in your app

​
How it Works

After selecting the input token on the source chain, and the output token on the destination chain, the widget will show the best route for the tokens before you sign and send the transaction.

Route Widget Flow

​
Integrate

Follow these steps to integrate the Cross-Chain Route Widget into your React application.

1

Install your project

Install the package:

npm install @ensofinance/shortcuts-widget
2

Import and use the component

Import the component and use it in your app. To get your API key, visit the Developer portal.

The widget must be used within a WagmiConfig provider.

import SwapWidget from '@ensofinance/shortcuts-widget';
function App() {
  return <SwapWidget apiKey="YOUR_API_KEY" />
}
export default App;
3

Customize the theme

import SwapWidget from '@ensofinance/shortcuts-widget';
function App() {
  return <SwapWidget 
    apiKey="YOUR_API_KEY" 
    themeConfig={darkThemeConfig}
    />
}

const darkThemeConfig = {
  theme: {
    tokens: {
      spacing: {
        1: "10px",
        2: "20px",
      },
    },
    semanticTokens: {
      colors: {
        // Background colors
        bg: { value: "#0f172a" }, // Dark blue-gray
        "bg.subtle": { value: "#1e293b" }, // Lighter blue-gray
        "bg.emphasized": { value: "#334155" }, // Medium blue-gray
        "bg.muted": { value: "#141e33" }, // Slightly lighter than base bg
        // Foreground colors
        fg: { value: "#f8fafc" }, // Almost white
        "fg.muted": { value: "#cbd5e1" }, // Light gray
        "fg.subtle": { value: "#94a3b8" }, // Medium gray
        // Border colors
        border: { value: "#334155" }, // Medium blue-gray
        "border.emphasized": { value: "#475569" }, // Darker blue-gray
        "border.subtle": { value: "#1e293b" }, // Lighter blue-gray
        // Primary accent colors
        primary: { value: "#3b82f6" }, // Vibrant blue
        "primary.emphasis": { value: "#2563eb" }, // Darker blue
        "primary.muted": { value: "#60a5fa" }, // Lighter blue
        // Status colors
        success: { value: "#10b981" }, // Green
        warning: { value: "#f59e0b" }, // Amber
        error: { value: "#ef4444" }, // Red
        info: { value: "#0ea5e9" }, // Sky blue
      },
    },
  },
};
export default App;
4

Props & Configuration

Here are the available props for the widget:

ParameterDescriptionRequired
apiKeyYour Enso API keyYes
tokenInThe input token address (you can use to pin the input token)No
tokenOutThe output token address (you can use to pin the output token)No
chainIdThe starting position’s chain ID (required with token addresses)Yes*
destinationChainIdThe destination chain ID (you can use to pin the destination chain)No
themeConfigTheme settingsNo
enableShareEnable route sharing functionality copy with buttonNo
obligateSelectionForce token selectionNo
indicateRouteShow swap route pathNo
showRouteShow the routeNo
showRouteDetailsShow route detailsNo
themeConfigCustomize the Widget themeNo

*Required when using token addresses

​
Next Steps

From here, you can explore the API and the widget further:

Updated