allow move pair

src/components/SwapForm/GasPriceNote.tsx

@@ -1,13 +1,12 @@
 import { ChainId } from '@kyberswap/ks-sdk-core'
 import { Trans, t } from '@lingui/macro'
 import { FC } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
 
 import WarningNote from 'components/WarningNote'
-import { APP_PATHS } from 'constants/index'
 import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
+import { useSwitchPairToLimitOrder } from 'state/swap/hooks'
 
 type Props = {
   gasUsd?: string
@@ -16,9 +15,9 @@ type Props = {
 const GAS_USD_THRESHOLD = 20
 const GasPriceNote: FC<Props> = ({ gasUsd = 0 }) => {
   const theme = useTheme()
-  const navigate = useNavigate()
 
-  const { networkInfo, chainId } = useActiveWeb3React()
+  const { chainId } = useActiveWeb3React()
+  const switchToLimitOrder = useSwitchPairToLimitOrder()
   if (+gasUsd < GAS_USD_THRESHOLD || chainId !== ChainId.MAINNET) return null
 
   return (
@@ -28,12 +27,7 @@ const GasPriceNote: FC<Props> = ({ gasUsd = 0 }) => {
         <Text>
           <Trans>
             Do you want to make a{' '}
-            <Text
-              as="b"
-              sx={{ cursor: 'pointer' }}
-              color={theme.primary}
-              onClick={() => navigate(`${APP_PATHS.LIMIT}/${networkInfo.route}`)}
-            >
+            <Text as="b" sx={{ cursor: 'pointer' }} color={theme.primary} onClick={switchToLimitOrder}>
               Limit Order
             </Text>{' '}
             instead?

src/components/SwapForm/PriceImpactNote.tsx

@@ -1,15 +1,13 @@
 import { Trans } from '@lingui/macro'
 import { FC } from 'react'
-import { useNavigate } from 'react-router-dom'
 import { Text } from 'rebass'
 import styled from 'styled-components'
 
 import Column from 'components/Column'
 import Row from 'components/Row'
 import WarningNote from 'components/WarningNote'
-import { APP_PATHS } from 'constants/index'
-import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
+import { useSwitchPairToLimitOrder } from 'state/swap/hooks'
 import { checkPriceImpact } from 'utils/prices'
 
 const TextUnderlineColor = styled(Text)`
@@ -39,8 +37,7 @@ type Props = {
 const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLink = false }) => {
   const priceImpactResult = checkPriceImpact(priceImpact)
   const theme = useTheme()
-  const navigate = useNavigate()
-  const { networkInfo } = useActiveWeb3React()
+  const switchToLimitOrder = useSwitchPairToLimitOrder()
 
   if (typeof priceImpact !== 'number') {
     return null
@@ -84,12 +81,7 @@ const PriceImpactNote: FC<Props> = ({ isDegenMode, priceImpact, showLimitOrderLi
     <Text>
       <Trans>
         Do you want to make a{' '}
-        <Text
-          as="b"
-          sx={{ cursor: 'pointer' }}
-          color={theme.primary}
-          onClick={() => navigate(`${APP_PATHS.LIMIT}/${networkInfo.route}`)}
-        >
+        <Text as="b" sx={{ cursor: 'pointer' }} color={theme.primary} onClick={switchToLimitOrder}>
           Limit Order
         </Text>{' '}
         instead?

src/state/swap/hooks.ts

@@ -6,7 +6,7 @@ import JSBI from 'jsbi'
 import { ParsedUrlQuery } from 'querystring'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useLocation } from 'react-router-dom'
+import { useLocation, useNavigate } from 'react-router-dom'
 
 import { APP_PATHS, BAD_RECIPIENT_ADDRESSES } from 'constants/index'
 import { DEFAULT_OUTPUT_TOKEN_BY_CHAIN, NativeCurrencies } from 'constants/tokens'
@@ -443,3 +443,18 @@ export const useCheckStablePairSwap = () => {
 
   return isStablePairSwap
 }
+
+export const useSwitchPairToLimitOrder = () => {
+  const navigate = useNavigate()
+  const inputCurrencyId = useSelector((state: AppState) => state.swap[Field.INPUT].currencyId)
+  const outputCurrencyId = useSelector((state: AppState) => state.swap[Field.OUTPUT].currencyId)
+  const { networkInfo } = useActiveWeb3React()
+
+  return useCallback(
+    () =>
+      navigate(
+        `${APP_PATHS.LIMIT}/${networkInfo.route}?inputCurrency=${inputCurrencyId}&outputCurrency=${outputCurrencyId}`,
+      ),
+    [networkInfo, inputCurrencyId, outputCurrencyId, navigate],
+  )
+}