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;

If you’re using the widget in a Next.js app, make sure to use the dynamic import with ssr: false to avoid server-side rendering issues:

import dynamic from 'next/dynamic';
const SwapWidget = dynamic(
  () => import('@ensofinance/shortcuts-widget'), 
  { ssr: false }
);
3

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

*Required when using token addresses

​
Next Steps

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

Updated