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

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(" | ");
+};