feat: take tick range from URL (#3208)

* Take tick range from URL

* Keep minPrice/maxPrice in the URL

src/pages/AddLiquidity/index.tsx

@@ -5,6 +5,7 @@ import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import { FeeAmount, NonfungiblePositionManager } from '@uniswap/v3-sdk'
 import UnsupportedCurrencyFooter from 'components/swap/UnsupportedCurrencyFooter'
 import useActiveWeb3React from 'hooks/useActiveWeb3React'
+import useParsedQueryString from 'hooks/useParsedQueryString'
 import { useCallback, useContext, useEffect, useState } from 'react'
 import { AlertTriangle } from 'react-feather'
 import ReactGA from 'react-ga4'
@@ -86,6 +87,7 @@ export default function AddLiquidity({
   const expertMode = useIsExpertMode()
   const addTransaction = useTransactionAdder()
   const positionManager = useV3NFTPositionManagerContract()
+  const parsedQs = useParsedQueryString()
 
   // check for existing position if tokenId in url
   const { position: existingPositionDetails, loading: positionLoading } = useV3PositionFromTokenId(
@@ -107,7 +109,8 @@ export default function AddLiquidity({
     baseCurrency && currencyB && baseCurrency.wrapped.equals(currencyB.wrapped) ? undefined : currencyB
 
   // mint state
-  const { independentField, typedValue, startPriceTypedValue } = useV3MintState()
+  const { independentField, typedValue, startPriceTypedValue, rightRangeTypedValue, leftRangeTypedValue } =
+    useV3MintState()
 
   const {
     pool,
@@ -150,6 +153,24 @@ export default function AddLiquidity({
 
   useEffect(() => setShowCapitalEfficiencyWarning(false), [baseCurrency, quoteCurrency, feeAmount])
 
+  useEffect(() => {
+    if (
+      typeof parsedQs.minPrice === 'string' &&
+      parsedQs.minPrice !== leftRangeTypedValue &&
+      !isNaN(parsedQs.minPrice as any)
+    ) {
+      onLeftRangeInput(parsedQs.minPrice)
+    }
+
+    if (
+      typeof parsedQs.maxPrice === 'string' &&
+      parsedQs.maxPrice !== rightRangeTypedValue &&
+      !isNaN(parsedQs.maxPrice as any)
+    ) {
+      onRightRangeInput(parsedQs.maxPrice)
+    }
+  }, [parsedQs, rightRangeTypedValue, leftRangeTypedValue, onRightRangeInput, onLeftRangeInput])
+
   // txn values
   const deadline = useTransactionDeadline() // custom from users settings
 

src/state/mint/v3/hooks.tsx

@@ -16,8 +16,10 @@ import { usePool } from 'hooks/usePools'
 import JSBI from 'jsbi'
 import tryParseCurrencyAmount from 'lib/utils/tryParseCurrencyAmount'
 import { ReactNode, useCallback, useMemo } from 'react'
+import { useHistory } from 'react-router-dom'
 import { useAppDispatch, useAppSelector } from 'state/hooks'
 import { getTickToPrice } from 'utils/getTickToPrice'
+import { replaceURLParam } from 'utils/routes'
 
 import { BIG_INT_ZERO } from '../../../constants/misc'
 import { PoolState } from '../../../hooks/usePools'
@@ -46,6 +48,7 @@ export function useV3MintActionHandlers(noLiquidity: boolean | undefined): {
   onStartPriceInput: (typedValue: string) => void
 } {
   const dispatch = useAppDispatch()
+  const history = useHistory()
 
   const onFieldAInput = useCallback(
     (typedValue: string) => {
@@ -64,15 +67,17 @@ export function useV3MintActionHandlers(noLiquidity: boolean | undefined): {
   const onLeftRangeInput = useCallback(
     (typedValue: string) => {
       dispatch(typeLeftRangeInput({ typedValue }))
+      history.replace({ search: replaceURLParam(history.location.search, 'minPrice', typedValue) })
     },
-    [dispatch]
+    [dispatch, history]
   )
 
   const onRightRangeInput = useCallback(
     (typedValue: string) => {
       dispatch(typeRightRangeInput({ typedValue }))
+      history.replace({ search: replaceURLParam(history.location.search, 'maxPrice', typedValue) })
     },
-    [dispatch]
+    [dispatch, history]
   )
 
   const onStartPriceInput = useCallback(