chore(web): function-to-parse-wagmi-simulate-error

Author: tractorss

web/src/pages/Courts/CourtDetails/StakePanel/StakeWithdrawButton.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback, useEffect, useMemo } from "react";
+import styled from "styled-components";
 
 import { useParams } from "react-router-dom";
 import { useAccount, usePublicClient } from "wagmi";
@@ -19,10 +20,10 @@ import {
 } from "hooks/contracts/generated";
 import { useCourtDetails } from "hooks/queries/useCourtDetails";
 import { isUndefined } from "utils/index";
+import { parseWagmiError } from "utils/parseWagmiError";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import { EnsureChain } from "components/EnsureChain";
-import styled from "styled-components";
 
 export enum ActionType {
   allowance = "allowance",
@@ -154,9 +155,9 @@ const StakeWithdrawButton: React.FC<IActionButton> = ({
 
   useEffect(() => {
     if (setStakeError) {
-      setErrorMsg(setStakeError?.shortMessage ?? setStakeError.message);
+      setErrorMsg(parseWagmiError(setStakeError));
     }
-  }, [setStakeError]);
+  }, [setStakeError, setErrorMsg]);
 
   const { text, checkDisabled, onClick } = buttonProps[isAllowance ? ActionType.allowance : action];
   return (

web/src/pages/Resolver/NavigationButtons/SubmitDisputeButton.tsx

@@ -14,13 +14,13 @@ import {
   useSimulateDisputeResolverCreateDisputeForTemplate,
 } from "hooks/contracts/generated";
 import { isUndefined } from "utils/index";
+import { parseWagmiError } from "utils/parseWagmiError";
 import { prepareArbitratorExtradata } from "utils/prepareArbitratorExtradata";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import { EnsureChain } from "components/EnsureChain";
-import Popup, { PopupType } from "components/Popup";
-
 import { ErrorButtonMessage } from "components/ErrorButtonMessage";
+import Popup, { PopupType } from "components/Popup";
 import ClosedCircleIcon from "components/StyledIcons/ClosedCircleIcon";
 
 const StyledButton = styled(Button)``;
@@ -66,7 +66,7 @@ const SubmitDisputeButton: React.FC = () => {
   const errorMsg = useMemo(() => {
     if (insufficientBalance) return "Insufficient balance";
     else if (error) {
-      return error?.shortMessage ?? error.message;
+      return parseWagmiError(error);
     }
     return null;
   }, [error, insufficientBalance]);

web/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;
+};