chore: removing FE swap quote refresh

Author: Ernesto-tha-great

ui/pages/Swap.tsx

@@ -29,9 +29,7 @@ import { ReadOnlyAccountSigner } from "@tallyho/tally-background/services/signin
 import {
   NETWORKS_SUPPORTING_SWAPS,
   OPTIMISM,
-  SECOND,
 } from "@tallyho/tally-background/constants"
-
 import {
   selectLatestQuoteRequest,
   selectSwapBuyAssets,
@@ -52,12 +50,10 @@ import {
   getSellAssetAmounts,
   getOwnedSellAssetAmounts,
 } from "../utils/swap"
-import { useOnMount, usePrevious, useInterval } from "../hooks/react-hooks"
+import { useOnMount, usePrevious } from "../hooks/react-hooks"
 import SharedLoadingDoggo from "../components/Shared/SharedLoadingDoggo"
 import SharedBackButton from "../components/Shared/SharedBackButton"
 
-const REFRESH_QUOTE_INTERVAL = 10 * SECOND
-
 export default function Swap(): ReactElement {
   const { t } = useTranslation()
   const dispatch = useBackgroundDispatch()
@@ -103,7 +99,6 @@ export default function Swap(): ReactElement {
     assets: { sellAsset: savedSellAsset, buyAsset: savedBuyAsset },
     amount: savedSwapAmount,
   } = (!locationAsset && savedQuoteRequest) || {
-    // ^ If coming from an asset item swap button, let the UI start fresh
     assets: { sellAsset: locationAsset },
   }
 
@@ -214,8 +209,6 @@ export default function Swap(): ReactElement {
       setSellAsset(newSellAsset)
       setSellAmount("")
 
-      // Updating the source asset quotes the new source asset against the existing
-      // target amount.
       if (newSellAsset && buyAsset && buyAmount) {
         requestQuoteUpdate({
           type: "getSellAmount",
@@ -234,8 +227,6 @@ export default function Swap(): ReactElement {
       setBuyAsset(newBuyAsset)
       setBuyAmount("")
 
-      // Updating the target asset quotes the new target asset against the existing
-      // source amount.
       if (sellAsset && newBuyAsset && sellAmount) {
         requestQuoteUpdate({
           type: "getBuyAmount",
@@ -280,8 +271,6 @@ export default function Swap(): ReactElement {
     isSameAsset(quote.sellAsset, sellAsset) &&
     isSameAsset(quote.buyAsset, buyAsset)
 
-  // Update if quote changes
-
   const prevQuoteTimestamp = usePrevious(quote?.timestamp)
 
   if (
@@ -300,40 +289,7 @@ export default function Swap(): ReactElement {
     }
   }
 
-  const [amountInputHasFocus, setAmountInputHasFocus] = useState(false)
-
-  useInterval(() => {
-    if (!isEnabled(FeatureFlags.SUPPORT_SWAP_QUOTE_REFRESH)) return
-
-    const isRecentQuote =
-      quote &&
-      // Time passed since last quote
-      Date.now() - quote.timestamp <= 3 * SECOND
-
-    const skipRefresh =
-      loadingQuote || (isRecentQuote && quoteAppliesToCurrentAssets)
-
-    if (
-      !skipRefresh &&
-      !amountInputHasFocus &&
-      sellAsset &&
-      buyAsset &&
-      (sellAmount || buyAmount)
-    ) {
-      const type = sellAmount ? "getBuyAmount" : "getSellAmount"
-      const amount = sellAmount || buyAmount
-
-      requestQuoteUpdate({
-        type,
-        amount,
-        sellAsset,
-        buyAsset,
-      })
-    }
-  }, REFRESH_QUOTE_INTERVAL)
-
   useOnMount(() => {
-    // Request a quote on mount
     if (sellAsset && buyAsset && sellAmount) {
       requestQuoteUpdate({
         type: "getBuyAmount",
@@ -357,8 +313,6 @@ export default function Swap(): ReactElement {
             sellAsset,
             buyAsset,
             gasPrice:
-              // Let's use the gas price from 0x API for Optimism
-              // to avoid problems with gas price on Optimism Bedrock.
               currentNetwork.chainID === OPTIMISM.chainID
                 ? gasPrice
                 : quote.swapTransactionSettings.networkSettings.values.maxFeePerGas.toString() ??
@@ -393,7 +347,6 @@ export default function Swap(): ReactElement {
           <ReadOnlyNotice isLite />
           {isEnabled(FeatureFlags.SHOW_TOKEN_FEATURES) &&
             isEnabled(FeatureFlags.SHOW_SWAP_REWARDS) && (
-              // TODO: Add onClick function after design is ready
               <SharedIcon
                 icon="[email protected]"
                 width={20}
@@ -429,13 +382,10 @@ export default function Swap(): ReactElement {
               selectedAsset={sellAsset}
               isDisabled={loadingSellAmount}
               onAssetSelect={updateSellAsset}
-              onFocus={() => setAmountInputHasFocus(true)}
-              onBlur={() => setAmountInputHasFocus(false)}
               onErrorMessageChange={(error) => setHasError(!!error)}
               mainCurrencySign={mainCurrencySign}
               onAmountChange={(newAmount, error) => {
                 setSellAmount(newAmount)
-
                 if (!error) {
                   requestQuoteUpdate({
                     type: "getBuyAmount",
@@ -466,12 +416,9 @@ export default function Swap(): ReactElement {
               priceImpact={quote?.priceDetails?.priceImpact}
               isPriceDetailsLoading={isLoadingPriceDetails}
               showPriceDetails
-              // FIXME: Merge master asset list with account balances.
               assetsAndAmounts={buyAssets.map((asset) => ({ asset }))}
               selectedAsset={buyAsset}
               isDisabled={loadingBuyAmount}
-              onFocus={() => setAmountInputHasFocus(true)}
-              onBlur={() => setAmountInputHasFocus(false)}
               showMaxButton={false}
               mainCurrencySign={mainCurrencySign}
               onAssetSelect={updateBuyAsset}
@@ -568,12 +515,10 @@ export default function Swap(): ReactElement {
             font-weight: 500;
             line-height: 32px;
           }
-
           .loading_wrapper {
             min-height: 73.5px;
             margin: 7px 0 10px;
           }
-
           .footer {
             display: flex;
             justify-content: center;

ui/utils/swap.ts

@@ -15,13 +15,12 @@ import {
   SwapQuoteRequest,
 } from "@tallyho/tally-background/redux-slices/utils/0x-swap-utils"
 import { debounce, DebouncedFunc } from "lodash"
-import { useState, useRef, useCallback, useEffect } from "react"
+import { useState, useRef, useCallback } from "react"
 import { CompleteAssetAmount } from "@tallyho/tally-background/redux-slices/accounts"
 import {
   isSameAsset,
   isTrustedAsset,
 } from "@tallyho/tally-background/redux-slices/utils/asset-utils"
-import { isEnabled, FeatureFlags } from "@tallyho/tally-background/features"
 import { useBackgroundDispatch, useBackgroundSelector } from "../hooks"
 import { useValueRef, useIsMounted, useSetState } from "../hooks/react-hooks"
 
@@ -57,8 +56,10 @@ export async function withRetry<T>(
       return await fn()
     } catch (error) {
       if (attempt < options.maxRetries) {
-        const backoffTime = options.retryInterval * Math.pow(2, attempt - 1)
-        await new Promise((resolve) => setTimeout(resolve, backoffTime))
+        const backoffTime = options.retryInterval * 2 ** (attempt - 1)
+        await new Promise<void>((resolve) => {
+          setTimeout(resolve, backoffTime)
+        })
         return attemptFn(attempt + 1)
       }
       throw error
@@ -183,11 +184,6 @@ export function useSwapQuote(useSwapConfig: {
     useSwapConfig.initialSwapSettings,
   )
 
-  const retryOptions = useSwapConfig.retryOptions || {
-    maxRetries: 3,
-    retryInterval: 1000,
-  }
-
   const [quoteRequestState, setQuoteRequestState] = useSetState<{
     quote: QuoteUpdate | null
     loading: boolean
@@ -209,38 +205,15 @@ export function useSwapQuote(useSwapConfig: {
 
   const requestId = useRef(0)
 
-  useEffect(() => {
-    if (!isEnabled(FeatureFlags.SUPPORT_SWAP_QUOTE_REFRESH)) return
-
-    let refreshInterval: NodeJS.Timeout | undefined
-
-    if (quoteRequestState.quote && !quoteRequestState.loading) {
-      refreshInterval = setInterval(() => {
-        const currentQuote = quoteRequestState.quote
-
-        if (currentQuote) {
-          requestQuoteUpdate({
-            type: currentQuote.type,
-            amount: currentQuote.amount,
-            sellAsset: currentQuote.sellAsset,
-            buyAsset: currentQuote.buyAsset,
-            transactionSettings: currentQuote.swapTransactionSettings,
-          })
-        }
-      }, 30000)
-    }
-
-    return () => {
-      if (refreshInterval) {
-        clearInterval(refreshInterval)
-      }
-    }
-  }, [quoteRequestState.quote, quoteRequestState.loading])
-
   const requestQuoteUpdate = useCallback(
     async (config: RequestQuoteUpdateConfig) => {
       if (!mountedRef.current) return
 
+      const retryOptions = useSwapConfig.retryOptions || {
+        maxRetries: 3,
+        retryInterval: 1000,
+      }
+
       const { type, amount, sellAsset, buyAsset } = config
 
       const requestContext = requestContextRef.current
@@ -306,26 +279,20 @@ export function useSwapQuote(useSwapConfig: {
       }
     },
     [
-      dispatch,
-      requestContextRef,
       mountedRef,
+      useSwapConfig.retryOptions,
+      requestContextRef,
       setQuoteRequestState,
-      retryOptions,
+      dispatch,
     ],
   )
 
-  const [debouncedRequest] = useState(() => {
-    const debouncedFn = debounce(
-      requestQuoteUpdate,
-      UPDATE_SWAP_QUOTE_DEBOUNCE_TIME,
-      {
-        leading: false,
-        trailing: true,
-      },
-    )
-
-    return debouncedFn
-  })
+  const [debouncedRequest] = useState(() =>
+    debounce(requestQuoteUpdate, UPDATE_SWAP_QUOTE_DEBOUNCE_TIME, {
+      leading: false,
+      trailing: true,
+    }),
+  )
 
   const loadingSellAmount = quoteRequestState.loadingType === "getSellAmount"
   const loadingBuyAmount = quoteRequestState.loadingType === "getBuyAmount"