feat: decode metamask transaction error

package.json

@@ -50,6 +50,7 @@
     "countries-and-timezones": "^3.6.0",
     "dotenv": "^16.4.4",
     "ethers": "^5.7.2",
+    "@ariesgun/ethers-decode-error": "^1.1.0",
     "npm-run-all": "^4.1.5",
     "zod": "^3.23.8"
   },

static/scripts/rewards/toaster.ts

@@ -74,4 +74,13 @@ export type MetaMaskError = {
       hex: "0x012c5a";
     };
   };
+  error: {
+    code: string;
+    message: string;
+    data: {
+      code: string;
+      message: string;
+      data: string;
+    };
+  };
 };

static/scripts/rewards/web3/erc20-permit.ts

@@ -9,6 +9,7 @@ import { buttonController, getMakeClaimButton, viewClaimButton } from "../button
 import { toaster, errorToast, MetaMaskError } from "../toaster";
 import { connectWallet } from "./connect-wallet";
 import { convertToNetworkId } from "./use-rpc-handler";
+import { decodeError } from "@ariesgun/ethers-decode-error";
 
 export async function fetchTreasury(permit: Permit): Promise<{ balance: BigNumber; allowance: BigNumber; decimals: number; symbol: string }> {
   let balance: BigNumber, allowance: BigNumber, decimals: number, symbol: string;
@@ -89,9 +90,9 @@ export async function transferFromPermit(permit2Contract: Contract, reward: Perm
         buttonController.hideLoader();
         buttonController.showMakeClaim();
       } else {
-        // Handle other errors
-        console.error("Error in permitTransferFrom:", e);
-        errorToast(e, e.reason);
+        console.error(e);
+        const { error } = decodeError(e, permit2Abi);
+        errorToast(e, `Error in permitTransferFrom: ${error}`);
       }
     }
     return null;
@@ -272,11 +273,12 @@ invalidateButton.addEventListener("click", async function invalidateButtonClickH
 
     if (!app.signer) return;
     await invalidateNonce(app.signer, app.reward.nonce);
-  } catch (error: unknown) {
-    if (error instanceof Error) {
-      const e = error as unknown as MetaMaskError;
+  } catch (err: unknown) {
+    if (err instanceof Error) {
+      const e = err as unknown as MetaMaskError;
       console.error(e);
-      errorToast(e, e.reason);
+      const { error } = decodeError(e, permit2Abi);
+      errorToast(e, `Error in invalidateNonce: ${error}`);
       return;
     }
   }

static/scripts/rewards/web3/erc721-permit.ts

@@ -3,9 +3,10 @@ import { ERC721Permit } from "@ubiquibot/permit-generation/types";
 import { BigNumber, ethers } from "ethers";
 import { nftRewardAbi } from "../abis/nft-reward-abi";
 import { app } from "../app-state";
-import { toaster } from "../toaster";
+import { errorToast, MetaMaskError, toaster } from "../toaster";
 import { buttonController, getMakeClaimButton } from "../button-controller";
 import { connectWallet } from "./connect-wallet";
+import { decodeError } from "@ariesgun/ethers-decode-error";
 
 export function claimErc721PermitHandler(reward: ERC721Permit) {
   return async function claimHandler() {
@@ -33,7 +34,6 @@ export function claimErc721PermitHandler(reward: ERC721Permit) {
     buttonController.showLoader();
     try {
       const nftContract = new ethers.Contract(reward.tokenAddress, nftRewardAbi, signer);
-
       const tx: TransactionResponse = await nftContract.safeMint(
         {
           beneficiary: reward.beneficiary,
@@ -62,7 +62,16 @@ export function claimErc721PermitHandler(reward: ERC721Permit) {
     } catch (error: unknown) {
       console.error(error);
       if (error instanceof Error) {
-        toaster.create("error", `Error claiming NFT: ${error.message}`);
+        const e = error as unknown as MetaMaskError;
+        if (e.code == "ACTION_REJECTED") {
+          // Handle the user rejection case
+          toaster.create("info", `Transaction was not sent because it was rejected by the user.`);
+          buttonController.hideLoader();
+          buttonController.showMakeClaim();
+        } else {
+          const { error } = decodeError(e, nftRewardAbi);
+          errorToast(e, `Error in permitTransferFrom: ${error}`);
+        }
       } else if (typeof error === "string") {
         toaster.create("error", `Error claiming NFT: ${error}`);
       } else {