feat: shutter support in dispute commiting

Author: kemuru

web/package.json

@@ -94,6 +94,7 @@
     "@reown/appkit-adapter-wagmi": "^1.7.1",
     "@sentry/react": "^7.120.0",
     "@sentry/tracing": "^7.120.0",
+    "@shutter-network/shutter-sdk": "^0.0.1",
     "@solana/wallet-adapter-react": "^0.15.36",
     "@solana/web3.js": "^1.98.0",
     "@tanstack/react-query": "^5.69.0",

web/src/hooks/queries/useDisputeDetailsQuery.ts

@@ -28,6 +28,9 @@ const disputeDetailsQuery = graphql(`
       currentRound {
         id
         nbVotes
+        disputeKit {
+          id
+        }
       }
       currentRoundIndex
       isCrossChain

web/src/pages/Cases/CaseDetails/Voting/Classic/Commit.tsx

@@ -13,7 +13,7 @@ import { wrapWithToast } from "utils/wrapWithToast";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
-import OptionsContainer from "./OptionsContainer";
+import OptionsContainer from "../OptionsContainer";
 
 const Container = styled.div`
   width: 100%;

web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx

@@ -19,7 +19,7 @@ import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import InfoCard from "components/InfoCard";
 
-import JustificationArea from "./JustificationArea";
+import JustificationArea from "../JustificationArea";
 import { Answer } from "@kleros/kleros-sdk";
 import { EnsureChain } from "components/EnsureChain";
 

web/src/pages/Cases/CaseDetails/Voting/Classic/Vote.tsx

@@ -9,7 +9,7 @@ import { wrapWithToast } from "utils/wrapWithToast";
 
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
-import OptionsContainer from "./OptionsContainer";
+import OptionsContainer from "../OptionsContainer";
 
 const Container = styled.div`
   width: 100%;

web/src/pages/Cases/CaseDetails/Voting/Classic/JustificationArea.tsx renamed to web/src/pages/Cases/CaseDetails/Voting/JustificationArea.tsx

@@ -0,0 +1,102 @@
+import React, { useCallback, useMemo, useState } from "react";
+import styled from "styled-components";
+import { useParams } from "react-router-dom";
+import { useLocalStorage } from "react-use";
+import { keccak256, encodePacked } from "viem";
+import { useWalletClient, usePublicClient, useConfig } from "wagmi";
+
+import { simulateDisputeKitShutterCastCommit } from "hooks/contracts/generated";
+import useSigningAccount from "hooks/useSigningAccount";
+import { isUndefined } from "utils/index";
+import { wrapWithToast } from "utils/wrapWithToast";
+import { encrypt } from "utils/shutter";
+import OptionsContainer from "../OptionsContainer";
+
+const Container = styled.div`
+  width: 100%;
+  height: auto;
+`;
+
+interface ICommit {
+  arbitrable: `0x${string}`;
+  voteIDs: string[];
+  setIsOpen: (val: boolean) => void;
+  refetch: () => void;
+}
+
+const SEPARATOR = "␟";
+
+const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch }) => {
+  const { id } = useParams();
+  const parsedDisputeID = useMemo(() => BigInt(id ?? 0), [id]);
+  const parsedVoteIDs = useMemo(() => voteIDs.map((voteID) => BigInt(voteID)), [voteIDs]);
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
+  const wagmiConfig = useConfig();
+  const { signingAccount, generateSigningAccount } = useSigningAccount();
+  const [justification, setJustification] = useState("");
+  const saltKey = useMemo(() => `shutter-dispute-${id}-voteids-${voteIDs}`, [id, voteIDs]);
+  const [_, setSalt] = useLocalStorage(saltKey);
+
+  const handleCommit = useCallback(
+    async (choice: bigint) => {
+      const message = { message: saltKey };
+      const rawSalt = !isUndefined(signingAccount)
+        ? await signingAccount.signMessage(message)
+        : await (async () => {
+            const account = await generateSigningAccount();
+            return await account?.signMessage(message);
+          })();
+      if (isUndefined(rawSalt)) return;
+
+      const salt = keccak256(rawSalt);
+      setSalt(JSON.stringify({ salt, choice: choice.toString(), justification }));
+
+      const encodedMessage = `${choice.toString()}${SEPARATOR}${salt}${SEPARATOR}${justification}`;
+      const { encryptedCommitment, identity } = await encrypt(encodedMessage);
+
+      const commitHash = keccak256(
+        encodePacked(["uint256", "uint256", "string"], [choice, BigInt(salt), justification])
+      );
+
+      const { request } = await simulateDisputeKitShutterCastCommit(wagmiConfig, {
+        args: [parsedDisputeID, parsedVoteIDs, commitHash, identity as `0x${string}`, encryptedCommitment],
+      });
+      if (walletClient && publicClient) {
+        await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(({ status }) => {
+          setIsOpen(status);
+        });
+      }
+      refetch();
+    },
+    [
+      wagmiConfig,
+      justification,
+      saltKey,
+      setSalt,
+      parsedVoteIDs,
+      parsedDisputeID,
+      publicClient,
+      setIsOpen,
+      walletClient,
+      generateSigningAccount,
+      signingAccount,
+      refetch,
+    ]
+  );
+
+  return id ? (
+    <Container>
+      <OptionsContainer
+        {...{
+          arbitrable,
+          justification,
+          setJustification,
+          handleSelection: handleCommit,
+        }}
+      />
+    </Container>
+  ) : null;
+};
+
+export default Commit;

web/src/pages/Cases/CaseDetails/Voting/Classic/OptionsContainer.tsx renamed to web/src/pages/Cases/CaseDetails/Voting/OptionsContainer.tsx

@@ -0,0 +1,5 @@
+import React from "react";
+
+const Vote: React.FC = () => null;
+
+export default Vote;

web/src/pages/Cases/CaseDetails/Voting/Shutter/Commit.tsx

@@ -0,0 +1,27 @@
+import React, { useMemo } from "react";
+import { useParams } from "react-router-dom";
+import { useAccount } from "wagmi";
+
+import { useDrawQuery } from "hooks/queries/useDrawQuery";
+import { useVotingContext } from "hooks/useVotingContext";
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+
+import ShutterCommit from "./Commit";
+
+interface IShutter {
+  arbitrable: `0x${string}`;
+  setIsOpen: (val: boolean) => void;
+}
+
+const Shutter: React.FC<IShutter> = ({ arbitrable, setIsOpen }) => {
+  const { id } = useParams();
+  const { address } = useAccount();
+  const { data: disputeData } = useDisputeDetailsQuery(id);
+  const { data: drawData, refetch } = useDrawQuery(address?.toLowerCase(), id, disputeData?.dispute?.currentRound.id);
+  const { isCommitPeriod, commited } = useVotingContext();
+  const voteIDs = useMemo(() => drawData?.draws?.map((draw) => draw.voteIDNum) as string[], [drawData]);
+
+  return id && isCommitPeriod && !commited ? <ShutterCommit {...{ arbitrable, setIsOpen, voteIDs, refetch }} /> : null;
+};
+
+export default Shutter;

web/src/pages/Cases/CaseDetails/Voting/Shutter/Vote.tsx

@@ -25,8 +25,11 @@ import InfoCard from "components/InfoCard";
 import Popup, { PopupType } from "components/Popup";
 
 import Classic from "./Classic";
+import Shutter from "./Shutter";
 import VotingHistory from "./VotingHistory";
 
+import { getDisputeKitName } from "consts/index";
+
 const Container = styled.div`
   padding: 20px 16px 16px;
 
@@ -66,6 +69,11 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
   const timesPerPeriod = disputeData?.dispute?.court?.timesPerPeriod;
   const finalDate = useFinalDate(lastPeriodChange, currentPeriodIndex, timesPerPeriod);
 
+  const disputeKitId = disputeData?.dispute?.currentRound?.disputeKit?.id;
+  const disputeKitName = disputeKitId ? getDisputeKitName(Number(disputeKitId)) : undefined;
+  const isClassicDisputeKit = disputeKitName?.toLowerCase().includes("classic") ?? false;
+  const isShutterDisputeKit = disputeKitName?.toLowerCase().includes("shutter") ?? false;
+
   const isCommitOrVotePeriod = useMemo(
     () => [Periods.vote, Periods.commit].includes(currentPeriodIndex),
     [currentPeriodIndex]
@@ -107,7 +115,8 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
       {userWasDrawn && isCommitOrVotePeriod && !voted ? (
         <>
           <VotingHistory {...{ arbitrable }} isQuestion={false} />
-          <Classic arbitrable={arbitrable ?? "0x0"} setIsOpen={setIsPopupOpen} />
+          {isClassicDisputeKit ? <Classic arbitrable={arbitrable ?? "0x0"} setIsOpen={setIsPopupOpen} /> : null}
+          {isShutterDisputeKit ? <Shutter arbitrable={arbitrable ?? "0x0"} setIsOpen={setIsPopupOpen} /> : null}
         </>
       ) : (
         <VotingHistory {...{ arbitrable }} isQuestion={true} />