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)