Merge pull request #1723 from kleros/chore/handle-stake-maintenance-buttons-in-university

chore(web): abstract-sortition-module-hooks-and-hide-in-university

Author: jaybuidl

web/.gitignore

@@ -22,6 +22,7 @@ dist
 .env.development.local
 .env.test.local
 .env.production.local
+.env.devnet-university
 
 # generated code
 src/hooks/contracts/generated.ts

web/package.json

@@ -35,6 +35,7 @@
     "build-local": "scripts/runEnv.sh local 'yarn generate && vite build'",
     "build-devnet": "scripts/runEnv.sh devnet 'yarn generate && vite build'",
     "build-devnet-neo": "scripts/runEnv.sh devnet-neo 'yarn generate && vite build'",
+    "build-devnet-university": "scripts/runEnv.sh devnet-university 'yarn generate && vite build'",
     "build-testnet": "scripts/runEnv.sh testnet 'yarn generate && vite build'",
     "build-mainnet-neo": "scripts/runEnv.sh mainnet-neo 'yarn generate && vite build'",
     "build-netlify": "scripts/generateBuildInfo.sh && yarn generate && vite build",

web/src/components/Phase.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 
-import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+import { useSortitionModulePhase } from "hooks/useSortitionModule";
 
 import { isUndefined } from "src/utils";
 

web/src/hooks/useSortitionModule.ts

@@ -0,0 +1,54 @@
+import { REFETCH_INTERVAL } from "consts/index";
+
+import { useReadSortitionModule } from "hooks/contracts/generated";
+
+export const useSortitionModulePhase = () => {
+  // eslint-disable-next-line
+  // @ts-ignore
+  return useReadSortitionModule({ functionName: "phase", query: { refetchInterval: REFETCH_INTERVAL } });
+};
+
+export const useReadSortitionModuleDelayedStakeReadIndex = () => {
+  return useReadSortitionModule({
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionName: "delayedStakeReadIndex",
+    query: { refetchInterval: REFETCH_INTERVAL },
+  });
+};
+
+export const useReadSortitionModuleDelayedStakeWriteIndex = () => {
+  return useReadSortitionModule({
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionName: "delayedStakeWriteIndex",
+    query: { refetchInterval: REFETCH_INTERVAL },
+  });
+};
+
+export const useReadSortitionModuleLastPhaseChange = () => {
+  return useReadSortitionModule({
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionName: "lastPhaseChange",
+    query: { refetchInterval: REFETCH_INTERVAL },
+  });
+};
+
+export const useReadSortitionModuleMaxDrawingTime = () => {
+  return useReadSortitionModule({
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionName: "maxDrawingTime",
+    query: { refetchInterval: REFETCH_INTERVAL },
+  });
+};
+
+export const useReadSortitionModuleMinStakingTime = () => {
+  return useReadSortitionModule({
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionName: "minStakingTime",
+    query: { refetchInterval: REFETCH_INTERVAL },
+  });
+};

web/src/hooks/useSortitionModulePhase.ts

@@ -3,10 +3,10 @@ import styled from "styled-components";
 
 import { usePublicClient } from "wagmi";
 
-import { Button } from "@kleros/ui-components-library";
+import { Button, Field } from "@kleros/ui-components-library";
 
 import { useSimulateKlerosCoreDraw, useWriteKlerosCoreDraw } from "hooks/contracts/generated";
-import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+import { useSortitionModulePhase } from "hooks/useSortitionModule";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import useDisputeMaintenanceQuery from "queries/useDisputeMaintenanceQuery";
@@ -18,6 +18,8 @@ import { Phases } from "components/Phase";
 
 import { IBaseMaintenanceButton } from ".";
 import { Link } from "react-router-dom";
+import { isKlerosUniversity } from "src/consts";
+import { isAddress } from "viem";
 
 const StyledButton = styled(Button)`
   width: 100%;
@@ -29,17 +31,24 @@ interface IDrawButton extends IBaseMaintenanceButton {
   period?: string;
 }
 
+const isUniversity = isKlerosUniversity();
+
 const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, period }) => {
-  const [isSending, setIsSending] = useState(false);
   const publicClient = usePublicClient();
   const { data: maintenanceData } = useDisputeMaintenanceQuery(id);
   const { data: phase } = useSortitionModulePhase();
+  const [isSending, setIsSending] = useState(false);
+  const [drawJuror, setDrawJuror] = useState("");
 
   const isDrawn = useMemo(() => maintenanceData?.dispute?.currentRound.jurorsDrawn, [maintenanceData]);
 
   const canDraw = useMemo(
-    () => !isUndefined(maintenanceData) && !isDrawn && period === Period.Evidence && phase === Phases.drawing,
-    [maintenanceData, isDrawn, phase, period]
+    () =>
+      !isUndefined(maintenanceData) &&
+      !isDrawn &&
+      period === Period.Evidence &&
+      (isUniversity ? true : phase === Phases.drawing),
+    [maintenanceData, isDrawn, phase, period, isUniversity]
   );
 
   const needToPassPhase = useMemo(
@@ -53,17 +62,30 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, perio
     isError,
   } = useSimulateKlerosCoreDraw({
     query: {
-      enabled: !isUndefined(id) && !isUndefined(numberOfVotes) && !isUndefined(period) && canDraw,
+      enabled:
+        !isUndefined(id) &&
+        !isUndefined(numberOfVotes) &&
+        !isUndefined(period) &&
+        canDraw &&
+        (isUniversity ? isAddress(drawJuror) : true),
     },
-    args: [BigInt(id ?? 0), BigInt(numberOfVotes ?? 0)],
+    // eslint-disable-next-line
+    // @ts-ignore
+    args: [BigInt(id ?? 0), isUniversity ? drawJuror : BigInt(numberOfVotes ?? 0)],
   });
 
   const { writeContractAsync: draw } = useWriteKlerosCoreDraw();
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(
-    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading || !canDraw,
-    [id, numberOfVotes, isError, isLoading, canDraw]
+    () =>
+      isUndefined(id) ||
+      isUndefined(numberOfVotes) ||
+      isError ||
+      isLoading ||
+      !canDraw ||
+      (isUniversity && !isAddress(drawJuror)),
+    [id, numberOfVotes, isError, isLoading, canDraw, isUniversity, drawJuror]
   );
   const handleClick = () => {
     if (!drawConfig || !publicClient) return;
@@ -77,12 +99,15 @@ const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen, perio
   };
   return (
     <>
-      {needToPassPhase ? (
+      {needToPassPhase && !isUniversity ? (
         <StyledLabel>
           Jurors can be drawn in <small>drawing</small> phase.
           <br /> Pass phase <Link to="/courts/1/purpose/#maintenance">here</Link>.
         </StyledLabel>
       ) : null}
+      {isUniversity && canDraw ? (
+        <Field placeholder="Juror Address" onChange={(e) => setDrawJuror(e.target.value)} value={drawJuror} />
+      ) : null}
       <StyledButton text="Draw" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />
     </>
   );

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

@@ -5,13 +5,12 @@ import { usePublicClient } from "wagmi";
 
 import { Button } from "@kleros/ui-components-library";
 
+import { useSimulateSortitionModule, useWriteSortitionModule } from "hooks/contracts/generated";
 import {
   useReadSortitionModuleDelayedStakeReadIndex,
   useReadSortitionModuleDelayedStakeWriteIndex,
-  useSimulateSortitionModuleExecuteDelayedStakes,
-  useWriteSortitionModuleExecuteDelayedStakes,
-} from "hooks/contracts/generated";
-import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+  useSortitionModulePhase,
+} from "hooks/useSortitionModule";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import { isUndefined } from "src/utils";
@@ -42,14 +41,19 @@ const ExecuteDelayedStakeButton: React.FC<IExecuteStakeDelayedButton> = ({ setIs
     data: executeDelayedStakeConfig,
     isLoading: isLoadingConfig,
     isError,
-  } = useSimulateSortitionModuleExecuteDelayedStakes({
+  } = useSimulateSortitionModule({
     query: {
       enabled: canExecute,
     },
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionName: "executeDelayedStakes",
+    // eslint-disable-next-line
+    // @ts-ignore
     args: [1n + (delayedStakeWriteIndex ?? 0n) - (delayedStakeReadIndex ?? 0n)],
   });
 
-  const { writeContractAsync: executeDelayedStake } = useWriteSortitionModuleExecuteDelayedStakes();
+  const { writeContractAsync: executeDelayedStake } = useWriteSortitionModule();
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(() => isError || isLoading || !canExecute, [isError, isLoading, canExecute]);

web/src/pages/Courts/StakeMaintenanceButton/ExecuteDelayedStakeButton.tsx

@@ -7,13 +7,15 @@ import { Button } from "@kleros/ui-components-library";
 
 import {
   useReadSortitionModuleDisputesWithoutJurors,
+  useSimulateSortitionModule,
+  useWriteSortitionModule,
+} from "hooks/contracts/generated";
+import {
   useReadSortitionModuleLastPhaseChange,
   useReadSortitionModuleMaxDrawingTime,
   useReadSortitionModuleMinStakingTime,
-  useSimulateSortitionModulePassPhase,
-  useWriteSortitionModulePassPhase,
-} from "hooks/contracts/generated";
-import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+  useSortitionModulePhase,
+} from "hooks/useSortitionModule";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import { isUndefined } from "src/utils";
@@ -62,13 +64,16 @@ const PassPhaseButton: React.FC<IPassPhaseButton> = ({ setIsOpen }) => {
     data: passPhaseConfig,
     isLoading: isLoadingConfig,
     isError,
-  } = useSimulateSortitionModulePassPhase({
+  } = useSimulateSortitionModule({
     query: {
       enabled: canChangePhase,
     },
+    // eslint-disable-next-line
+    // @ts-ignore
+    functionName: "passPhase",
   });
 
-  const { writeContractAsync: passPhase } = useWriteSortitionModulePassPhase();
+  const { writeContractAsync: passPhase } = useWriteSortitionModule();
 
   const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
   const isDisabled = useMemo(() => isError || isLoading || !canChangePhase, [isError, isLoading, canChangePhase]);

web/src/pages/Courts/StakeMaintenanceButton/PassPhaseButton.tsx

@@ -14,6 +14,7 @@ import { responsiveSize } from "styles/responsiveSize";
 import { StyledSkeleton } from "components/StyledSkeleton";
 
 import StakeMaintenanceButtons from "./StakeMaintenanceButton";
+import { isKlerosUniversity } from "src/consts";
 
 const Container = styled.div`
   width: 100%;
@@ -33,6 +34,7 @@ const TopSearch: React.FC = () => {
   const { data } = useCourtTree();
   const navigate = useNavigate();
   const items = useMemo(() => !isUndefined(data) && [rootCourtToItems(data.court)], [data]);
+  const isUniversity = isKlerosUniversity();
   return (
     <Container>
       {items ? (
@@ -44,7 +46,7 @@ const TopSearch: React.FC = () => {
       ) : (
         <StyledSkeleton width={240} height={42} />
       )}
-      <StakeMaintenanceButtons />
+      {isUniversity ? null : <StakeMaintenanceButtons />}
     </Container>
   );
 };