refactor(web): better-disabling-conditions-for-buttons

Author: Harman-singh-waraich

web/src/hooks/useTransactionBatcher.tsx

@@ -8,8 +8,14 @@ import { useSimulateTransactionBatcherBatchSend, useWriteTransactionBatcherBatch
 
 export type TransactionBatcherConfig = SimulateContractParameters[];
 
+type TransactionBatcherOptions = {
+  // determines if simulation query is enabled
+  enabled: boolean;
+};
+
 /**
  * @param configs SimulateContractParameters[] - an array of useWriteContract Parameters
+ * @param options TransactionBatcherOptions - an object containing options to apply to hook behaviour
  * @description This takes in multiple write calls and batches them into a single transaction
  * @example useTransactionBatcher([
  *                 { address : "contract one address",
@@ -26,15 +32,18 @@ export type TransactionBatcherConfig = SimulateContractParameters[];
  *                 },
  *                ])
  */
-const useTransactionBatcher = (configs?: TransactionBatcherConfig) => {
+const useTransactionBatcher = (
+  configs?: TransactionBatcherConfig,
+  options: TransactionBatcherOptions = { enabled: true }
+) => {
   const validatedConfigs = configs ?? [];
   const {
     data: batchConfig,
     isLoading,
     isError,
   } = useSimulateTransactionBatcherBatchSend({
     query: {
-      enabled: !isUndefined(configs),
+      enabled: !isUndefined(configs) && options.enabled,
     },
     args: [
       validatedConfigs.map((config) => config?.address),

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

@@ -10,6 +10,7 @@ import { klerosCoreAbi, klerosCoreAddress } from "hooks/contracts/generated";
 import useTransactionBatcher, { type TransactionBatcherConfig } from "hooks/useTransactionBatcher";
 import { wrapWithToast } from "utils/wrapWithToast";
 
+import { Period } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
 import { IBaseMaintenanceButton } from ".";
@@ -21,9 +22,10 @@ const StyledButton = styled(Button)`
 interface IDistributeRewards extends IBaseMaintenanceButton {
   numberOfVotes?: string;
   roundIndex?: string;
+  period?: string;
 }
 
-const DistributeRewards: React.FC<IDistributeRewards> = ({ id, numberOfVotes, roundIndex, setIsOpen }) => {
+const DistributeRewards: React.FC<IDistributeRewards> = ({ id, numberOfVotes, roundIndex, setIsOpen, period }) => {
   const [isSending, setIsSending] = useState(false);
   const [contractConfigs, setContractConfigs] = useState<TransactionBatcherConfig>();
   const publicClient = usePublicClient();
@@ -51,12 +53,18 @@ const DistributeRewards: React.FC<IDistributeRewards> = ({ id, numberOfVotes, ro
     setContractConfigs(argsArr);
   }, [id, roundIndex, numberOfVotes, chainId]);
 
-  const { executeBatch, isLoading: isLoadingConfig, isError } = useTransactionBatcher(contractConfigs);
+  const {
+    executeBatch,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useTransactionBatcher(contractConfigs, {
+    enabled: !isUndefined(period) && period === Period.Execution,
+  });
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(
-    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading,
-    [id, numberOfVotes, isError, isLoading]
+    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading || period !== Period.Execution,
+    [id, numberOfVotes, isError, isLoading, period]
   );
 
   const handleClick = () => {

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

@@ -8,6 +8,7 @@ import { Button } from "@kleros/ui-components-library";
 import { useSimulateKlerosCoreDraw, useWriteKlerosCoreDraw } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 
+import { Period } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
 import { IBaseMaintenanceButton } from ".";
@@ -18,9 +19,10 @@ const StyledButton = styled(Button)`
 
 interface IDrawButton extends IBaseMaintenanceButton {
   numberOfVotes?: string;
+  period?: string;
 }
 
-const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen }) => {
+const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, period }) => {
   const [isSending, setIsSending] = useState(false);
   const publicClient = usePublicClient();
 
@@ -30,7 +32,7 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen }) =>
     isError,
   } = useSimulateKlerosCoreDraw({
     query: {
-      enabled: !isUndefined(id) && !isUndefined(numberOfVotes),
+      enabled: !isUndefined(id) && !isUndefined(numberOfVotes) && !isUndefined(period) && period === Period.Evidence,
     },
     args: [BigInt(id ?? 0), BigInt(numberOfVotes ?? 0)],
   });
@@ -39,8 +41,8 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen }) =>
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(
-    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading,
-    [id, numberOfVotes, isError, isLoading]
+    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading || period !== Period.Evidence,
+    [id, numberOfVotes, isError, isLoading, period]
   );
   const handleClick = () => {
     if (!drawConfig) return;

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

@@ -8,6 +8,7 @@ import { Button } from "@kleros/ui-components-library";
 import { useSimulateKlerosCoreExecuteRuling, useWriteKlerosCoreExecuteRuling } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 
+import { Period } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
 import { IBaseMaintenanceButton } from ".";
@@ -16,9 +17,12 @@ const StyledButton = styled(Button)`
   width: 100%;
 `;
 
-type IExecuteRulingButton = IBaseMaintenanceButton;
+interface IExecuteRulingButton extends IBaseMaintenanceButton {
+  period?: string;
+  ruled?: boolean;
+}
 
-const ExecuteRulingButton: React.FC<IExecuteRulingButton> = ({ id, setIsOpen }) => {
+const ExecuteRulingButton: React.FC<IExecuteRulingButton> = ({ id, setIsOpen, period, ruled }) => {
   const [isSending, setIsSending] = useState(false);
   const publicClient = usePublicClient();
 
@@ -28,15 +32,18 @@ const ExecuteRulingButton: React.FC<IExecuteRulingButton> = ({ id, setIsOpen })
     isError,
   } = useSimulateKlerosCoreExecuteRuling({
     query: {
-      enabled: !isUndefined(id),
+      enabled: !isUndefined(id) && !isUndefined(period) && period === Period.Execution && !ruled,
     },
     args: [BigInt(id ?? 0)],
   });
 
   const { writeContractAsync: rule } = useWriteKlerosCoreExecuteRuling();
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
-  const isDisabled = useMemo(() => isUndefined(id) || isError || isLoading, [id, isError, isLoading]);
+  const isDisabled = useMemo(
+    () => isUndefined(id) || isError || isLoading || period !== Period.Execution || ruled,
+    [id, isError, isLoading, period, ruled]
+  );
   const handleClick = () => {
     if (!ruleConfig) return;
 

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

@@ -8,6 +8,7 @@ import { Button } from "@kleros/ui-components-library";
 import { useSimulateKlerosCorePassPeriod, useWriteKlerosCorePassPeriod } from "hooks/contracts/generated";
 import { wrapWithToast } from "utils/wrapWithToast";
 
+import { Period } from "src/graphql/graphql";
 import { isUndefined } from "src/utils";
 
 import { IBaseMaintenanceButton } from ".";
@@ -16,9 +17,11 @@ const StyledButton = styled(Button)`
   width: 100%;
 `;
 
-type IPassPeriodButton = IBaseMaintenanceButton;
+interface IPassPeriodButton extends IBaseMaintenanceButton {
+  period?: string;
+}
 
-const PassPeriodButton: React.FC<IPassPeriodButton> = ({ id, setIsOpen }) => {
+const PassPeriodButton: React.FC<IPassPeriodButton> = ({ id, setIsOpen, period }) => {
   const [isSending, setIsSending] = useState(false);
   const publicClient = usePublicClient();
 
@@ -28,15 +31,18 @@ const PassPeriodButton: React.FC<IPassPeriodButton> = ({ id, setIsOpen }) => {
     isError,
   } = useSimulateKlerosCorePassPeriod({
     query: {
-      enabled: !isUndefined(id),
+      enabled: !isUndefined(id) && !isUndefined(period) && period !== Period.Execution,
     },
     args: [BigInt(id ?? 0)],
   });
 
   const { writeContractAsync: passPeriod } = useWriteKlerosCorePassPeriod();
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
-  const isDisabled = useMemo(() => isUndefined(id) || isError || isLoading, [id, isError, isLoading]);
+  const isDisabled = useMemo(
+    () => isUndefined(id) || isError || isLoading || period === Period.Execution,
+    [id, isError, isLoading, period]
+  );
   const handleClick = () => {
     if (!passPeriodConfig) return;
 

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

@@ -104,14 +104,19 @@ const MaintenanceButtons: React.FC = () => {
           <PopupContainer>
             <EnsureChain>
               <>
-                <DrawButton {...{ id, setIsOpen }} numberOfVotes={dispute?.currentRound.nbVotes} />
-                <PassPeriodButton {...{ id, setIsOpen }} />
+                <DrawButton
+                  {...{ id, setIsOpen }}
+                  numberOfVotes={dispute?.currentRound.nbVotes}
+                  period={dispute?.period}
+                />
+                <PassPeriodButton {...{ id, setIsOpen }} period={dispute?.period} />
                 <DistributeRewards
                   {...{ id, setIsOpen }}
                   roundIndex={dispute?.currentRoundIndex}
                   numberOfVotes={dispute?.currentRound.nbVotes}
+                  period={dispute?.period}
                 />
-                <ExecuteRulingButton {...{ id, setIsOpen }} />
+                <ExecuteRulingButton {...{ id, setIsOpen }} period={dispute?.period} ruled={dispute?.ruled} />
               </>
             </EnsureChain>
           </PopupContainer>