fix: only prompt for necessary approval/permit (#5575)

src/hooks/usePermit2.ts

@@ -19,7 +19,7 @@ export enum PermitState {
 export interface Permit {
   state: PermitState
   signature?: PermitSignature
-  callback?: () => Promise<{
+  callback?: (sPendingApproval: boolean) => Promise<{
     response: ContractTransaction
     info: ApproveTransactionInfo
   } | void>
@@ -29,10 +29,18 @@ export default function usePermit(amount?: CurrencyAmount<Token>, spender?: stri
   const { account } = useWeb3React()
   const tokenAllowance = useTokenAllowance(amount?.currency, account, PERMIT2_ADDRESS)
   const updateTokenAllowance = useUpdateTokenAllowance(amount, PERMIT2_ADDRESS)
+  const isAllowed = useMemo(
+    () => amount && (tokenAllowance?.greaterThan(amount) || tokenAllowance?.equalTo(amount)),
+    [amount, tokenAllowance]
+  )
 
   const permitAllowance = usePermitAllowance(amount?.currency, spender)
   const [permitAllowanceAmount, setPermitAllowanceAmount] = useState(permitAllowance?.amount)
   useEffect(() => setPermitAllowanceAmount(permitAllowance?.amount), [permitAllowance?.amount])
+  const isPermitted = useMemo(
+    () => amount && permitAllowanceAmount?.gte(amount.quotient.toString()),
+    [amount, permitAllowanceAmount]
+  )
 
   const [signature, setSignature] = useState<PermitSignature>()
   const updatePermitAllowance = useUpdatePermitAllowance(
@@ -41,12 +49,10 @@ export default function usePermit(amount?: CurrencyAmount<Token>, spender?: stri
     permitAllowance?.nonce,
     setSignature
   )
-
-  const updateTokenAndPermitAllowance = useCallback(async () => {
-    const info = await updateTokenAllowance()
-    await updatePermitAllowance()
-    return info
-  }, [updatePermitAllowance, updateTokenAllowance])
+  const isSigned = useMemo(
+    () => amount && signature?.details.token === amount?.currency.address && signature?.spender === spender,
+    [amount, signature?.details.token, signature?.spender, spender]
+  )
 
   // Trigger a re-render if either tokenAllowance or signature expire.
   useInterval(
@@ -64,27 +70,30 @@ export default function usePermit(amount?: CurrencyAmount<Token>, spender?: stri
     true
   )
 
+  const callback = useCallback(
+    async (isPendingApproval: boolean) => {
+      let info
+      if (!isAllowed && !isPendingApproval) {
+        info = await updateTokenAllowance()
+      }
+      if (!isPermitted && !isSigned) {
+        await updatePermitAllowance()
+      }
+      return info
+    },
+    [isAllowed, isPermitted, isSigned, updatePermitAllowance, updateTokenAllowance]
+  )
+
   return useMemo(() => {
     if (!amount || !tokenAllowance) {
       return { state: PermitState.UNKNOWN }
-    } else if (tokenAllowance.greaterThan(amount) || tokenAllowance.equalTo(amount)) {
-      if (permitAllowanceAmount?.gte(amount.quotient.toString())) {
+    } else if (isAllowed) {
+      if (isPermitted) {
         return { state: PermitState.PERMITTED }
-      } else if (signature?.details.token === amount.currency.address && signature?.spender === spender) {
+      } else if (isSigned) {
         return { state: PermitState.PERMITTED, signature }
-      } else {
-        return { state: PermitState.PERMIT_NEEDED, callback: updatePermitAllowance }
       }
-    } else {
-      return { state: PermitState.PERMIT_NEEDED, callback: updateTokenAndPermitAllowance }
     }
-  }, [
-    amount,
-    permitAllowanceAmount,
-    signature,
-    spender,
-    tokenAllowance,
-    updatePermitAllowance,
-    updateTokenAndPermitAllowance,
-  ])
+    return { state: PermitState.PERMIT_NEEDED, callback }
+  }, [amount, callback, isAllowed, isPermitted, isSigned, signature, tokenAllowance])
 }

src/pages/Swap/index.tsx

@@ -308,7 +308,7 @@ export default function Swap() {
   const updatePermit = useCallback(async () => {
     setIsPermitPending(true)
     try {
-      const approval = await permit.callback?.()
+      const approval = await permit.callback?.(isApprovalPending)
       if (approval) {
         sendAnalyticsEvent(EventName.APPROVE_TOKEN_TXN_SUBMITTED, {
           chain_id: chainId,
@@ -326,7 +326,14 @@ export default function Swap() {
     } finally {
       setIsPermitPending(false)
     }
-  }, [addTransaction, chainId, maximumAmountIn?.currency.address, maximumAmountIn?.currency.symbol, permit])
+  }, [
+    addTransaction,
+    chainId,
+    isApprovalPending,
+    maximumAmountIn?.currency.address,
+    maximumAmountIn?.currency.symbol,
+    permit,
+  ])
 
   // check whether the user has approved the router on the input token
   const [approvalState, approveCallback] = useApproveCallbackFromTrade(