Github

Source code

Route Widget Live Demo

Try it out!

​
Features

  • Desired operation: Any-to-any token swaps and position entry/exit across multiple chains (zap-in, deposit, stake, and more)
  • Automatic route building: Automatically constructs an optimal transaction involving multiple protocols and tokens
  • Shortcut preview: Previews of token balances, USD values, and price impact preview

​
Integration

You can integrate the Enso shortcuts widget into your React application.

​
1. Install the package

npm install @ensofinance/shortcuts-widget
Note: Requires wagmi and viem as peer dependencies.

​
2. Import and use the component

import SwapWidget from '@ensofinance/shortcuts-widget';

function App() {
  return <SwapWidget apiKey="YOUR_API_KEY" />;
}

export default App;

​
3. Props & Configuration

PropTypeDescriptionRequired
apiKeystringEnso API keyYes
tokenInstringInput token addressNo
tokenOutstringOutput token addressNo
chainIdnumberStarting position’s chain IDRequired with token addresses
themeConfigobjectTheme settingsNo
enableSharebooleanEnable route sharingNo
obligateSelectionbooleanForce token selectionNo
indicateRoutebooleanShow swap route pathNo

​
Examples

​
Pre-selected Tokens

<SwapWidget 
  apiKey="YOUR_API_KEY"
  chainId={1}
  tokenIn="0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2" // WETH
  tokenOut="0x6B175474E89094C44Da98b954EedeAC495271d0F" // DAI
/>

​
Custom Theme

<SwapWidget 
  apiKey="YOUR_API_KEY"
  themeConfig={{
    colors: {
      primary: '#3498db',
      secondary: '#2ecc71',
      background: '#f8f9fa'
    }
  }}
  enableShare={true}
  indicateRoute={true}
/>

​
APIs used

The Widget uses the following APIs:
  • GET /tokens to fetch the token and positions on the selected
  • GET /balances to fetch the user’s token balances and display the exact amount for each position
  • GET /route to get the optimal route for user’s intended operation

​
Get Your API Key

Register at Enso Developer Dashboard to obtain your API key.

Updated