Merge pull request #1762 from kleros/chore/parse-wagmi-simulate-error

chore(web): better-error-display-and-evidence-search

Author: alcercu

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/components/FileViewer/index.tsx

@@ -28,7 +28,7 @@ const StyledDocViewer = styled(DocViewer)`
  * @returns renders the file
  */
 const FileViewer: React.FC<{ url: string }> = ({ url }) => {
-  const docs = [{ uri: url }];
+  const docs = [{ uri: url, fileName: fileNameIfIpfsUrl(url) }];
   return (
     <Wrapper className="file-viewer-wrapper">
       <StyledDocViewer
@@ -50,4 +50,24 @@ const FileViewer: React.FC<{ url: string }> = ({ url }) => {
   );
 };
 
+const fileNameIfIpfsUrl = (url: string) => {
+  if (!url || typeof url !== "string") {
+    return "document";
+  }
+  const ipfsPattern = /(?:ipfs:\/\/|https?:\/\/(?:[A-Za-z0-9.-]+)\/ipfs\/)([A-Za-z0-9]+[A-Za-z0-9\-_]*)\/?(.*)/;
+
+  const match = ipfsPattern.exec(url);
+
+  if (match) {
+    const ipfsHash = match[1];
+    const path = match[2] || "";
+
+    const sanitizedPath = path.replace(/\//g, "_");
+
+    return `ipfs-${ipfsHash}${sanitizedPath ? "_" + sanitizedPath : ""}`;
+  } else {
+    return "document";
+  }
+};
+
 export default FileViewer;

web/src/hooks/queries/useEvidences.ts

@@ -2,6 +2,7 @@ import { useQuery } from "@tanstack/react-query";
 
 import { REFETCH_INTERVAL } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
+import { transformSearch } from "utils/transformSearch";
 
 import { graphql } from "src/graphql";
 import { EvidenceDetailsFragment, EvidencesQuery } from "src/graphql/graphql";
@@ -45,6 +46,8 @@ export const useEvidences = (evidenceGroup?: string, keywords?: string) => {
   const { graphqlBatcher } = useGraphqlBatcher();
 
   const document = keywords ? evidenceSearchQuery : evidencesQuery;
+  const transformedKeywords = transformSearch(keywords);
+
   return useQuery<{ evidences: EvidenceDetailsFragment[] }>({
     queryKey: [keywords ? `evidenceSearchQuery${evidenceGroup}-${keywords}` : `evidencesQuery${evidenceGroup}`],
     enabled: isEnabled,
@@ -53,7 +56,7 @@ export const useEvidences = (evidenceGroup?: string, keywords?: string) => {
       const result = await graphqlBatcher.fetch({
         id: crypto.randomUUID(),
         document: document,
-        variables: { evidenceGroupID: evidenceGroup?.toString(), keywords: keywords },
+        variables: { evidenceGroupID: evidenceGroup?.toString(), keywords: transformedKeywords },
       });
 
       return keywords ? { evidences: [...result.evidenceSearch] } : result;

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

web/src/utils/transformSearch.ts

@@ -0,0 +1,16 @@
+/**
+ *
+ * @param searchString
+ * @returns A search string to better search with fullTextSearch
+ */
+export const transformSearch = (searchString?: string) => {
+  if (!searchString) return null;
+  const words = searchString
+    .split(/\s+/)
+    .map((word) => word.trim())
+    .filter(Boolean);
+
+  const transformedWords = words.map((word) => `${word} | ${word}:*`);
+
+  return transformedWords.join(" | ");
+};

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));
 }