Templates
Route Widget
A React component that integrates the Enso API to provide token swapping and DeFi operations directly in your application.
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
Note: Requires wagmi
and viem
as peer dependencies.
2. Import and use the component
3. Props & Configuration
Prop | Type | Description | Required |
---|---|---|---|
apiKey | string | Enso API key | Yes |
tokenIn | string | Input token address | No |
tokenOut | string | Output token address | No |
chainId | number | Starting position’s chain ID | Required with token addresses |
themeConfig | object | Theme settings | No |
enableShare | boolean | Enable route sharing | No |
obligateSelection | boolean | Force token selection | No |
indicateRoute | boolean | Show swap route path | No |
Examples
Pre-selected Tokens
Custom Theme
APIs used
The Widget uses the following APIs:
GET /tokens
to fetch the token and positions on the selectedGET /balances
to fetch the user’s token balances and display the exact amount for each positionGET /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