chore: use-parse-wagmi-error-function

Author: tractorss

web-devtools/src/utils/parseWagmiError.ts

@@ -0,0 +1,17 @@
+import { type SimulateContractErrorType } from "@wagmi/core";
+
+type ExtendedWagmiError = SimulateContractErrorType & { shortMessage?: string; metaMessages?: string[] };
+
+/**
+ * @param error
+ * @description Tries to extract the human readable error message, otherwise reverts to error.message
+ * @returns Human readable error if possible
+ */
+export const parseWagmiError = (error: SimulateContractErrorType) => {
+  const extError = error as ExtendedWagmiError;
+
+  const metaMessage = extError?.metaMessages?.[0];
+  const shortMessage = extError?.shortMessage;
+
+  return metaMessage ?? shortMessage ?? error.message;
+};

web-devtools/src/utils/wrapWithToast.ts

@@ -1,6 +1,8 @@
 import { toast, ToastPosition, Theme } from "react-toastify";
 import { type PublicClient, type TransactionReceipt } from "viem";
 
+import { parseWagmiError } from "./parseWagmiError";
+
 export const OPTIONS = {
   position: "top-center" as ToastPosition,
   autoClose: 5000,
@@ -35,11 +37,11 @@ export async function wrapWithToast(
         })
     )
     .catch((error) => {
-      toast.error(error.shortMessage ?? error.message, OPTIONS);
+      toast.error(parseWagmiError(error), OPTIONS);
       return { status: false };
     });
 }
 
 export async function catchShortMessage(promise: Promise<any>) {
-  return await promise.catch((error) => toast.error(error.shortMessage ?? error.message, OPTIONS));
+  return await promise.catch((error) => toast.error(parseWagmiError(error), OPTIONS));
 }

web/src/utils/wrapWithToast.ts

@@ -1,6 +1,8 @@
 import { toast, ToastPosition, Theme } from "react-toastify";
 import { PublicClient, TransactionReceipt } from "viem";
 
+import { parseWagmiError } from "./parseWagmiError";
+
 export const OPTIONS = {
   position: "top-center" as ToastPosition,
   autoClose: 5000,
@@ -39,11 +41,11 @@ export async function wrapWithToast(
         })
     )
     .catch((error) => {
-      toast.error(error.shortMessage ?? error.message, OPTIONS);
+      toast.error(parseWagmiError(error), OPTIONS);
       return { status: false };
     });
 }
 
 export async function catchShortMessage(promise: Promise<any>) {
-  return await promise.catch((error) => toast.error(error.shortMessage ?? error.message, OPTIONS));
+  return await promise.catch((error) => toast.error(parseWagmiError(error), OPTIONS));
 }