diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx index b138d90982e..6c6d588b47d 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/components/Hop.tsx @@ -127,6 +127,16 @@ export const Hop = ({ ) ) case TransactionExecutionState.Pending: + // The hop may be pending, but it doesn't mean that it has been signed and broadcasted + if (!swap.sellTxHash) { + return ( + tradeQuoteStep.estimatedExecutionTimeMs !== undefined && ( + + {prettyMilliseconds(tradeQuoteStep.estimatedExecutionTimeMs)} + + ) + ) + } return ( tradeQuoteStep.estimatedExecutionTimeMs !== undefined && ( @@ -139,7 +149,7 @@ export const Hop = ({ default: return null } - }, [swap.state, tradeQuoteStep.estimatedExecutionTimeMs, onToggleIsOpen, isOpen]) + }, [swap.state, swap.sellTxHash, tradeQuoteStep.estimatedExecutionTimeMs, onToggleIsOpen, isOpen]) const activeStep = useMemo(() => { switch (hopExecutionState) { diff --git a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useCountdown.tsx b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useCountdown.tsx index 01ab6c91e75..c70aee5ec14 100644 --- a/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useCountdown.tsx +++ b/src/components/MultiHopTrade/components/MultiHopTradeConfirm/hooks/useCountdown.tsx @@ -28,12 +28,6 @@ export const useCountdown = ( }) }, [onCompleted]) - useEffect(() => { - return () => { - if (id.current) clearInterval(id.current) - } - }, [handleDecrement]) - const start = useCallback((): void => { if (id.current) return id.current = setInterval(handleDecrement, 1000)