Overview

This widget is a React component designed to provide a user-friendly interface for swapping tokens. It integrates with Enso API to allow not only simple swaps but also operations like zap-in.

Features

• Swap any-to-any tokens

• Perform zap-in, deposit, stake operations

• Display token details including balance, USD cost, slippage, etc.

• Enable DeFi operations composition since Enso API is used

Installation

To install the widget, you need to have Node.js and npm installed. Then, run the following command in your project directory:

npm install @ensofinance/shortcuts-widget

Usage

wagmi and viem are peer dependencies. Your project should be using them.

To use the widget in your React application, import the `SwapWidget` component and include it in your JSX:

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

const App = () => {

return (

<div>

<SwapWidget apiKey={"YOUR_API_KEY"} />

</div>

);

};

export default App;

Configuration

Props

The SwapWidget component accepts the following props:

• apiKey (string): Enso API key (required)

• tokenOut (string): Token address for the output token

• tokenIn (string): Token address for the input token

• chainId (number): Chain ID for the blockchain network (required if tokenIn or tokenOut are provided)

• themeConfig (SystemConfig): Optional theme configuration

• enableShare (boolean): Enable route sharing functionality (copy with button)

• obligateSelection (boolean): Obligate token selection

• indicateRoute (boolean): Indicate the route of the swap