> ## Documentation Index
> Fetch the complete documentation index at: https://docs.enso.build/llms.txt
> Use this file to discover all available pages before exploring further.

# Route Widget

> A React component that integrates the Enso API to provide token swapping and DeFi operations directly in your application.

export const date_0 = "2025-07-07"

<CardGroup cols={2}>
  <Card title="Github" icon="github" href="https://github.com/EnsoBuild/shortcuts-widget">
    Source code
  </Card>

  <Card title="Route Widget Live Demo" icon="play" href="https://templates.enso.build/widget?chainId=1&tokenIn=0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee">
    Try it out!
  </Card>
</CardGroup>

## 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

```bash theme={null}
npm install @ensofinance/shortcuts-widget
```

**Note**: Requires `wagmi` and `viem` as peer dependencies.

### 2. Import and use the component

```jsx theme={null}
import SwapWidget from '@ensofinance/shortcuts-widget';

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

export default App;
```

### 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

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

### Custom Theme

```jsx theme={null}
<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](https://developers.enso.build) to obtain your API key.

<div className="text-right text-xs gray-200 font-semibold w-full" style={{marginTop: '0'}}>
  <p style={{
        color: "#b2b2b2"  
    }}>Updated {date_0}</p>
</div>