Update slippage when swap stable coin

KyberNetwork · Dec 12, 2023 · a61a92b · a61a92b
1 parent 5d3701b
commit a61a92b
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/src/components/SwapForm/index.tsx b/src/components/SwapForm/index.tsx
@@ -33,6 +33,7 @@ import { useActiveWeb3React } from 'hooks'
 import useTheme from 'hooks/useTheme'
 import useWrapCallback, { WrapType } from 'hooks/useWrapCallback'
 import { PROFILE_MANAGE_ROUTES } from 'pages/NotificationCenter/const'
+import useUpdateSlippageInStableCoinSwap from 'pages/SwapV3/useUpdateSlippageInStableCoinSwap'
 import { Field } from 'state/swap/actions'
 import { useSwapActionHandlers, useSwapState } from 'state/swap/hooks'
 import { MEDIA_WIDTHS } from 'theme'
@@ -115,6 +116,7 @@ const SwapForm: React.FC<SwapFormProps> = props => {
   const [isSaveGas, setSaveGas] = useState(false)
   const theme = useTheme()
   const upToExtraSmall = useMedia(`(max-width: ${MEDIA_WIDTHS.upToExtraSmall}px)`)
+  useUpdateSlippageInStableCoinSwap()
 
   const { onUserInput: updateInputAmount } = useSwapActionHandlers()
   const onUserInput = useCallback(

diff --git a/src/pages/SwapV3/PopulatedSwapForm.tsx b/src/pages/SwapV3/PopulatedSwapForm.tsx
@@ -5,7 +5,6 @@ import { useLocation, useSearchParams } from 'react-router-dom'
 import SwapForm, { SwapFormProps } from 'components/SwapForm'
 import { APP_PATHS } from 'constants/index'
 import useSyncTokenSymbolToUrl from 'hooks/useSyncTokenSymbolToUrl'
-import useUpdateSlippageInStableCoinSwap from 'pages/SwapV3/useUpdateSlippageInStableCoinSwap'
 import { useAppSelector } from 'state/hooks'
 import { Field } from 'state/swap/actions'
 import { useInputCurrency, useOutputCurrency, useSwapActionHandlers } from 'state/swap/hooks'
@@ -43,8 +42,6 @@ const PopulatedSwapForm: React.FC<Props> = ({
 
   const { onCurrencySelection, onResetSelectCurrency } = useSwapActionHandlers()
 
-  useUpdateSlippageInStableCoinSwap()
-
   const { pathname } = useLocation()
   const [searchParams, setSearchParams] = useSearchParams()
   const isPartnerSwap = pathname.startsWith(APP_PATHS.PARTNER_SWAP)

diff --git a/src/pages/SwapV3/useUpdateSlippageInStableCoinSwap.tsx b/src/pages/SwapV3/useUpdateSlippageInStableCoinSwap.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react'
 import { useSelector } from 'react-redux'
+import { useSearchParams } from 'react-router-dom'
 import { usePrevious } from 'react-use'
 
 import { DEFAULT_SLIPPAGE, DEFAULT_SLIPPAGE_STABLE_PAIR_SWAP } from 'constants/index'
@@ -12,12 +13,18 @@ import { useUserSlippageTolerance } from 'state/user/hooks'
 const useUpdateSlippageInStableCoinSwap = () => {
   const { chainId } = useActiveWeb3React()
   const { isStableCoin } = useStableCoins(chainId)
-  const inputCurrencyId = useSelector((state: AppState) => state.swap[Field.INPUT].currencyId)
-  const previousInputCurrencyId = usePrevious(inputCurrencyId)
-  const outputCurrencyId = useSelector((state: AppState) => state.swap[Field.OUTPUT].currencyId)
-  const previousOutputCurrencyId = usePrevious(outputCurrencyId)
+
+  const [searchParams] = useSearchParams()
   const [slippage, setSlippage] = useUserSlippageTolerance()
 
+  const inputTokenFromParam = searchParams.get('inputCurrency') ?? ''
+  const outputTokenFromParam = searchParams.get('outputCurrency') ?? ''
+
+  const inputCurrencyId = useSelector((state: AppState) => state.swap[Field.INPUT].currencyId) || inputTokenFromParam
+  const outputCurrencyId = useSelector((state: AppState) => state.swap[Field.OUTPUT].currencyId) || outputTokenFromParam
+
+  const previousInputCurrencyId = usePrevious(inputCurrencyId)
+  const previousOutputCurrencyId = usePrevious(outputCurrencyId)
   const rawSlippageRef = useRef(slippage)
   rawSlippageRef.current = slippage