try manual approve if erc712 doesn't work (#1397)

* initial impl

* fix async logic

src/components/earn/StakingModal.tsx

@@ -128,7 +128,18 @@ export default function StakingModal({ isOpen, onDismiss, stakingInfo, userLiqui
     if (!pairContract || !library || !deadline) throw new Error('missing dependencies')
     if (!parsedAmount) throw new Error('missing liquidity amount')
 
-    return gatherPermitSignature ? gatherPermitSignature() : approveCallback()
+    if (gatherPermitSignature) {
+      try {
+        await gatherPermitSignature()
+      } catch (error) {
+        // try to approve if gatherPermitSignature failed for any reason other than the user rejecting it
+        if (error?.code !== 4001) {
+          await approveCallback()
+        }
+      }
+    } else {
+      await approveCallback()
+    }
   }
 
   return (

src/hooks/useERC20Permit.ts

@@ -219,7 +219,7 @@ export function useERC20Permit(
           message,
         })
 
-        library
+        return library
           .send('eth_signTypedData_v4', [account, data])
           .then(splitSignature)
           .then((signature) => {

src/pages/MigrateV2/MigrateV2Pair.tsx

@@ -239,7 +239,21 @@ function V2PairMigration({
   const { signatureData, gatherPermitSignature } = useV2LiquidityTokenPermit(pairBalance, migratorAddress)
 
   const approve = useCallback(async () => {
-    isNotUniswap ? approveManually() : gatherPermitSignature ? gatherPermitSignature() : approveManually()
+    if (isNotUniswap) {
+      // sushi has to be manually approved
+      await approveManually()
+    } else if (gatherPermitSignature) {
+      try {
+        await gatherPermitSignature()
+      } catch (error) {
+        // try to approve if gatherPermitSignature failed for any reason other than the user rejecting it
+        if (error?.code !== 4001) {
+          await approveManually()
+        }
+      }
+    } else {
+      await approveManually()
+    }
   }, [isNotUniswap, gatherPermitSignature, approveManually])
 
   const addTransaction = useTransactionAdder()

src/pages/RemoveLiquidity/index.tsx

@@ -109,7 +109,18 @@ export default function RemoveLiquidity({
     const liquidityAmount = parsedAmounts[Field.LIQUIDITY]
     if (!liquidityAmount) throw new Error('missing liquidity amount')
 
-    return gatherPermitSignature ? gatherPermitSignature() : approveCallback()
+    if (gatherPermitSignature) {
+      try {
+        await gatherPermitSignature()
+      } catch (error) {
+        // try to approve if gatherPermitSignature failed for any reason other than the user rejecting it
+        if (error?.code !== 4001) {
+          await approveCallback()
+        }
+      }
+    } else {
+      await approveCallback()
+    }
   }
 
   // wrapped onUserInput to clear signatures

src/pages/Swap/index.tsx

@@ -205,9 +205,19 @@ export default function Swap({ history }: RouteComponentProps) {
     allowedSlippage
   )
 
-  const handleApprove = useCallback(() => {
-    if (signatureState === UseERC20PermitState.NOT_SIGNED && gatherPermitSignature) gatherPermitSignature()
-    else approveCallback()
+  const handleApprove = useCallback(async () => {
+    if (signatureState === UseERC20PermitState.NOT_SIGNED && gatherPermitSignature) {
+      try {
+        await gatherPermitSignature()
+      } catch (error) {
+        // try to approve if gatherPermitSignature failed for any reason other than the user rejecting it
+        if (error?.code !== 4001) {
+          await approveCallback()
+        }
+      }
+    } else {
+      await approveCallback()
+    }
   }, [approveCallback, gatherPermitSignature, signatureState])
 
   // check if user has gone through approval process, used to show two step buttons, reset on token change