fix: multiple bugs

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

@@ -9,6 +9,7 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import type { TradeQuote, TradeQuoteStep } from '@shapeshiftoss/swapper'
+import { assertUnreachable } from '@shapeshiftoss/utils'
 import { useCallback, useMemo } from 'react'
 import { FaInfoCircle } from 'react-icons/fa'
 import { FaRotateRight } from 'react-icons/fa6'
@@ -17,12 +18,12 @@ import { Row } from 'components/Row/Row'
 import { Text } from 'components/Text'
 import { AllowanceType } from 'hooks/queries/useApprovalFees'
 import { selectHopExecutionMetadata } from 'state/slices/tradeQuoteSlice/selectors'
-import { TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
+import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppSelector } from 'state/store'
 
 import { SharedApprovalStep } from './SharedApprovalStep/SharedApprovalStep'
 import type { RenderAllowanceContentCallbackParams } from './SharedApprovalStep/types'
-import { ApprovalStatusIcon } from './StatusIcon'
+import { StatusIcon } from './StatusIcon'
 
 export type ApprovalResetStepProps = {
   tradeQuoteStep: TradeQuoteStep
@@ -33,7 +34,7 @@ export type ApprovalResetStepProps = {
   activeTradeId: TradeQuote['id']
 }
 
-const initialIcon = <FaRotateRight />
+const defaultIcon = <FaRotateRight />
 
 export const ApprovalResetStep = ({
   tradeQuoteStep,
@@ -50,19 +51,30 @@ export const ApprovalResetStep = ({
       hopIndex,
     }
   }, [activeTradeId, hopIndex])
-  const { state, allowanceReset } = useAppSelector(state =>
+  const { state: hopExecutionState, allowanceReset } = useAppSelector(state =>
     selectHopExecutionMetadata(state, hopExecutionMetadataFilter),
   )
 
   const stepIndicator = useMemo(() => {
-    return (
-      <ApprovalStatusIcon
-        hopExecutionState={state}
-        approvalTxState={allowanceReset.state}
-        initialIcon={initialIcon}
-      />
-    )
-  }, [allowanceReset.state, state])
+    const txStatus = (() => {
+      switch (hopExecutionState) {
+        case HopExecutionState.Pending:
+          return TransactionExecutionState.AwaitingConfirmation
+        case HopExecutionState.AwaitingApprovalReset:
+          return allowanceReset.state === TransactionExecutionState.Failed
+            ? TransactionExecutionState.Failed
+            : TransactionExecutionState.Pending
+        case HopExecutionState.AwaitingApproval:
+        case HopExecutionState.AwaitingSwap:
+        case HopExecutionState.Complete:
+          return TransactionExecutionState.Complete
+        default:
+          assertUnreachable(hopExecutionState)
+      }
+    })()
+
+    return <StatusIcon txStatus={txStatus} defaultIcon={defaultIcon} />
+  }, [allowanceReset.state, hopExecutionState])
 
   const renderResetAllowanceContent = useCallback(
     ({
@@ -110,13 +122,23 @@ export const ApprovalResetStep = ({
     [translate, isActive],
   )
 
+  const isComplete = useMemo(() => {
+    return [
+      HopExecutionState.AwaitingApproval,
+      HopExecutionState.AwaitingSwap,
+      HopExecutionState.Complete,
+    ].includes(hopExecutionState)
+  }, [hopExecutionState])
+
   return (
     <SharedApprovalStep
+      isComplete={isComplete}
       tradeQuoteStep={tradeQuoteStep}
+      txHash={allowanceReset.txHash}
       hopIndex={hopIndex}
       isLoading={isLoading}
       activeTradeId={activeTradeId}
-      hopExecutionState={state}
+      hopExecutionState={hopExecutionState}
       transactionExecutionState={allowanceReset.state}
       titleTranslation='trade.resetTitle'
       stepIndicator={stepIndicator}
@@ -125,7 +147,6 @@ export const ApprovalResetStep = ({
       gasFeeTranslation='trade.approvalResetGasFee'
       renderContent={renderResetAllowanceContent}
       allowanceType={AllowanceType.Reset}
-      feeQueryEnabled={false}
     />
   )
 }

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

@@ -9,9 +9,10 @@ import {
   VStack,
 } from '@chakra-ui/react'
 import type { TradeQuote, TradeQuoteStep } from '@shapeshiftoss/swapper'
+import { assertUnreachable } from '@shapeshiftoss/utils'
 import { useCallback, useMemo } from 'react'
 import { FaInfoCircle } from 'react-icons/fa'
-import { FaRotateRight } from 'react-icons/fa6'
+import { FaThumbsUp } from 'react-icons/fa6'
 import { useTranslate } from 'react-polyglot'
 import { Row } from 'components/Row/Row'
 import { Text } from 'components/Text'
@@ -23,7 +24,7 @@ import { useAppSelector } from 'state/store'
 
 import { SharedApprovalStep } from './SharedApprovalStep/SharedApprovalStep'
 import type { RenderAllowanceContentCallbackParams } from './SharedApprovalStep/types'
-import { ApprovalStatusIcon } from './StatusIcon'
+import { StatusIcon } from './StatusIcon'
 
 export type ApprovalStepProps = {
   tradeQuoteStep: TradeQuoteStep
@@ -34,7 +35,7 @@ export type ApprovalStepProps = {
   activeTradeId: TradeQuote['id']
 }
 
-const initialIcon = <FaRotateRight />
+const defaultIcon = <FaThumbsUp />
 
 export const ApprovalStep = ({
   tradeQuoteStep,
@@ -53,22 +54,32 @@ export const ApprovalStep = ({
       hopIndex,
     }
   }, [activeTradeId, hopIndex])
-  const { state, approval } = useAppSelector(state =>
+  const { state: hopExecutionState, approval } = useAppSelector(state =>
     selectHopExecutionMetadata(state, hopExecutionMetadataFilter),
   )
 
   const stepIndicator = useMemo(() => {
-    return (
-      <ApprovalStatusIcon
-        hopExecutionState={state}
-        approvalTxState={approval.state}
-        initialIcon={initialIcon}
-        overrideCompletedStateToPending
-      />
-    )
-  }, [approval.state, state])
+    const txStatus = (() => {
+      switch (hopExecutionState) {
+        case HopExecutionState.Pending:
+        case HopExecutionState.AwaitingApprovalReset:
+          return TransactionExecutionState.AwaitingConfirmation
+        case HopExecutionState.AwaitingApproval:
+          return approval.state === TransactionExecutionState.Failed
+            ? TransactionExecutionState.Failed
+            : TransactionExecutionState.Pending
+        case HopExecutionState.AwaitingSwap:
+        case HopExecutionState.Complete:
+          return TransactionExecutionState.Complete
+        default:
+          assertUnreachable(hopExecutionState)
+      }
+    })()
 
-  const renderResetAllowanceContent = useCallback(
+    return <StatusIcon txStatus={txStatus} defaultIcon={defaultIcon} />
+  }, [approval.state, hopExecutionState])
+
+  const renderApprovalContent = useCallback(
     ({
       hopExecutionState,
       transactionExecutionState,
@@ -136,22 +147,27 @@ export const ApprovalStep = ({
     [isActive, translate, isExactAllowance, toggleIsExactAllowance],
   )
 
+  const isComplete = useMemo(() => {
+    return [HopExecutionState.AwaitingSwap, HopExecutionState.Complete].includes(hopExecutionState)
+  }, [hopExecutionState])
+
   return (
     <SharedApprovalStep
+      isComplete={isComplete}
       tradeQuoteStep={tradeQuoteStep}
       hopIndex={hopIndex}
       isLoading={isLoading}
       activeTradeId={activeTradeId}
-      hopExecutionState={state}
+      hopExecutionState={hopExecutionState}
       transactionExecutionState={approval.state}
       titleTranslation='trade.approvalTitle'
       errorTranslation='trade.approvalFailed'
       gasFeeLoadingTranslation='trade.approvalGasFeeLoading'
       gasFeeTranslation='trade.approvalGasFee'
       stepIndicator={stepIndicator}
-      renderContent={renderResetAllowanceContent}
+      renderContent={renderApprovalContent}
+      txHash={approval.txHash}
       allowanceType={isExactAllowance ? AllowanceType.Exact : AllowanceType.Unlimited}
-      feeQueryEnabled={isActive}
     />
   )
 }

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

@@ -221,7 +221,7 @@ export const Hop = ({
           )}
 
           <Collapse in={allowanceReset.isRequired} style={collapseWidth}>
-            {allowanceReset.isRequired && (
+            {allowanceReset.isRequired === true && (
               <ApprovalResetStep
                 tradeQuoteStep={tradeQuoteStep}
                 hopIndex={hopIndex}

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

@@ -1,7 +1,8 @@
 import type { TradeQuote, TradeQuoteStep } from '@shapeshiftoss/swapper'
 import { useCallback, useMemo } from 'react'
 import type { AllowanceType } from 'hooks/queries/useApprovalFees'
-import { HopExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
+import type { HopExecutionState } from 'state/slices/tradeQuoteSlice/types'
+import { TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
 
 import {
   SharedApprovalDescription,
@@ -12,6 +13,7 @@ import { SharedApprovalStepPending } from './components/SharedApprovalStepPendin
 import type { RenderAllowanceContentCallback } from './types'
 
 export type SharedApprovalStepProps = {
+  isComplete: boolean
   titleTranslation: string
   errorTranslation: string
   gasFeeLoadingTranslation: string
@@ -23,12 +25,13 @@ export type SharedApprovalStepProps = {
   hopExecutionState: HopExecutionState
   transactionExecutionState: TransactionExecutionState
   stepIndicator: JSX.Element
-  txHash?: string
+  txHash: string | undefined
   allowanceType: AllowanceType
   renderContent: RenderAllowanceContentCallback
 }
 
 export const SharedApprovalStep = ({
+  isComplete,
   tradeQuoteStep,
   hopIndex,
   isLoading,
@@ -44,14 +47,6 @@ export const SharedApprovalStep = ({
   allowanceType,
   renderContent,
 }: SharedApprovalStepProps) => {
-  const isComplete = useMemo(() => {
-    return [
-      HopExecutionState.AwaitingApproval,
-      HopExecutionState.AwaitingSwap,
-      HopExecutionState.Complete,
-    ].includes(hopExecutionState)
-  }, [hopExecutionState])
-
   const completedDescription = useMemo(() => {
     return (
       <SharedCompletedApprovalDescription
@@ -64,7 +59,7 @@ export const SharedApprovalStep = ({
   }, [tradeQuoteStep, transactionExecutionState, txHash, errorTranslation])
 
   const renderDescription = useCallback(
-    (approvalNetworkFeeCryptoFormatted?: string) => {
+    (approvalNetworkFeeCryptoFormatted: string) => {
       return (
         <SharedApprovalDescription
           tradeQuoteStep={tradeQuoteStep}
@@ -98,6 +93,7 @@ export const SharedApprovalStep = ({
     />
   ) : (
     <SharedApprovalStepPending
+      titleTranslation={titleTranslation}
       tradeQuoteStep={tradeQuoteStep}
       hopIndex={hopIndex}
       isLoading={isLoading}

src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/SharedApprovalStep/components/SharedApprovalDescription.tsx

@@ -62,7 +62,7 @@ export const SharedCompletedApprovalDescription = ({
 type SharedApprovalDescriptionProps = {
   tradeQuoteStep: TradeQuoteStep
   txHash: string | undefined
-  approvalNetworkFeeCryptoFormatted: string | undefined
+  approvalNetworkFeeCryptoFormatted: string
   gasFeeLoadingTranslation: string
   gasFeeTranslation: string
   isAwaitingReset?: boolean
@@ -88,7 +88,7 @@ export const SharedApprovalDescription = ({
         {isLoadingNetworkFee
           ? translate(gasFeeLoadingTranslation)
           : translate(gasFeeTranslation, {
-              fee: approvalNetworkFeeCryptoFormatted ?? '',
+              fee: approvalNetworkFeeCryptoFormatted,
             })}
       </>
     )