fix(swap): throttle quote request only in "smart" slippage mode

Author: crutch12

apps/cowswap-frontend/src/modules/tradeQuote/hooks/useTradeQuotePolling.ts

@@ -1,11 +1,13 @@
 import { useAtom, useAtomValue } from 'jotai'
 import { useEffect, useLayoutEffect, useRef } from 'react'
 
-import { useIsOnline, useIsWindowVisible, usePrevious } from '@cowprotocol/common-hooks'
+import { useIsOnline, useIsWindowVisible, usePrevious, useSyncedRef } from '@cowprotocol/common-hooks'
 import { getCurrencyAddress } from '@cowprotocol/common-utils'
 
 import ms from 'ms.macro'
 
+import { useIsSmartSlippageApplied } from 'modules/tradeSlippage/hooks/useIsSmartSlippageApplied'
+
 import { usePollQuoteCallback } from './usePollQuoteCallback'
 import { useQuoteParams } from './useQuoteParams'
 import { useTradeQuote } from './useTradeQuote'
@@ -21,7 +23,7 @@ import { checkOnlySlippageBpsChanged } from '../utils/quoteParamsChanges'
 
 const ONE_SEC = 1000
 const QUOTE_VALIDATION_INTERVAL = ms`2s`
-const QUOTE_SLIPPAGE_CHANGE_INTERVAL = ms`1.5s`
+const QUOTE_SLIPPAGE_CHANGE_THROTTLE_INTERVAL = ms`1.5s`
 
 // eslint-disable-next-line max-lines-per-function
 export function useTradeQuotePolling(quotePollingParams: TradeQuotePollingParameters): null {
@@ -58,6 +60,8 @@ export function useTradeQuotePolling(quotePollingParams: TradeQuotePollingParame
     prevQuoteParamsRef.current = quoteParams
   }, [quoteParams])
 
+  const isSmartSlippageApplied = useSyncedRef(useIsSmartSlippageApplied())
+
   /**
    * Reset quote when window is not visible or sell amount has been cleared
    */
@@ -83,27 +87,29 @@ export function useTradeQuotePolling(quotePollingParams: TradeQuotePollingParame
      */
     if (isConfirmOpen) return
 
-    const onlySlippageBpsChanged = checkOnlySlippageBpsChanged(
-      quoteParams,
-      prevQuoteParamsRef.current,
-      tradeQuoteRef.current,
-    )
-
-    if (onlySlippageBpsChanged) {
-      const quoteTimestampDiff = tradeQuoteRef.current.localQuoteTimestamp
-        ? Date.now() - tradeQuoteRef.current.localQuoteTimestamp
-        : undefined
-      // slippageBps updates on every fetch /quote response
-      // so we should throttle duplicated additional requests caused by following slippageBps updates to prevent re-fetch loop (#6675)
-      if (typeof quoteTimestampDiff === 'number' && quoteTimestampDiff < QUOTE_SLIPPAGE_CHANGE_INTERVAL) {
-        return
+    if (isSmartSlippageApplied.current) {
+      const onlySlippageBpsChanged = checkOnlySlippageBpsChanged(
+        quoteParams,
+        prevQuoteParamsRef.current,
+        tradeQuoteRef.current,
+      )
+
+      if (onlySlippageBpsChanged) {
+        const quoteTimestampDiff = tradeQuoteRef.current.localQuoteTimestamp
+          ? Date.now() - tradeQuoteRef.current.localQuoteTimestamp
+          : undefined
+        // in "smart" slippage mode slippageBps updates on every fetch /quote response
+        // so we should throttle duplicated additional requests caused by following slippageBps updates to prevent re-fetch loop (#6675)
+        if (typeof quoteTimestampDiff === 'number' && quoteTimestampDiff < QUOTE_SLIPPAGE_CHANGE_THROTTLE_INTERVAL) {
+          return
+        }
       }
     }
 
     if (pollQuoteRef.current(true)) {
       resetQuoteCounter()
     }
-  }, [isConfirmOpen, isQuoteUpdatePossible, quoteParams, resetQuoteCounter])
+  }, [isConfirmOpen, isQuoteUpdatePossible, isSmartSlippageApplied, quoteParams, resetQuoteCounter])
 
   /**
    * Update quote once a QUOTE_POLLING_INTERVAL

libs/common-hooks/src/index.ts

@@ -23,3 +23,4 @@ export * from './useComponentDestroyedRef'
 export * from './useReducedMotionPreference'
 export * from './useElementViewportTracking'
 export * from './usePreventDoubleExecution'
+export * from './useSyncedRef'

libs/common-hooks/src/useSyncedRef.ts

@@ -0,0 +1,23 @@
+import { useMemo, useRef } from 'react'
+
+/**
+ * Like `useRef`, but it returns immutable ref that contains actual value.
+ *
+ * @param value
+ * @see https://github.com/react-hookz/web/blob/master/src/useSyncedRef/index.ts
+ */
+export function useSyncedRef<T>(value: T): { readonly current: T } {
+  const ref = useRef(value)
+
+  ref.current = value
+
+  return useMemo(
+    () =>
+      Object.freeze({
+        get current() {
+          return ref.current
+        },
+      }),
+    [],
+  )
+}