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

# Uniswap Migrator

> A React component and web app that enables migration of base tokens and DeFi positions from Uniswap V3 to V4 across all supported chains.

export const date_0 = "2025-06-13"

The Uniswap Migrator Widget allows users to:

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

<CardGroup cols={2}>
  <Card href="https://migrate.enso.build/" title="Uniswap Migrator" icon="play">
    Migrate positions to Uniswap V4 pools
  </Card>

  <Card href="#integrate" title="Integrate" icon="hammer">
    Integrate Uniswap Migrator widget in your app
  </Card>
</CardGroup>

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

1. The user selects the asset to migrate, and the destination Uniswap V4 pool. The user approves Enso's contracts to spend the asset.<br />
2. The user initiates the migration.<br />
   2.1. The user initiates the migration.<br />
   Enso issues a [transaction bundle](/pages/build/get-started/bundling-actions) that: <br />
     2.2. [Redeems](/pages/build/reference/actions#redeem) the assets underlying the user's position on Uniswap V3.<br />
     2.3. Swaps the assets to bridge tokens.<br />
3. Bridging takes place<br />
   3.1. Enso sends the assets to Stargate.<br />
   3.2. Stargate bridges them to the destination chain.<br />
   3.3. Stargate notifies Layer0, which notifies Enso.<br />
4. Enso issues a transaction on the destination chain that deposits the assets into the destination V4 pool.

<img src="https://mintcdn.com/enso/wPTnp3wu2UDG_JDf/images/templates/uni-migrator-light.png?fit=max&auto=format&n=wPTnp3wu2UDG_JDf&q=85&s=d2fad1225dbcefcb14849e9f210259bf" alt="Uniswap Migrator Flow" className="mx-auto mb-8 dark:hidden" height="200" data-path="images/templates/uni-migrator-light.png" />

<img src="https://mintcdn.com/enso/wPTnp3wu2UDG_JDf/images/templates/uni-migrator-dark.png?fit=max&auto=format&n=wPTnp3wu2UDG_JDf&q=85&s=b1cc488193de04aeeab8766ad315f5d1" alt="Uniswap Migrator Flow" className="mx-auto mb-8 hidden dark:block" height="200" data-path="images/templates/uni-migrator-dark.png" />

## Integrate

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

<iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/bLSWJRL7wx4?si=HI1UxQFtTJfbRnl8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen />

<Steps>
  <Step title="Install your project">
    ```bash theme={null}
    pnpm i @ensofinance/uniswap-migrator
    ```

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

    ```bash theme={null}
    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`:

    ```json theme={null}
    "viem": "2.x",
    ```
  </Step>

  <Step title="Integrate the Widget Component">
    Include the `WidgetWrapper` component in your `/src/pages/index.tsx` file.

    ```tsx src/App.tsx {6-12, 21} theme={null}
    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;
    ```
  </Step>

  <Step title="Test it out">
    Now you can run your app and see the Uniswap Migrator widget in action!

    ```bash theme={null}
    pnpm run dev
    ```

    Open your browser and navigate to `http://localhost:3000` 🎉
  </Step>
</Steps>

## Next Steps

* [Try the Uniswap Migrator Widget](https://migrate.enso.build/)
* [Learn more about Stargate](https://stargateprotocol.gitbook.io/stargate)
* [Explore Layer0](https://docs.layerzero.network/v2)
* [Find more about Enso's routing capabilities](/pages/build/get-started/route)

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