refactor range selection and use in migrate

improve migrate

src/pages/AddLiquidity/index.tsx

 import { TransactionResponse } from '@ethersproject/providers'
-import { Currency, TokenAmount, Percent, ETHER } from '@uniswap/sdk-core'
+import { Currency, TokenAmount, Percent, ETHER, Price } from '@uniswap/sdk-core'
 import React, { useCallback, useContext, useState } from 'react'
 import { Link2, AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga'
@@ -105,6 +105,48 @@ export function FeeSelector({
   )
 }
 
+// currencyA is the base token
+export function RangeSelector({
+  priceLower,
+  priceUpper,
+  onLowerRangeInput,
+  onUpperRangeInput,
+  currencyA,
+  currencyB,
+}: {
+  priceLower?: Price
+  priceUpper?: Price
+  onLowerRangeInput: (typedValue: string) => void
+  onUpperRangeInput: (typedValue: string) => void
+  currencyA?: Currency | null
+  currencyB?: Currency | null
+}) {
+  return (
+    <RowBetween>
+      <StepCounter
+        value={priceLower?.toSignificant(5) ?? ''}
+        onUserInput={onLowerRangeInput}
+        width="48%"
+        label={
+          priceLower && currencyA && currencyB
+            ? `${priceLower.toSignificant(4)} ${currencyB.symbol} / 1 ${currencyA.symbol}`
+            : '-'
+        }
+      />
+      <StepCounter
+        value={priceUpper?.toSignificant(5) ?? ''}
+        onUserInput={onUpperRangeInput}
+        width="48%"
+        label={
+          priceUpper && currencyA && currencyB
+            ? `${priceUpper.toSignificant(4)} ${currencyB?.symbol} / 1 ${currencyA?.symbol}`
+            : '-'
+        }
+      />
+    </RowBetween>
+  )
+}
+
 // the order of displayed base currencies from left to right is always in sort order
 // currencyA is treated as the preferred base currency
 export function RateToggle({
@@ -538,28 +580,15 @@ export default function AddLiquidity({
                       </TYPE.main>
                     </RowBetween>
                   )}
-                  <RowBetween>
-                    <StepCounter
-                      value={priceLower?.toSignificant(5) ?? ''}
-                      onUserInput={onLowerRangeInput}
-                      width="48%"
-                      label={
-                        priceLower && currencyA && currencyB
-                          ? '1 ' + currencyA?.symbol + ' / ' + priceLower?.toSignificant(4) + ' ' + currencyB?.symbol
-                          : '-'
-                      }
-                    />
-                    <StepCounter
-                      value={priceUpper?.toSignificant(5) ?? ''}
-                      onUserInput={onUpperRangeInput}
-                      width="48%"
-                      label={
-                        priceUpper && currencyA && currencyB
-                          ? '1 ' + currencyA?.symbol + ' / ' + priceUpper?.toSignificant(4) + ' ' + currencyB?.symbol
-                          : '-'
-                      }
+
+                  <RangeSelector
+                    priceLower={priceLower}
+                    priceUpper={priceUpper}
+                    onLowerRangeInput={onLowerRangeInput}
+                    onUpperRangeInput={onUpperRangeInput}
+                    currencyA={currencyA}
+                    currencyB={currencyB}
                   />
-                  </RowBetween>
 
                   {outOfRange ? (
                     <YellowCard padding="8px 12px" borderRadius="12px">

src/pages/AddLiquidityV2/index.tsx

@@ -275,9 +275,9 @@ export default function AddLiquidity({
     (currencyA: Currency) => {
       const newCurrencyIdA = currencyId(currencyA)
       if (newCurrencyIdA === currencyIdB) {
-        history.push(`/add/${currencyIdB}/${currencyIdA}`)
+        history.push(`/add/v2/${currencyIdB}/${currencyIdA}`)
       } else {
-        history.push(`/add/${newCurrencyIdA}/${currencyIdB}`)
+        history.push(`/add/v2/${newCurrencyIdA}/${currencyIdB}`)
       }
     },
     [currencyIdB, history, currencyIdA]
@@ -287,12 +287,12 @@ export default function AddLiquidity({
       const newCurrencyIdB = currencyId(currencyB)
       if (currencyIdA === newCurrencyIdB) {
         if (currencyIdB) {
-          history.push(`/add/${currencyIdB}/${newCurrencyIdB}`)
+          history.push(`/add/v2/${currencyIdB}/${newCurrencyIdB}`)
         } else {
-          history.push(`/add/${newCurrencyIdB}`)
+          history.push(`/add/v2/${newCurrencyIdB}`)
         }
       } else {
-        history.push(`/add/${currencyIdA ? currencyIdA : 'ETH'}/${newCurrencyIdB}`)
+        history.push(`/add/v2/${currencyIdA ? currencyIdA : 'ETH'}/${newCurrencyIdB}`)
       }
     },
     [currencyIdA, history, currencyIdB]

src/pages/Pool/v2.tsx

@@ -171,7 +171,7 @@ export default function Pool() {
                   as={Link}
                   padding="6px 8px"
                   borderRadius="12px"
-                  to="/add/ETH"
+                  to="/add/v2/ETH"
                 >
                   <Text fontWeight={500} fontSize={16}>
                     Add Liquidity

src/state/mint/hooks.ts

@@ -176,10 +176,10 @@ export function useDerivedMintInfo(
     [key: string]: number | undefined
   } = useMemo(() => {
     return {
-      [Bound.LOWER]: poolForPosition ? tryParseTick(tokenA, tokenB, poolForPosition, lowerRangeTypedValue) : undefined,
-      [Bound.UPPER]: poolForPosition ? tryParseTick(tokenA, tokenB, poolForPosition, upperRangeTypedValue) : undefined,
+      [Bound.LOWER]: tryParseTick(tokenA, tokenB, feeAmount, lowerRangeTypedValue),
+      [Bound.UPPER]: tryParseTick(tokenA, tokenB, feeAmount, upperRangeTypedValue),
     }
-  }, [lowerRangeTypedValue, poolForPosition, tokenA, tokenB, upperRangeTypedValue])
+  }, [feeAmount, lowerRangeTypedValue, tokenA, tokenB, upperRangeTypedValue])
 
   const { [Bound.LOWER]: tickLower, [Bound.UPPER]: tickUpper } = ticks || {}
   const sortedTicks = useMemo(
@@ -194,10 +194,10 @@ export function useDerivedMintInfo(
 
   const pricesAtTicks = useMemo(() => {
     return {
-      [Bound.LOWER]: poolForPosition ? getTickToPrice(tokenA, tokenB, ticks[Bound.LOWER]) : undefined,
-      [Bound.UPPER]: poolForPosition ? getTickToPrice(tokenA, tokenB, ticks[Bound.UPPER]) : undefined,
+      [Bound.LOWER]: getTickToPrice(tokenA, tokenB, ticks[Bound.LOWER]),
+      [Bound.UPPER]: getTickToPrice(tokenA, tokenB, ticks[Bound.UPPER]),
     }
-  }, [poolForPosition, ticks, tokenA, tokenB])
+  }, [tokenA, tokenB, ticks])
   const { [Bound.LOWER]: lowerPrice, [Bound.UPPER]: upperPrice } = pricesAtTicks
 
   // mark invalid range

src/state/mint/utils.ts

-import { Pool, priceToClosestTick, nearestUsableTick } from '@uniswap/v3-sdk/dist/'
+import { priceToClosestTick, nearestUsableTick, FeeAmount, TICK_SPACINGS } from '@uniswap/v3-sdk/dist/'
 import { Price, Token } from '@uniswap/sdk-core'
 import { tryParseAmount } from 'state/swap/hooks'
 
 export function tryParseTick(
-  baseToken: Token | undefined,
-  quoteToken: Token | undefined,
-  pool: Pool | undefined,
+  baseToken?: Token,
+  quoteToken?: Token,
+  feeAmount?: FeeAmount,
   value?: string
 ): number | undefined {
-  if (!value || !baseToken || !quoteToken || !pool) {
+  if (!baseToken || !quoteToken || !feeAmount || !value) {
     return undefined
   }
 
@@ -23,5 +23,5 @@ export function tryParseTick(
 
   const tick = priceToClosestTick(price)
 
-  return nearestUsableTick(tick, pool.tickSpacing)
+  return nearestUsableTick(tick, TICK_SPACINGS[feeAmount])
 }

src/utils/getTickToPrice.ts

 import { Token, Price } from '@uniswap/sdk-core'
 import { tickToPrice } from '@uniswap/v3-sdk'
 
-export function getTickToPrice(
-  baseToken: Token | undefined,
-  quoteToken: Token | undefined,
-  tick: number | undefined
-): Price | undefined {
-  if (!baseToken || !quoteToken || tick === undefined) {
+export function getTickToPrice(baseToken?: Token, quoteToken?: Token, tick?: number): Price | undefined {
+  if (!baseToken || !quoteToken || typeof tick !== 'number') {
     return undefined
   }
   return tickToPrice(baseToken, quoteToken, tick)