feat(web): dispute-maintenance-buttons

web/src/hooks/queries/useDisputeDetailsQuery.ts

@@ -27,6 +27,7 @@ const disputeDetailsQuery = graphql(`
       tied
       currentRound {
         id
+        nbVotes
       }
       currentRoundIndex
     }

web/src/hooks/useTransactionBatcher.tsx

@@ -0,0 +1,76 @@
+import { encodeFunctionData, type SimulateContractParameters } from "viem";
+import { useAccount, useWriteContract } from "wagmi";
+import { createUseSimulateContract, createUseWriteContract } from "wagmi/codegen";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+
+import { isUndefined } from "src/utils";
+
+const batcherAbi = [
+  {
+    inputs: [
+      {
+        internalType: "address[]",
+        name: "targets",
+        type: "address[]",
+      },
+      {
+        internalType: "uint256[]",
+        name: "values",
+        type: "uint256[]",
+      },
+      {
+        internalType: "bytes[]",
+        name: "datas",
+        type: "bytes[]",
+      },
+    ],
+    name: "batchSend",
+    outputs: [],
+    stateMutability: "payable",
+    type: "function",
+  },
+] as const;
+
+const useBatchSimulate = createUseSimulateContract({
+  abi: batcherAbi,
+  functionName: "batchSend",
+});
+
+export const useBatchWrite = createUseWriteContract({
+  abi: batcherAbi,
+  functionName: "batchSend",
+});
+
+const batcherAddress = {
+  421614: "0xe8061d185D865ce2B2FbCfDa628b5F147d8eB8Ab",
+};
+
+export type TransactionBatcherConfig = SimulateContractParameters[];
+
+const useTransactionBatcher = (configs?: TransactionBatcherConfig) => {
+  const { chainId } = useAccount();
+
+  const validConfigs = configs ?? [];
+  const {
+    data: batchConfig,
+    isLoading,
+    isError,
+  } = useBatchSimulate({
+    query: {
+      enabled: !isUndefined(configs),
+    },
+    address: batcherAddress[chainId ?? DEFAULT_CHAIN],
+    args: [
+      validConfigs.map((config) => config?.address),
+      validConfigs.map((config) => config?.value ?? BigInt(0)),
+      validConfigs.map((config) => encodeFunctionData(config)),
+    ],
+  });
+  const { writeContractAsync } = useWriteContract();
+
+  const executeBatch = () => batchConfig && writeContractAsync(batchConfig.request);
+  return { executeBatch, batchConfig, isError, isLoading };
+};
+
+export default useTransactionBatcher;

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

@@ -0,0 +1,76 @@
+import React, { useEffect, useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { useAccount, usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { DEFAULT_CHAIN } from "consts/chains";
+import { klerosCoreAbi, klerosCoreAddress } from "hooks/contracts/generated";
+import useTransactionBatcher, { type TransactionBatcherConfig, useBatchWrite } from "hooks/useTransactionBatcher";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { isUndefined } from "src/utils";
+
+import { IBaseMaintenaceButton } from ".";
+
+const StyledButton = styled(Button)`
+  width: 100%;
+`;
+
+interface IDistributeRewards extends IBaseMaintenaceButton {
+  numberOfVotes?: string;
+  roundIndex?: string;
+}
+
+const DistributeRewards: React.FC<IDistributeRewards> = ({ id, numberOfVotes, roundIndex, setIsOpen }) => {
+  const [isSending, setIsSending] = useState(false);
+  const [contractConfigs, setContractConfigs] = useState<TransactionBatcherConfig>();
+  const publicClient = usePublicClient();
+  const { chainId } = useAccount();
+
+  useEffect(() => {
+    if (!id || !roundIndex || !numberOfVotes) return;
+
+    const baseArgs = {
+      abi: klerosCoreAbi,
+      address: klerosCoreAddress[chainId ?? DEFAULT_CHAIN],
+      functionName: "execute",
+    };
+
+    const argsArr: TransactionBatcherConfig = [];
+    let nbVotes = parseInt(numberOfVotes);
+
+    // each previous round has (n - 1)/2 jurors
+    for (let i = parseInt(roundIndex); i >= 0; i--) {
+      argsArr.push({ ...baseArgs, args: [BigInt(id), BigInt(i), BigInt(nbVotes)] });
+
+      nbVotes = (nbVotes - 1) / 2;
+    }
+
+    setContractConfigs(argsArr);
+  }, [id, roundIndex, numberOfVotes, chainId]);
+
+  const { batchConfig, isLoading: isLoadingConfig, isError } = useTransactionBatcher(contractConfigs);
+
+  const { writeContractAsync: executeBatch } = useBatchWrite();
+
+  const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
+  const isDisabled = useMemo(
+    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading,
+    [id, numberOfVotes, isError, isLoading]
+  );
+
+  const handleClick = () => {
+    if (!batchConfig) return;
+
+    setIsSending(true);
+
+    wrapWithToast(async () => await executeBatch(batchConfig.request), publicClient).finally(() => {
+      setIsOpen(false);
+    });
+  };
+  return <StyledButton text="Rewards" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />;
+};
+
+export default DistributeRewards;

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

@@ -0,0 +1,58 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { useSimulateKlerosCoreDraw, useWriteKlerosCoreDraw } from "hooks/contracts/generated";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { isUndefined } from "src/utils";
+
+import { IBaseMaintenaceButton } from ".";
+
+const StyledButton = styled(Button)`
+  width: 100%;
+`;
+
+interface IDrawButton extends IBaseMaintenaceButton {
+  numberOfVotes?: string;
+}
+
+const DrawButton: React.FC<IDrawButton> = ({ id, numberOfVotes, setIsOpen }) => {
+  const [isSending, setIsSending] = useState(false);
+  const publicClient = usePublicClient();
+
+  const {
+    data: drawConfig,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useSimulateKlerosCoreDraw({
+    query: {
+      enabled: !isUndefined(id) && !isUndefined(numberOfVotes),
+    },
+    args: [BigInt(id ?? 0), BigInt(numberOfVotes ?? 0)],
+  });
+
+  const { writeContractAsync: draw } = useWriteKlerosCoreDraw();
+
+  const isLoading = useMemo(() => isLoadingConfig || isSending, [isLoadingConfig, isSending]);
+  const isDisabled = useMemo(
+    () => isUndefined(id) || isUndefined(numberOfVotes) || isError || isLoading,
+    [id, numberOfVotes, isError, isLoading]
+  );
+  const handleClick = () => {
+    if (!drawConfig) return;
+
+    setIsSending(true);
+
+    wrapWithToast(async () => await draw(drawConfig.request), publicClient).finally(() => {
+      setIsSending(false);
+      setIsOpen(false);
+    });
+  };
+  return <StyledButton text="Draw" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />;
+};
+
+export default DrawButton;

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

@@ -0,0 +1,53 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { usePublicClient } from "wagmi";
+
+import { Button } from "@kleros/ui-components-library";
+
+import { useSimulateKlerosCoreExecuteRuling, useWriteKlerosCoreExecuteRuling } from "hooks/contracts/generated";
+import { wrapWithToast } from "utils/wrapWithToast";
+
+import { isUndefined } from "src/utils";
+
+import { IBaseMaintenaceButton } from ".";
+
+const StyledButton = styled(Button)`
+  width: 100%;
+`;
+
+type IExecuteRulingButton = IBaseMaintenaceButton;
+
+const ExecuteRulingButton: React.FC<IExecuteRulingButton> = ({ id, setIsOpen }) => {
+  const [isSending, setIsSending] = useState(false);
+  const publicClient = usePublicClient();
+
+  const {
+    data: ruleConfig,
+    isLoading: isLoadingConfig,
+    isError,
+  } = useSimulateKlerosCoreExecuteRuling({
+    query: {
+      enabled: !isUndefined(id),
+    },
+    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 handleClick = () => {
+    if (!ruleConfig) return;
+
+    setIsSending(true);
+
+    wrapWithToast(async () => await rule(ruleConfig.request), publicClient).finally(() => {
+      setIsSending(false);
+      setIsOpen(false);
+    });
+  };
+  return <StyledButton text="Rule" small isLoading={isLoading} disabled={isDisabled} onClick={handleClick} />;
+};
+
+export default ExecuteRulingButton;

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

@@ -0,0 +1,85 @@
+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: 36px;
+  width: 36px;
+  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;
+  ${({ 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: 36px;
+  height: 36px;
+  fill: ${({ theme }) => theme.primaryBlue};
+`;
+
+interface IMenuButton {
+  toggle: () => void;
+  displayRipple: boolean;
+}
+
+const MenuButton: React.FC<IMenuButton> = ({ toggle, displayRipple }) => {
+  return (
+    <Container {...{ displayRipple }}>
+      <ButtonContainer>
+        <StyledDottedMenu onClick={toggle} />
+      </ButtonContainer>
+    </Container>
+  );
+};
+
+export default MenuButton;