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

​
Installation

npm install @ensofinance/shortcuts-widget

Note: Requires wagmi and viem as peer dependencies.

​
Basic Implementation

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

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

export default App;

​
Configuration

PropTypeDescriptionRequired
apiKeystringEnso API keyYes
tokenInstringInput token addressNo
tokenOutstringOutput token addressNo
chainIdnumberChain 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}
/>

​
Get Your API Key

Register at Enso Developer Dashboard to obtain your API key.