improvement(migration): improve v1 migration flow (#885)

* first stab at improving v1 migration flow

* lint errors

* improve UI

* fix loading indicator

* switch back to dedicated migration UI

* address comments

* make migrate consistent with new token behavior

* hooks -> utils

src/components/Button/index.tsx

@@ -51,10 +51,10 @@ export const ButtonPrimary = styled(Base)`
   }
   &:disabled {
     background-color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? theme.primary1 : theme.bg3)};
-    color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? 'white' : theme.text3)}
+    color: ${({ theme, altDisbaledStyle }) => (altDisbaledStyle ? 'white' : theme.text3)};
     cursor: auto;
     box-shadow: none;
-    border: 1px solid transparent;;
+    border: 1px solid transparent;
     outline: none;
   }
 `
@@ -197,7 +197,6 @@ export const ButtonEmpty = styled(Base)`
 export const ButtonWhite = styled(Base)`
   border: 1px solid #edeef2;
   background-color: ${({ theme }) => theme.bg1};
-  };
   color: black;
 
   &:focus {
@@ -264,7 +263,7 @@ export function ButtonError({ error, ...rest }: { error?: boolean } & ButtonProp
   }
 }
 
-export function ButtonDropwdown({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
+export function ButtonDropdown({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
   return (
     <ButtonPrimary {...rest} disabled={disabled}>
       <RowBetween>
@@ -275,7 +274,7 @@ export function ButtonDropwdown({ disabled = false, children, ...rest }: { disab
   )
 }
 
-export function ButtonDropwdownLight({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
+export function ButtonDropdownLight({ disabled = false, children, ...rest }: { disabled?: boolean } & ButtonProps) {
   return (
     <ButtonOutlined {...rest} disabled={disabled}>
       <RowBetween>

src/components/DoubleLogo/index.tsx

@@ -13,7 +13,7 @@ interface DoubleTokenLogoProps {
   margin?: boolean
   size?: number
   a0: string
-  a1: string
+  a1?: string
 }
 
 const HigherLogo = styled(TokenLogo)`
@@ -28,7 +28,7 @@ export default function DoubleTokenLogo({ a0, a1, size = 16, margin = false }: D
   return (
     <TokenWrapper sizeraw={size} margin={margin}>
       <HigherLogo address={a0} size={size.toString() + 'px'} />
-      <CoveredLogo address={a1} size={size.toString() + 'px'} sizeraw={size} />
+      {a1 && <CoveredLogo address={a1} size={size.toString() + 'px'} sizeraw={size} />}
     </TokenWrapper>
   )
 }

src/components/Header/VersionSwitch.tsx

@@ -18,7 +18,13 @@ const VersionLabel = styled.span<{ enabled: boolean }>`
     color: ${({ theme, enabled }) => (enabled ? theme.white : theme.primary3)};
   }
 `
-const VersionToggle = styled(Link)<{ enabled: boolean }>`
+
+interface VersionToggleProps extends React.ComponentProps<typeof Link> {
+  enabled: boolean
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const VersionToggle = styled(({ enabled, ...rest }: VersionToggleProps) => <Link {...rest} />)<VersionToggleProps>`
   border-radius: 16px;
   opacity: ${({ enabled }) => (enabled ? 1 : 0.5)};
   cursor: ${({ enabled }) => (enabled ? 'pointer' : 'default')};

src/components/PositionCard/V1.tsx

+import React, { useContext } from 'react'
+import { RouteComponentProps, withRouter } from 'react-router-dom'
+import { Token, TokenAmount, WETH } from '@uniswap/sdk'
+
+import { Text } from 'rebass'
+import { AutoColumn } from '../Column'
+import { ButtonSecondary } from '../Button'
+import { RowBetween, RowFixed } from '../Row'
+import { FixedHeightRow, HoverCard } from './index'
+import DoubleTokenLogo from '../DoubleLogo'
+import { useActiveWeb3React } from '../../hooks'
+import { ThemeContext } from 'styled-components'
+
+interface PositionCardProps extends RouteComponentProps<{}> {
+  token: Token
+  V1LiquidityBalance: TokenAmount
+}
+
+function V1PositionCard({ token, V1LiquidityBalance, history }: PositionCardProps) {
+  const theme = useContext(ThemeContext)
+
+  const { chainId } = useActiveWeb3React()
+
+  return (
+    <HoverCard>
+      <AutoColumn gap="12px">
+        <FixedHeightRow>
+          <RowFixed>
+            <DoubleTokenLogo a0={token.address} margin={true} size={20} />
+            <Text fontWeight={500} fontSize={20} style={{ marginLeft: '' }}>
+              {`${token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH`}
+            </Text>
+            <Text
+              fontSize={12}
+              fontWeight={500}
+              ml="0.5rem"
+              px="0.75rem"
+              py="0.25rem"
+              style={{ borderRadius: '1rem' }}
+              backgroundColor={theme.yellow1}
+              color={'black'}
+            >
+              V1
+            </Text>
+          </RowFixed>
+        </FixedHeightRow>
+
+        <AutoColumn gap="8px">
+          <RowBetween marginTop="10px">
+            <ButtonSecondary
+              width="68%"
+              onClick={() => {
+                history.push(`/migrate/v1/${V1LiquidityBalance.token.address}`)
+              }}
+            >
+              Migrate
+            </ButtonSecondary>
+
+            <ButtonSecondary
+              style={{ backgroundColor: 'transparent' }}
+              width="28%"
+              onClick={() => {
+                history.push(`/remove/v1/${V1LiquidityBalance.token.address}`)
+              }}
+            >
+              Remove
+            </ButtonSecondary>
+          </RowBetween>
+        </AutoColumn>
+      </AutoColumn>
+    </HoverCard>
+  )
+}
+
+export default withRouter(V1PositionCard)

src/components/PositionCard/index.tsx

@@ -17,12 +17,13 @@ import { AutoColumn } from '../Column'
 import { ChevronDown, ChevronUp } from 'react-feather'
 import { ButtonSecondary } from '../Button'
 import { RowBetween, RowFixed, AutoRow } from '../Row'
+import { Dots } from '../swap/styleds'
 
-const FixedHeightRow = styled(RowBetween)`
+export const FixedHeightRow = styled(RowBetween)`
   height: 24px;
 `
 
-const HoverCard = styled(Card)`
+export const HoverCard = styled(Card)`
   border: 1px solid ${({ theme }) => theme.bg2};
   :hover {
     border: 1px solid ${({ theme }) => darken(0.06, theme.bg2)};
@@ -72,7 +73,7 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
               <FixedHeightRow>
                 <RowFixed>
                   <Text fontWeight={500} fontSize={16}>
-                    Your current position
+                    Your position
                   </Text>
                 </RowFixed>
               </FixedHeightRow>
@@ -96,7 +97,6 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
                   </Text>
                   {token0Deposited ? (
                     <RowFixed>
-                      {!minimal && <TokenLogo address={token0?.address} />}
                       <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
                         {token0Deposited?.toSignificant(6)}
                       </Text>
@@ -111,7 +111,6 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
                   </Text>
                   {token1Deposited ? (
                     <RowFixed>
-                      {!minimal && <TokenLogo address={token1?.address} />}
                       <Text color="#888D9B" fontSize={16} fontWeight={500} marginLeft={'6px'}>
                         {token1Deposited?.toSignificant(6)}
                       </Text>
@@ -134,7 +133,7 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
             <RowFixed>
               <DoubleLogo a0={token0?.address || ''} a1={token1?.address || ''} margin={true} size={20} />
               <Text fontWeight={500} fontSize={20}>
-                {token0?.symbol}/{token1?.symbol}
+                {!token0 || !token1 ? <Dots>Loading</Dots> : `${token0.symbol}/${token1.symbol}`}
               </Text>
             </RowFixed>
             <RowFixed>
@@ -158,7 +157,7 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
                     <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
                       {token0Deposited?.toSignificant(6)}
                     </Text>
-                    {!minimal && <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address} />}
+                    <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token0?.address} />
                   </RowFixed>
                 ) : (
                   '-'
@@ -176,13 +175,12 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
                     <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
                       {token1Deposited?.toSignificant(6)}
                     </Text>
-                    {!minimal && <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address} />}
+                    <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token1?.address} />
                   </RowFixed>
                 ) : (
                   '-'
                 )}
               </FixedHeightRow>
-              {!minimal && (
               <FixedHeightRow>
                 <Text fontSize={16} fontWeight={500}>
                   Your pool tokens:
@@ -191,17 +189,14 @@ function PositionCard({ pair, history, border, minimal = false }: PositionCardPr
                   {userPoolBalance ? userPoolBalance.toSignificant(4) : '-'}
                 </Text>
               </FixedHeightRow>
-              )}
-              {!minimal && (
               <FixedHeightRow>
                 <Text fontSize={16} fontWeight={500}>
-                    Your pool share
+                  Your pool share:
                 </Text>
                 <Text fontSize={16} fontWeight={500}>
                   {poolTokenPercentage ? poolTokenPercentage.toFixed(2) + '%' : '-'}
                 </Text>
               </FixedHeightRow>
-              )}
 
               <AutoRow justify="center" marginTop={'10px'}>
                 <ExternalLink href={`https://uniswap.info/pair/${pair?.liquidityToken.address}`}>

src/components/SearchModal/TokenList.tsx

-import { ChainId, JSBI, Token, TokenAmount } from '@uniswap/sdk'
+import { JSBI, Token, TokenAmount } from '@uniswap/sdk'
 import React, { useContext } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FixedSizeList } from 'react-window'
 import { Text } from 'rebass'
 import { ThemeContext } from 'styled-components'
-import { ALL_TOKENS } from '../../constants/tokens'
 import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens } from '../../hooks/Tokens'
 import { useAddUserToken, useRemoveUserAddedToken } from '../../state/user/hooks'
@@ -15,10 +14,7 @@ import { RowFixed } from '../Row'
 import TokenLogo from '../TokenLogo'
 import { FadedSpan, GreySpan, MenuItem, ModalInfo } from './styleds'
 import Loader from '../Loader'
-
-function isDefaultToken(tokenAddress: string, chainId?: number): boolean {
-  return Boolean(chainId && ALL_TOKENS[chainId as ChainId]?.[tokenAddress])
-}
+import { isDefaultToken, isCustomAddedToken } from '../../utils'
 
 export default function TokenList({
   tokens,
@@ -61,8 +57,8 @@ export default function TokenList({
         const token = tokens[index]
         const { address, symbol } = token
 
-        const isDefault = isDefaultToken(address, chainId)
-        const customAdded = Boolean(!isDefault && allTokens[address])
+        const isDefault = isDefaultToken(token)
+        const customAdded = isCustomAddedToken(allTokens, token)
         const balance = allTokenBalances[address]
 
         const zeroBalance = balance && JSBI.equal(JSBI.BigInt(0), balance.raw)

src/components/TokenWarningCard/index.tsx

@@ -3,13 +3,12 @@ import { transparentize } from 'polished'
 import React, { useMemo } from 'react'
 import styled from 'styled-components'
 import { ReactComponent as Close } from '../../assets/images/x.svg'
-import { ALL_TOKENS } from '../../constants/tokens'
 import { useActiveWeb3React } from '../../hooks'
 import { useAllTokens } from '../../hooks/Tokens'
 import { Field } from '../../state/swap/actions'
 import { useTokenWarningDismissal } from '../../state/user/hooks'
 import { ExternalLink, TYPE } from '../../theme'
-import { getEtherscanLink } from '../../utils'
+import { getEtherscanLink, isDefaultToken } from '../../utils'
 import PropsOfExcluding from '../../utils/props-of-excluding'
 import QuestionHelper from '../QuestionHelper'
 import TokenLogo from '../TokenLogo'
@@ -68,9 +67,8 @@ interface TokenWarningCardProps extends PropsOfExcluding<typeof Wrapper, 'error'
 
 export default function TokenWarningCard({ token, ...rest }: TokenWarningCardProps) {
   const { chainId } = useActiveWeb3React()
-  const isDefaultToken = Boolean(
-    token && token.address && chainId && ALL_TOKENS[chainId] && ALL_TOKENS[chainId][token.address]
-  )
+
+  const isDefault = isDefaultToken(token)
 
   const tokenSymbol = token?.symbol?.toLowerCase() ?? ''
   const tokenName = token?.name?.toLowerCase() ?? ''
@@ -80,7 +78,7 @@ export default function TokenWarningCard({ token, ...rest }: TokenWarningCardPro
   const allTokens = useAllTokens()
 
   const duplicateNameOrSymbol = useMemo(() => {
-    if (isDefaultToken || !token || !chainId) return false
+    if (isDefault || !token || !chainId) return false
 
     return Object.keys(allTokens).some(tokenAddress => {
       const userToken = allTokens[tokenAddress]
@@ -89,9 +87,9 @@ export default function TokenWarningCard({ token, ...rest }: TokenWarningCardPro
       }
       return userToken.symbol.toLowerCase() === tokenSymbol || userToken.name.toLowerCase() === tokenName
     })
-  }, [isDefaultToken, token, chainId, allTokens, tokenSymbol, tokenName])
+  }, [isDefault, token, chainId, allTokens, tokenSymbol, tokenName])
 
-  if (isDefaultToken || !token || dismissed) return null
+  if (isDefault || !token || dismissed) return null
 
   return (
     <Wrapper error={duplicateNameOrSymbol} {...rest}>

src/data/Reserves.ts

@@ -3,29 +3,15 @@ import { useMemo } from 'react'
 import { abi as IUniswapV2PairABI } from '@uniswap/v2-core/build/IUniswapV2Pair.json'
 import { Interface } from '@ethersproject/abi'
 
-import { usePairContract } from '../hooks/useContract'
-import { useSingleCallResult, useMultipleContractSingleData } from '../state/multicall/hooks'
+import { useMultipleContractSingleData } from '../state/multicall/hooks'
+
+const PAIR_INTERFACE = new Interface(IUniswapV2PairABI)
 
 /*
  * if loading, return undefined
  * if no pair created yet, return null
  * if pair already created (even if 0 reserves), return pair
  */
-export function usePair(tokenA?: Token, tokenB?: Token): undefined | Pair | null {
-  const pairAddress = tokenA && tokenB && !tokenA.equals(tokenB) ? Pair.getAddress(tokenA, tokenB) : undefined
-  const contract = usePairContract(pairAddress, false)
-  const { result: reserves, loading } = useSingleCallResult(contract, 'getReserves')
-
-  return useMemo(() => {
-    if (loading || !tokenA || !tokenB) return undefined
-    if (!reserves) return null
-    const { reserve0, reserve1 } = reserves
-    const [token0, token1] = tokenA.sortsBefore(tokenB) ? [tokenA, tokenB] : [tokenB, tokenA]
-    return new Pair(new TokenAmount(token0, reserve0.toString()), new TokenAmount(token1, reserve1.toString()))
-  }, [loading, reserves, tokenA, tokenB])
-}
-
-const PAIR_INTERFACE = new Interface(IUniswapV2PairABI)
 export function usePairs(tokens: [Token | undefined, Token | undefined][]): (undefined | Pair | null)[] {
   const pairAddresses = useMemo(
     () =>
@@ -51,3 +37,7 @@ export function usePairs(tokens: [Token | undefined, Token | undefined][]): (und
     })
   }, [results, tokens])
 }
+
+export function usePair(tokenA?: Token, tokenB?: Token): undefined | Pair | null {
+  return usePairs([[tokenA, tokenB]])[0]
+}

src/data/V1.ts

@@ -6,6 +6,7 @@ import { useV1FactoryContract } from '../hooks/useContract'
 import { Version } from '../hooks/useToggledVersion'
 import { NEVER_RELOAD, useSingleCallResult, useSingleContractMultipleData } from '../state/multicall/hooks'
 import { useETHBalances, useTokenBalance, useTokenBalances } from '../state/wallet/hooks'
+import { AddressZero } from '@ethersproject/constants'
 
 export function useV1ExchangeAddress(tokenAddress?: string): string | undefined {
   const contract = useV1FactoryContract()
@@ -39,8 +40,8 @@ export function useAllTokenV1Exchanges(): { [exchangeAddress: string]: Token } {
   return useMemo(
     () =>
       data?.reduce<{ [exchangeAddress: string]: Token }>((memo, { result }, ix) => {
+        if (result?.[0] && result[0] !== AddressZero) {
           const token = allTokens[args[ix][0]]
-        if (result?.[0]) {
           memo[result[0]] = token
         }
         return memo
@@ -51,12 +52,13 @@ export function useAllTokenV1Exchanges(): { [exchangeAddress: string]: Token } {
 
 // returns whether any of the tokens in the user's token list have liquidity on v1
 export function useUserHasLiquidityInAllTokens(): boolean | undefined {
-  const exchanges = useAllTokenV1Exchanges()
-
   const { account, chainId } = useActiveWeb3React()
 
+  const exchanges = useAllTokenV1Exchanges()
+
   const fakeLiquidityTokens = useMemo(
-    () => (chainId ? Object.keys(exchanges).map(address => new Token(chainId, address, 18, 'UNI-V1')) : []),
+    () =>
+      chainId ? Object.keys(exchanges).map(address => new Token(chainId, address, 18, 'UNI-V1', 'Uniswap V1')) : [],
     [chainId, exchanges]
   )
 

src/pages/App.tsx

@@ -11,6 +11,7 @@ import AddLiquidity from './AddLiquidity'
 import CreatePool from './CreatePool'
 import MigrateV1 from './MigrateV1'
 import MigrateV1Exchange from './MigrateV1/MigrateV1Exchange'
+import RemoveV1Exchange from './MigrateV1/RemoveV1Exchange'
 import Pool from './Pool'
 import PoolFinder from './PoolFinder'
 import RemoveLiquidity from './RemoveLiquidity'
@@ -84,6 +85,7 @@ export default function App() {
                 <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 exact strict path="/remove/v1/:address" component={RemoveV1Exchange} />
                 <Route component={RedirectPathToSwapOnly} />
               </Switch>
             </Web3ReactManager>

src/pages/CreatePool/index.tsx

@@ -10,7 +10,7 @@ import { Text } from 'rebass'
 import { Plus } from 'react-feather'
 import { TYPE, StyledInternalLink } from '../../theme'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
-import { ButtonPrimary, ButtonDropwdown, ButtonDropwdownLight } from '../../components/Button'
+import { ButtonPrimary, ButtonDropdown, ButtonDropdownLight } from '../../components/Button'
 
 import { useToken } from '../../hooks/Tokens'
 import { useActiveWeb3React } from '../../hooks'
@@ -59,16 +59,16 @@ export default function CreatePool({ location }: RouteComponentProps) {
       <AutoColumn gap="20px">
         <AutoColumn gap="24px">
           {!token0Address ? (
-            <ButtonDropwdown
+            <ButtonDropdown
               onClick={() => {
                 setShowSearch(true)
                 setActiveField(Fields.TOKEN0)
               }}
             >
               <Text fontSize={20}>Select first token</Text>
-            </ButtonDropwdown>
+            </ButtonDropdown>
           ) : (
-            <ButtonDropwdownLight
+            <ButtonDropdownLight
               onClick={() => {
                 setShowSearch(true)
                 setActiveField(Fields.TOKEN0)
@@ -83,13 +83,13 @@ export default function CreatePool({ location }: RouteComponentProps) {
                   {token0?.address === WETH[chainId]?.address && '(default)'}
                 </TYPE.darkGray>
               </Row>
-            </ButtonDropwdownLight>
+            </ButtonDropdownLight>
           )}
           <ColumnCenter>
             <Plus size="16" color="#888D9B" />
           </ColumnCenter>
           {!token1Address ? (
-            <ButtonDropwdown
+            <ButtonDropdown
               onClick={() => {
                 setShowSearch(true)
                 setActiveField(Fields.TOKEN1)
@@ -97,9 +97,9 @@ export default function CreatePool({ location }: RouteComponentProps) {
               disabled={step !== STEP.SELECT_TOKENS}
             >
               <Text fontSize={20}>Select second token</Text>
-            </ButtonDropwdown>
+            </ButtonDropdown>
           ) : (
-            <ButtonDropwdownLight
+            <ButtonDropdownLight
               onClick={() => {
                 setShowSearch(true)
                 setActiveField(Fields.TOKEN1)
@@ -111,7 +111,7 @@ export default function CreatePool({ location }: RouteComponentProps) {
                   {token1?.symbol}
                 </Text>
               </Row>
-            </ButtonDropwdownLight>
+            </ButtonDropdownLight>
           )}
           {pair ? ( // pair already exists - prompt to add liquidity to existing pool
             <AutoRow padding="10px" justify="center">

src/pages/MigrateV1/MigrateV1Exchange.tsx

@@ -8,7 +8,7 @@ import { ButtonConfirmed } from '../../components/Button'
 import { PinkCard, YellowCard, LightCard } from '../../components/Card'
 import { AutoColumn } from '../../components/Column'
 import QuestionHelper from '../../components/QuestionHelper'
-import { AutoRow, RowBetween } from '../../components/Row'
+import { AutoRow, RowBetween, RowFixed } from '../../components/Row'
 import { Dots } from '../../components/swap/styleds'
 import { DEFAULT_DEADLINE_FROM_NOW, INITIAL_ALLOWED_SLIPPAGE } from '../../constants'
 import { MIGRATOR_ADDRESS } from '../../constants/abis/migrator'
@@ -21,19 +21,84 @@ import { useV1ExchangeContract, useV2MigratorContract } from '../../hooks/useCon
 import { NEVER_RELOAD, useSingleCallResult } from '../../state/multicall/hooks'
 import { useIsTransactionPending, useTransactionAdder } from '../../state/transactions/hooks'
 import { useETHBalances, useTokenBalance } from '../../state/wallet/hooks'
-import { TYPE } from '../../theme'
-import { isAddress } from '../../utils'
+import { TYPE, ExternalLink } from '../../theme'
+import { isAddress, getEtherscanLink } from '../../utils'
 import { BodyWrapper } from '../AppBody'
 import { EmptyState } from './EmptyState'
 import TokenLogo from '../../components/TokenLogo'
-import { FormattedPoolTokenAmount } from './index'
+import { AddressZero } from '@ethersproject/constants'
+import { Text } from 'rebass'
 
+const POOL_TOKEN_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))
 const WEI_DENOM = JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18))
 const ZERO = JSBI.BigInt(0)
 const ONE = JSBI.BigInt(1)
 const ZERO_FRACTION = new Fraction(ZERO, ONE)
 const ALLOWED_OUTPUT_MIN_PERCENT = new Percent(JSBI.BigInt(10000 - INITIAL_ALLOWED_SLIPPAGE), JSBI.BigInt(10000))
 
+function FormattedPoolTokenAmount({ tokenAmount }: { tokenAmount: TokenAmount }) {
+  return (
+    <>
+      {tokenAmount.equalTo(JSBI.BigInt(0))
+        ? '0'
+        : tokenAmount.greaterThan(POOL_TOKEN_AMOUNT_MIN)
+        ? tokenAmount.toSignificant(4)
+        : `<${POOL_TOKEN_AMOUNT_MIN.toSignificant(1)}`}
+    </>
+  )
+}
+
+export function V1LiquidityInfo({
+  token,
+  liquidityTokenAmount,
+  tokenWorth,
+  ethWorth
+}: {
+  token: Token
+  liquidityTokenAmount: TokenAmount
+  tokenWorth: TokenAmount
+  ethWorth: Fraction
+}) {
+  const { chainId } = useActiveWeb3React()
+
+  return (
+    <>
+      <AutoRow style={{ justifyContent: 'flex-start', width: 'fit-content' }}>
+        <TokenLogo size="24px" address={token.address} />
+        <div style={{ marginLeft: '.75rem' }}>
+          <TYPE.mediumHeader>
+            {<FormattedPoolTokenAmount tokenAmount={liquidityTokenAmount} />}{' '}
+            {token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH
+          </TYPE.mediumHeader>
+        </div>
+      </AutoRow>
+
+      <RowBetween my="1rem">
+        <Text fontSize={16} fontWeight={500}>
+          Pooled {token.equals(WETH[chainId]) ? 'WETH' : token.symbol}:
+        </Text>
+        <RowFixed>
+          <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+            {tokenWorth.toSignificant(4)}
+          </Text>
+          <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={token.address} />
+        </RowFixed>
+      </RowBetween>
+      <RowBetween mb="1rem">
+        <Text fontSize={16} fontWeight={500}>
+          Pooled ETH:
+        </Text>
+        <RowFixed>
+          <Text fontSize={16} fontWeight={500} marginLeft={'6px'}>
+            {ethWorth.toSignificant(4)}
+          </Text>
+          <TokenLogo size="20px" style={{ marginLeft: '8px' }} address={WETH[chainId].address} />
+        </RowFixed>
+      </RowBetween>
+    </>
+  )
+}
+
 function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount: TokenAmount; token: Token }) {
   const { account, chainId } = useActiveWeb3React()
   const totalSupply = useTotalSupply(liquidityTokenAmount.token)
@@ -126,20 +191,28 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
       })
   }, [minAmountToken, minAmountETH, migrator, token, account, addTransaction])
 
-  const noLiquidityTokens = liquidityTokenAmount && liquidityTokenAmount.equalTo(ZERO)
+  const noLiquidityTokens = !!liquidityTokenAmount && liquidityTokenAmount.equalTo(ZERO)
 
-  const largePriceDifference = Boolean(priceDifferenceAbs && !priceDifferenceAbs.lessThan(JSBI.BigInt(5)))
+  const largePriceDifference = !!priceDifferenceAbs && !priceDifferenceAbs.lessThan(JSBI.BigInt(5))
 
-  const isSuccessfullyMigrated = Boolean(noLiquidityTokens && pendingMigrationHash)
+  const isSuccessfullyMigrated = !!pendingMigrationHash && !!noLiquidityTokens
 
   return (
     <AutoColumn gap="20px">
-      {!isFirstLiquidityProvider ? (
-        largePriceDifference ? (
+      <TYPE.body my={9} style={{ fontWeight: 400 }}>
+        This tool will safely migrate your V1 liquidity to V2 with minimal price risk. The process is completely
+        trustless thanks to the{' '}
+        <ExternalLink href={getEtherscanLink(chainId, MIGRATOR_ADDRESS, 'address')}>
+          <TYPE.blue display="inline">Uniswap migration contract↗</TYPE.blue>
+        </ExternalLink>
+        .
+      </TYPE.body>
+
+      {!isFirstLiquidityProvider && largePriceDifference ? (
         <YellowCard>
           <TYPE.body style={{ marginBottom: 8, fontWeight: 400 }}>
-              It is best to deposit liquidity into Uniswap V2 at a price you believe is correct. If you believe the
-              price is incorrect, you can either make a swap to move the price or wait for someone else to do so.
+            It{"'"}s best to deposit liquidity into Uniswap V2 at a price you believe is correct. If the V2 price seems
+            incorrect, you can either make a swap to move the price or wait for someone else to do so.
           </TYPE.body>
           <AutoColumn gap="8px">
             <RowBetween>
@@ -148,6 +221,13 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
                 {v1SpotPrice?.toSignificant(6)} {token.symbol}/ETH
               </TYPE.black>
             </RowBetween>
+            <RowBetween>
+              <div />
+              <TYPE.black>
+                {v1SpotPrice?.invert()?.toSignificant(6)} ETH/{token.symbol}
+              </TYPE.black>
+            </RowBetween>
+
             <RowBetween>
               <TYPE.body>V2 Price:</TYPE.body>
               <TYPE.black>
@@ -155,40 +235,52 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
               </TYPE.black>
             </RowBetween>
             <RowBetween>
-                <div>Price Difference:</div>
-                <div>{priceDifferenceAbs.toSignificant(4)}%</div>
+              <div />
+              <TYPE.black>
+                {v2SpotPrice?.invert()?.toSignificant(6)} ETH/{token.symbol}
+              </TYPE.black>
+            </RowBetween>
+
+            <RowBetween>
+              <TYPE.body color="inherit">Price Difference:</TYPE.body>
+              <TYPE.black color="inherit">{priceDifferenceAbs.toSignificant(4)}%</TYPE.black>
             </RowBetween>
           </AutoColumn>
         </YellowCard>
-        ) : null
-      ) : (
+      ) : null}
+
+      {isFirstLiquidityProvider && (
         <PinkCard>
-          <AutoColumn gap="10px">
-            <div>
+          <TYPE.body style={{ marginBottom: 8, fontWeight: 400 }}>
             You are the first liquidity provider for this pair on Uniswap V2. Your liquidity will be migrated at the
             current V1 price. Your transaction cost also includes the gas to create the pool.
-            </div>
-            <div>V1 Price</div>
-            <AutoColumn>
-              <div>
-                {v1SpotPrice?.invert()?.toSignificant(6)} ETH/{token.symbol}
-              </div>
-              <div>
+          </TYPE.body>
+
+          <AutoColumn gap="8px">
+            <RowBetween>
+              <TYPE.body>V1 Price:</TYPE.body>
+              <TYPE.black>
                 {v1SpotPrice?.toSignificant(6)} {token.symbol}/ETH
-              </div>
-            </AutoColumn>
+              </TYPE.black>
+            </RowBetween>
+            <RowBetween>
+              <div />
+              <TYPE.black>
+                {v1SpotPrice?.invert()?.toSignificant(6)} ETH/{token.symbol}
+              </TYPE.black>
+            </RowBetween>
           </AutoColumn>
         </PinkCard>
       )}
+
       <LightCard>
-        <AutoRow style={{ justifyContent: 'flex-start', width: 'fit-content' }}>
-          <TokenLogo size="24px" address={token.address} />{' '}
-          <div style={{ marginLeft: '.75rem' }}>
-            <TYPE.mediumHeader>
-              {<FormattedPoolTokenAmount tokenAmount={liquidityTokenAmount} />} {token.symbol} Pool Tokens
-            </TYPE.mediumHeader>
-          </div>
-        </AutoRow>
+        <V1LiquidityInfo
+          token={token}
+          liquidityTokenAmount={liquidityTokenAmount}
+          tokenWorth={tokenWorth}
+          ethWorth={ethWorth}
+        />
+
         <div style={{ display: 'flex', marginTop: '1rem' }}>
           <AutoColumn gap="12px" style={{ flex: '1', marginRight: 12 }}>
             <ButtonConfirmed
@@ -217,13 +309,13 @@ function V1PairMigration({ liquidityTokenAmount, token }: { liquidityTokenAmount
               }
               onClick={migrate}
             >
-              {isSuccessfullyMigrated ? 'Success' : isMigrationPending ? 'Migrating...' : 'Migrate'}
+              {isSuccessfullyMigrated ? 'Success' : isMigrationPending ? <Dots>Migrating</Dots> : 'Migrate'}
             </ButtonConfirmed>
           </AutoColumn>
         </div>
       </LightCard>
       <TYPE.darkGray style={{ textAlign: 'center' }}>
-        {'Your ' + token.symbol + ' liquidity will become Uniswap V2 ' + token.symbol + '/ETH liquidity.'}
+        {`Your Uniswap V1 ${token.symbol}/ETH liquidity will become Uniswap V2 ${token.symbol}/ETH liquidity.`}
       </TYPE.darkGray>
     </AutoColumn>
   )
@@ -235,39 +327,33 @@ export default function MigrateV1Exchange({
     params: { address }
   }
 }: RouteComponentProps<{ address: string }>) {
-  const validated = isAddress(address)
+  const validatedAddress = isAddress(address)
   const { chainId, account } = useActiveWeb3React()
 
-  const exchangeContract = useV1ExchangeContract(validated ? validated : undefined)
-
+  const exchangeContract = useV1ExchangeContract(validatedAddress ? validatedAddress : undefined)
   const tokenAddress = useSingleCallResult(exchangeContract, 'tokenAddress', undefined, NEVER_RELOAD)?.result?.[0]
 
   const token = useToken(tokenAddress)
 
   const liquidityToken: Token | undefined = useMemo(
-    () => (validated && token ? new Token(chainId, validated, 18, `UNI-V1-${token.symbol}`) : undefined),
-    [chainId, token, validated]
+    () =>
+      validatedAddress && token
+        ? new Token(chainId, validatedAddress, 18, `UNI-V1-${token.symbol}`, 'Uniswap V1')
+        : undefined,
+    [chainId, validatedAddress, token]
   )
-
   const userLiquidityBalance = useTokenBalance(account, liquidityToken)
 
   const handleBack = useCallback(() => {
     history.push('/migrate/v1')
   }, [history])
 
-  if (!validated) {
+  // redirect for invalid url params
+  if (!validatedAddress || tokenAddress === AddressZero) {
     console.error('Invalid address in path', address)
     return <Redirect to="/migrate/v1" />
   }
 
-  if (!account) {
-    return (
-      <BodyWrapper>
-        <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
-      </BodyWrapper>
-    )
-  }
-
   return (
     <BodyWrapper style={{ padding: 24 }}>
       <AutoColumn gap="16px">
@@ -275,13 +361,30 @@ export default function MigrateV1Exchange({
           <div style={{ cursor: 'pointer' }}>
             <ArrowLeft onClick={handleBack} />
           </div>
-          <TYPE.mediumHeader>Migrate {token?.symbol} Pool Tokens</TYPE.mediumHeader>
+          <TYPE.mediumHeader>Migrate V1 Liquidity</TYPE.mediumHeader>
           <div>
             <QuestionHelper text="Migrate your liquidity tokens from Uniswap V1 to Uniswap V2." />
           </div>
         </AutoRow>
 
-        {userLiquidityBalance && token ? (
+        {!account ? (
+          <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
+        ) : validatedAddress && token?.equals(WETH[chainId]) ? (
+          <>
+            <TYPE.body my={9} style={{ fontWeight: 400 }}>
+              Because Uniswap V2 uses WETH under the hood, your Uniswap V1 WETH/ETH liquidity cannot be migrated. You
+              may want to remove your liquidity instead.
+            </TYPE.body>
+
+            <ButtonConfirmed
+              onClick={() => {
+                history.push(`/remove/v1/${validatedAddress}`)
+              }}
+            >
+              Remove
+            </ButtonConfirmed>
+          </>
+        ) : userLiquidityBalance && token ? (
           <V1PairMigration liquidityTokenAmount={userLiquidityBalance} token={token} />
         ) : (
           <EmptyState message="Loading..." />

src/pages/MigrateV1/RemoveV1Exchange.tsx

+import { TransactionResponse } from '@ethersproject/abstract-provider'
+import { JSBI, Token, TokenAmount, WETH, Fraction, Percent } from '@uniswap/sdk'
+import React, { useCallback, useMemo, useState } from 'react'
+import { ArrowLeft } from 'react-feather'
+import ReactGA from 'react-ga'
+import { Redirect, RouteComponentProps } from 'react-router'
+import { ButtonConfirmed } from '../../components/Button'
+import { LightCard } from '../../components/Card'
+import { AutoColumn } from '../../components/Column'
+import QuestionHelper from '../../components/QuestionHelper'
+import { AutoRow } from '../../components/Row'
+import { DEFAULT_DEADLINE_FROM_NOW } from '../../constants'
+import { useActiveWeb3React } from '../../hooks'
+import { useToken } from '../../hooks/Tokens'
+import { useV1ExchangeContract } from '../../hooks/useContract'
+import { NEVER_RELOAD, useSingleCallResult } from '../../state/multicall/hooks'
+import { useIsTransactionPending, useTransactionAdder } from '../../state/transactions/hooks'
+import { useTokenBalance, useETHBalances } from '../../state/wallet/hooks'
+import { TYPE } from '../../theme'
+import { isAddress } from '../../utils'
+import { BodyWrapper } from '../AppBody'
+import { EmptyState } from './EmptyState'
+import { V1LiquidityInfo } from './MigrateV1Exchange'
+import { AddressZero } from '@ethersproject/constants'
+import { Dots } from '../../components/swap/styleds'
+import { Contract } from '@ethersproject/contracts'
+import { useTotalSupply } from '../../data/TotalSupply'
+
+const WEI_DENOM = JSBI.exponentiate(JSBI.BigInt(10), JSBI.BigInt(18))
+const ZERO = JSBI.BigInt(0)
+const ONE = JSBI.BigInt(1)
+const ZERO_FRACTION = new Fraction(ZERO, ONE)
+
+function V1PairRemoval({
+  exchangeContract,
+  liquidityTokenAmount,
+  token
+}: {
+  exchangeContract: Contract
+  liquidityTokenAmount: TokenAmount
+  token: Token
+}) {
+  const { chainId } = useActiveWeb3React()
+  const totalSupply = useTotalSupply(liquidityTokenAmount.token)
+  const exchangeETHBalance = useETHBalances([liquidityTokenAmount.token.address])?.[liquidityTokenAmount.token.address]
+  const exchangeTokenBalance = useTokenBalance(liquidityTokenAmount.token.address, token)
+
+  const [confirmingRemoval, setConfirmingRemoval] = useState<boolean>(false)
+  const [pendingRemovalHash, setPendingRemovalHash] = useState<string | null>(null)
+
+  const shareFraction: Fraction = totalSupply ? new Percent(liquidityTokenAmount.raw, totalSupply.raw) : ZERO_FRACTION
+
+  const ethWorth: Fraction = exchangeETHBalance
+    ? new Fraction(shareFraction.multiply(exchangeETHBalance).quotient, WEI_DENOM)
+    : ZERO_FRACTION
+
+  const tokenWorth: TokenAmount = exchangeTokenBalance
+    ? new TokenAmount(token, shareFraction.multiply(exchangeTokenBalance.raw).quotient)
+    : new TokenAmount(token, ZERO)
+
+  const addTransaction = useTransactionAdder()
+  const isRemovalPending = useIsTransactionPending(pendingRemovalHash)
+
+  const remove = useCallback(() => {
+    if (!liquidityTokenAmount) return
+
+    setConfirmingRemoval(true)
+    exchangeContract
+      .removeLiquidity(
+        liquidityTokenAmount.raw.toString(),
+        1, // min_eth, this is safe because we're removing liquidity
+        1, // min_tokens, this is safe because we're removing liquidity
+        Math.floor(new Date().getTime() / 1000) + DEFAULT_DEADLINE_FROM_NOW
+      )
+      .then((response: TransactionResponse) => {
+        ReactGA.event({
+          category: 'Remove',
+          action: 'V1',
+          label: token?.symbol
+        })
+
+        addTransaction(response, {
+          summary: `Remove ${token.equals(WETH[chainId]) ? 'WETH' : token.symbol}/ETH V1 liquidity`
+        })
+        setPendingRemovalHash(response.hash)
+      })
+      .catch(error => {
+        console.error(error)
+        setConfirmingRemoval(false)
+      })
+  }, [exchangeContract, liquidityTokenAmount, token, chainId, addTransaction])
+
+  const noLiquidityTokens = !!liquidityTokenAmount && liquidityTokenAmount.equalTo(ZERO)
+
+  const isSuccessfullyRemoved = !!pendingRemovalHash && !!noLiquidityTokens
+
+  return (
+    <AutoColumn gap="20px">
+      <TYPE.body my={9} style={{ fontWeight: 400 }}>
+        This tool will remove your V1 liquidity and send the underlying assets to your wallet.
+      </TYPE.body>
+
+      <LightCard>
+        <V1LiquidityInfo
+          token={token}
+          liquidityTokenAmount={liquidityTokenAmount}
+          tokenWorth={tokenWorth}
+          ethWorth={ethWorth}
+        />
+
+        <div style={{ display: 'flex', marginTop: '1rem' }}>
+          <ButtonConfirmed
+            confirmed={isSuccessfullyRemoved}
+            disabled={isSuccessfullyRemoved || noLiquidityTokens || isRemovalPending || confirmingRemoval}
+            onClick={remove}
+          >
+            {isSuccessfullyRemoved ? 'Success' : isRemovalPending ? <Dots>Removing</Dots> : 'Remove'}
+          </ButtonConfirmed>
+        </div>
+      </LightCard>
+      <TYPE.darkGray style={{ textAlign: 'center' }}>
+        {`Your Uniswap V1 ${
+          token.equals(WETH[chainId]) ? 'WETH' : token.symbol
+        }/ETH liquidity will be redeemed for underlying assets.`}
+      </TYPE.darkGray>
+    </AutoColumn>
+  )
+}
+
+export default function RemoveV1Exchange({
+  history,
+  match: {
+    params: { address }
+  }
+}: RouteComponentProps<{ address: string }>) {
+  const validatedAddress = isAddress(address)
+  const { chainId, account } = useActiveWeb3React()
+
+  const exchangeContract = useV1ExchangeContract(validatedAddress ? validatedAddress : undefined, true)
+  const tokenAddress = useSingleCallResult(exchangeContract, 'tokenAddress', undefined, NEVER_RELOAD)?.result?.[0]
+  const token = useToken(tokenAddress)
+
+  const liquidityToken: Token | undefined = useMemo(
+    () =>
+      validatedAddress && token
+        ? new Token(chainId, validatedAddress, 18, `UNI-V1-${token.symbol}`, 'Uniswap V1')
+        : undefined,
+    [chainId, validatedAddress, token]
+  )
+  const userLiquidityBalance = useTokenBalance(account, liquidityToken)
+
+  const handleBack = useCallback(() => {
+    history.push('/migrate/v1')
+  }, [history])
+
+  // redirect for invalid url params
+  if (!validatedAddress || tokenAddress === AddressZero) {
+    console.error('Invalid address in path', address)
+    return <Redirect to="/migrate/v1" />
+  }
+
+  return (
+    <BodyWrapper style={{ padding: 24 }}>
+      <AutoColumn gap="16px">
+        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
+          <div style={{ cursor: 'pointer' }}>
+            <ArrowLeft onClick={handleBack} />
+          </div>
+          <TYPE.mediumHeader>Remove V1 Liquidity</TYPE.mediumHeader>
+          <div>
+            <QuestionHelper text="Remove your Uniswap V1 liquidity tokens." />
+          </div>
+        </AutoRow>
+
+        {!account ? (
+          <TYPE.largeHeader>You must connect an account.</TYPE.largeHeader>
+        ) : userLiquidityBalance && token ? (
+          <V1PairRemoval
+            exchangeContract={exchangeContract}
+            liquidityTokenAmount={userLiquidityBalance}
+            token={token}
+          />
+        ) : (
+          <EmptyState message="Loading..." />
+        )}
+      </AutoColumn>
+    </BodyWrapper>
+  )
+}

src/pages/MigrateV1/index.tsx

-import { Fraction, JSBI, Token, TokenAmount } from '@uniswap/sdk'
-import React, { useCallback, useContext, useMemo, useState } from 'react'
+import { JSBI, Token } from '@uniswap/sdk'
+import React, { useCallback, useContext, useMemo, useState, useEffect } from 'react'
 import { ArrowLeft } from 'react-feather'
 import { RouteComponentProps } from 'react-router'
 import { ThemeContext } from 'styled-components'
-import { ButtonPrimary } from '../../components/Button'
 import { AutoColumn } from '../../components/Column'
 import { AutoRow } from '../../components/Row'
 import { SearchInput } from '../../components/SearchModal/styleds'
-import TokenLogo from '../../components/TokenLogo'
 import { useAllTokenV1Exchanges } from '../../data/V1'
 import { useActiveWeb3React } from '../../hooks'
-import { useToken } from '../../hooks/Tokens'
-import { useWalletModalToggle } from '../../state/application/hooks'
-import { useTokenBalances } from '../../state/wallet/hooks'
+import { useToken, useAllTokens } from '../../hooks/Tokens'
+import { useTokenBalancesWithLoadingIndicator } from '../../state/wallet/hooks'
 import { TYPE } from '../../theme'
-import { GreyCard } from '../../components/Card'
+import { LightCard } from '../../components/Card'
 import { BodyWrapper } from '../AppBody'
 import { EmptyState } from './EmptyState'
-
-const POOL_TOKEN_AMOUNT_MIN = new Fraction(JSBI.BigInt(1), JSBI.BigInt(1000000))
-
-export function FormattedPoolTokenAmount({ tokenAmount }: { tokenAmount: TokenAmount }) {
-  return (
-    <>
-      {tokenAmount.equalTo(JSBI.BigInt(0))
-        ? '0'
-        : tokenAmount.greaterThan(POOL_TOKEN_AMOUNT_MIN)
-        ? tokenAmount.toSignificant(6)
-        : `<${POOL_TOKEN_AMOUNT_MIN.toSignificant(1)}`}
-    </>
-  )
-}
+import V1PositionCard from '../../components/PositionCard/V1'
+import QuestionHelper from '../../components/QuestionHelper'
+import { Dots } from '../../components/swap/styleds'
+import { useAddUserToken } from '../../state/user/hooks'
+import { isDefaultToken, isCustomAddedToken } from '../../utils'
 
 export default function MigrateV1({ history }: RouteComponentProps) {
+  const theme = useContext(ThemeContext)
   const { account, chainId } = useActiveWeb3React()
-  const allV1Exchanges = useAllTokenV1Exchanges()
-
-  const v1LiquidityTokens: Token[] = useMemo(() => {
-    return Object.keys(allV1Exchanges).map(exchangeAddress => new Token(chainId, exchangeAddress, 18))
-  }, [chainId, allV1Exchanges])
-
-  const v1LiquidityBalances = useTokenBalances(account, v1LiquidityTokens)
 
   const [tokenSearch, setTokenSearch] = useState<string>('')
   const handleTokenSearchChange = useCallback(e => setTokenSearch(e.target.value), [setTokenSearch])
 
-  const searchedToken: Token | undefined = useToken(tokenSearch)
+  // automatically add the search token
+  const token = useToken(tokenSearch)
+  const isDefault = isDefaultToken(token)
+  const allTokens = useAllTokens()
+  const isCustomAdded = isCustomAddedToken(allTokens, token)
+  const addToken = useAddUserToken()
+  useEffect(() => {
+    if (token && !isDefault && !isCustomAdded) {
+      addToken(token)
+    }
+  }, [token, isDefault, isCustomAdded, addToken])
 
-  const unmigratedLiquidityExchangeAddresses: TokenAmount[] = useMemo(
-    () =>
-      Object.keys(v1LiquidityBalances)
-        .filter(tokenAddress =>
-          v1LiquidityBalances[tokenAddress]
-            ? JSBI.greaterThan(v1LiquidityBalances[tokenAddress]?.raw, JSBI.BigInt(0))
-            : false
+  // get V1 LP balances
+  const V1Exchanges = useAllTokenV1Exchanges()
+  const V1LiquidityTokens: Token[] = useMemo(() => {
+    return Object.keys(V1Exchanges).map(
+      exchangeAddress => new Token(chainId, exchangeAddress, 18, 'UNI-V1', 'Uniswap V1')
     )
-        .map(tokenAddress => v1LiquidityBalances[tokenAddress])
-        .sort((a1, a2) => {
-          if (searchedToken) {
-            if (allV1Exchanges[a1.token.address].address === searchedToken.address) return -1
-            if (allV1Exchanges[a2.token.address].address === searchedToken.address) return 1
-          }
-          return a1.token.address < a2.token.address ? -1 : 1
-        }),
-    [allV1Exchanges, searchedToken, v1LiquidityBalances]
+  }, [chainId, V1Exchanges])
+  const [V1LiquidityBalances, V1LiquidityBalancesLoading] = useTokenBalancesWithLoadingIndicator(
+    account,
+    V1LiquidityTokens
   )
+  const allV1PairsWithLiquidity = V1LiquidityTokens.filter(V1LiquidityToken => {
+    return (
+      V1LiquidityBalances?.[V1LiquidityToken.address] &&
+      JSBI.greaterThan(V1LiquidityBalances[V1LiquidityToken.address].raw, JSBI.BigInt(0))
+    )
+  }).map(V1LiquidityToken => {
+    return (
+      <V1PositionCard
+        key={V1LiquidityToken.address}
+        token={V1Exchanges[V1LiquidityToken.address]}
+        V1LiquidityBalance={V1LiquidityBalances[V1LiquidityToken.address]}
+      />
+    )
+  })
 
-  const theme = useContext(ThemeContext)
-
-  const toggleWalletModal = useWalletModalToggle()
+  // should never always be false, because a V1 exhchange exists for WETH on all testnets
+  const isLoading = Object.keys(V1Exchanges)?.length === 0 || V1LiquidityBalancesLoading
 
   const handleBackClick = useCallback(() => {
     history.push('/pool')
   }, [history])
 
   return (
-    <BodyWrapper style={{ maxWidth: 450, padding: 24 }}>
-      <AutoColumn gap="24px">
-        <AutoRow style={{ justifyContent: 'space-between' }}>
+    <BodyWrapper style={{ padding: 24 }}>
+      <AutoColumn gap="16px">
+        <AutoRow style={{ alignItems: 'center', justifyContent: 'space-between' }} gap="8px">
+          <div style={{ cursor: 'pointer' }}>
+            <ArrowLeft onClick={handleBackClick} />
+          </div>
+          <TYPE.mediumHeader>Migrate V1 Liquidity</TYPE.mediumHeader>
           <div>
-            <ArrowLeft style={{ cursor: 'pointer' }} onClick={handleBackClick} />
+            <QuestionHelper text="Migrate your liquidity tokens from Uniswap V1 to Uniswap V2." />
           </div>
-          <TYPE.largeHeader>Migrate Liquidity</TYPE.largeHeader>
-          <div></div>
         </AutoRow>
-        <GreyCard>
-          <TYPE.main style={{ lineHeight: '140%' }}>
-            For each pool, approve the migration helper and click migrate liquidity. Your liquidity will be withdrawn
-            from Uniswap V1 and deposited into Uniswap V2.
-          </TYPE.main>
-          <TYPE.black padding={'1rem 0 0 0'} style={{ lineHeight: '140%' }}>
-            If your liquidity does not appear below automatically, you may need to find it by pasting the token address
-            into the search box below.
-          </TYPE.black>
-        </GreyCard>
+
+        <TYPE.body style={{ marginBottom: 8, fontWeight: 400 }}>
+          For each pool shown below, click migrate to remove your liquidity from Uniswap V1 and deposit it into Uniswap
+          V2.
+        </TYPE.body>
+
+        {!account ? (
+          <LightCard padding="40px">
+            <TYPE.body color={theme.text3} textAlign="center">
+              Connect to a wallet to view your V1 liquidity.
+            </TYPE.body>
+          </LightCard>
+        ) : isLoading ? (
+          <LightCard padding="40px">
+            <TYPE.body color={theme.text3} textAlign="center">
+              <Dots>Loading</Dots>
+            </TYPE.body>
+          </LightCard>
+        ) : (
+          <>
             <AutoRow>
               <SearchInput
                 value={tokenSearch}
                 onChange={handleTokenSearchChange}
-            placeholder="Find liquidity by pasting a token address."
+                placeholder="Enter a token address to find liquidity"
               />
             </AutoRow>
-
-        {unmigratedLiquidityExchangeAddresses.map(poolTokenAmount => (
-          <div
-            key={poolTokenAmount.token.address}
-            style={{ borderRadius: '20px', padding: 16, backgroundColor: theme.bg2 }}
-          >
-            <AutoRow style={{ justifyContent: 'space-between' }}>
-              <AutoRow style={{ justifyContent: 'flex-start', width: 'fit-content' }}>
-                <TokenLogo size="32px" address={allV1Exchanges[poolTokenAmount.token.address].address} />{' '}
-                <div style={{ marginLeft: '.75rem' }}>
-                  <TYPE.main fontWeight={600}>
-                    <FormattedPoolTokenAmount tokenAmount={poolTokenAmount} />
-                  </TYPE.main>
-                  <TYPE.main fontWeight={500}>
-                    {allV1Exchanges[poolTokenAmount.token.address].symbol} Pool Tokens
-                  </TYPE.main>
-                </div>
-              </AutoRow>
-              <div>
-                <ButtonPrimary
-                  onClick={() => {
-                    history.push(`/migrate/v1/${poolTokenAmount.token.address}`)
-                  }}
-                  style={{ padding: '8px 12px', borderRadius: '12px' }}
-                >
-                  Migrate
-                </ButtonPrimary>
-              </div>
-            </AutoRow>
-          </div>
-        ))}
-
-        {account && unmigratedLiquidityExchangeAddresses.length === 0 ? (
+            {allV1PairsWithLiquidity?.length > 0 ? (
+              <>{allV1PairsWithLiquidity}</>
+            ) : (
               <EmptyState message="No V1 Liquidity found." />
-        ) : null}
-
-        {!account ? <ButtonPrimary onClick={toggleWalletModal}>Connect to a wallet</ButtonPrimary> : null}
+            )}
+          </>
+        )}
       </AutoColumn>
     </BodyWrapper>
   )

src/pages/Pool/index.tsx

 import React, { useState, useContext, useCallback } from 'react'
 import styled, { ThemeContext } from 'styled-components'
-import { JSBI, Pair } from '@uniswap/sdk'
+import { JSBI } from '@uniswap/sdk'
 import { RouteComponentProps } from 'react-router-dom'
 
 import Question from '../../components/QuestionHelper'
 import PairSearchModal from '../../components/SearchModal/PairSearchModal'
 import PositionCard from '../../components/PositionCard'
 import { useUserHasLiquidityInAllTokens } from '../../data/V1'
-import { useTokenBalances } from '../../state/wallet/hooks'
+import { useTokenBalancesWithLoadingIndicator } from '../../state/wallet/hooks'
 import { StyledInternalLink, TYPE } from '../../theme'
 import { Text } from 'rebass'
 import { LightCard } from '../../components/Card'
@@ -16,9 +16,10 @@ import { ButtonPrimary, ButtonSecondary } from '../../components/Button'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 
 import { useActiveWeb3React } from '../../hooks'
-import { usePair } from '../../data/Reserves'
+import { usePairs } from '../../data/Reserves'
 import { useAllDummyPairs } from '../../state/user/hooks'
 import AppBody from '../AppBody'
+import { Dots } from '../../components/swap/styleds'
 
 const Positions = styled.div`
   position: relative;
@@ -31,33 +32,35 @@ const FixedBottom = styled.div`
   width: 100%;
 `
 
-function PositionCardWrapper({ dummyPair }: { dummyPair: Pair }) {
-  const pair = usePair(dummyPair.token0, dummyPair.token1)
-  return <PositionCard pair={pair} />
-}
-
 export default function Pool({ history }: RouteComponentProps) {
   const theme = useContext(ThemeContext)
   const { account } = useActiveWeb3React()
   const [showPoolSearch, setShowPoolSearch] = useState(false)
 
-  // initiate listener for LP balances
-  const pairs = useAllDummyPairs()
-  const pairBalances = useTokenBalances(
+  // fetch the user's balances of all tracked V2 LP tokens
+  const V2DummyPairs = useAllDummyPairs()
+  const [V2PairsBalances, fetchingV2PairBalances] = useTokenBalancesWithLoadingIndicator(
     account,
-    pairs?.map(p => p.liquidityToken)
+    V2DummyPairs?.map(p => p.liquidityToken)
   )
-
-  const filteredExchangeList = pairs
-    .filter(pair => {
-      return (
-        pairBalances?.[pair.liquidityToken.address] &&
-        JSBI.greaterThan(pairBalances[pair.liquidityToken.address].raw, JSBI.BigInt(0))
+  // fetch the reserves for all V2 pools in which the user has a balance
+  const V2DummyPairsWithABalance = V2DummyPairs.filter(
+    V2DummyPair =>
+      V2PairsBalances[V2DummyPair.liquidityToken.address] &&
+      JSBI.greaterThan(V2PairsBalances[V2DummyPair.liquidityToken.address].raw, JSBI.BigInt(0))
+  )
+  const V2Pairs = usePairs(
+    V2DummyPairsWithABalance.map(V2DummyPairWithABalance => [
+      V2DummyPairWithABalance.token0,
+      V2DummyPairWithABalance.token1
+    ])
   )
-    })
-    .map((pair, i) => {
-      return <PositionCardWrapper key={i} dummyPair={pair} />
-    })
+  const V2IsLoading =
+    fetchingV2PairBalances || V2Pairs?.length < V2DummyPairsWithABalance.length || V2Pairs?.some(V2Pair => !!!V2Pair)
+
+  const allV2PairsWithLiquidity = V2Pairs.filter(V2Pair => !!V2Pair).map(V2Pair => (
+    <PositionCard key={V2Pair.liquidityToken.address} pair={V2Pair} />
+  ))
 
   const hasV1Liquidity = useUserHasLiquidityInAllTokens()
 
@@ -76,42 +79,49 @@ export default function Pool({ history }: RouteComponentProps) {
           }}
         >
           <Text fontWeight={500} fontSize={20}>
-            Join {filteredExchangeList?.length > 0 ? 'another' : 'a'} pool
+            Join {allV2PairsWithLiquidity?.length > 0 ? 'another' : 'a'} pool
           </Text>
         </ButtonPrimary>
+
         <Positions>
           <AutoColumn gap="12px">
             <RowBetween padding={'0 8px'}>
               <Text color={theme.text1} fontWeight={500}>
-                Your Pooled Liquidity
+                Your Liquidity
               </Text>
               <Question text="When you add liquidity, you are given pool tokens that represent your share. If you don’t see a pool you joined in this list, try importing a pool below." />
             </RowBetween>
-            {filteredExchangeList?.length === 0 && (
-              <LightCard
-                padding="40px
-          "
-              >
+
+            {!account ? (
+              <LightCard padding="40px">
+                <TYPE.body color={theme.text3} textAlign="center">
+                  Connect to a wallet to view your liquidity.
+                </TYPE.body>
+              </LightCard>
+            ) : V2IsLoading ? (
+              <LightCard padding="40px">
+                <TYPE.body color={theme.text3} textAlign="center">
+                  <Dots>Loading</Dots>
+                </TYPE.body>
+              </LightCard>
+            ) : allV2PairsWithLiquidity?.length > 0 ? (
+              <>{allV2PairsWithLiquidity}</>
+            ) : (
+              <LightCard padding="40px">
                 <TYPE.body color={theme.text3} textAlign="center">
                   No liquidity found.
                 </TYPE.body>
               </LightCard>
             )}
-            {filteredExchangeList}
+
+            <div>
               <Text textAlign="center" fontSize={14} style={{ padding: '.5rem 0 .5rem 0' }}>
-              {!hasV1Liquidity ? (
-                <>
-                  {filteredExchangeList?.length !== 0 ? `Don't see a pool you joined? ` : 'Already joined a pool? '}{' '}
-                  <StyledInternalLink id="import-pool-link" to="/find">
-                    Import it.
+                {hasV1Liquidity ? 'Uniswap V1 liquidity found!' : "Don't see a pool you joined?"}{' '}
+                <StyledInternalLink id="import-pool-link" to={hasV1Liquidity ? '/migrate/v1' : '/find'}>
+                  {hasV1Liquidity ? 'Migrate now.' : 'Import it.'}
                 </StyledInternalLink>
-                </>
-              ) : (
-                <StyledInternalLink id="migrate-v1-liquidity-link" to="/migrate/v1">
-                  Migrate your V1 liquidity.
-                </StyledInternalLink>
-              )}
               </Text>
+            </div>
           </AutoColumn>
           <FixedBottom>
             <ColumnCenter>

src/pages/PoolFinder/index.tsx

-import { JSBI, Pair, Token, TokenAmount } from '@uniswap/sdk'
+import { JSBI, Pair, Token, TokenAmount, WETH } from '@uniswap/sdk'
 import React, { useCallback, useEffect, useState } from 'react'
 import { Plus } from 'react-feather'
-import { RouteComponentProps } from 'react-router-dom'
 import { Text } from 'rebass'
-import { ButtonDropwdown, ButtonDropwdownLight, ButtonPrimary } from '../../components/Button'
+import { ButtonDropdownLight } from '../../components/Button'
 import { LightCard } from '../../components/Card'
 import { AutoColumn, ColumnCenter } from '../../components/Column'
 import PositionCard from '../../components/PositionCard'
@@ -23,31 +22,31 @@ enum Fields {
   TOKEN1 = 1
 }
 
-export default function PoolFinder({ history }: RouteComponentProps) {
-  const { account } = useActiveWeb3React()
+export default function PoolFinder() {
+  const { account, chainId } = useActiveWeb3React()
+
   const [showSearch, setShowSearch] = useState<boolean>(false)
-  const [activeField, setActiveField] = useState<number>(Fields.TOKEN0)
+  const [activeField, setActiveField] = useState<number>(Fields.TOKEN1)
 
-  const [token0Address, setToken0Address] = useState<string>()
+  const [token0Address, setToken0Address] = useState<string>(WETH[chainId].address)
   const [token1Address, setToken1Address] = useState<string>()
   const token0: Token = useToken(token0Address)
   const token1: Token = useToken(token1Address)
 
   const pair: Pair = usePair(token0, token1)
   const addPair = usePairAdder()
-
   useEffect(() => {
     if (pair) {
       addPair(pair)
     }
   }, [pair, addPair])
 
-  const position: TokenAmount = useTokenBalanceTreatingWETHasETH(account, pair?.liquidityToken)
-
   const newPair: boolean =
     pair === null ||
     (!!pair && JSBI.equal(pair.reserve0.raw, JSBI.BigInt(0)) && JSBI.equal(pair.reserve1.raw, JSBI.BigInt(0)))
-  const allowImport: boolean = position && JSBI.greaterThan(position.raw, JSBI.BigInt(0))
+
+  const position: TokenAmount = useTokenBalanceTreatingWETHasETH(account, pair?.liquidityToken)
+  const poolImported: boolean = !!position && JSBI.greaterThan(position.raw, JSBI.BigInt(0))
 
   const handleTokenSelect = useCallback(
     (address: string) => {
@@ -63,100 +62,89 @@ export default function PoolFinder({ history }: RouteComponentProps) {
   return (
     <AppBody>
       <AutoColumn gap="md">
-        {!token0Address ? (
-          <ButtonDropwdown
-            onClick={() => {
-              setShowSearch(true)
-              setActiveField(Fields.TOKEN0)
-            }}
-          >
-            <Text fontSize={20}>Select first token</Text>
-          </ButtonDropwdown>
-        ) : (
-          <ButtonDropwdownLight
+        <ButtonDropdownLight
           onClick={() => {
             setShowSearch(true)
             setActiveField(Fields.TOKEN0)
           }}
         >
+          {token0 ? (
             <Row>
               <TokenLogo address={token0Address} />
               <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
-                {token0?.symbol}
+                {token0.symbol}
               </Text>
             </Row>
-          </ButtonDropwdownLight>
+          ) : (
+            <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
+              Select a Token
+            </Text>
           )}
+        </ButtonDropdownLight>
+
         <ColumnCenter>
           <Plus size="16" color="#888D9B" />
         </ColumnCenter>
-        {!token1Address ? (
-          <ButtonDropwdown
-            onClick={() => {
-              setShowSearch(true)
-              setActiveField(Fields.TOKEN1)
-            }}
-          >
-            <Text fontSize={20}>Select second token</Text>
-          </ButtonDropwdown>
-        ) : (
-          <ButtonDropwdownLight
+
+        <ButtonDropdownLight
           onClick={() => {
             setShowSearch(true)
             setActiveField(Fields.TOKEN1)
           }}
         >
+          {token1 ? (
             <Row>
               <TokenLogo address={token1Address} />
               <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
-                {token1?.symbol}
+                {token1.symbol}
               </Text>
             </Row>
-          </ButtonDropwdownLight>
+          ) : (
+            <Text fontWeight={500} fontSize={20} marginLeft={'12px'}>
+              Select a Token
+            </Text>
           )}
-        {allowImport && (
+        </ButtonDropdownLight>
+
+        {poolImported && (
           <ColumnCenter
             style={{ justifyItems: 'center', backgroundColor: '', padding: '12px 0px', borderRadius: '12px' }}
           >
             <Text textAlign="center" fontWeight={500} color="">
-              Pool Imported!
+              Pool Found!
             </Text>
           </ColumnCenter>
         )}
+
         {position ? (
-          !JSBI.equal(position.raw, JSBI.BigInt(0)) ? (
+          poolImported ? (
             <PositionCard pair={pair} minimal={true} border="1px solid #CED0D9" />
           ) : (
             <LightCard padding="45px 10px">
               <AutoColumn gap="sm" justify="center">
-                <Text textAlign="center">Pool found, you don’t have liquidity on this pair yet.</Text>
-                <StyledInternalLink to={`/add/${token0Address}-${token1Address}`}>
-                  <Text textAlign="center">Add liquidity to this pair instead.</Text>
+                <Text textAlign="center">You don’t have liquidity in this pool yet.</Text>
+                <StyledInternalLink to={`/add/${token0.address}-${token1.address}`}>
+                  <Text textAlign="center">Add liquidity?</Text>
                 </StyledInternalLink>
               </AutoColumn>
             </LightCard>
           )
         ) : newPair ? (
-          <LightCard padding="45px">
+          <LightCard padding="45px 10px">
             <AutoColumn gap="sm" justify="center">
-              <Text color="">No pool found.</Text>
+              <Text textAlign="center">No pool found.</Text>
               <StyledInternalLink to={`/add/${token0Address}-${token1Address}`}>Create pool?</StyledInternalLink>
             </AutoColumn>
           </LightCard>
         ) : (
-          <LightCard padding={'45px'}>
-            <Text color="#C3C5CB" textAlign="center">
-              Select a token pair to find your liquidity.
+          <LightCard padding="45px 10px">
+            <Text textAlign="center">
+              {!account ? 'Connect to a wallet to find pools' : 'Select a token to find your liquidity.'}
             </Text>
           </LightCard>
         )}
-
-        <ButtonPrimary disabled={!allowImport} onClick={() => history.goBack()}>
-          <Text fontWeight={500} fontSize={20}>
-            Close
-          </Text>
-        </ButtonPrimary>
       </AutoColumn>
+
       <TokenSearchModal
         isOpen={showSearch}
         onTokenSelect={handleTokenSelect}

src/state/wallet/hooks.ts

@@ -44,10 +44,10 @@ export function useETHBalances(uncheckedAddresses?: (string | undefined)[]): { [
 /**
  * Returns a map of token addresses to their eventually consistent token balances for a single account.
  */
-export function useTokenBalances(
+export function useTokenBalancesWithLoadingIndicator(
   address?: string,
   tokens?: (Token | undefined)[]
-): { [tokenAddress: string]: TokenAmount | undefined } {
+): [{ [tokenAddress: string]: TokenAmount | undefined }, boolean] {
   const validatedTokens: Token[] = useMemo(
     () => tokens?.filter((t?: Token): t is Token => isAddress(t?.address) !== false) ?? [],
     [tokens]
@@ -57,7 +57,10 @@ export function useTokenBalances(
 
   const balances = useMultipleContractSingleData(validatedTokenAddresses, ERC20_INTERFACE, 'balanceOf', [address])
 
-  return useMemo(
+  const anyLoading = balances.some(callState => callState.loading)
+
+  return [
+    useMemo(
       () =>
         address && validatedTokens.length > 0
           ? validatedTokens.reduce<{ [tokenAddress: string]: TokenAmount | undefined }>((memo, token, i) => {
@@ -70,7 +73,16 @@ export function useTokenBalances(
             }, {})
           : {},
       [address, validatedTokens, balances]
-  )
+    ),
+    anyLoading
+  ]
+}
+
+export function useTokenBalances(
+  address?: string,
+  tokens?: (Token | undefined)[]
+): { [tokenAddress: string]: TokenAmount | undefined } {
+  return useTokenBalancesWithLoadingIndicator(address, tokens)[0]
 }
 
 // contains the hacky logic to treat the WETH token input as if it's ETH to

src/theme/index.tsx

@@ -169,9 +169,15 @@ export const TYPE = {
 
 export const FixedGlobalStyle = createGlobalStyle`
 @import url('https://rsms.me/inter/inter.css');
-  html, body, input, textarea, button  { font-family: 'Inter', sans-serif; letter-spacing: -0.018em;}
+
+html, input, textarea, button {
+  font-family: 'Inter', sans-serif;
+  letter-spacing: -0.018em;
+}
 @supports (font-variation-settings: normal) {
-  html, body, input, textarea, button { font-family: 'Inter var', sans-serif; }
+  html, input, textarea, button {
+    font-family: 'Inter var', sans-serif;
+  }
 }
 
 html,

src/utils/index.ts

@@ -5,7 +5,8 @@ import { JsonRpcSigner, Web3Provider } from '@ethersproject/providers'
 import { BigNumber } from '@ethersproject/bignumber'
 import { abi as IUniswapV2Router02ABI } from '@uniswap/v2-periphery/build/IUniswapV2Router02.json'
 import { ROUTER_ADDRESS } from '../constants'
-import { ChainId, JSBI, Percent, TokenAmount } from '@uniswap/sdk'
+import { ALL_TOKENS } from '../constants/tokens'
+import { ChainId, JSBI, Percent, TokenAmount, Token } from '@uniswap/sdk'
 
 // returns the checksummed address if the address is valid, otherwise returns false
 export function isAddress(value: any): string | false {
@@ -94,3 +95,12 @@ export function getRouterContract(_: number, library: Web3Provider, account?: st
 export function escapeRegExp(string: string): string {
   return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') // $& means the whole matched string
 }
+
+export function isDefaultToken(token?: Token): boolean {
+  return Boolean(token && ALL_TOKENS[token.chainId]?.[token.address])
+}
+
+export function isCustomAddedToken(allTokens: { [address: string]: Token }, token?: Token): boolean {
+  const isDefault = isDefaultToken(token)
+  return Boolean(token && allTokens[token.address] && !isDefault)
+}