Merge pull request #1674 from kleros/refactor/drawn-maintenance-button-improvement

refactor(web): improve-draw-maintenance-button

Author: jaybuidl

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

@@ -6,13 +6,16 @@ import { usePublicClient } from "wagmi";
 import { Button } from "@kleros/ui-components-library";
 
 import { useSimulateKlerosCoreDraw, useWriteKlerosCoreDraw } from "hooks/contracts/generated";
+import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import useDisputeMaintenanceQuery from "queries/useDisputeMaintenanceQuery";
 
 import { Period } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
+import { Phases } from "components/Phase";
+
 import { IBaseMaintenanceButton } from ".";
 
 const StyledButton = styled(Button)`
@@ -28,21 +31,22 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, perio
   const [isSending, setIsSending] = useState(false);
   const publicClient = usePublicClient();
   const { data: maintenanceData } = useDisputeMaintenanceQuery(id);
+  const { data: phase } = useSortitionModulePhase();
 
   const isDrawn = useMemo(() => maintenanceData?.dispute?.currentRound.jurorsDrawn, [maintenanceData]);
 
+  const canDraw = useMemo(
+    () => !isUndefined(maintenanceData) && !isDrawn && period === Period.Evidence && phase === Phases.drawing,
+    [maintenanceData, isDrawn, phase, period]
+  );
+
   const {
     data: drawConfig,
     isLoading: isLoadingConfig,
     isError,
   } = useSimulateKlerosCoreDraw({
     query: {
-      enabled:
-        !isUndefined(id) &&
-        !isUndefined(numberOfVotes) &&
-        !isUndefined(period) &&
-        period === Period.Evidence &&
-        !isDrawn,
+      enabled: !isUndefined(id) && !isUndefined(numberOfVotes) && !isUndefined(period) && canDraw,
     },
     args: [BigInt(id ?? 0), BigInt(numberOfVotes ?? 0)],
   });
@@ -51,9 +55,8 @@ 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 || isDrawn,
-    [id, numberOfVotes, isError, isLoading, period, isDrawn]
+    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading || !canDraw,
+    [id, numberOfVotes, isError, isLoading, canDraw]
   );
   const handleClick = () => {
     if (!drawConfig || !publicClient) return;