From 8e62d29627b8e45ead8e3be5be45e38fc7c9b78f Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Wed, 8 Jan 2025 23:05:26 +0400
Subject: [PATCH 1/2] feat: actually make permit2 allowance/sign distinct steps

---
 .../TradeConfirm/ExpandedStepperSteps.tsx     | 39 +++++++++++--------
 .../components/TradeConfirm/helpers.ts        | 16 ++++----
 2 files changed, 32 insertions(+), 23 deletions(-)

diff --git a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx
index 4bcb8249f47..feb6d2154c4 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx
+++ b/src/components/MultiHopTrade/components/TradeConfirm/ExpandedStepperSteps.tsx
@@ -211,21 +211,6 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
             </Tooltip>
           </>
         )
-      // Allowance granted, but still waiting for the actual Permit2 signature granting temp 5mn allowance to the contract
-      if (
-        firstHopPermit2.isRequired &&
-        hopExecutionState === HopExecutionState.AwaitingPermit2Eip712Sign
-      )
-        return (
-          <>
-            <Text translation='trade.permit2Eip712.title' />
-            <Tooltip label={translate('trade.permit2Eip712.tooltip', { swapperName })}>
-              <Box ml={1}>
-                <Icon as={FaInfoCircle} color='text.subtle' fontSize='0.8em' />
-              </Box>
-            </Tooltip>
-          </>
-        )
 
       // Good ol' allowances
       return (
@@ -252,11 +237,23 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
     firstHopPermit2.isRequired,
     firstHopSellAccountId,
     hopExecutionState,
-    swapperName,
     tradeQuoteFirstHop,
     translate,
   ])
 
+  const firstHopPermit2SignTitle = useMemo(() => {
+    return (
+      <Flex alignItems='center' justifyContent='space-between' flex={1}>
+        <Text translation='trade.permit2Eip712.title' />
+        <Tooltip label={translate('trade.permit2Eip712.tooltip', { swapperName })}>
+          <Box ml={1}>
+            <Icon as={FaInfoCircle} color='text.subtle' fontSize='0.8em' />
+          </Box>
+        </Tooltip>
+      </Flex>
+    )
+  }, [swapperName, translate])
+
   const firstHopActionTitle = useMemo(() => {
     return (
       <Flex alignItems='center' justifyContent='space-between' flex={1} gap={2}>
@@ -455,6 +452,16 @@ export const ExpandedStepperSteps = ({ activeTradeQuote }: ExpandedStepperStepsP
           stepIndicatorVariant='innerSteps'
         />
       ) : null}
+      {tradeSteps[StepperStep.FirstHopPermit2Sign] ? (
+        <StepperStepComponent
+          title={firstHopPermit2SignTitle}
+          stepIndicator={stepIndicator}
+          stepProps={stepProps}
+          useSpacer={false}
+          isError={isError && currentTradeStep === StepperStep.FirstHopApproval}
+          stepIndicatorVariant='innerSteps'
+        />
+      ) : null}
       <StepperStepComponent
         title={firstHopActionTitle}
         stepIndicator={stepIndicator}
diff --git a/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts b/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts
index 261e258bb99..67be52fa277 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts
+++ b/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts
@@ -60,6 +60,7 @@ type StepperStepParams = {
 
 export enum StepperStep {
   FirstHopReset = 'firstHopReset',
+  FirstHopPermit2Sign = 'firstHopPermit2Sign',
   FirstHopApproval = 'firstHopApproval',
   FirstHopSwap = 'firstHopSwap',
   LastHopReset = 'lastHopReset',
@@ -83,9 +84,8 @@ export const getStepperSteps = (params: StepperStepParams): Record<StepperStep,
       firstHopAllowanceReset.isRequired === true || firstHopAllowanceReset.txHash !== undefined,
     [StepperStep.FirstHopApproval]:
       firstHopAllowanceApproval.isInitiallyRequired === true ||
-      firstHopPermit2.isRequired === true ||
-      firstHopAllowanceApproval.txHash !== undefined ||
-      firstHopPermit2.permit2Signature !== undefined,
+      firstHopAllowanceApproval.txHash !== undefined,
+    [StepperStep.FirstHopPermit2Sign]: firstHopPermit2.isRequired === true,
     [StepperStep.FirstHopSwap]: true,
     [StepperStep.LastHopReset]:
       isMultiHopTrade === true &&
@@ -106,10 +106,11 @@ export const countStepperSteps = (params: StepperStepParams): number => {
 }
 
 const isInApprovalState = (state: HopExecutionState): boolean => {
-  return [
-    HopExecutionState.AwaitingAllowanceApproval,
-    HopExecutionState.AwaitingPermit2Eip712Sign,
-  ].includes(state)
+  return [HopExecutionState.AwaitingAllowanceApproval].includes(state)
+}
+
+const isInPermit2SignState = (state: HopExecutionState): boolean => {
+  return [HopExecutionState.AwaitingPermit2Eip712Sign].includes(state)
 }
 
 export const getCurrentStepperStep = (
@@ -123,6 +124,7 @@ export const getCurrentStepperStep = (
     if (hopExecutionState === HopExecutionState.AwaitingAllowanceReset)
       return StepperStep.FirstHopReset
     if (isInApprovalState(hopExecutionState)) return StepperStep.FirstHopApproval
+    if (isInPermit2SignState(hopExecutionState)) return StepperStep.FirstHopPermit2Sign
     if (hopExecutionState === HopExecutionState.AwaitingSwap) return StepperStep.FirstHopSwap
   } else if (currentHopIndex === 1) {
     if (hopExecutionState === HopExecutionState.AwaitingAllowanceReset)

From 8cd9ab3967e381ececec7bd9c22917a6d5a0594a Mon Sep 17 00:00:00 2001
From: gomes <17035424+gomesalexandre@users.noreply.github.com>
Date: Thu, 9 Jan 2025 01:17:24 +0400
Subject: [PATCH 2/2] feat: stylistic

---
 .../MultiHopTrade/components/TradeConfirm/helpers.ts          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts b/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts
index 67be52fa277..d35e55205b8 100644
--- a/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts
+++ b/src/components/MultiHopTrade/components/TradeConfirm/helpers.ts
@@ -106,11 +106,11 @@ export const countStepperSteps = (params: StepperStepParams): number => {
 }
 
 const isInApprovalState = (state: HopExecutionState): boolean => {
-  return [HopExecutionState.AwaitingAllowanceApproval].includes(state)
+  return state === HopExecutionState.AwaitingAllowanceApproval
 }
 
 const isInPermit2SignState = (state: HopExecutionState): boolean => {
-  return [HopExecutionState.AwaitingPermit2Eip712Sign].includes(state)
+  return state === HopExecutionState.AwaitingPermit2Eip712Sign
 }
 
 export const getCurrentStepperStep = (