fix: incorrect fox discounts reported by "you saved" UI

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

@@ -12,11 +12,11 @@ import { Text } from 'components/Text'
 import { bnOrZero } from 'lib/bignumber/bignumber'
 import { fromBaseUnit } from 'lib/math'
 import {
-  selectActiveQuote,
+  selectConfirmedQuote,
   selectConfirmedTradeExecutionState,
   selectLastHop,
 } from 'state/slices/tradeQuoteSlice/selectors'
-import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
+import { tradeQuote } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
@@ -38,25 +38,27 @@ export const MultiHopTradeConfirm = memo(() => {
   const history = useHistory()
 
   const [shouldShowWarningAcknowledgement, setShouldShowWarningAcknowledgement] = useState(false)
-  const activeQuote = useAppSelector(selectActiveQuote)
-  const { isModeratePriceImpact, priceImpactPercentage } = usePriceImpact(activeQuote)
+  const confirmedQuote = useAppSelector(selectConfirmedQuote)
+  const { isModeratePriceImpact, priceImpactPercentage } = usePriceImpact(confirmedQuote)
   const lastHop = useAppSelector(selectLastHop)
 
-  const initialActiveTradeIdRef = useRef(activeQuote?.id ?? '')
+  const initialActiveTradeIdRef = useRef(confirmedQuote?.id ?? '')
 
   const { isLoading } = useIsApprovalInitiallyNeeded()
 
   const isArbitrumBridgeWithdraw = useMemo(() => {
-    return isArbitrumBridgeTradeQuoteOrRate(activeQuote) && activeQuote.direction === 'withdrawal'
-  }, [activeQuote])
+    return (
+      isArbitrumBridgeTradeQuoteOrRate(confirmedQuote) && confirmedQuote?.direction === 'withdrawal'
+    )
+  }, [confirmedQuote])
 
   useEffect(() => {
-    if (isLoading || !activeQuote) return
+    if (isLoading || !confirmedQuote) return
     // Only set the trade to initialized if it was actually initializing previously. Now that we shove quotes in at confirm time, we can't rely on this effect only running once.
     if (confirmedTradeExecutionState !== TradeExecutionState.Initializing) return
 
-    dispatch(tradeQuoteSlice.actions.setTradeInitialized(activeQuote.id))
-  }, [dispatch, isLoading, activeQuote, confirmedTradeExecutionState])
+    dispatch(tradeQuote.actions.setTradeInitialized(confirmedQuote.id))
+  }, [dispatch, isLoading, confirmedQuote, confirmedTradeExecutionState])
 
   const isTradeComplete = useMemo(
     () => confirmedTradeExecutionState === TradeExecutionState.TradeComplete,
@@ -65,7 +67,7 @@ export const MultiHopTradeConfirm = memo(() => {
 
   const handleBack = useCallback(() => {
     if (isTradeComplete) {
-      dispatch(tradeQuoteSlice.actions.clear())
+      dispatch(tradeQuote.actions.clear())
     }
 
     history.push(TradeRoutePaths.Input)
@@ -93,9 +95,9 @@ export const MultiHopTradeConfirm = memo(() => {
   ])
 
   const handleTradeConfirm = useCallback(() => {
-    if (!activeQuote) return
-    dispatch(tradeQuoteSlice.actions.confirmTrade(activeQuote.id))
-  }, [dispatch, activeQuote])
+    if (!confirmedQuote) return
+    dispatch(tradeQuote.actions.confirmTrade(confirmedQuote.id))
+  }, [dispatch, confirmedQuote])
 
   const handleSubmit = useCallback(() => {
     if (isModeratePriceImpact) {
@@ -139,17 +141,17 @@ export const MultiHopTradeConfirm = memo(() => {
             </Heading>
           </WithBackButton>
         </CardHeader>
-        {isTradeComplete && activeQuote && lastHop ? (
+        {isTradeComplete && confirmedQuote && lastHop ? (
           <TradeSuccess
             handleBack={handleBack}
             titleTranslation={
               isArbitrumBridgeWithdraw ? 'bridge.arbitrum.success.tradeSuccess' : undefined
             }
-            sellAsset={activeQuote?.steps[0].sellAsset}
+            sellAsset={confirmedQuote?.steps[0].sellAsset}
             buyAsset={lastHop.buyAsset}
             sellAmountCryptoPrecision={fromBaseUnit(
-              activeQuote.steps[0].sellAmountIncludingProtocolFeesCryptoBaseUnit,
-              activeQuote.steps[0].sellAsset.precision,
+              confirmedQuote.steps[0].sellAmountIncludingProtocolFeesCryptoBaseUnit,
+              confirmedQuote.steps[0].sellAsset.precision,
             )}
             buyAmountCryptoPrecision={fromBaseUnit(
               lastHop.buyAmountAfterFeesCryptoBaseUnit,

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

@@ -32,7 +32,7 @@ import { useLocaleFormatter } from 'hooks/useLocaleFormatter/useLocaleFormatter'
 import { fromBaseUnit } from 'lib/math'
 import { assertUnreachable } from 'lib/utils'
 import {
-  selectActiveQuote,
+  selectConfirmedQuote,
   selectHopExecutionMetadata,
   selectHopNetworkFeeUserCurrency,
   selectHopTotalProtocolFeesFiatPrecision,
@@ -91,11 +91,13 @@ export const Hop = ({
   const history = useHistory()
   const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop)
 
-  const activeQuote = useAppSelector(selectActiveQuote)
+  const confirmedQuote = useAppSelector(selectConfirmedQuote)
 
   const isArbitrumBridgeWithdraw = useMemo(() => {
-    return isArbitrumBridgeTradeQuoteOrRate(activeQuote) && activeQuote.direction === 'withdrawal'
-  }, [activeQuote])
+    return (
+      isArbitrumBridgeTradeQuoteOrRate(confirmedQuote) && confirmedQuote.direction === 'withdrawal'
+    )
+  }, [confirmedQuote])
 
   const hopExecutionMetadataFilter = useMemo(() => {
     return {

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hops.tsx

@@ -1,8 +1,8 @@
 import { Box, Stack } from '@chakra-ui/react'
 import { memo, useMemo } from 'react'
 import {
-  selectActiveQuote,
   selectActiveSwapperName,
+  selectConfirmedQuote,
   selectFirstHop,
   selectIsActiveQuoteMultiHop,
   selectLastHop,
@@ -30,17 +30,17 @@ export const Hops = memo((props: HopsProps) => {
   const swapperName = useAppSelector(selectActiveSwapperName)
   const firstHop = useAppSelector(selectFirstHop)
   const lastHop = useAppSelector(selectLastHop)
-  const activeQuote = useAppSelector(selectActiveQuote)
+  const confirmedQuote = useAppSelector(selectConfirmedQuote)
   const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop)
 
   const divider = useMemo(
     () => <Box height={2} borderColor='border.bold' bg='background.surface.base' />,
     [],
   )
 
-  if (!activeQuote || !firstHop || !swapperName) return null
+  if (!confirmedQuote || !firstHop || !swapperName) return null
 
-  const activeTradeId = activeQuote.id
+  const activeTradeId = confirmedQuote.id
 
   return (
     <Stack spacing={0} divider={divider} borderColor='border.base'>
@@ -50,7 +50,7 @@ export const Hops = memo((props: HopsProps) => {
         hopIndex={0}
         isOpen={isFirstHopOpen}
         onToggleIsOpen={onToggleFirstHop}
-        slippageTolerancePercentageDecimal={activeQuote.slippageTolerancePercentageDecimal}
+        slippageTolerancePercentageDecimal={confirmedQuote.slippageTolerancePercentageDecimal}
         activeTradeId={activeTradeId}
         initialActiveTradeId={initialActiveTradeId}
       />
@@ -61,7 +61,7 @@ export const Hops = memo((props: HopsProps) => {
           hopIndex={1}
           isOpen={isSecondHopOpen}
           onToggleIsOpen={onToggleSecondHop}
-          slippageTolerancePercentageDecimal={activeQuote.slippageTolerancePercentageDecimal}
+          slippageTolerancePercentageDecimal={confirmedQuote.slippageTolerancePercentageDecimal}
           activeTradeId={activeTradeId}
           initialActiveTradeId={initialActiveTradeId}
         />

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/StepperStep.tsx

@@ -13,7 +13,7 @@ import {
 } from '@chakra-ui/react'
 import { InlineCopyButton } from 'components/InlineCopyButton'
 import { MiddleEllipsis } from 'components/MiddleEllipsis/MiddleEllipsis'
-import { selectActiveQuote } from 'state/slices/tradeQuoteSlice/selectors'
+import { selectConfirmedQuote } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
 
 const stepStyle = {
@@ -54,8 +54,8 @@ export type StepperStepProps = {
 }
 
 const LastStepTag = () => {
-  const activeQuote = useAppSelector(selectActiveQuote)
-  const receiveAddress = activeQuote?.receiveAddress
+  const confirmedQuote = useAppSelector(selectConfirmedQuote)
+  const receiveAddress = confirmedQuote?.receiveAddress
 
   if (!receiveAddress) return null
 

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

@@ -11,7 +11,7 @@ import { useIsAllowanceApprovalRequired } from 'hooks/queries/useIsAllowanceAppr
 import { useErrorToast } from 'hooks/useErrorToast/useErrorToast'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { selectHopSellAccountId } from 'state/slices/tradeQuoteSlice/selectors'
-import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
+import { tradeQuote } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 // handles allowance approval tx execution, fees, and state orchestration
@@ -55,7 +55,7 @@ export const useAllowanceApproval = (
     // This is deliberately disjoint to the approval transaction orchestration to allow users to
     // complete an approval externally and have the app respond to the updated allowance on chain.
     dispatch(
-      tradeQuoteSlice.actions.setAllowanceApprovalStepComplete({ hopIndex, id: confirmedTradeId }),
+      tradeQuote.actions.setAllowanceApprovalStepComplete({ hopIndex, id: confirmedTradeId }),
     )
   }, [
     dispatch,
@@ -80,15 +80,15 @@ export const useAllowanceApproval = (
     }),
     onMutate() {
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceApprovalTxPending({
+        tradeQuote.actions.setAllowanceApprovalTxPending({
           hopIndex,
           id: confirmedTradeId,
         }),
       )
     },
     async onSuccess(txHash) {
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceApprovalTxHash({
+        tradeQuote.actions.setAllowanceApprovalTxHash({
           hopIndex,
           txHash,
           id: confirmedTradeId,
@@ -99,15 +99,15 @@ export const useAllowanceApproval = (
       await publicClient.waitForTransactionReceipt({ hash: txHash as Hash })
 
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceApprovalTxComplete({
+        tradeQuote.actions.setAllowanceApprovalTxComplete({
           hopIndex,
           id: confirmedTradeId,
         }),
       )
     },
     onError(err) {
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceApprovalTxFailed({
+        tradeQuote.actions.setAllowanceApprovalTxFailed({
           hopIndex,
           id: confirmedTradeId,
         }),

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

@@ -10,7 +10,7 @@ import { useIsAllowanceResetRequired } from 'hooks/queries/useIsAllowanceResetRe
 import { useErrorToast } from 'hooks/useErrorToast/useErrorToast'
 import { useWallet } from 'hooks/useWallet/useWallet'
 import { selectHopSellAccountId } from 'state/slices/tradeQuoteSlice/selectors'
-import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
+import { tradeQuote } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import { useAppDispatch, useAppSelector } from 'state/store'
 
 // handles allowance reset tx execution, fees, and state orchestration
@@ -60,9 +60,7 @@ export const useAllowanceReset = (
     // Mark the allowance reset step complete as required.
     // This is deliberately disjoint to the approval transaction orchestration to allow users to
     // complete an approval reset externally and have the app respond to the updated allowance on chain.
-    dispatch(
-      tradeQuoteSlice.actions.setAllowanceResetStepComplete({ hopIndex, id: confirmedTradeId }),
-    )
+    dispatch(tradeQuote.actions.setAllowanceResetStepComplete({ hopIndex, id: confirmedTradeId }))
   }, [
     dispatch,
     hopIndex,
@@ -83,15 +81,15 @@ export const useAllowanceReset = (
     }),
     onMutate() {
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceResetTxPending({
+        tradeQuote.actions.setAllowanceResetTxPending({
           hopIndex,
           id: confirmedTradeId,
         }),
       )
     },
     async onSuccess(txHash) {
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceResetTxHash({
+        tradeQuote.actions.setAllowanceResetTxHash({
           hopIndex,
           txHash,
           id: confirmedTradeId,
@@ -102,15 +100,15 @@ export const useAllowanceReset = (
       await publicClient.waitForTransactionReceipt({ hash: txHash as Hash })
 
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceResetTxComplete({
+        tradeQuote.actions.setAllowanceResetTxComplete({
           hopIndex,
           id: confirmedTradeId,
         }),
       )
     },
     onError(err) {
       dispatch(
-        tradeQuoteSlice.actions.setAllowanceResetTxFailed({
+        tradeQuote.actions.setAllowanceResetTxFailed({
           hopIndex,
           id: confirmedTradeId,
         }),

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

@@ -5,7 +5,7 @@ import { getConfig } from 'config'
 import { useEffect, useMemo } from 'react'
 import { usePoll } from 'hooks/usePoll/usePoll'
 import { selectHopExecutionMetadata } from 'state/slices/tradeQuoteSlice/selectors'
-import { tradeQuoteSlice } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
+import { tradeQuote } from 'state/slices/tradeQuoteSlice/tradeQuoteSlice'
 import type {
   StreamingSwapFailedSwap,
   StreamingSwapMetadata,
@@ -122,7 +122,7 @@ export const useChainflipStreamingProgress = ({
 
         // data to update - update
         dispatch(
-          tradeQuoteSlice.actions.setStreamingSwapMeta({
+          tradeQuote.actions.setStreamingSwapMeta({
             hopIndex,
             streamingSwapMetadata: getStreamingSwapMetadata(updatedStreamingSwapData),
             id: confirmedTradeId,