perf: improve tradeQuoteSlice selectors

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/ApprovalStep.tsx

@@ -124,9 +124,15 @@ const ApprovalStepPending = ({
   const [isExactAllowance, toggleIsExactAllowance] = useToggle(isLifiStep ? true : false)
 
   const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
+  const hopExecutionMetadataFilter = useMemo(() => {
+    return {
+      tradeId: activeTradeId,
+      hopIndex,
+    }
+  }, [activeTradeId, hopIndex])
 
   const { state, allowanceReset, approval } = useAppSelector(state =>
-    selectHopExecutionMetadata(state, activeTradeId, hopIndex),
+    selectHopExecutionMetadata(state, hopExecutionMetadataFilter),
   )
 
   const isAwaitingReset = useMemo(() => {
@@ -374,8 +380,14 @@ const ApprovalStepComplete = ({
   activeTradeId,
 }: ApprovalStepProps) => {
   const translate = useTranslate()
+  const hopExecutionMetadataFilter = useMemo(() => {
+    return {
+      tradeId: activeTradeId,
+      hopIndex,
+    }
+  }, [activeTradeId, hopIndex])
   const { state, allowanceReset, approval } = useAppSelector(state =>
-    selectHopExecutionMetadata(state, activeTradeId, hopIndex),
+    selectHopExecutionMetadata(state, hopExecutionMetadataFilter),
   )
 
   const stepIndicator = useMemo(() => {
@@ -453,8 +465,14 @@ export const ApprovalStep = ({
   isAllowanceResetStep,
   activeTradeId,
 }: ApprovalStepProps) => {
+  const hopExecutionMetadataFilter = useMemo(() => {
+    return {
+      tradeId: activeTradeId,
+      hopIndex,
+    }
+  }, [activeTradeId, hopIndex])
   const { state } = useAppSelector(state =>
-    selectHopExecutionMetadata(state, activeTradeId, hopIndex),
+    selectHopExecutionMetadata(state, hopExecutionMetadataFilter),
   )
 
   const isComplete = useMemo(() => {

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx

@@ -71,20 +71,32 @@ export const Hop = ({
     number: { toCrypto },
   } = useLocaleFormatter()
   const translate = useTranslate()
+  const hopTotalProtocolFeesFiatPrecisionFilter = useMemo(() => {
+    return {
+      hopIndex,
+    }
+  }, [hopIndex])
   const networkFeeFiatPrecision = useAppSelector(state =>
-    selectHopNetworkFeeUserCurrencyPrecision(state, hopIndex),
+    selectHopNetworkFeeUserCurrencyPrecision(state, hopTotalProtocolFeesFiatPrecisionFilter),
   )
   const protocolFeeFiatPrecision = useAppSelector(state =>
     selectHopTotalProtocolFeesFiatPrecision(state, hopIndex),
   )
   const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop)
 
+  const hopExecutionMetadataFilter = useMemo(() => {
+    return {
+      tradeId: activeTradeId,
+      hopIndex,
+    }
+  }, [activeTradeId, hopIndex])
+
   const {
     state: hopExecutionState,
     approval,
     swap,
     allowanceReset,
-  } = useAppSelector(state => selectHopExecutionMetadata(state, activeTradeId, hopIndex))
+  } = useAppSelector(state => selectHopExecutionMetadata(state, hopExecutionMetadataFilter))
 
   const isError = useMemo(
     () => [approval.state, swap.state].includes(TransactionExecutionState.Failed),

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/HopTransactionStep.tsx

@@ -54,9 +54,16 @@ export const HopTransactionStep = ({
 
   const checkLedgerAppOpenIfLedgerConnected = useLedgerOpenApp()
 
+  const hopExecutionMetadataFilter = useMemo(() => {
+    return {
+      tradeId: activeTradeId,
+      hopIndex,
+    }
+  }, [activeTradeId, hopIndex])
+
   const {
     swap: { state: swapTxState, sellTxHash, buyTxHash, message },
-  } = useAppSelector(state => selectHopExecutionMetadata(state, activeTradeId, hopIndex))
+  } = useAppSelector(state => selectHopExecutionMetadata(state, hopExecutionMetadataFilter))
 
   const isError = useMemo(() => swapTxState === TransactionExecutionState.Failed, [swapTxState])
 

src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useAllowanceApproval.tsx

@@ -27,7 +27,16 @@ export const useAllowanceApproval = (
   const dispatch = useAppDispatch()
   const { showErrorToast } = useErrorHandler()
   const wallet = useWallet().state.wallet ?? undefined
-  const sellAssetAccountId = useAppSelector(state => selectHopSellAccountId(state, hopIndex))
+
+  const hopSellAccountIdFilter = useMemo(() => {
+    return {
+      hopIndex,
+    }
+  }, [hopIndex])
+
+  const sellAssetAccountId = useAppSelector(state =>
+    selectHopSellAccountId(state, hopSellAccountIdFilter),
+  )
 
   const isReset = useMemo(() => allowanceType === AllowanceType.Reset, [allowanceType])
 

src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useThorStreamingProgress.tsx

@@ -68,9 +68,16 @@ export const useThorStreamingProgress = (
   const streamingSwapDataRef = useRef<ThornodeStreamingSwapResponseSuccess>()
   const { poll, cancelPolling } = usePoll<ThornodeStreamingSwapResponseSuccess | undefined>()
   const dispatch = useAppDispatch()
+  const hopExecutionMetadataFilter = useMemo(() => {
+    return {
+      tradeId: confirmedTradeId,
+      hopIndex,
+    }
+  }, [confirmedTradeId, hopIndex])
+
   const {
     swap: { sellTxHash, streamingSwap: streamingSwapMeta },
-  } = useAppSelector(state => selectHopExecutionMetadata(state, confirmedTradeId, hopIndex))
+  } = useAppSelector(state => selectHopExecutionMetadata(state, hopExecutionMetadataFilter))
 
   useEffect(() => {
     // don't start polling until we have a tx

src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useTradeExecution.tsx

@@ -47,7 +47,15 @@ export const useTradeExecution = (
   const trackMixpanelEvent = useMixpanel()
   const hasMixpanelSuccessOrFailFiredRef = useRef(false)
 
-  const sellAssetAccountId = useAppSelector(state => selectHopSellAccountId(state, hopIndex))
+  const hopSellAccountIdFilter = useMemo(() => {
+    return {
+      hopIndex,
+    }
+  }, [hopIndex])
+
+  const sellAssetAccountId = useAppSelector(state =>
+    selectHopSellAccountId(state, hopSellAccountIdFilter),
+  )
 
   const accountMetadataFilter = useMemo(
     () => ({ accountId: sellAssetAccountId }),

src/state/selectors.ts

@@ -2,6 +2,7 @@
 
 import type { QueryStatus } from '@reduxjs/toolkit/dist/query'
 import type { AccountId, AssetId, ChainId } from '@shapeshiftoss/caip'
+import type { TradeQuote } from '@shapeshiftoss/swapper'
 import type { HistoryTimeframe } from '@shapeshiftoss/types'
 import type { TxStatus } from '@shapeshiftoss/unchained-client'
 import createCachedSelector from 're-reselect'
@@ -52,6 +53,8 @@ type ParamFilter = Partial<{
   feeModel: ParameterModel
   timeframe: HistoryTimeframe
   onlyConnectedChains: boolean
+  hopIndex: number
+  tradeId: TradeQuote['id']
 }>
 
 type ParamFilterKey = keyof ParamFilter
@@ -66,6 +69,13 @@ export const selectParamFromFilter = <T extends ParamFilterKey>(param: T) =>
       `${param}-${filter?.[param] ?? param}`,
   )
 
+export const selectRequiredParamFromFilter = <T extends ParamFilterKey>(param: T) =>
+  createCachedSelector(
+    (_state: ReduxState, filter: Required<Pick<ParamFilter, T>>): NonNullable<ParamFilter[T]> =>
+      filter[param] as NonNullable<ParamFilter[T]>,
+    (paramValue: NonNullable<ParamFilter[T]>): NonNullable<ParamFilter[T]> => paramValue,
+  )((_state: ReduxState, filter: Required<Pick<ParamFilter, T>>) => `${param}-${filter[param]}`)
+
 export const selectAccountIdParamFromFilter = selectParamFromFilter('accountId')
 export const selectAccountIdsParamFromFilter = selectParamFromFilter('accountIds')
 export const selectFromParamFromFilter = selectParamFromFilter('from')
@@ -88,3 +98,6 @@ export const selectTxStatusParamFromFilter = selectParamFromFilter('txStatus')
 export const selectFeeModelParamFromFilter = selectParamFromFilter('feeModel')
 export const selectTimeframeParamFromFilter = selectParamFromFilter('timeframe')
 export const selectOnlyConnectedChainsParamFromFilter = selectParamFromFilter('onlyConnectedChains')
+
+export const selectHopIndexParamFromRequiredFilter = selectRequiredParamFromFilter('hopIndex')
+export const selectTradeIdParamFromRequiredFilter = selectRequiredParamFromFilter('tradeId')

src/state/slices/tradeQuoteSlice/selectors.ts

@@ -23,6 +23,10 @@ import { TradeQuoteRequestError, TradeQuoteWarning } from 'state/apis/swapper/ty
 import { getEnabledSwappers } from 'state/helpers'
 import type { ReduxState } from 'state/reducer'
 import { createDeepEqualOutputSelector } from 'state/selector-utils'
+import {
+  selectHopIndexParamFromRequiredFilter,
+  selectTradeIdParamFromRequiredFilter,
+} from 'state/selectors'
 import { selectFeeAssetById } from 'state/slices/assetsSlice/selectors'
 import {
   selectFirstHopSellAccountId,
@@ -484,7 +488,7 @@ export const selectSecondHopNetworkFeeUserCurrencyPrecision: Selector<
 export const selectHopNetworkFeeUserCurrencyPrecision = createDeepEqualOutputSelector(
   selectFirstHopNetworkFeeUserCurrencyPrecision,
   selectSecondHopNetworkFeeUserCurrencyPrecision,
-  (_state: ReduxState, hopIndex: number) => hopIndex,
+  selectHopIndexParamFromRequiredFilter,
   (firstHopNetworkFeeUserCurrencyPrecision, secondHopNetworkFeeUserCurrencyPrecision, hopIndex) => {
     return hopIndex === 0
       ? firstHopNetworkFeeUserCurrencyPrecision
@@ -646,16 +650,16 @@ export const selectConfirmedTradeExecutionState = createSelector(
 export const selectHopSellAccountId = createSelector(
   selectFirstHopSellAccountId,
   selectSecondHopSellAccountId,
-  (_state: ReduxState, hopIndex: number) => hopIndex,
+  selectHopIndexParamFromRequiredFilter,
   (firstHopSellAccountId, secondHopSellAccountId, hopIndex) => {
     return hopIndex === 0 ? firstHopSellAccountId : secondHopSellAccountId
   },
 )
 
 export const selectHopExecutionMetadata = createDeepEqualOutputSelector(
   selectTradeQuoteSlice,
-  (_state: ReduxState, tradeId: TradeQuote['id']) => tradeId,
-  (_state: ReduxState, _tradeId: TradeQuote['id'], hopIndex: number) => hopIndex,
+  selectTradeIdParamFromRequiredFilter,
+  selectHopIndexParamFromRequiredFilter,
   (swappers, tradeId, hopIndex) => {
     return hopIndex === 0
       ? swappers.tradeExecution[tradeId].firstHop