Uniswap Migrator

The Uniswap Migrator Widget allows users to:

migrate base tokens to any chain and
migrate Uniswap liquidity positions Uniswap V4 pools.

Integrate

Integrate Uniswap Migrator widget in your app

How it Works

The Uniswap Migrator Widget is an interface to an orchestration of Enso’s routing capacities, Stargate bridging system, and Layer0’s notification system. Roughly, the flow is as follows:

The user selects the asset to migrate, and the destination Uniswap V4 pool. The user approves Enso’s contracts to spend the asset.
The user initiates the migration.
2.1. The user initiates the migration.
Enso issues a transaction bundle that:
2.2. Redeems the assets underlying the user’s position on Uniswap V3.
2.3. Swaps the assets to bridge tokens.
Bridging takes place
3.1. Enso sends the assets to Stargate.
3.2. Stargate bridges them to the destination chain.
3.3. Stargate notifies Layer0, which notifies Enso.
Enso issues a transaction on the destination chain that deposits the assets into the destination V4 pool.

Integrate

To integrate the Uniswap yield migrator widget, follow the steps below.

Install your project

pnpm i @ensofinance/uniswap-migrator

In case you’re starting from scratch, set up a RainbowKit project:

pnpm install @rainbow-me/rainbowkit wagmi viem@2.x @tanstack/react-query

Then, edit package.json and adjust the version for viem to 2.x:

"viem": "2.x",

Integrate the Widget Component

Include the WidgetWrapper component in your /src/pages/index.tsx file.

src/App.tsx

import { ConnectButton } from '@rainbow-me/rainbowkit';
import type { NextPage } from 'next';
import styles from '../styles/Home.module.css';
import dynamic from 'next/dynamic';

const WidgetWrapper = dynamic(
  () =>
    import("@ensofinance/uniswap-migrator").then((mod) => mod.WidgetWrapper),
  {
    ssr: false,
  }
);

const apiKey = process.env.NEXT_PUBLIC_ENSO_API_KEY || "1e02632d-6feb-4a75-a157-documentation";

const Home: NextPage = () => {
  return (
    <div className={styles.container}>
      <main className={styles.main}>
        <ConnectButton />
        <WidgetWrapper apiKey={apiKey}/>
      </main>
    </div>
  );
};

export default Home;

Test it out

Now you can run your app and see the Uniswap Migrator widget in action!

pnpm run dev

Open your browser and navigate to http://localhost:3000 🎉

Next Steps

Updated

Templates