fix: polling lag (#3543)

src/lib/hooks/routing/useClientSideSmartOrderRouterTrade.ts

@@ -41,22 +41,20 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
   state: TradeState
   trade: InterfaceTrade<Currency, Currency, TTradeType> | undefined
 } {
+  const amount = useMemo(() => amountSpecified?.asFraction, [amountSpecified])
+  const [currencyIn, currencyOut] =
+    tradeType === TradeType.EXACT_INPUT
+      ? [amountSpecified?.currency, otherCurrency]
+      : [otherCurrency, amountSpecified?.currency]
+
   // Debounce is used to prevent excessive requests to SOR, as it is data intensive.
   // Fast user actions (ie updating the input) should be debounced, but currency changes should not.
-  const debouncedAmountSpecified = useDebounce(amountSpecified, 200)
-  const isDebouncing =
-    amountSpecified !== debouncedAmountSpecified && amountSpecified?.currency === debouncedAmountSpecified?.currency
-
-  const chainId = amountSpecified?.currency.chainId
-  const { library } = useActiveWeb3React()
-
-  const [currencyIn, currencyOut]: [Currency | undefined, Currency | undefined] = useMemo(
-    () =>
-      tradeType === TradeType.EXACT_INPUT
-        ? [amountSpecified?.currency, otherCurrency]
-        : [otherCurrency, amountSpecified?.currency],
-    [amountSpecified, otherCurrency, tradeType]
+  const [debouncedAmount, debouncedCurrencyIn, debouncedCurrencyOut] = useDebounce(
+    useMemo(() => [amount, currencyIn, currencyOut], [amount, currencyIn, currencyOut]),
+    200
   )
+  const isDebouncing =
+    amount !== debouncedAmount && currencyIn === debouncedCurrencyIn && currencyOut === debouncedCurrencyOut
 
   const queryArgs = useRoutingAPIArguments({
     tokenIn: currencyIn,
@@ -65,6 +63,8 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
     tradeType,
     useClientSideRouter: true,
   })
+  const chainId = amountSpecified?.currency.chainId
+  const { library } = useActiveWeb3React()
   const params = useMemo(() => chainId && library && { chainId, provider: library }, [chainId, library])
   const config = useMemo(() => getConfig(chainId), [chainId])
   const { type: wrapType } = useWrapCallback()
@@ -105,10 +105,10 @@ export default function useClientSideSmartOrderRouterTrade<TTradeType extends Tr
     }
 
     // Returns the last trade state while syncing/loading to avoid jank from clearing the last trade while loading.
-    if (!quoteResult && !error) {
+    if (!error) {
       if (isDebouncing) {
         return { state: TradeState.SYNCING, trade }
-      } else {
+      } else if (!quoteResult) {
         return { state: TradeState.LOADING, trade }
       }
     }

src/lib/hooks/swap/useSwapInfo.tsx

@@ -62,8 +62,14 @@ function useComputeSwapInfo(): SwapInfo {
     useMemo(() => [currencyIn, currencyOut], [currencyIn, currencyOut])
   )
 
+  // Compute slippage and impact off of the trade so that it refreshes with the trade.
+  // (Using amountIn/amountOut would show (incorrect) intermediate values.)
   const slippage = useSlippage(trade.trade)
-  const { inputUSDC: usdcIn, outputUSDC: usdcOut, priceImpact: impact } = useUSDCPriceImpact(amountIn, amountOut)
+  const {
+    inputUSDC: usdcIn,
+    outputUSDC: usdcOut,
+    priceImpact: impact,
+  } = useUSDCPriceImpact(trade.trade?.inputAmount, trade.trade?.outputAmount)
 
   return useMemo(
     () => ({

src/lib/hooks/usePoll.ts

@@ -11,7 +11,7 @@ export default function usePoll<T>(
   keepUnusedDataFor = DEFAULT_KEEP_UNUSED_DATA_FOR
 ): T | undefined {
   const cache = useMemo(() => new Map<string, { ttl: number; result?: T }>(), [])
-  const [data, setData] = useState<{ key: string; result?: T }>({ key })
+  const [, setData] = useState<{ key: string; result?: T }>({ key })
 
   useEffect(() => {
     let timeout: number
@@ -55,5 +55,7 @@ export default function usePoll<T>(
     })
   }, [cache, keepUnusedDataFor, key])
 
-  return data.result
+  // Use data.result to force a re-render, but actually retrieve the data from the cache.
+  // This gives the _first_ render access to a new result, avoiding lag introduced by React.
+  return cache.get(key)?.result
 }