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

* fix: mark permit not syncing if not permitted

* fix: clarify naming

src/components/Swap/SwapActionButton/Permit2Button.tsx

@@ -3,7 +3,7 @@ import { PERMIT2_ADDRESS } from '@uniswap/permit2-sdk'
 import ActionButton from 'components/ActionButton'
 import EtherscanLink from 'components/EtherscanLink'
 import { usePendingApproval } from 'hooks/transactions'
-import { Permit } from 'hooks/usePermit2'
+import { Permit, PermitState } from 'hooks/usePermit2'
 import { Spinner } from 'icons'
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { ApprovalTransactionInfo } from 'state/transactions'
@@ -19,13 +19,8 @@ interface PermitButtonProps extends Permit {
  * An approving PermitButton.
  * Should only be rendered if a valid trade exists that is not yet permitted.
  */
-export default function PermitButton({
-  token,
-  isSyncing: isApprovalPending,
-  callback,
-  color,
-  onSubmit,
-}: PermitButtonProps) {
+export default function PermitButton({ token, state, callback, color, onSubmit }: PermitButtonProps) {
+  const isApprovalLoading = state === PermitState.APPROVAL_LOADING
   const [isPending, setIsPending] = useState(false)
   const [isFailed, setIsFailed] = useState(false)
   const pendingApproval = usePendingApproval(token, PERMIT2_ADDRESS)
@@ -54,7 +49,7 @@ export default function PermitButton({
         icon: Spinner,
         message: t`Approve in your wallet`,
       }
-    } else if (isApprovalPending) {
+    } else if (isApprovalLoading) {
       return {
         icon: Spinner,
         message: pendingApproval ? (
@@ -77,7 +72,7 @@ export default function PermitButton({
         onClick,
       }
     }
-  }, [isApprovalPending, isFailed, isPending, onClick, pendingApproval, token])
+  }, [isApprovalLoading, isFailed, isPending, onClick, pendingApproval, token])
 
   return (
     <ActionButton color={color} disabled={!action?.onClick} action={action}>

src/components/Swap/SwapActionButton/SwapButton.tsx

@@ -107,7 +107,10 @@ export default function SwapButton({
   }, [onReviewSwapClick])
 
   if (permit2Enabled) {
-    if (!disabled && permit.state === PermitState.PERMIT_NEEDED) {
+    if (
+      !disabled &&
+      (permit.state === PermitState.APPROVAL_OR_PERMIT_NEEDED || permit.state === PermitState.APPROVAL_LOADING)
+    ) {
       return <PermitButton color={color} onSubmit={onSubmit} {...permit} />
     }
   } else {

src/hooks/usePermit2.ts

@@ -19,14 +19,14 @@ enum SyncState {
 export enum PermitState {
   INVALID,
   LOADING,
-  PERMIT_NEEDED,
-  PERMITTED,
+  APPROVAL_OR_PERMIT_NEEDED,
+  APPROVAL_LOADING,
+  APPROVED_AND_PERMITTED,
 }
 
 export interface Permit {
   token?: Token
   state: PermitState
-  isSyncing?: boolean
   signature?: PermitSignature
   callback?: () => Promise<ApprovalTransactionInfo | void>
 }
@@ -74,9 +74,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 = Boolean(usePendingApproval(token, PERMIT2_ADDRESS))
   useEffect(() => {
     if (hasPendingApproval) {
@@ -108,18 +107,18 @@ export default function usePermit(amount?: CurrencyAmount<Token>, spender?: stri
   return useMemo(() => {
     if (!token) {
       return { state: PermitState.INVALID }
-    }
-
-    if (!tokenAllowance || !permitAllowance) {
+    } else if (!tokenAllowance || !permitAllowance) {
       return { token, state: PermitState.LOADING }
-    } else if (isAllowed) {
-      if (isPermitted) {
-        return { token, state: PermitState.PERMITTED }
-      } else if (isSigned) {
-        return { token, state: PermitState.PERMITTED, signature }
+    } else if (!(isPermitted || isSigned)) {
+      return { token, state: PermitState.APPROVAL_OR_PERMIT_NEEDED, callback }
+    } else if (!isAllowed) {
+      return {
+        token,
+        state: isApprovalLoading ? PermitState.APPROVAL_LOADING : PermitState.APPROVAL_OR_PERMIT_NEEDED,
+        callback,
       }
+    } else {
+      return { token, state: PermitState.APPROVED_AND_PERMITTED, signature: isPermitted ? undefined : signature }
     }
-
-    return { token, state: PermitState.PERMIT_NEEDED, isSyncing, callback }
-  }, [callback, isAllowed, isPermitted, isSigned, isSyncing, permitAllowance, signature, token, tokenAllowance])
+  }, [callback, isAllowed, isApprovalLoading, isPermitted, isSigned, permitAllowance, signature, token, tokenAllowance])
 }