chore: upgrade to redux-toolkit 1.8 (#3464)

src/hooks/useBestTrade.ts

@@ -36,21 +36,8 @@ export function useBestTrade(
     debouncedOtherCurrency
   )
 
-  const isLoading = amountSpecified !== undefined && debouncedAmount === undefined
-
-  // consider trade debouncing when inputs/outputs do not match
-  const debouncing =
-    routingAPITrade.trade &&
-    amountSpecified &&
-    (tradeType === TradeType.EXACT_INPUT
-      ? !routingAPITrade.trade.inputAmount.equalTo(amountSpecified) ||
-        !amountSpecified.currency.equals(routingAPITrade.trade.inputAmount.currency) ||
-        !debouncedOtherCurrency?.equals(routingAPITrade.trade.outputAmount.currency)
-      : !routingAPITrade.trade.outputAmount.equalTo(amountSpecified) ||
-        !amountSpecified.currency.equals(routingAPITrade.trade.outputAmount.currency) ||
-        !debouncedOtherCurrency?.equals(routingAPITrade.trade.inputAmount.currency))
-
-  const useFallback = !autoRouterSupported || (!debouncing && routingAPITrade.state === TradeState.NO_ROUTE_FOUND)
+  const isLoading = routingAPITrade.state === TradeState.LOADING
+  const useFallback = !autoRouterSupported || routingAPITrade.state === TradeState.NO_ROUTE_FOUND
 
   // only use client side router if routing api trade failed or is not supported
   const bestV3Trade = useClientSideV3Trade(
@@ -63,9 +50,8 @@ export function useBestTrade(
   return useMemo(
     () => ({
       ...(useFallback ? bestV3Trade : routingAPITrade),
-      ...(debouncing ? { state: TradeState.SYNCING } : {}),
       ...(isLoading ? { state: TradeState.LOADING } : {}),
     }),
-    [bestV3Trade, debouncing, isLoading, routingAPITrade, useFallback]
+    [bestV3Trade, isLoading, routingAPITrade, useFallback]
   )
 }

src/pages/Swap/index.tsx

@@ -148,8 +148,8 @@ export default function Swap({ history }: RouteComponentProps) {
     [trade, tradeState]
   )
 
-  const fiatValueInput = useUSDCValue(parsedAmounts[Field.INPUT])
-  const fiatValueOutput = useUSDCValue(parsedAmounts[Field.OUTPUT])
+  const fiatValueInput = useUSDCValue(trade?.inputAmount)
+  const fiatValueOutput = useUSDCValue(trade?.outputAmount)
   const priceImpact = useMemo(
     () => (routeIsSyncing ? undefined : computeFiatValuePriceImpact(fiatValueInput, fiatValueOutput)),
     [fiatValueInput, fiatValueOutput, routeIsSyncing]

src/state/routing/useRoutingAPITrade.ts

@@ -56,7 +56,7 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
     useClientSideRouter: clientSideRouter,
   })
 
-  const { isLoading, isError, data } = useGetQuoteQuery(queryArgs ?? skipToken, {
+  const { isLoading, isError, data, currentData } = useGetQuoteQuery(queryArgs ?? skipToken, {
     pollingInterval: ms`15s`,
     refetchOnFocus: true,
   })
@@ -71,6 +71,8 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
   // get USD gas cost of trade in active chains stablecoin amount
   const gasUseEstimateUSD = useStablecoinAmountFromFiatValue(quoteResult?.gasUseEstimateUSD) ?? null
 
+  const isSyncing = currentData !== data
+
   return useMemo(() => {
     if (!currencyIn || !currencyOut) {
       return {
@@ -107,14 +109,24 @@ export function useRoutingAPITrade<TTradeType extends TradeType>(
       const trade = transformRoutesToTrade(route, tradeType, gasUseEstimateUSD)
       return {
         // always return VALID regardless of isFetching status
-        state: TradeState.VALID,
+        state: isSyncing ? TradeState.SYNCING : TradeState.VALID,
         trade,
       }
     } catch (e) {
-      console.debug('transformRoutesToTrade failed: ', e)
       return { state: TradeState.INVALID, trade: undefined }
     }
-  }, [currencyIn, currencyOut, isLoading, quoteResult, tradeType, isError, route, queryArgs, gasUseEstimateUSD])
+  }, [
+    currencyIn,
+    currencyOut,
+    quoteResult,
+    isLoading,
+    tradeType,
+    isError,
+    route,
+    queryArgs,
+    gasUseEstimateUSD,
+    isSyncing,
+  ])
 }
 
 // only want to enable this when app hook called

src/state/routing/utils.ts

@@ -26,7 +26,6 @@ export function computeRoutes(
   if (parsedTokenOut.address !== currencyOut.wrapped.address) return undefined
 
   const parsedCurrencyIn = currencyIn.isNative ? nativeOnChain(currencyIn.chainId) : parsedTokenIn
-
   const parsedCurrencyOut = currencyOut.isNative ? nativeOnChain(currencyOut.chainId) : parsedTokenOut
 
   try {

src/utils/computeFiatValuePriceImpact.tsx

-import { CurrencyAmount, Percent, Token } from '@uniswap/sdk-core'
+import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 import JSBI from 'jsbi'
 
 import { ONE_HUNDRED_PERCENT } from '../constants/misc'
 
 export function computeFiatValuePriceImpact(
-  fiatValueInput: CurrencyAmount<Token> | undefined | null,
-  fiatValueOutput: CurrencyAmount<Token> | undefined | null
+  fiatValueInput: CurrencyAmount<Currency> | undefined | null,
+  fiatValueOutput: CurrencyAmount<Currency> | undefined | null
 ): Percent | undefined {
   if (!fiatValueOutput || !fiatValueInput) return undefined
   if (!fiatValueInput.currency.equals(fiatValueOutput.currency)) return undefined

yarn.lock

@@ -3337,9 +3337,9 @@
     "@react-hook/throttle" "^2.2.0"
 
 "@reduxjs/toolkit@^1.6.1":
-  version "1.7.2"
-  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.7.2.tgz#b428aaef92582379464f9de698dbb71957eafb02"
-  integrity sha512-wwr3//Ar8ZhM9bS58O+HCIaMlR4Y6SNHfuszz9hKnQuFIKvwaL3Kmjo6fpDKUOjo4Lv54Yi299ed8rofCJ/Vjw==
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@reduxjs/toolkit/-/toolkit-1.8.0.tgz#8ae875e481ed97e4a691aafa034f876bfd0413c4"
+  integrity sha512-cdfHWfcvLyhBUDicoFwG1u32JqvwKDxLxDd7zSmSoFw/RhYLOygIRtmaMjPRUUHmVmmAGAvquLLsKKU/677kSQ==
   dependencies:
     immer "^9.0.7"
     redux "^4.1.2"