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