perf: stop polling fees in hidden tabs, refetch stale fees on return (#12787)

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>

Author: kaladinlight

src/components/Modals/Send/hooks/useSendDetails/useSendDetails.tsx

@@ -254,8 +254,8 @@ export const useSendDetails = (): UseSendDetailsReturnType => {
     // If the user get back and forth between the address and the amount form, we want to refetch the fees so it revalidate the form
     refetchOnMount: 'always',
     gcTime: 0,
-    refetchIntervalInBackground: true,
     refetchInterval: 15_000,
+    refetchOnWindowFocus: true,
   })
 
   const {
@@ -270,7 +270,6 @@ export const useSendDetails = (): UseSendDetailsReturnType => {
     staleTime: 15 * 1000,
     enabled: false,
     retry: false,
-    refetchIntervalInBackground: true,
     refetchInterval: 15_000,
   })
 

src/components/MultiHopTrade/components/TradeConfirm/hooks/useTradeNetworkFeeCryptoBaseUnit.tsx

@@ -70,7 +70,9 @@ export const useTradeNetworkFeeCryptoBaseUnit = ({
 
   const quoteNetworkFeesCryptoBaseUnitQuery = useQuery({
     queryKey: ['quoteNetworkFeesCryptoBaseUnit', tradeQuote],
+    staleTime: 15_000,
     refetchInterval: 15_000,
+    refetchOnWindowFocus: true,
     queryFn:
       enabled &&
       wallet &&

src/hooks/mutations/useApprove.ts

@@ -69,7 +69,9 @@ export const useApprovalFees = ({
   const tronFeesResult = useQuery({
     ...reactQueries.common.tronFees({ chainId, to, from, value: '0', data: approveContractData }),
     enabled: Boolean(enabled && chainId === tronChainId && approveContractData && to && from),
+    staleTime: 15_000,
     refetchInterval: isRefetchEnabled ? 15_000 : false,
+    refetchOnWindowFocus: true,
   })
 
   const evmFeesResult = useEvmFees({
@@ -79,7 +81,7 @@ export const useApprovalFees = ({
     chainId,
     data: approveContractData,
     enabled: Boolean(enabled && chainId && isEvmChainId(chainId)),
-    refetchIntervalInBackground: isRefetchEnabled ? true : false,
+    staleTime: 15_000,
     refetchInterval: isRefetchEnabled ? 15_000 : false,
   })
 

src/hooks/queries/useApprovalFees.ts

@@ -25,7 +25,6 @@ type UseEvmFeesProps = {
   data: string | undefined
   enabled?: boolean
   refetchInterval: number | false | undefined
-  refetchIntervalInBackground?: boolean
   staleTime?: number
   to: string | undefined
   value: string
@@ -42,7 +41,6 @@ export const useEvmFees = ({
   chainId,
   data,
   refetchInterval,
-  refetchIntervalInBackground,
   to,
   value,
   enabled = true,
@@ -75,7 +73,7 @@ export const useEvmFees = ({
         : undefined,
     staleTime,
     refetchInterval,
-    refetchIntervalInBackground,
+    refetchOnWindowFocus: true,
   })
 
   return query

src/hooks/queries/useEvmFees.ts

@@ -64,7 +64,7 @@ export const useGetEstimatedFeesQuery = ({
 
   const getEstimatedFeesQuery = useQuery({
     queryKey: estimatedFeesQueryKey,
-    staleTime: 30_000,
+    staleTime: 15_000,
     queryFn,
     enabled:
       enabled &&
@@ -74,9 +74,8 @@ export const useGetEstimatedFeesQuery = ({
           estimateFeesInput.accountId &&
           estimateFeesInput.amountCryptoPrecision,
       ),
-    // Ensures fees are refetched at an interval, including when the app is in the background
-    refetchIntervalInBackground: true,
     refetchInterval: estimateFeesInput.disableRefetch ? false : 15_000,
+    refetchOnWindowFocus: true,
   })
 
   return getEstimatedFeesQuery

src/hooks/queries/useGetEstimatedFeesQuery.ts

@@ -68,6 +68,7 @@ export const useArbitrumClaimTx = (
     from: claimAccountId ? fromAccountId(claimAccountId).account : undefined,
     chainId: claim?.destinationChainId,
     data: executeTransactionDataResult.data,
+    staleTime: 15_000,
     refetchInterval: 15_000,
     to: getAddress(arbitrumNetwork.ethBridge.outbox),
     value: '0',

src/hooks/useArbitrumClaims/useArbitrumClaimTx.tsx

@@ -258,9 +258,7 @@ export const ClaimConfirm: FC<
   } = useEvmFees({
     ...claimFeesQueryInput,
     enabled: isGetClaimFeesEnabled,
-    staleTime: 30_000,
-    // Ensures fees are refetched at an interval, including when the app is in the background
-    refetchIntervalInBackground: true,
+    staleTime: 15_000,
     // Yeah this is arbitrary but come on, Arb is cheap
     refetchInterval: isGetClaimFeesEnabled ? 15_000 : false,
   })

src/pages/RFOX/components/Claim/ClaimConfirm.tsx

@@ -211,9 +211,7 @@ export const useRfoxStake = ({
   const approvalFeesQuery = useEvmFees({
     ...approvalFeesQueryInput,
     enabled: isGetApprovalFeesEnabled,
-    staleTime: 30_000,
-    // Ensures fees are refetched at an interval, including when the app is in the background
-    refetchIntervalInBackground: true,
+    staleTime: 15_000,
     // Yeah this is arbitrary but come on, Arb is cheap
     refetchInterval: 15_000,
   })
@@ -339,9 +337,7 @@ export const useRfoxStake = ({
   const stakeFeesQuery = useEvmFees({
     ...stakeFeesQueryInput,
     enabled: isGetStakeFeesEnabled,
-    staleTime: 30_000,
-    // Ensures fees are refetched at an interval, including when the app is in the background
-    refetchIntervalInBackground: true,
+    staleTime: 15_000,
     // Yeah this is arbitrary but come on, Arb is cheap
     refetchInterval: 15_000,
   })

src/pages/RFOX/components/Stake/hooks/useRfoxStake.tsx

@@ -255,9 +255,7 @@ export const useRfoxUnstake = ({
   const unstakeFeesQuery = useEvmFees({
     ...unstakeFeesQueryInput,
     enabled: isGetUnstakeFeesEnabled,
-    staleTime: 30_000,
-    // Ensures fees are refetched at an interval, including when the app is in the background
-    refetchIntervalInBackground: true,
+    staleTime: 15_000,
     // Yeah this is arbitrary but come on, Arb is cheap
     refetchInterval: 15_000,
   })