From 636a011ce7f0da8a80f4a09a661b09fe8e8a8612 Mon Sep 17 00:00:00 2001
From: Apotheosis <0xapotheosis@gmail.com>
Date: Mon, 6 Jan 2025 19:08:24 +1100
Subject: [PATCH 1/2] fix: only show warning ack when previewing (#8465)

---
 .../components/TradeConfirm/TradeFooterButton.tsx         | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx b/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx
index 3fc62c8f048..7aab43e2f32 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx
+++ b/src/components/MultiHopTrade/components/TradeConfirm/TradeFooterButton.tsx
@@ -118,12 +118,16 @@ export const TradeFooterButton: FC<TradeFooterButtonProps> = ({
   }, [tradeButtonProps, setHasClickedButton])
 
   const handleClick = useCallback(() => {
-    if (isModeratePriceImpact) {
+    const isInitializingOrPreviewing =
+      confirmedTradeExecutionState === TradeExecutionState.Initializing ||
+      confirmedTradeExecutionState === TradeExecutionState.Previewing
+    // Only show the warning acknowledgement if the user is previewing the trade
+    if (isModeratePriceImpact && isInitializingOrPreviewing) {
       setShouldShowWarningAcknowledgement(true)
     } else {
       handleSubmit()
     }
-  }, [isModeratePriceImpact, handleSubmit])
+  }, [isModeratePriceImpact, handleSubmit, confirmedTradeExecutionState])
 
   // Ratio of the fiat value of the gas fee to the fiat value of the trade value express in percentage
   const isFeeRatioOverThreshold = useMemo(() => {

From 35b73abaa6a8037d59645163424bfa804ba02a70 Mon Sep 17 00:00:00 2001
From: Apotheosis <0xapotheosis@gmail.com>
Date: Mon, 6 Jan 2025 20:01:05 +1100
Subject: [PATCH 2/2] fix: inner step styling (#8464)

---
 src/components/Stepper.theme.ts | 52 +++++++++++++++++----------------
 1 file changed, 27 insertions(+), 25 deletions(-)

diff --git a/src/components/Stepper.theme.ts b/src/components/Stepper.theme.ts
index 11e2edce439..9463f12ce60 100644
--- a/src/components/Stepper.theme.ts
+++ b/src/components/Stepper.theme.ts
@@ -37,36 +37,38 @@ const baseStyle = {
       bg: 'border.base',
     },
   },
-  innerSteps: {
-    step: {
-      '&[data-status=active]': {
-        bg: 'background.surface.raised.base',
-        borderRadius: '8px',
-      },
+}
+
+const innerSteps = {
+  step: {
+    '&[data-status=active]': {
+      bg: 'background.surface.raised.base',
+      borderRadius: '8px',
     },
-    indicator: {
-      width: '20px',
-      height: '20px',
-      minWidth: '20px',
+  },
+  indicator: {
+    width: '20px',
+    height: '20px',
+    minWidth: '20px',
+    borderWidth: '3px',
+    // Override the throbbing animation
+    '&[data-status=active]:not(.step-pending)': {
+      animation: 'none',
+    },
+    '&[data-status=active]': {
+      borderWidth: '3px',
+    },
+    '&[data-status=incomplete]': {
+      borderWidth: '3px',
+    },
+    '&[data-status=complete]': {
       borderWidth: '3px',
-      // Override the throbbing animation
-      '&[data-status=active]:not(.step-pending)': {
-        animation: 'none',
-      },
-      '&[data-status=active]': {
-        borderWidth: '3px',
-      },
-      '&[data-status=incomplete]': {
-        borderWidth: '3px',
-      },
-      '&[data-status=complete]': {
-        borderWidth: '3px',
-      },
     },
   },
 }
 
 const variants = {
+  innerSteps,
   error: {
     indicator: {
       '&[data-status=active]': {
@@ -83,9 +85,9 @@ const variants = {
     },
   },
   innerStepsError: {
-    ...baseStyle.innerSteps,
+    ...innerSteps,
     indicator: {
-      ...baseStyle.innerSteps.indicator,
+      ...innerSteps.indicator,
       '&[data-status=active]:not(.step-pending)': {
         animation: 'none',
         borderWidth: '0',