chore(web): update-dispute-population-flow

Author: tractorss

web/src/hooks/queries/useDisputeDetailsQuery.ts

@@ -30,6 +30,10 @@ const disputeDetailsQuery = graphql(`
         nbVotes
       }
       currentRoundIndex
+      isCrossChain
+      arbitrableChainId
+      externalDisputeId
+      templateId
     }
   }
 `);

web/src/hooks/queries/useEvidenceGroup.ts

@@ -1,22 +1,17 @@
 import { useQuery } from "@tanstack/react-query";
-import { getContract, HttpRequestError, PublicClient, RpcError } from "viem";
-import { usePublicClient } from "wagmi";
+import { HttpRequestError, RpcError } from "viem";
 
 import { executeActions } from "@kleros/kleros-sdk/src/dataMappings/executeActions";
 import { DisputeDetails } from "@kleros/kleros-sdk/src/dataMappings/utils/disputeDetailsTypes";
 import { populateTemplate } from "@kleros/kleros-sdk/src/dataMappings/utils/populateTemplate";
 
-import { GENESIS_BLOCK_ARBSEPOLIA } from "consts/index";
 import { useGraphqlBatcher } from "context/GraphqlBatcher";
-import { iArbitrableV2Abi } from "hooks/contracts/generated";
-import { useEvidenceGroup } from "queries/useEvidenceGroup";
 import { debounceErrorToast } from "utils/debounceErrorToast";
 import { isUndefined } from "utils/index";
-import { DEFAULT_CHAIN } from "consts/chains";
 
 import { graphql } from "src/graphql";
 
-import { useIsCrossChainDispute } from "../useIsCrossChainDispute";
+import { useDisputeDetailsQuery } from "./useDisputeDetailsQuery";
 
 const disputeTemplateQuery = graphql(`
   query DisputeTemplate($id: ID!) {
@@ -30,33 +25,27 @@ const disputeTemplateQuery = graphql(`
 `);
 
 export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?: `0x${string}`) => {
-  const publicClient = usePublicClient();
-  const { data: crossChainData, isError } = useIsCrossChainDispute(disputeID, arbitrableAddress);
+  const { data: disputeData } = useDisputeDetailsQuery(disputeID);
   const { graphqlBatcher } = useGraphqlBatcher();
-  const { data: externalDisputeID } = useEvidenceGroup(disputeID, arbitrableAddress);
   const isEnabled =
     !isUndefined(disputeID) &&
-    !isUndefined(crossChainData) &&
-    !isUndefined(arbitrableAddress) &&
-    !isUndefined(externalDisputeID);
+    !isUndefined(disputeData) &&
+    !isUndefined(disputeData?.dispute) &&
+    !isUndefined(disputeData.dispute?.arbitrableChainId) &&
+    !isUndefined(disputeData.dispute?.externalDisputeId) &&
+    !isUndefined(disputeData.dispute?.templateId);
 
   return useQuery<DisputeDetails>({
-    queryKey: [`DisputeTemplate${disputeID}${arbitrableAddress}${externalDisputeID}`],
+    queryKey: [`DisputeTemplate${disputeID}${arbitrableAddress}${disputeData?.dispute?.externalDisputeId}`],
     enabled: isEnabled,
     staleTime: Infinity,
     queryFn: async () => {
-      if (isEnabled && !isError) {
+      if (isEnabled) {
         try {
-          const { isCrossChainDispute, crossChainTemplateId } = crossChainData;
-
-          const templateId = isCrossChainDispute
-            ? crossChainTemplateId
-            : await getTemplateId(arbitrableAddress, disputeID, publicClient);
-
           const { disputeTemplate } = await graphqlBatcher.fetch({
             id: crypto.randomUUID(),
             document: disputeTemplateQuery,
-            variables: { id: templateId.toString() },
+            variables: { id: disputeData.dispute?.templateId.toString() },
             isDisputeTemplate: true,
           });
 
@@ -66,10 +55,10 @@ export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?:
           const initialContext = {
             disputeID: disputeID,
             arbitrableAddress: arbitrableAddress,
-            arbitrableChainID: isCrossChainDispute ? crossChainData.crossChainId.toString() : DEFAULT_CHAIN.toString(),
+            arbitrableChainID: disputeData.dispute?.arbitrableChainId,
             graphApiKey: import.meta.env.REACT_APP_GRAPH_API_KEY,
             alchemyApiKey: import.meta.env.ALCHEMY_API_KEY,
-            externalDisputeID: externalDisputeID,
+            externalDisputeID: disputeData.dispute?.externalDisputeId,
           };
 
           const data = dataMappings ? await executeActions(JSON.parse(dataMappings), initialContext) : {};
@@ -88,28 +77,3 @@ export const usePopulatedDisputeData = (disputeID?: string, arbitrableAddress?:
     },
   });
 };
-
-const getTemplateId = async (
-  arbitrableAddress: `0x${string}`,
-  disputeID: string,
-  publicClient: PublicClient
-): Promise<bigint> => {
-  const arbitrable = getContract({
-    abi: iArbitrableV2Abi,
-    address: arbitrableAddress,
-    client: { public: publicClient },
-  });
-  const disputeFilter = await arbitrable.createEventFilter.DisputeRequest(
-    {
-      _arbitrableDisputeID: BigInt(disputeID),
-    },
-    {
-      fromBlock: GENESIS_BLOCK_ARBSEPOLIA,
-      toBlock: "latest",
-    }
-  );
-  const disputeEvents = await publicClient.getFilterLogs({
-    filter: disputeFilter,
-  });
-  return disputeEvents[0].args._templateId ?? 0n;
-};

web/src/hooks/queries/usePopulatedDisputeData.ts

@@ -8,7 +8,7 @@ import { Button } from "@kleros/ui-components-library";
 
 import DownArrow from "svgs/icons/arrow-down.svg";
 
-import { useEvidenceGroup } from "queries/useEvidenceGroup";
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { useEvidences } from "queries/useEvidences";
 
 import { responsiveSize } from "styles/responsiveSize";
@@ -54,14 +54,14 @@ const ScrollButton = styled(Button)`
   }
 `;
 
-const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
+const Evidence: React.FC = () => {
   const { id } = useParams();
-  const { data: evidenceGroup } = useEvidenceGroup(id, arbitrable);
+  const { data: disputeData } = useDisputeDetailsQuery(id);
   const ref = useRef<HTMLDivElement>(null);
   const [search, setSearch] = useState<string>();
   const [debouncedSearch, setDebouncedSearch] = useState<string>();
 
-  const { data } = useEvidences(evidenceGroup?.toString(), debouncedSearch);
+  const { data } = useEvidences(disputeData?.dispute?.externalDisputeId?.toString(), debouncedSearch);
 
   useDebounce(() => setDebouncedSearch(search), 500, [search]);
 
@@ -76,7 +76,7 @@ const Evidence: React.FC<{ arbitrable?: `0x${string}` }> = ({ arbitrable }) => {
 
   return (
     <Container ref={ref}>
-      <EvidenceSearch {...{ search, setSearch, evidenceGroup }} />
+      <EvidenceSearch {...{ search, setSearch, evidenceGroup: disputeData?.dispute?.externalDisputeId }} />
       <ScrollButton small Icon={DownArrow} text="Scroll to latest" onClick={scrollToLatest} />
       {data ? (
         data.evidences.map(({ evidence, sender, timestamp, name, description, fileURI, evidenceIndex }) => (

web/src/hooks/useIsCrossChainDispute.ts

@@ -64,7 +64,7 @@ const CaseDetails: React.FC = () => {
                 <Overview currentPeriodIndex={currentPeriodIndex} courtID={dispute?.court.id} {...{ arbitrable }} />
               }
             />
-            <Route path="evidence" element={<Evidence {...{ arbitrable }} />} />
+            <Route path="evidence" element={<Evidence />} />
             <Route path="voting" element={<Voting {...{ arbitrable, currentPeriodIndex }} />} />
             <Route path="appeal" element={<Appeal {...{ currentPeriodIndex }} />} />
             <Route path="*" element={<Navigate to="overview" replace />} />