Maintenance buttons at arbitrator-level

subgraph/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kleros/kleros-v2-subgraph",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "MIT",
   "scripts": {
     "update:core:arbitrum-sepolia-devnet": "./scripts/update.sh arbitrumSepoliaDevnet arbitrum-sepolia core/subgraph.yaml",

web/src/components/DottedMenuButton.tsx

@@ -0,0 +1,88 @@
+import React from "react";
+import styled, { css, keyframes } from "styled-components";
+
+import DottedMenu from "svgs/icons/dotted-menu.svg";
+
+const ripple = keyframes`
+     0% {
+      opacity: 0;
+      transform: scale3d(0.5, 0.5, 1);
+    }
+     10% {
+      opacity: 0.5;
+      transform: scale3d(0.75, 0.75, 1);
+    }
+
+    100% {
+      opacity: 0;
+      transform: scale3d(1.75, 1.75, 1);
+    }
+`;
+
+const ring = (duration: string, delay: string) => css`
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transform: translate(50%);
+  content: "";
+  height: 100%;
+  width: 100%;
+  border: 3px solid ${({ theme }) => theme.primaryBlue};
+  border-radius: 100%;
+  animation-name: ${ripple};
+  animation-duration: ${duration};
+  animation-delay: ${delay};
+  animation-iteration-count: infinite;
+  animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
+  z-index: 0;
+`;
+
+const Container = styled.div<{ displayRipple: boolean }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 36px;
+  height: 36px;
+  ${({ displayRipple }) =>
+    displayRipple &&
+    css`
+      &::after {
+        ${ring("3s", "0s")}
+      }
+      &::before {
+        ${ring("3s", "0.5s")}
+      }
+    `}
+`;
+
+const ButtonContainer = styled.div`
+  border-radius: 50%;
+  z-index: 1;
+  background-color: ${({ theme }) => theme.lightBackground};
+`;
+
+const StyledDottedMenu = styled(DottedMenu)`
+  cursor: pointer;
+  width: 100%;
+  height: 100%;
+  fill: ${({ theme }) => theme.primaryBlue};
+`;
+
+interface IMenuButton {
+  toggle: () => void;
+  displayRipple: boolean;
+  className?: string;
+}
+
+const DottedMenuButton: React.FC<IMenuButton> = ({ toggle, displayRipple, className }) => {
+  return (
+    <Container {...{ displayRipple, className }}>
+      <ButtonContainer className="button-container">
+        <StyledDottedMenu onClick={toggle} className="menu-icon" />
+      </ButtonContainer>
+    </Container>
+  );
+};
+
+export default DottedMenuButton;

web/src/layout/Header/navbar/Debug.tsx

@@ -57,7 +57,7 @@ enum Phases {
   drawing,
 }
 
-const Phase = () => {
+export const Phase = () => {
   const { data: phase } = useSortitionModulePhase();
   return <>{isUndefined(phase) ? null : <StyledLabel>Phase: {Phases[phase as number]}</StyledLabel>}</>;
 };

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

@@ -39,7 +39,6 @@ const WithdrawAppealFees: React.FC<IWithdrawAppealFees> = ({ id, roundIndex, set
   const { data: appealData } = useClassicAppealQuery(id);
 
   const localRounds = useMemo(() => getLocalRounds(appealData?.dispute?.disputeKitDispute), [appealData]);
-  console.log({ localRounds });
 
   const feeDispersed = useMemo(
     () =>

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

@@ -8,13 +8,13 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 import { Periods } from "src/consts/periods";
 import { Period } from "src/graphql/graphql";
 
+import DottedMenuButton from "components/DottedMenuButton";
 import { EnsureChain } from "components/EnsureChain";
 import { Overlay } from "components/Overlay";
 
 import DistributeRewards from "./DistributeRewards";
 import DrawButton from "./DrawButton";
 import ExecuteRulingButton from "./ExecuteRuling";
-import MenuButton from "./MenuButton";
 import PassPeriodButton from "./PassPeriodButton";
 import WithdrawAppealFees from "./WithdrawAppealFees";
 
@@ -128,7 +128,7 @@ const MaintenanceButtons: React.FC = () => {
           </PopupContainer>
         </>
       ) : null}
-      <MenuButton {...{ toggle, displayRipple }} />
+      <DottedMenuButton {...{ toggle, displayRipple }} />
     </Container>
   );
 };

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

@@ -0,0 +1,77 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import {
+  useReadSortitionModuleDelayedStakeReadIndex,
+  useReadSortitionModuleDelayedStakeWriteIndex,
+  useSimulateSortitionModuleExecuteDelayedStakes,
+  useWriteSortitionModuleExecuteDelayedStakes,
+} from "hooks/contracts/generated";
+import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { isUndefined } from "src/utils";
+
+import { IBaseStakeMaintenanceButton, Phases } from ".";
+
+const StyledButton = styled(Button)`
+  width: 100%;
+`;
+
+type IExecuteStakeDelayedButton = IBaseStakeMaintenanceButton;
+
+const ExecuteDelayedStakeButton: React.FC<IExecuteStakeDelayedButton> = ({ setIsOpen }) => {
+  const [isSending, setIsSending] = useState(false);
+  const publicClient = usePublicClient();
+  const { data: phase } = useSortitionModulePhase();
+  const { data: delayedStakeWriteIndex } = useReadSortitionModuleDelayedStakeWriteIndex();
+  const { data: delayedStakeReadIndex } = useReadSortitionModuleDelayedStakeReadIndex();
+
+  const canExecute = useMemo(() => {
+    if (isUndefined(phase) || isUndefined(delayedStakeReadIndex) || isUndefined(delayedStakeWriteIndex)) return false;
+    return phase === Phases.staking && delayedStakeWriteIndex >= delayedStakeReadIndex;
+  }, [phase, delayedStakeReadIndex, delayedStakeWriteIndex]);
+
+  const {
+    data: executeDelayedStakeConfig,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useSimulateSortitionModuleExecuteDelayedStakes({
+    query: {
+      enabled: canExecute,
+    },
+    args: [1n + (delayedStakeWriteIndex ?? 0n) - (delayedStakeReadIndex ?? 0n)],
+  });
+
+  const { writeContractAsync: executeDelayedStake } = useWriteSortitionModuleExecuteDelayedStakes();
+
+  const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
+  const isDisabled = useMemo(() => isError || isLoading || !canExecute, [isError, isLoading, canExecute]);
+  const handleClick = () => {
+    if (!executeDelayedStakeConfig || !publicClient || !executeDelayedStake) return;
+
+    setIsSending(true);
+
+    wrapWithToast(async () => await executeDelayedStake(executeDelayedStakeConfig.request), publicClient).finally(
+      () => {
+        setIsSending(false);
+        setIsOpen(false);
+      }
+    );
+  };
+  return (
+    <StyledButton
+      text="Execute Delayed Stakes"
+      small
+      isLoading={isLoading}
+      disabled={isDisabled}
+      onClick={handleClick}
+    />
+  );
+};
+
+export default ExecuteDelayedStakeButton;

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

@@ -0,0 +1,86 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import {
+  useReadSortitionModuleDisputesWithoutJurors,
+  useReadSortitionModuleLastPhaseChange,
+  useReadSortitionModuleMaxDrawingTime,
+  useReadSortitionModuleMinStakingTime,
+  useSimulateSortitionModulePassPhase,
+  useWriteSortitionModulePassPhase,
+} from "hooks/contracts/generated";
+import { useSortitionModulePhase } from "hooks/useSortitionModulePhase";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { isUndefined } from "src/utils";
+
+import { IBaseStakeMaintenanceButton, Phases } from ".";
+
+const StyledButton = styled(Button)`
+  width: 100%;
+`;
+
+type IPassPhaseButton = IBaseStakeMaintenanceButton;
+
+const PassPhaseButton: React.FC<IPassPhaseButton> = ({ setIsOpen }) => {
+  const [isSending, setIsSending] = useState(false);
+  const publicClient = usePublicClient();
+  const { data: phase } = useSortitionModulePhase();
+  const { data: lastPhaseChange } = useReadSortitionModuleLastPhaseChange();
+  const { data: minStakingTime } = useReadSortitionModuleMinStakingTime();
+  const { data: maxDrawingTime } = useReadSortitionModuleMaxDrawingTime();
+  const { data: disputeWithoutJurors } = useReadSortitionModuleDisputesWithoutJurors();
+
+  const canChangePhase = useMemo(() => {
+    if (
+      isUndefined(phase) ||
+      isUndefined(lastPhaseChange) ||
+      isUndefined(minStakingTime) ||
+      isUndefined(maxDrawingTime) ||
+      isUndefined(disputeWithoutJurors)
+    )
+      return false;
+
+    const now = Math.floor(Date.now() / 1000);
+    switch (phase) {
+      case Phases.staking:
+        return BigInt(now) - lastPhaseChange >= minStakingTime;
+      case Phases.drawing:
+        return disputeWithoutJurors === 0n || BigInt(now) - lastPhaseChange >= maxDrawingTime;
+      default:
+        return true;
+    }
+  }, [phase, lastPhaseChange, minStakingTime, maxDrawingTime, disputeWithoutJurors]);
+
+  const {
+    data: passPhaseConfig,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useSimulateSortitionModulePassPhase({
+    query: {
+      enabled: canChangePhase,
+    },
+  });
+
+  const { writeContractAsync: passPhase } = useWriteSortitionModulePassPhase();
+
+  const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
+  const isDisabled = useMemo(() => isError || isLoading || !canChangePhase, [isError, isLoading, canChangePhase]);
+  const handleClick = () => {
+    if (!passPhaseConfig || !publicClient || !passPhase) return;
+
+    setIsSending(true);
+
+    wrapWithToast(async () => await passPhase(passPhaseConfig.request), publicClient).finally(() => {
+      setIsSending(false);
+      setIsOpen(false);
+    });
+  };
+  return <StyledButton text="Pass Phase" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />;
+};
+
+export default PassPhaseButton;

web/src/pages/Courts/CourtDetails/StakeMaintenanceButton/index.tsx

@@ -0,0 +1,84 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import DottedMenuButton from "components/DottedMenuButton";
+import { EnsureChain } from "components/EnsureChain";
+import { Overlay } from "components/Overlay";
+import { Phase } from "layout/Header/navbar/Debug";
+
+import ExecuteDelayedStakeButton from "./ExecuteDelayedStakeButton";
+import PassPhaseButton from "./PassPhaseButton";
+
+const Container = styled.div`
+  width: 36px;
+  height: 36px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+`;
+
+const PopupContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  height: fit-content;
+  overflow-y: auto;
+  z-index: 31;
+  padding: 27px;
+  gap: 16px;
+  border: 1px solid ${({ theme }) => theme.stroke};
+  background-color: ${({ theme }) => theme.whiteBackground};
+  border-radius: 3px;
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.06);
+
+  bottom: 0;
+  left: 0;
+  transform: translate(-100%, 100%);
+`;
+
+const StyledDottedMenu = styled(DottedMenuButton)`
+  .button-container {
+    background-color: ${({ theme }) => theme.whiteBackground};
+  }
+`;
+
+export enum Phases {
+  staking,
+  generating,
+  drawing,
+}
+
+export interface IBaseStakeMaintenanceButton {
+  setIsOpen: (open: boolean) => void;
+}
+
+interface IStakeMaintenanceButtons {
+  className?: string;
+}
+const StakeMaintenanceButtons: React.FC<IStakeMaintenanceButtons> = ({ className }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggle = () => setIsOpen((prevValue) => !prevValue);
+  return (
+    <Container {...{ className }}>
+      {isOpen ? (
+        <>
+          <Overlay onClick={() => setIsOpen(false)} />
+          <PopupContainer>
+            <EnsureChain>
+              <>
+                <Phase />
+                <PassPhaseButton {...{ setIsOpen }} />
+                <ExecuteDelayedStakeButton {...{ setIsOpen }} />
+              </>
+            </EnsureChain>
+          </PopupContainer>
+        </>
+      ) : null}
+      <StyledDottedMenu {...{ toggle }} displayRipple={false} />
+    </Container>
+  );
+};
+
+export default StakeMaintenanceButtons;