feat(migrate): adds the migrate flow to the uniswap exchange site

* links and page

* print all the details of the liquidity

* show working approve/migrate buttons

* testnet v1 factory addresses

* split code up into two pages

* getting closer to styled

* compute min amount out of eth and token

* compute min amount out of eth and token

* add a back button to the list page

* Improve empty states

* Improve the state management

* change the display of the migrate page to be more similar to original

* style fix, pending transaction hook fix

* add forwarding to netlify.toml

* handle case where v2 spot price does not exist because pair does not exist

* make ternaries more accurate

* handle first liquidity provider situation

* Style tweaks for migrate

* merge

* Address feedback
- show pool token amount
- show success when migration complete
- show price warning only if price difference is large

Co-authored-by: Callil Capuozzo <callil.capuozzo@gmail.com>

Author: moodysalem

netlify.toml

@@ -7,6 +7,13 @@
   conditions = {Country=["BY","CU","IR","IQ","CI","LR","KP","SD","SY","ZW"]}
   headers = {Link="<https://uniswap.exchange>"}
 
+# forward migrate
+[[redirects]]
+  from = "https://migrate.uniswap.exchange/*"
+  to = "https://uniswap.exchange/migrate/v1"
+  status = 301
+  force = true
+
 # forward v2 subdomain to apex
 [[redirects]]
   from = "https://v2.uniswap.exchange/*"

src/components/Header/index.tsx

@@ -8,7 +8,7 @@ import Row from '../Row'
 import Menu from '../Menu'
 import Web3Status from '../Web3Status'
 
-import { ExternalLink } from '../../theme'
+import { ExternalLink, StyledInternalLink } from '../../theme'
 import { Text } from 'rebass'
 import { WETH, ChainId } from '@uniswap/sdk'
 import { isMobile } from 'react-device-detect'
@@ -163,9 +163,9 @@ export default function Header() {
           <b>blog post ↗</b>
         </ExternalLink>
         &nbsp;or&nbsp;
-        <ExternalLink href="https://migrate.uniswap.exchange/">
+        <StyledInternalLink to="/migrate/v1">
           <b>migrate your liquidity ↗</b>
-        </ExternalLink>
+        </StyledInternalLink>
         .
       </MigrateBanner>
       <RowBetween padding="1rem">

src/constants/abis/migrator.json

@@ -0,0 +1,55 @@
+[
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "_factoryV1",
+        "type": "address"
+      },
+      {
+        "internalType": "address",
+        "name": "_router",
+        "type": "address"
+      }
+    ],
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "inputs": [
+      {
+        "internalType": "address",
+        "name": "token",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amountTokenMin",
+        "type": "uint256"
+      },
+      {
+        "internalType": "uint256",
+        "name": "amountETHMin",
+        "type": "uint256"
+      },
+      {
+        "internalType": "address",
+        "name": "to",
+        "type": "address"
+      },
+      {
+        "internalType": "uint256",
+        "name": "deadline",
+        "type": "uint256"
+      }
+    ],
+    "name": "migrate",
+    "outputs": [],
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "stateMutability": "payable",
+    "type": "receive"
+  }
+]

src/constants/abis/migrator.ts

@@ -0,0 +1,5 @@
+import MIGRATOR_ABI from './migrator.json'
+
+const MIGRATOR_ADDRESS = '0x16D4F26C15f3658ec65B1126ff27DD3dF2a2996b'
+
+export { MIGRATOR_ADDRESS, MIGRATOR_ABI }

src/constants/v1/index.ts

@@ -1,9 +1,17 @@
 import { Interface } from '@ethersproject/abi'
+import { ChainId } from '@uniswap/sdk'
 import V1_EXCHANGE_ABI from './v1_exchange.json'
 import V1_FACTORY_ABI from './v1_factory.json'
 
-const V1_FACTORY_ADDRESS = '0xc0a47dFe034B400B47bDaD5FecDa2621de6c4d95'
+const V1_FACTORY_ADDRESSES: { [chainId in ChainId]: string } = {
+  [ChainId.MAINNET]: '0xc0a47dFe034B400B47bDaD5FecDa2621de6c4d95',
+  [ChainId.ROPSTEN]: '0x9c83dCE8CA20E9aAF9D3efc003b2ea62aBC08351',
+  [ChainId.RINKEBY]: '0xf5D915570BC477f9B8D6C0E980aA81757A3AaC36',
+  [ChainId.GÖRLI]: '0x6Ce570d02D73d4c384b46135E87f8C592A8c86dA',
+  [ChainId.KOVAN]: '0xD3E51Ef092B2845f10401a0159B2B96e8B6c3D30'
+}
+
 const V1_FACTORY_INTERFACE = new Interface(V1_FACTORY_ABI)
 const V1_EXCHANGE_INTERFACE = new Interface(V1_EXCHANGE_ABI)
 
-export { V1_FACTORY_ADDRESS, V1_FACTORY_INTERFACE, V1_FACTORY_ABI, V1_EXCHANGE_INTERFACE, V1_EXCHANGE_ABI }
+export { V1_FACTORY_ADDRESSES, V1_FACTORY_INTERFACE, V1_FACTORY_ABI, V1_EXCHANGE_INTERFACE, V1_EXCHANGE_ABI }

src/data/V1.ts

@@ -30,42 +30,39 @@ function useMockV1Pair(token?: Token): MockV1Pair | undefined {
     : undefined
 }
 
-// returns ALL v1 exchange addresses
-export function useAllV1ExchangeAddresses(): string[] {
-  const factory = useV1FactoryContract()
-  const exchangeCount = useSingleCallResult(factory, 'tokenCount')?.result
-
-  const parsedCount = parseInt(exchangeCount?.toString() ?? '0')
-
-  const indices = useMemo(() => [...Array(parsedCount).keys()].map(ix => [ix]), [parsedCount])
-  const data = useSingleContractMultipleData(factory, 'getTokenWithId', indices, NEVER_RELOAD)
-
-  return useMemo(() => data?.map(({ result }) => result?.[0])?.filter(x => x) ?? [], [data])
-}
-
 // returns all v1 exchange addresses in the user's token list
-export function useAllTokenV1ExchangeAddresses(): string[] {
+export function useAllTokenV1Exchanges(): { [exchangeAddress: string]: Token } {
   const allTokens = useAllTokens()
   const factory = useV1FactoryContract()
   const args = useMemo(() => Object.keys(allTokens).map(tokenAddress => [tokenAddress]), [allTokens])
 
   const data = useSingleContractMultipleData(factory, 'getExchange', args, NEVER_RELOAD)
 
-  return useMemo(() => data?.map(({ result }) => result?.[0])?.filter(x => x) ?? [], [data])
+  return useMemo(
+    () =>
+      data?.reduce<{ [exchangeAddress: string]: Token }>((memo, { result }, ix) => {
+        const token = allTokens[args[ix][0]]
+        if (result?.[0]) {
+          memo[result?.[0]] = token
+        }
+        return memo
+      }, {}) ?? {},
+    [allTokens, args, data]
+  )
 }
 
 // returns whether any of the tokens in the user's token list have liquidity on v1
-export function useUserProbablyHasV1Liquidity(): boolean | undefined {
-  const exchangeAddresses = useAllTokenV1ExchangeAddresses()
+export function useUserHasLiquidityInAllTokens(): boolean | undefined {
+  const exchanges = useAllTokenV1Exchanges()
 
   const { account, chainId } = useActiveWeb3React()
 
-  const fakeTokens = useMemo(
-    () => (chainId ? exchangeAddresses.map(address => new Token(chainId, address, 18, 'UNI-V1')) : []),
-    [chainId, exchangeAddresses]
+  const fakeLiquidityTokens = useMemo(
+    () => (chainId ? Object.keys(exchanges).map(address => new Token(chainId, address, 18, 'UNI-V1')) : []),
+    [chainId, exchanges]
   )
 
-  const balances = useTokenBalances(account ?? undefined, fakeTokens)
+  const balances = useTokenBalances(account ?? undefined, fakeLiquidityTokens)
 
   return useMemo(
     () =>

src/hooks/index.ts

@@ -1,11 +1,13 @@
 import { Web3Provider } from '@ethersproject/providers'
+import { ChainId } from '@uniswap/sdk'
 import { useWeb3React as useWeb3ReactCore } from '@web3-react/core'
+import { Web3ReactContextInterface } from '@web3-react/core/dist/types'
 import { useEffect, useState } from 'react'
 import { isMobile } from 'react-device-detect'
 import { injected } from '../connectors'
 import { NetworkContextName } from '../constants'
 
-export function useActiveWeb3React() {
+export function useActiveWeb3React(): Web3ReactContextInterface<Web3Provider> & { chainId?: ChainId } {
   const context = useWeb3ReactCore<Web3Provider>()
   const contextNetwork = useWeb3ReactCore<Web3Provider>(NetworkContextName)
   return context.active ? context : contextNetwork

src/hooks/useContract.ts

@@ -3,7 +3,8 @@ import { ChainId } from '@uniswap/sdk'
 import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 import { useMemo } from 'react'
 import ERC20_ABI from '../constants/abis/erc20.json'
-import { V1_EXCHANGE_ABI, V1_FACTORY_ABI, V1_FACTORY_ADDRESS } from '../constants/v1'
+import { MIGRATOR_ABI, MIGRATOR_ADDRESS } from '../constants/abis/migrator'
+import { V1_EXCHANGE_ABI, V1_FACTORY_ABI, V1_FACTORY_ADDRESSES } from '../constants/v1'
 import { MULTICALL_ABI, MULTICALL_NETWORKS } from '../constants/multicall'
 import { getContract } from '../utils'
 import { useActiveWeb3React } from './index'
@@ -25,13 +26,17 @@ function useContract(address?: string, ABI?: any, withSignerIfPossible = true):
 
 export function useV1FactoryContract(): Contract | null {
   const { chainId } = useActiveWeb3React()
-  return useContract(chainId === 1 ? V1_FACTORY_ADDRESS : undefined, V1_FACTORY_ABI, false)
+  return useContract(V1_FACTORY_ADDRESSES[chainId as ChainId], V1_FACTORY_ABI, false)
 }
 
 export function useV1ExchangeContract(address: string): Contract | null {
   return useContract(address, V1_EXCHANGE_ABI, false)
 }
 
+export function useV2MigratorContract(): Contract | null {
+  return useContract(MIGRATOR_ADDRESS, MIGRATOR_ABI, true)
+}
+
 export function useTokenContract(tokenAddress?: string, withSignerIfPossible = true): Contract | null {
   return useContract(tokenAddress, ERC20_ABI, withSignerIfPossible)
 }

src/pages/App.tsx

@@ -9,6 +9,8 @@ import Web3ReactManager from '../components/Web3ReactManager'
 import DarkModeQueryParamReader from '../theme/DarkModeQueryParamReader'
 import AddLiquidity from './AddLiquidity'
 import CreatePool from './CreatePool'
+import MigrateV1 from './MigrateV1'
+import MigrateV1Exchange from './MigrateV1/MigrateV1Exchange'
 import Pool from './Pool'
 import PoolFinder from './PoolFinder'
 import RemoveLiquidity from './RemoveLiquidity'
@@ -99,6 +101,8 @@ export default function App() {
                 <Route exact strict path="/create" component={CreatePool} />
                 <Route exact strict path="/add/:tokens" component={AddLiquidity} />
                 <Route exact strict path="/remove/:tokens" component={RemoveLiquidity} />
+                <Route exact strict path="/migrate/v1" component={MigrateV1} />
+                <Route exact strict path="/migrate/v1/:address" component={MigrateV1Exchange} />
                 <Route component={RedirectPathToSwapOnly} />
               </Switch>
             </Web3ReactManager>

src/pages/AppBody.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import styled from 'styled-components'
 import NavigationTabs from '../components/NavigationTabs'
 
-const Body = styled.div`
+export const BodyWrapper = styled.div`
   position: relative;
   max-width: 420px;
   width: 100%;
@@ -18,9 +18,9 @@ const Body = styled.div`
  */
 export default function AppBody({ children }: { children: React.ReactNode }) {
   return (
-    <Body>
+    <BodyWrapper>
       <NavigationTabs />
       <>{children}</>
-    </Body>
+    </BodyWrapper>
   )
 }