Save current token pair when switch network on swap page (#2408)

* Save inputCurrency and outputCurrency

Save token-to-token

Minor

Update comment

Revert save by address

* Fix ETH / 1INCH

* Minor

src/hooks/useSyncTokenSymbolToUrl.ts

@@ -1,6 +1,6 @@
 import { ChainId, Currency } from '@kyberswap/ks-sdk-core'
 import { stringify } from 'querystring'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { Params, useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import { APP_PATHS } from 'constants/index'
@@ -20,7 +20,7 @@ type TokenSymbolParams = {
   network: string
 }
 
-const getUrlMatchParams = (params: Params): TokenSymbolParams => {
+export const getUrlMatchParams = (params: Params): TokenSymbolParams => {
   const currencyParam = (params.currency || '').toLowerCase()
   const network: string = convertToSlug(params.network || '')
 
@@ -50,8 +50,9 @@ export default function useSyncTokenSymbolToUrl(
   const navigate = useNavigate()
   const qs = useParsedQueryString()
   const { pathname } = useLocation()
-  const allTokens = useAllTokens()
   const isLoadedTokenDefault = useIsLoadedTokenDefault()
+  const allTokens = useAllTokens()
+  const firstTokenChainId = useMemo(() => Object.values(allTokens)[0]?.chainId, [allTokens])
 
   const currentPath = [APP_PATHS.SWAP, APP_PATHS.LIMIT].find(path => pathname.startsWith(path)) || APP_PATHS.SWAP
 
@@ -115,26 +116,28 @@ export default function useSyncTokenSymbolToUrl(
   )
 
   const checkedTokenFromUrlWhenInit = useRef(false)
+  useEffect(() => {
+    checkedTokenFromUrlWhenInit.current = false
+  }, [chainId])
 
   useEffect(() => {
     if (
       !checkedTokenFromUrlWhenInit.current &&
       isLoadedTokenDefault &&
-      Object.values(allTokens)[0]?.chainId === chainId &&
+      chainId === firstTokenChainId &&
       network === NETWORKS_INFO[chainId].route &&
       !disabled
     ) {
       // call once
       setTimeout(() => findTokenPairFromUrl(chainId))
       checkedTokenFromUrlWhenInit.current = true
     }
-  }, [allTokens, findTokenPairFromUrl, chainId, isLoadedTokenDefault, disabled, network])
+  }, [isLoadedTokenDefault, firstTokenChainId, chainId, network, disabled, findTokenPairFromUrl])
 
   // when token change, sync symbol to url
-
   useEffect(() => {
-    if (isSelectCurrencyManual && isLoadedTokenDefault && !disabled) {
+    if (isLoadedTokenDefault && isSelectCurrencyManual && !disabled) {
       syncTokenSymbolToUrl(currencyIn, currencyOut)
     }
-  }, [currencyIn, currencyOut, isSelectCurrencyManual, syncTokenSymbolToUrl, isLoadedTokenDefault, disabled])
+  }, [isLoadedTokenDefault, isSelectCurrencyManual, disabled, currencyIn, currencyOut, syncTokenSymbolToUrl])
 }

src/state/swap/hooks.ts

@@ -4,7 +4,7 @@ import { t } from '@lingui/macro'
 import { ParsedUrlQuery } from 'querystring'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useLocation, useNavigate } from 'react-router-dom'
+import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import { APP_PATHS, BAD_RECIPIENT_ADDRESSES } from 'constants/index'
 import { DEFAULT_OUTPUT_TOKEN_BY_CHAIN, NativeCurrencies } from 'constants/tokens'
@@ -13,6 +13,7 @@ import { useCurrencyV2, useStableCoins } from 'hooks/Tokens'
 import { useTradeExactIn } from 'hooks/Trades'
 import useENS from 'hooks/useENS'
 import useParsedQueryString from 'hooks/useParsedQueryString'
+import { getUrlMatchParams } from 'hooks/useSyncTokenSymbolToUrl'
 import { AppDispatch, AppState } from 'state/index'
 import {
   Field,
@@ -340,8 +341,10 @@ export const useDefaultsFromURLSearch = ():
   | undefined => {
   // TODO: this hook is called more than 100 times just on startup, need to check
 
-  const { chainId } = useActiveWeb3React()
   const dispatch = useDispatch()
+  const params = useParams()
+  const { fromCurrency, toCurrency } = getUrlMatchParams(params)
+  const { chainId } = useActiveWeb3React()
 
   // this is already memo-ed
   const parsedQs = useParsedQueryString()
@@ -392,6 +395,7 @@ export const useDefaultsFromURLSearch = ():
       outputCurrencyId = outputCurrencyAddress
     }
 
+    if (fromCurrency || toCurrency) return
     dispatch(
       replaceSwapState({
         field: parsed.independentField,
@@ -407,7 +411,7 @@ export const useDefaultsFromURLSearch = ():
       outputCurrencyId,
     })
     // can not add `currencies` && pathname as dependency here because it will retrigger replaceSwapState => got some issue when we have in/outputCurrency on URL
-  }, [dispatch, chainId, parsedQs])
+  }, [dispatch, chainId, parsedQs, fromCurrency, toCurrency])
 
   return result
 }