chore: more new swapper tweaks (#8437)

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

@@ -67,7 +67,11 @@ export const StepperStep = ({
   stepIndicatorVariant = 'default',
 }: StepperStepProps) => {
   const { indicator: indicatorStyles } = useStyleConfig('Stepper', {
-    variant: isError ? 'error' : stepIndicatorVariant,
+    variant: isError
+      ? stepIndicatorVariant === 'innerSteps'
+        ? 'innerStepsError'
+        : 'error'
+      : stepIndicatorVariant,
   }) as { indicator: SystemStyleObject }
 
   return (

src/components/MultiHopTrade/components/SharedConfirm/SharedConfirmFooter.tsx

@@ -1,8 +1,8 @@
 import { Stack } from '@chakra-ui/react'
 
 type SharedConfirmFooterProps = {
-  detail: React.ReactNode | null
-  button: React.ReactNode
+  detail: JSX.Element | null
+  button: JSX.Element | null
 }
 
 export const SharedConfirmFooter = ({ detail, button }: SharedConfirmFooterProps) => {

src/components/MultiHopTrade/components/TradeConfirm/EtaStep.tsx

@@ -2,8 +2,7 @@ import { ArrowDownIcon } from '@chakra-ui/icons'
 import prettyMilliseconds from 'pretty-ms'
 import { useMemo } from 'react'
 import { useTranslate } from 'react-polyglot'
-import { selectIsActiveQuoteMultiHop } from 'state/slices/tradeInputSlice/selectors'
-import { selectFirstHop, selectLastHop } from 'state/slices/tradeQuoteSlice/selectors'
+import { selectActiveQuote } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector } from 'state/store'
 
 import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep'
@@ -12,18 +11,15 @@ const etaStepProps = { alignItems: 'center', py: 2 }
 
 export const EtaStep = () => {
   const translate = useTranslate()
-  const tradeQuoteFirstHop = useAppSelector(selectFirstHop)
-  const tradeQuoteLastHop = useAppSelector(selectLastHop)
-  const isMultiHopTrade = useAppSelector(selectIsActiveQuoteMultiHop)
-  const totalEstimatedExecutionTimeMs = useMemo(() => {
-    if (!tradeQuoteFirstHop || !tradeQuoteLastHop) return undefined
-    if (!tradeQuoteFirstHop.estimatedExecutionTimeMs || !tradeQuoteLastHop.estimatedExecutionTimeMs)
-      return undefined
-    return isMultiHopTrade
-      ? tradeQuoteFirstHop.estimatedExecutionTimeMs + tradeQuoteLastHop.estimatedExecutionTimeMs
-      : tradeQuoteFirstHop.estimatedExecutionTimeMs
-  }, [isMultiHopTrade, tradeQuoteFirstHop, tradeQuoteLastHop])
-  const swapperName = tradeQuoteFirstHop?.source
+  const activeQuote = useAppSelector(selectActiveQuote)
+  const totalEstimatedExecutionTimeMs = useMemo(
+    () =>
+      activeQuote?.steps.reduce((acc, step) => {
+        return acc + (step.estimatedExecutionTimeMs ?? 0)
+      }, 0),
+    [activeQuote?.steps],
+  )
+  const swapperName = activeQuote?.steps[0].source
 
   const stepIndicator = useMemo(() => {
     return <ArrowDownIcon color='gray.500' boxSize={5} />

src/components/MultiHopTrade/components/TradeConfirm/ExpandableTradeSteps.tsx → src/components/MultiHopTrade/components/TradeConfirm/ExpandableStepperSteps.tsx

@@ -9,18 +9,18 @@ import {
   selectConfirmedTradeExecutionState,
   selectHopExecutionMetadata,
 } from 'state/slices/tradeQuoteSlice/selectors'
-import { TradeExecutionState } from 'state/slices/tradeQuoteSlice/types'
+import { TradeExecutionState, TransactionExecutionState } from 'state/slices/tradeQuoteSlice/types'
 import { useAppSelector, useSelectorWithArgs } from 'state/store'
 
 import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep'
-import { ExpandedTradeSteps } from './ExpandedTradeSteps'
+import { ExpandedStepperSteps } from './ExpandedStepperSteps'
 import { getHopExecutionStateSummaryStepTranslation } from './helpers'
 import { useCurrentHopIndex } from './hooks/useCurrentHopIndex'
-import { useTradeSteps } from './hooks/useTradeSteps'
+import { useStepperSteps } from './hooks/useStepperSteps'
 
 const collapseStyle = { width: '100%' }
 
-export const ExpandableTradeSteps = () => {
+export const ExpandableStepperSteps = () => {
   const [isExpanded, setIsExpanded] = useState(false)
   const confirmedTradeExecutionState = useAppSelector(selectConfirmedTradeExecutionState)
   const summaryStepProps = useMemo(
@@ -44,22 +44,24 @@ export const ExpandableTradeSteps = () => {
     }
   }, [activeTradeId, currentHopIndex])
   const swapperName = activeTradeQuote?.steps[0].source
-  const { state: hopExecutionState } = useSelectorWithArgs(
-    selectHopExecutionMetadata,
-    hopExecutionMetadataFilter,
-  )
+  const {
+    state: hopExecutionState,
+    swap: { state: swapTxState },
+  } = useSelectorWithArgs(selectHopExecutionMetadata, hopExecutionMetadataFilter)
 
   const summaryStepIndicator = useMemo(() => {
-    if (confirmedTradeExecutionState === TradeExecutionState.TradeComplete) {
-      return <AnimatedCheck />
-    } else if (activeQuoteError) {
-      return <WarningIcon color='red.500' />
-    } else {
-      return <Spinner thickness='3px' size='md' />
+    switch (true) {
+      case confirmedTradeExecutionState === TradeExecutionState.TradeComplete:
+        return <AnimatedCheck />
+      case !!activeQuoteError:
+      case swapTxState === TransactionExecutionState.Failed:
+        return <WarningIcon color='red.500' />
+      default:
+        return <Spinner thickness='3px' size='md' />
     }
-  }, [confirmedTradeExecutionState, activeQuoteError])
+  }, [confirmedTradeExecutionState, activeQuoteError, swapTxState])
 
-  const { totalSteps, currentTradeStepIndex: currentStep } = useTradeSteps()
+  const { totalSteps, currentTradeStepIndex: currentStep } = useStepperSteps()
   const progressValue = (currentStep / (totalSteps - 1)) * 100
 
   const titleElement = useMemo(() => {
@@ -100,7 +102,7 @@ export const ExpandableTradeSteps = () => {
       />
       <Collapse in={isExpanded} style={collapseStyle}>
         <Box py={4} pl={0}>
-          {activeTradeQuote && <ExpandedTradeSteps activeTradeQuote={activeTradeQuote} />}
+          {activeTradeQuote && <ExpandedStepperSteps activeTradeQuote={activeTradeQuote} />}
         </Box>
       </Collapse>
     </>

src/components/MultiHopTrade/components/TradeConfirm/ExpandedTradeSteps.tsx → src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx

@@ -26,22 +26,22 @@ import {
 } from 'state/slices/tradeQuoteSlice/selectors'
 import { useAppSelector, useSelectorWithArgs } from 'state/store'
 
-import { StepperStep } from '../MultiHopTradeConfirm/components/StepperStep'
-import { TradeStep } from './helpers'
+import { StepperStep as StepperStepComponent } from '../MultiHopTradeConfirm/components/StepperStep'
+import { StepperStep } from './helpers'
+import { useStepperSteps } from './hooks/useStepperSteps'
 import { useStreamingProgress } from './hooks/useStreamingProgress'
-import { useTradeSteps } from './hooks/useTradeSteps'
 import { TxLabel } from './TxLabel'
 
 const erroredStepIndicator = <WarningIcon color='red.500' />
 const completedStepIndicator = <CheckCircleIcon color='text.success' />
 
 const stepProps = { alignItems: 'center', py: 2, pr: 2, pl: 1.5 }
 
-type ExpandedTradeStepsProps = {
+type ExpandedStepperStepsProps = {
   activeTradeQuote: TradeQuote | TradeRate
 }
 
-export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps) => {
+export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsProps) => {
   const translate = useTranslate()
   // this is the account we're selling from - assume this is the AccountId of the approval Tx
   const firstHopSellAccountId = useAppSelector(selectFirstHopSellAccountId)
@@ -136,7 +136,7 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps
     swap: lastHopSwap,
   } = useSelectorWithArgs(selectHopExecutionMetadata, lastHopExecutionMetadataFilter)
 
-  const { currentTradeStepIndex: currentStep } = useTradeSteps()
+  const { currentTradeStepIndex: currentStep } = useStepperSteps()
 
   const stepIndicator = useMemo(
     () => (
@@ -327,65 +327,65 @@ export const ExpandedTradeSteps = ({ activeTradeQuote }: ExpandedTradeStepsProps
     tradeQuoteLastHop,
   ])
 
-  const { tradeSteps, currentTradeStep } = useTradeSteps()
+  const { tradeSteps, currentTradeStep } = useStepperSteps()
 
   return (
     <Stepper variant='innerSteps' orientation='vertical' index={currentStep} gap={0}>
-      {tradeSteps[TradeStep.FirstHopReset] ? (
-        <StepperStep
+      {tradeSteps[StepperStep.FirstHopReset] ? (
+        <StepperStepComponent
           title={firstHopAllowanceResetTitle}
           stepIndicator={stepIndicator}
           stepProps={stepProps}
           useSpacer={false}
-          isError={activeQuoteError && currentTradeStep === TradeStep.FirstHopReset}
+          isError={activeQuoteError && currentTradeStep === StepperStep.FirstHopReset}
           stepIndicatorVariant='innerSteps'
         />
       ) : null}
-      {tradeSteps[TradeStep.FirstHopApproval] ? (
-        <StepperStep
+      {tradeSteps[StepperStep.FirstHopApproval] ? (
+        <StepperStepComponent
           title={firstHopAllowanceApprovalTitle}
           stepIndicator={stepIndicator}
           stepProps={stepProps}
           useSpacer={false}
-          isError={activeQuoteError && currentTradeStep === TradeStep.FirstHopApproval}
+          isError={activeQuoteError && currentTradeStep === StepperStep.FirstHopApproval}
           stepIndicatorVariant='innerSteps'
         />
       ) : null}
-      <StepperStep
+      <StepperStepComponent
         title={firstHopActionTitle}
         stepIndicator={stepIndicator}
         stepProps={stepProps}
         useSpacer={false}
-        isError={activeQuoteError && currentTradeStep === TradeStep.FirstHopSwap}
+        isError={activeQuoteError && currentTradeStep === StepperStep.FirstHopSwap}
         stepIndicatorVariant='innerSteps'
       />
-      {tradeSteps[TradeStep.LastHopReset] ? (
-        <StepperStep
+      {tradeSteps[StepperStep.LastHopReset] ? (
+        <StepperStepComponent
           title={lastHopAllowanceResetTitle}
           stepIndicator={stepIndicator}
           stepProps={stepProps}
           useSpacer={false}
-          isError={activeQuoteError && currentTradeStep === TradeStep.LastHopReset}
+          isError={activeQuoteError && currentTradeStep === StepperStep.LastHopReset}
           stepIndicatorVariant='innerSteps'
         />
       ) : null}
-      {tradeSteps[TradeStep.LastHopApproval] ? (
-        <StepperStep
+      {tradeSteps[StepperStep.LastHopApproval] ? (
+        <StepperStepComponent
           title={lastHopAllowanceApprovalTitle}
           stepIndicator={stepIndicator}
           stepProps={stepProps}
           useSpacer={false}
-          isError={activeQuoteError && currentTradeStep === TradeStep.LastHopApproval}
+          isError={activeQuoteError && currentTradeStep === StepperStep.LastHopApproval}
           stepIndicatorVariant='innerSteps'
         />
       ) : null}
-      {tradeSteps[TradeStep.LastHopSwap] ? (
-        <StepperStep
+      {tradeSteps[StepperStep.LastHopSwap] ? (
+        <StepperStepComponent
           title={lastHopActionTitle}
           stepIndicator={stepIndicator}
           stepProps={stepProps}
           useSpacer={false}
-          isError={activeQuoteError && currentTradeStep === TradeStep.LastHopSwap}
+          isError={activeQuoteError && currentTradeStep === StepperStep.LastHopSwap}
           stepIndicatorVariant='innerSteps'
         />
       ) : null}

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmBody.tsx

@@ -8,7 +8,7 @@ import { useAppSelector } from 'state/store'
 
 import { SharedConfirmBody } from '../SharedConfirm/SharedConfirmBody'
 import { EtaStep } from './EtaStep'
-import { ExpandableTradeSteps } from './ExpandableTradeSteps'
+import { ExpandableStepperSteps } from './ExpandableStepperSteps'
 
 const InnerSteps = () => {
   const confirmedTradeExecutionState = useAppSelector(selectConfirmedTradeExecutionState)
@@ -20,7 +20,7 @@ const InnerSteps = () => {
     case TradeExecutionState.FirstHop:
     case TradeExecutionState.SecondHop:
     case TradeExecutionState.TradeComplete:
-      return <ExpandableTradeSteps />
+      return <ExpandableStepperSteps />
     default:
       return null
   }

src/components/MultiHopTrade/components/TradeConfirm/TradeConfirmFooter.tsx

@@ -15,10 +15,10 @@ import { useAppSelector, useSelectorWithArgs } from 'state/store'
 
 import { isPermit2Hop } from '../MultiHopTradeConfirm/hooks/helpers'
 import { SharedConfirmFooter } from '../SharedConfirm/SharedConfirmFooter'
-import { TradeStep } from './helpers'
+import { StepperStep } from './helpers'
 import { useActiveTradeAllowance } from './hooks/useActiveTradeAllowance'
 import { useCurrentHopIndex } from './hooks/useCurrentHopIndex'
-import { useTradeSteps } from './hooks/useTradeSteps'
+import { useStepperSteps } from './hooks/useStepperSteps'
 import { TradeConfirmSummary } from './TradeConfirmFooterContent/TradeConfirmSummary'
 import { TradeFooterButton } from './TradeFooterButton'
 
@@ -79,7 +79,7 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
     .times(feeAssetUserCurrencyRate.price)
     .toFixed()
 
-  const { currentTradeStep } = useTradeSteps()
+  const { currentTradeStep } = useStepperSteps()
 
   const tradeResetStepSummary = useMemo(() => {
     return (
@@ -221,14 +221,14 @@ export const TradeConfirmFooter: FC<TradeConfirmFooterProps> = ({
       // No trade step is active, quote is still to be confirmed
       case undefined:
         return <TradeConfirmSummary />
-      case TradeStep.FirstHopReset:
-      case TradeStep.LastHopReset:
+      case StepperStep.FirstHopReset:
+      case StepperStep.LastHopReset:
         return tradeResetStepSummary
-      case TradeStep.FirstHopApproval:
-      case TradeStep.LastHopApproval:
+      case StepperStep.FirstHopApproval:
+      case StepperStep.LastHopApproval:
         return tradeAllowanceStepSummary
-      case TradeStep.FirstHopSwap:
-      case TradeStep.LastHopSwap:
+      case StepperStep.FirstHopSwap:
+      case StepperStep.LastHopSwap:
         return tradeExecutionStepSummary
       default:
         return null