refactor(web): update-draw-jurors-call-condition

Author: tractorss

web/src/hooks/queries/useDisputeMaintenanceQuery.ts

@@ -0,0 +1,51 @@
+import { useQuery } from "@tanstack/react-query";
+
+import { useGraphqlBatcher } from "context/GraphqlBatcher";
+
+import { graphql } from "src/graphql";
+import { DisputeMaintenanceQuery } from "src/graphql/graphql";
+import { isUndefined } from "src/utils";
+
+const disputeMaintenance = graphql(`
+  query DisputeMaintenance($disputeId: ID!, $disputeIdAsString: String!) {
+    dispute(id: $disputeId) {
+      currentRound {
+        jurorsDrawn
+      }
+      rounds {
+        jurorRewardsDispersed
+        nbVotes
+      }
+    }
+    contributions(where: { coreDispute: $disputeIdAsString }) {
+      contributor {
+        id
+      }
+      ... on ClassicContribution {
+        choice
+        rewardWithdrawn
+      }
+      coreDispute {
+        currentRoundIndex
+      }
+    }
+  }
+`);
+
+const useDisputeMaintenanceQuery = (id?: string) => {
+  const isEnabled = !isUndefined(id);
+
+  const { graphqlBatcher } = useGraphqlBatcher();
+  return useQuery<DisputeMaintenanceQuery>({
+    queryKey: [`disputeMaintenanceQuery-${id}`],
+    enabled: isEnabled,
+    queryFn: async () =>
+      await graphqlBatcher.fetch({
+        id: crypto.randomUUID(),
+        document: disputeMaintenance,
+        variables: { disputeId: id?.toString(), disputeIdAsString: id?.toString() },
+      }),
+  });
+};
+
+export default useDisputeMaintenanceQuery;

web/src/pages/Cases/CaseDetails/MaintenanceButtons/DrawButton.tsx

@@ -8,6 +8,8 @@ import { Button } from "@kleros/ui-components-library";
 import { useSimulateKlerosCoreDraw, useWriteKlerosCoreDraw } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 
+import useDisputeMaintenanceQuery from "queries/useDisputeMaintenanceQuery";
+
 import { Period } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
@@ -25,14 +27,22 @@ interface IDrawButton extends IBaseMaintenanceButton {
 const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, period }) => {
   const [isSending, setIsSending] = useState(false);
   const publicClient = usePublicClient();
+  const { data: maintenanceData } = useDisputeMaintenanceQuery(id);
+
+  const isDrawn = useMemo(() => maintenanceData?.dispute?.currentRound.jurorsDrawn, [maintenanceData]);
 
   const {
     data: drawConfig,
     isLoading: isLoadingConfig,
     isError,
   } = useSimulateKlerosCoreDraw({
     query: {
-      enabled: !isUndefined(id) && !isUndefined(numberOfVotes) && !isUndefined(period) && period === Period.Evidence,
+      enabled:
+        !isUndefined(id) &&
+        !isUndefined(numberOfVotes) &&
+        !isUndefined(period) &&
+        period === Period.Evidence &&
+        !isDrawn,
     },
     args: [BigInt(id ?? 0), BigInt(numberOfVotes ?? 0)],
   });
@@ -41,11 +51,12 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, perio
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(
-    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading || period !== Period.Evidence,
-    [id, numberOfVotes, isError, isLoading, period]
+    () =>
+      isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading || period !== Period.Evidence || isDrawn,
+    [id, numberOfVotes, isError, isLoading, period, isDrawn]
   );
   const handleClick = () => {
-    if (!drawConfig) return;
+    if (!drawConfig || !publicClient) return;
 
     setIsSending(true);
 

web/src/pages/Cases/CaseDetails/MaintenanceButtons/PassPeriodButton.tsx

@@ -8,6 +8,8 @@ import { Button } from "@kleros/ui-components-library";
 import { useSimulateKlerosCorePassPeriod, useWriteKlerosCorePassPeriod } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 
+import useDisputeMaintenanceQuery from "queries/useDisputeMaintenanceQuery";
+
 import { Period } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
@@ -24,14 +26,21 @@ interface IPassPeriodButton extends IBaseMaintenanceButton {
 const PassPeriodButton: React.FC<IPassPeriodButton> = ({ id, setIsOpen, period }) => {
   const [isSending, setIsSending] = useState(false);
   const publicClient = usePublicClient();
+  const { data: maintenanceData } = useDisputeMaintenanceQuery(id);
+
+  const isDrawn = useMemo(() => maintenanceData?.dispute?.currentRound.jurorsDrawn, [maintenanceData]);
 
   const {
     data: passPeriodConfig,
     isLoading: isLoadingConfig,
     isError,
   } = useSimulateKlerosCorePassPeriod({
     query: {
-      enabled: !isUndefined(id) && !isUndefined(period) && period !== Period.Execution,
+      enabled:
+        !isUndefined(id) &&
+        !isUndefined(period) &&
+        period !== Period.Execution &&
+        !(period === Period.Evidence && !isDrawn),
     },
     args: [BigInt(id ?? 0)],
   });
@@ -40,11 +49,12 @@ const PassPeriodButton: React.FC<IPassPeriodButton> = ({ id, setIsOpen, period }
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(
-    () => isUndefined(id) || isError || isLoading || period === Period.Execution,
-    [id, isError, isLoading, period]
+    () =>
+      isUndefined(id) || isError || isLoading || period === Period.Execution || (period === Period.Evidence && isDrawn),
+    [id, isError, isLoading, period, isDrawn]
   );
   const handleClick = () => {
-    if (!passPeriodConfig) return;
+    if (!passPeriodConfig || !publicClient) return;
 
     setIsSending(true);