feat: support for revealing shutter commit from the frontend

Author: kemuru

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

@@ -0,0 +1,109 @@
+import React, { useCallback, useMemo, useState } from "react";
+import styled from "styled-components";
+
+import { Button } from "@kleros/ui-components-library";
+import { useWalletClient, usePublicClient } from "wagmi";
+import { useParams } from "react-router-dom";
+import { useLocalStorage } from "react-use";
+
+import { wrapWithToast } from "utils/wrapWithToast";
+import { isUndefined } from "utils/index";
+
+import { useSimulateDisputeKitShutterCastVoteShutter } from "hooks/contracts/generated";
+
+const Container = styled.div`
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+`;
+
+interface IReveal {
+  voteIDs: string[];
+  setIsOpen: (val: boolean) => void;
+}
+
+const Reveal: React.FC<IReveal> = ({ voteIDs, setIsOpen }) => {
+  const { id } = useParams();
+  const parsedDisputeID = useMemo(() => BigInt(id ?? 0), [id]);
+  const parsedVoteIDs = useMemo(() => voteIDs.map((voteID) => BigInt(voteID)), [voteIDs]);
+  const saltKey = useMemo(() => `shutter-dispute-${id}-voteids-${voteIDs}`, [id, voteIDs]);
+
+  const [storedData, _, removeStoredData] = useLocalStorage(saltKey);
+
+  const { data: walletClient } = useWalletClient();
+  const publicClient = usePublicClient();
+
+  const [isRevealing, setIsRevealing] = useState(false);
+
+  const parsedStoredData = useMemo(() => {
+    if (isUndefined(storedData)) return undefined;
+    try {
+      const data = JSON.parse(storedData);
+      if (!data.salt || !data.choice || !data.justification) {
+        throw new Error("Invalid stored data");
+      }
+      return data;
+    } catch (error) {
+      console.error("Error parsing stored data:", error);
+      return undefined;
+    }
+  }, [storedData]);
+
+  const {
+    data: simulateData,
+    isLoading: isSimulating,
+    error: simulateError,
+  } = useSimulateDisputeKitShutterCastVoteShutter({
+    query: {
+      enabled: !isUndefined(parsedStoredData),
+    },
+    args: [
+      parsedDisputeID,
+      parsedVoteIDs,
+      BigInt(parsedStoredData?.choice ?? 0),
+      BigInt(parsedStoredData?.salt ?? 0),
+      parsedStoredData?.justification ?? "",
+    ],
+  });
+
+  const handleReveal = useCallback(async () => {
+    if (isUndefined(parsedStoredData) || isUndefined(simulateData)) {
+      console.error("No committed vote found or simulation not ready.");
+      return;
+    }
+
+    setIsRevealing(true);
+    try {
+      const { request } = simulateData;
+      if (walletClient && publicClient) {
+        await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then(({ status }) => {
+          if (status) {
+            removeStoredData();
+          }
+          setIsOpen(status);
+        });
+      }
+    } catch (error) {
+      console.error("Error revealing vote:", error);
+    } finally {
+      setIsRevealing(false);
+    }
+  }, [parsedStoredData, simulateData, walletClient, publicClient, setIsOpen, removeStoredData]);
+
+  return (
+    <Container>
+      {!isUndefined(parsedStoredData) ? (
+        <Button
+          text="Reveal Your Vote"
+          onClick={handleReveal}
+          disabled={isSimulating || !isUndefined(simulateError) || isRevealing}
+          isLoading={isRevealing}
+        />
+      ) : null}
+    </Container>
+  );
+};
+
+export default Reveal;

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

@@ -7,6 +7,7 @@ import { useVotingContext } from "hooks/useVotingContext";
 import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import ShutterCommit from "./Commit";
+import Reveal from "./Reveal";
 
 interface IShutter {
   arbitrable: `0x${string}`;
@@ -20,11 +21,13 @@ const Shutter: React.FC<IShutter> = ({ arbitrable, setIsOpen, dispute, currentPe
   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 { isCommitPeriod, isVotingPeriod, commited } = useVotingContext();
   const voteIDs = useMemo(() => drawData?.draws?.map((draw) => draw.voteIDNum) as string[], [drawData]);
 
   return id && isCommitPeriod && !commited ? (
     <ShutterCommit {...{ arbitrable, setIsOpen, voteIDs, refetch, dispute, currentPeriodIndex }} />
+  ) : id && isVotingPeriod ? (
+    <Reveal {...{ setIsOpen, voteIDs }} />
   ) : null;
 };