fix: mark permit not syncing if not permitted (#5706)

* fix: mark permit not syncing if not permitted

* fix: clarify naming

* fix: show approval when loading

src/hooks/usePermit2.ts

@@ -20,13 +20,13 @@ enum SyncState {
 export enum PermitState {
   INVALID,
   LOADING,
-  PERMIT_NEEDED,
-  PERMITTED,
+  APPROVAL_OR_PERMIT_NEEDED,
+  APPROVAL_LOADING,
+  APPROVED_AND_PERMITTED,
 }
 
 export interface Permit {
   state: PermitState
-  isSyncing?: boolean
   signature?: PermitSignature
   callback?: () => Promise<{
     response: ContractTransaction
@@ -81,9 +81,8 @@ export default function usePermit(amount?: CurrencyAmount<Token>, spender?: stri
 
   // Permit2 should be marked syncing from the time approval is submitted (pending) until it is
   // synced in tokenAllowance, to avoid re-prompting the user for an already-submitted approval.
-  // It should *not* be marked syncing if not permitted, because the user must still take action.
   const [syncState, setSyncState] = useState(SyncState.SYNCED)
-  const isSyncing = isPermitted || isSigned ? false : syncState !== SyncState.SYNCED
+  const isApprovalLoading = syncState !== SyncState.SYNCED
   const hasPendingApproval = useHasPendingApproval(amount?.currency, PERMIT2_ADDRESS)
   useEffect(() => {
     if (hasPendingApproval) {
@@ -117,13 +116,25 @@ export default function usePermit(amount?: CurrencyAmount<Token>, spender?: stri
       return { state: PermitState.INVALID }
     } else if (!tokenAllowance || !permitAllowance) {
       return { state: PermitState.LOADING }
-    } else if (isAllowed) {
-      if (isPermitted) {
-        return { state: PermitState.PERMITTED }
-      } else if (isSigned) {
-        return { state: PermitState.PERMITTED, signature }
+    } else if (!(isPermitted || isSigned)) {
+      return { state: PermitState.APPROVAL_OR_PERMIT_NEEDED, callback }
+    } else if (!isAllowed) {
+      return {
+        state: isApprovalLoading ? PermitState.APPROVAL_LOADING : PermitState.APPROVAL_OR_PERMIT_NEEDED,
+        callback,
       }
+    } else {
+      return { state: PermitState.APPROVED_AND_PERMITTED, signature: isPermitted ? undefined : signature }
     }
-    return { state: PermitState.PERMIT_NEEDED, isSyncing, callback }
-  }, [amount, callback, isAllowed, isPermitted, isSigned, isSyncing, permitAllowance, signature, tokenAllowance])
+  }, [
+    amount,
+    callback,
+    isAllowed,
+    isApprovalLoading,
+    isPermitted,
+    isSigned,
+    permitAllowance,
+    signature,
+    tokenAllowance,
+  ])
 }

src/pages/Swap/index.tsx

@@ -299,7 +299,7 @@ export default function Swap({ className }: { className?: string }) {
     permit2Enabled ? maximumAmountIn : undefined,
     permit2Enabled && chainId ? UNIVERSAL_ROUTER_ADDRESS(chainId) : undefined
   )
-  const isApprovalPending = permit.isSyncing
+  const isApprovalLoading = permit.state === PermitState.APPROVAL_LOADING
   const [isPermitPending, setIsPermitPending] = useState(false)
   const [isPermitFailed, setIsPermitFailed] = useState(false)
   const addTransaction = useTransactionAdder()
@@ -786,10 +786,12 @@ export default function Swap({ className }: { className?: string }) {
                       </ButtonError>
                     </AutoColumn>
                   </AutoRow>
-                ) : isValid && permit.state === PermitState.PERMIT_NEEDED ? (
+                ) : isValid &&
+                  (permit.state === PermitState.APPROVAL_OR_PERMIT_NEEDED ||
+                    permit.state === PermitState.APPROVAL_LOADING) ? (
                   <ButtonYellow
                     onClick={updatePermit}
-                    disabled={isPermitPending || isApprovalPending}
+                    disabled={isPermitPending || isApprovalLoading}
                     style={{ gap: 14 }}
                   >
                     {isPermitPending ? (
@@ -806,7 +808,7 @@ export default function Swap({ className }: { className?: string }) {
                           <Trans>Approval failed. Try again.</Trans>
                         </ThemedText.SubHeader>
                       </>
-                    ) : isApprovalPending ? (
+                    ) : isApprovalLoading ? (
                       <>
                         <Loader size="20px" stroke={theme.accentWarning} />
                         <ThemedText.SubHeader color="accentWarning">