feat: decryption delay is the remaining of the commit period

Author: kemuru

web/src/pages/Cases/CaseDetails/Timeline.tsx

@@ -141,7 +141,7 @@ const useTimeline = (dispute: DisputeDetailsQuery["dispute"], currentItemIndex:
   }));
 };
 
-const getDeadline = (
+export const getDeadline = (
   currentPeriodIndex: number,
   lastPeriodChange?: string,
   timesPerPeriod?: string[]

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

@@ -8,11 +8,15 @@ import { useWalletClient, usePublicClient, useConfig } from "wagmi";
 
 import { simulateDisputeKitShutterCastCommitShutter } from "hooks/contracts/generated";
 import useSigningAccount from "hooks/useSigningAccount";
+import { useCountdown } from "hooks/useCountdown";
+import { DisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+
 import { isUndefined } from "utils/index";
 import { encrypt } from "utils/shutter";
 import { wrapWithToast } from "utils/wrapWithToast";
 
 import OptionsContainer from "../OptionsContainer";
+import { getDeadline } from "../../Timeline";
 
 const Container = styled.div`
   width: 100%;
@@ -24,6 +28,8 @@ interface ICommit {
   voteIDs: string[];
   setIsOpen: (val: boolean) => void;
   refetch: () => void;
+  dispute: DisputeDetailsQuery["dispute"];
+  currentPeriodIndex: number;
 }
 
 const SEPARATOR = "-";
@@ -47,7 +53,7 @@ const hashVote = (choice: bigint, salt: bigint, justification: string): `0x${str
   return keccak256(encodedParams);
 };
 
-const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch }) => {
+const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch, dispute, currentPeriodIndex }) => {
   const { id } = useParams();
   const parsedDisputeID = useMemo(() => BigInt(id ?? 0), [id]);
   const parsedVoteIDs = useMemo(() => voteIDs.map((voteID) => BigInt(voteID)), [voteIDs]);
@@ -58,6 +64,12 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch })
   const [justification, setJustification] = useState("");
   const saltKey = useMemo(() => `shutter-dispute-${id}-voteids-${voteIDs}`, [id, voteIDs]);
   const [_, setSalt] = useLocalStorage(saltKey);
+  const deadlineCommitPeriod = getDeadline(
+    currentPeriodIndex,
+    dispute?.lastPeriodChange,
+    dispute?.court.timesPerPeriod
+  );
+  const countdownToVotingPeriod = useCountdown(deadlineCommitPeriod);
 
   const handleCommit = useCallback(
     async (choice: bigint) => {
@@ -74,7 +86,9 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch })
       setSalt(JSON.stringify({ salt, choice: choice.toString(), justification }));
 
       const encodedMessage = `${choice.toString()}${SEPARATOR}${salt}${SEPARATOR}${justification}`;
-      const { encryptedCommitment, identity } = await encrypt(encodedMessage);
+      // a minimum of 60 seconds of decryptionDelay is enforced to give the threshold crypto nodes time to coordinate
+      const decryptionDelay = Math.max(countdownToVotingPeriod, 60);
+      const { encryptedCommitment, identity } = await encrypt(encodedMessage, decryptionDelay);
 
       const commitHash = hashVote(choice, BigInt(salt), justification);
 
@@ -101,6 +115,7 @@ const Commit: React.FC<ICommit> = ({ arbitrable, voteIDs, setIsOpen, refetch })
       generateSigningAccount,
       signingAccount,
       refetch,
+      countdownToVotingPeriod,
     ]
   );
 

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

@@ -4,24 +4,28 @@ import { useAccount } from "wagmi";
 
 import { useDrawQuery } from "hooks/queries/useDrawQuery";
 import { useVotingContext } from "hooks/useVotingContext";
-import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import ShutterCommit from "./Commit";
 
 interface IShutter {
   arbitrable: `0x${string}`;
   setIsOpen: (val: boolean) => void;
+  dispute: DisputeDetailsQuery["dispute"];
+  currentPeriodIndex: number;
 }
 
-const Shutter: React.FC<IShutter> = ({ arbitrable, setIsOpen }) => {
+const Shutter: React.FC<IShutter> = ({ arbitrable, setIsOpen, dispute, currentPeriodIndex }) => {
   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;
+  return id && isCommitPeriod && !commited ? (
+    <ShutterCommit {...{ arbitrable, setIsOpen, voteIDs, refetch, dispute, currentPeriodIndex }} />
+  ) : null;
 };
 
 export default Shutter;

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

@@ -15,7 +15,7 @@ import { isUndefined } from "utils/index";
 import { isLastRound } from "utils/isLastRound";
 
 import { useAppealCost } from "queries/useAppealCost";
-import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import { DisputeDetailsQuery, useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
 
 import { responsiveSize } from "styles/responsiveSize";
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -55,9 +55,10 @@ const useFinalDate = (lastPeriodChange: string, currentPeriodIndex?: number, tim
 interface IVoting {
   arbitrable?: `0x${string}`;
   currentPeriodIndex: number;
+  dispute: DisputeDetailsQuery["dispute"];
 }
 
-const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
+const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex, dispute }) => {
   const { id } = useParams();
   const { isDisconnected } = useAccount();
   const { data: disputeData } = useDisputeDetailsQuery(id);
@@ -116,7 +117,9 @@ const Voting: React.FC<IVoting> = ({ arbitrable, currentPeriodIndex }) => {
         <>
           <VotingHistory {...{ arbitrable }} isQuestion={false} />
           {isClassicDisputeKit ? <Classic arbitrable={arbitrable ?? "0x0"} setIsOpen={setIsPopupOpen} /> : null}
-          {isShutterDisputeKit ? <Shutter arbitrable={arbitrable ?? "0x0"} setIsOpen={setIsPopupOpen} /> : null}
+          {isShutterDisputeKit ? (
+            <Shutter arbitrable={arbitrable ?? "0x0"} setIsOpen={setIsPopupOpen} {...{ dispute, currentPeriodIndex }} />
+          ) : null}
         </>
       ) : (
         <VotingHistory {...{ arbitrable }} isQuestion={true} />

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

@@ -79,7 +79,7 @@ const CaseDetails: React.FC = () => {
                 }
               />
               <Route path="evidence" element={<Evidence />} />
-              <Route path="voting" element={<Voting {...{ arbitrable, currentPeriodIndex }} />} />
+              <Route path="voting" element={<Voting {...{ arbitrable, currentPeriodIndex, dispute }} />} />
               <Route path="appeal" element={<Appeal {...{ currentPeriodIndex }} />} />
               <Route path="*" element={<Navigate to="overview" replace />} />
             </Routes>

web/src/utils/shutter.ts

@@ -1,9 +1,6 @@
 import { encryptData, decrypt as shutterDecrypt } from "@shutter-network/shutter-sdk";
 import { stringToHex, hexToString, Hex } from "viem";
 
-// Time in seconds to wait before the message can be decrypted
-export const DECRYPTION_DELAY = 120;
-
 interface ShutterApiMessageData {
   eon: number;
   identity: string;
@@ -109,7 +106,7 @@ async function fetchDecryptionKey(identity: string): Promise<ShutterDecryptionKe
     if (jsonResponse?.description?.includes("timestamp not reached yet")) {
       throw new Error(
         `Cannot decrypt yet: The decryption timestamp has not been reached.\n` +
-          `Please wait at least ${DECRYPTION_DELAY} seconds after encryption before attempting to decrypt.\n` +
+          `Please wait until the commit period has ended before attempting to decrypt.\n` +
           `Error details: ${jsonResponse.description}`
       );
     }
@@ -155,9 +152,12 @@ function generateRandomBytes32(): `0x${string}` {
  * @param message The message to encrypt
  * @returns Promise with the encrypted commitment and identity
  */
-export async function encrypt(message: string): Promise<{ encryptedCommitment: string; identity: string }> {
+export async function encrypt(
+  message: string,
+  decryptionDelay: number
+): Promise<{ encryptedCommitment: string; identity: string }> {
   // Set decryption timestamp
-  const decryptionTimestamp = Math.floor(Date.now() / 1000) + DECRYPTION_DELAY;
+  const decryptionTimestamp = Math.floor(Date.now() / 1000) + decryptionDelay;
 
   // Fetch encryption data from Shutter API
   console.log(`Fetching encryption data for decryption at timestamp ${decryptionTimestamp}...`);