Route Widget

​

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

​

1. Install the package

npm install @ensofinance/shortcuts-widget

​

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

​

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

• 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