Uniswap Migrator

The Uniswap Migrator is a tool that helps users easily migrate their existing Uniswap v3 position or deposit any token into Uniswap v4 pool. This widget provides a seamless experience for users to transfer their liquidity between different Uniswap versions while maintaining control over their positions.

Workspace Structure

• app/: Main application that uses the widget
• widget/: Reusable Uniswap migrator widget

Installation

To install the widget in your project using npm:

npm install @ensofinance/uniswap-migrator

Usage

Get your key at Enso Dashboard

Here's a basic example of how to use the widget in your React application:

import { WidgetWrapper } from "@ensofinance/uniswap-migrator";

/*
 * for next Next.js projects we need to use dynamic import instead
import dynamic from "next/dynamic";
const WidgetWrapper= dynamic(() => import("@ensofinance/uniswap-migrator").then(mod => mod.WidgetWrapper), {
    ssr: false,
}); 
*/

function App() {
  return (
    <div>
      <h1>My DeFi App</h1>
      <WidgetWrapper apiKey="YOUR_ENSO_API_KEY" />
    </div>
  );
}

export default App;

Advanced Configuration

You can customize the widget behavior with additional props:

import { WidgetWrapper } from "@ensofinance/uniswap-migrator";

function App() {
  return (
    <div>
      <h1>My DeFi App</h1>
      <WidgetWrapper
        apiKey="YOUR_ENSO_API_KEY"
        outTokens={[
          "0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee", // Native token (ETH)
          "0x0b2c639c533813f4aa9d7837caf62653d097ff85", // Example token address
        ]}
        poolFeeGrade={500}
        outChainId={10} // Optimism
        ticks={[-200050, -195990]}
      />
    </div>
  );
}

export default App;

Configuration Options

Property	Type	Description
apiKey	string	Your Enso API key (required)
outTokens	string[]	Array of token addresses to use for output
poolFeeGrade	number	Fee tier for the pool (e.g., 500 = 0.05%)
outChainId	number	Target chain ID for migration
ticks	number[]	Price tick range for the position

Development

• To work on the widget: pnpm --filter widget build --watch
• To run the app: pnpm dev