Merge branch 'develop' into revert-revert-remove-splash

shapeshift · Jan 6, 2025 · 6958a4a · 6958a4a
2 parents 3eb1eae + 35b73ab
commit 6958a4a
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 27 deletions.
diff --git 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(() => {

diff --git 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',