From 739aa8d9d8e48cd3c25e483e8702b1e7f816c511 Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Tue, 14 Jan 2025 23:32:33 +0100
Subject: [PATCH] feat: cleanup useTradeNetworkFeeCryptoBaseUnit

---
 .../useTradeNetworkFeeCryptoBaseUnit.tsx      | 25 +----------------
 .../TradeConfirm/TradeConfirmFooter.tsx       | 27 +++++++++++++++++--
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useTradeNetworkFeeCryptoBaseUnit.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useTradeNetworkFeeCryptoBaseUnit.tsx
index 8eba3341e1f..edc0f6a569e 100644
--- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useTradeNetworkFeeCryptoBaseUnit.tsx
+++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useTradeNetworkFeeCryptoBaseUnit.tsx
@@ -21,11 +21,9 @@ import {
   selectActiveQuote,
   selectActiveSwapperName,
   selectConfirmedTradeExecution,
-  selectHopExecutionMetadata,
   selectHopSellAccountId,
   selectTradeSlippagePercentageDecimal,
 } from 'state/slices/tradeQuoteSlice/selectors'
-import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppSelector } from 'state/store'
 
 export const useTradeNetworkFeeCryptoBaseUnit = ({
@@ -62,24 +60,6 @@ export const useTradeNetworkFeeCryptoBaseUnit = ({
   const hop = useMemo(() => getHopByIndex(tradeQuote, hopIndex), [tradeQuote, hopIndex])
   const swapper = useMemo(() => (swapperName ? swappers[swapperName] : undefined), [swapperName])
 
-  const activeTrade = useAppSelector(selectActiveQuote)
-  const activeTradeId = activeTrade?.id
-
-  const hopExecutionMetadataFilter = useMemo(() => {
-    if (!activeTradeId) return undefined
-
-    return {
-      tradeId: activeTradeId,
-      hopIndex,
-    }
-  }, [activeTradeId, hopIndex])
-
-  const hopExecutionMetadata = useAppSelector(state =>
-    hopExecutionMetadataFilter
-      ? selectHopExecutionMetadata(state, hopExecutionMetadataFilter)
-      : undefined,
-  )
-
   const quoteNetworkFeesCryptoBaseUnitQuery = useQuery({
     queryKey: ['quoteNetworkFeesCryptoBaseUnit', tradeQuote],
     refetchInterval: 15_000,
@@ -92,10 +72,7 @@ export const useTradeNetworkFeeCryptoBaseUnit = ({
       sellAssetAccountId &&
       swapper &&
       hop &&
-      isExecutableTradeQuote(tradeQuote) &&
-      // Stop fetching once the Tx is executed for this step
-      hopExecutionMetadata?.state === HopExecutionState.AwaitingSwap &&
-      hopExecutionMetadata?.swap?.state === TransactionExecutionState.AwaitingConfirmation
+      isExecutableTradeQuote(tradeQuote)
         ? async () => {
             const { accountType, bip44Params } = accountMetadata
             const accountNumber = bip44Params.accountNumber
diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx
index 735ce738295..ce6e0f162f4 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx
+++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx
@@ -10,7 +10,11 @@ import { bnOrZero } from 'lib/bignumber/bignumber'
 import { fromBaseUnit } from 'lib/math'
 import { selectFeeAssetById } from 'state/slices/assetsSlice/selectors'
 import { selectMarketDataByAssetIdUserCurrency } from 'state/slices/marketDataSlice/selectors'
-import { selectIsActiveSwapperQuoteLoading } from 'state/slices/tradeQuoteSlice/selectors'
+import {
+  selectHopExecutionMetadata,
+  selectIsActiveSwapperQuoteLoading,
+} from 'state/slices/tradeQuoteSlice/selectors'
+import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppSelector, useSelectorWithArgs } from 'state/store'
 
 import { isPermit2Hop } from '../MultiHopTradeConfirm/hooks/helpers'
@@ -62,6 +66,21 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
     activeTradeId,
   })
 
+  const hopExecutionMetadataFilter = useMemo(() => {
+    if (!activeTradeId) return undefined
+
+    return {
+      tradeId: activeTradeId,
+      hopIndex: currentHopIndex,
+    }
+  }, [activeTradeId, currentHopIndex])
+
+  const hopExecutionMetadata = useAppSelector(state =>
+    hopExecutionMetadataFilter
+      ? selectHopExecutionMetadata(state, hopExecutionMetadataFilter)
+      : undefined,
+  )
+
   const {
     isLoading: isNetworkFeeCryptoBaseUnitLoading,
     isRefetching: isNetworkFeeCryptoBaseUnitRefetching,
@@ -69,7 +88,11 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
   } = useTradeNetworkFeeCryptoBaseUnit({
     hopIndex: currentHopIndex,
     enabled:
-      currentTradeStep === StepperStep.FirstHopSwap || currentTradeStep === StepperStep.LastHopSwap,
+      (currentTradeStep === StepperStep.FirstHopSwap ||
+        currentTradeStep === StepperStep.LastHopSwap) &&
+      // Stop fetching once the Tx is executed for this step
+      hopExecutionMetadata?.state === HopExecutionState.AwaitingSwap &&
+      hopExecutionMetadata?.swap?.state === TransactionExecutionState.AwaitingConfirmation,
   })
 
   const networkFeeCryptoPrecision = useMemo(() => {