feat(web): show info messages when not in reveal period or when faile…

…d to commit
kleros · Jan 9, 2024 · 88aa8cf · 88aa8cf
1 parent 5d2d039
commit 88aa8cf
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 52 deletions.
diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/Reveal.tsx
@@ -7,55 +7,36 @@ import { useWalletClient, usePublicClient } from "wagmi";
 import ReactMarkdown from "react-markdown";
 import { Button } from "@kleros/ui-components-library";
 import { prepareWriteDisputeKitClassic } from "hooks/contracts/generated";
-import { wrapWithToast } from "utils/wrapWithToast";
+import useSigningAccount from "hooks/useSigningAccount";
 import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
-import JustificationArea from "./JustificationArea";
-import { isUndefined } from "utils/index";
 import { useDisputeTemplate } from "queries/useDisputeTemplate";
-import useSigningAccount from "hooks/useSigningAccount";
+import { isUndefined } from "utils/index";
+import { wrapWithToast, catchShortMessage } from "utils/wrapWithToast";
+import InfoCard from "components/InfoCard";
+import JustificationArea from "./JustificationArea";
 
 const Container = styled.div`
   width: 100%;
   height: auto;
 `;
 
-const getSaltAndChoice = async (
-  signingAccount: PrivateKeyAccount | undefined,
-  generateSigningAccount: () => Promise<PrivateKeyAccount | undefined> | undefined,
-  saltKey: string,
-  answers: { title: string; description: string }[],
-  commit: string
-) => {
-  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);
-  const { choice } = answers.reduce<{ found: boolean; choice: number }>(
-    (acc, _, i) => {
-      if (acc.found) return acc;
-      const innerCommit = keccak256(encodePacked(["uint256", "uint256"], [BigInt(i), BigInt(salt)]));
-      if (innerCommit === commit) {
-        return { found: true, choice: i };
-      } else return acc;
-    },
-    { found: false, choice: -1 }
-  );
-  return { salt, choice };
-};
+const StyledInfoCard = styled(InfoCard)`
+  margin: 16px 0;
+`;
+
+const StyledButton = styled(Button)`
+  margin: 16px auto;
+`;
 
 interface IReveal {
   arbitrable: `0x${string}`;
   voteIDs: string[];
   setIsOpen: (val: boolean) => void;
   commit: string;
+  isRevealPeriod: boolean;
 }
 
-const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit }) => {
+const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit, isRevealPeriod }) => {
   const { id } = useParams();
   const [isSending, setIsSending] = useState(false);
   const parsedDisputeID = useMemo(() => BigInt(id ?? 0), [id]);
@@ -79,10 +60,12 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit }) =
       ? await getSaltAndChoice(signingAccount, generateSigningAccount, saltKey, disputeTemplate.answers, commit)
       : JSON.parse(storedSaltAndChoice);
     if (isUndefined(choice)) return;
-    const { request } = await prepareWriteDisputeKitClassic({
-      functionName: "castVote",
-      args: [parsedDisputeID, parsedVoteIDs, BigInt(choice), BigInt(salt), justification],
-    });
+    const { request } = await catchShortMessage(
+      prepareWriteDisputeKitClassic({
+        functionName: "castVote",
+        args: [parsedDisputeID, parsedVoteIDs, BigInt(choice), BigInt(salt), justification],
+      })
+    );
     if (request && walletClient) {
       await wrapWithToast(async () => await walletClient.writeContract(request), publicClient).then((result) => {
         setIsOpen(result);
@@ -106,19 +89,54 @@ const Reveal: React.FC<IReveal> = ({ arbitrable, voteIDs, setIsOpen, commit }) =
 
   return (
     <Container>
-      <ReactMarkdown>{disputeTemplate.question}</ReactMarkdown>
-      <JustificationArea {...{ justification, setJustification }} />
-      <Button
-        variant="secondary"
-        text="Justify & Reveal"
-        disabled={isSending}
-        isLoading={isSending}
-        onClick={async () => {
-          handleReveal();
-        }}
-      />
+      {isUndefined(commit) ? (
+        <StyledInfoCard msg="Failed to commit on time." />
+      ) : isRevealPeriod ? (
+        <>
+          <ReactMarkdown>{disputeTemplate?.question}</ReactMarkdown>
+          <JustificationArea {...{ justification, setJustification }} />
+          <StyledButton
+            variant="secondary"
+            text="Justify & Reveal"
+            disabled={isSending}
+            isLoading={isSending}
+            onClick={handleReveal}
+          />
+        </>
+      ) : (
+        <StyledInfoCard msg="Your vote was successfully commited, please wait until reveal period to reveal it." />
+      )}
     </Container>
   );
 };
 
+const getSaltAndChoice = async (
+  signingAccount: PrivateKeyAccount | undefined,
+  generateSigningAccount: () => Promise<PrivateKeyAccount | undefined> | undefined,
+  saltKey: string,
+  answers: { title: string; description: string }[],
+  commit: string
+) => {
+  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);
+  const { choice } = answers.reduce<{ found: boolean; choice: number }>(
+    (acc, _, i) => {
+      if (acc.found) return acc;
+      const innerCommit = keccak256(encodePacked(["uint256", "uint256"], [BigInt(i), BigInt(salt)]));
+      if (innerCommit === commit) {
+        return { found: true, choice: i };
+      } else return acc;
+    },
+    { found: false, choice: -1 }
+  );
+  return { salt, choice };
+};
+
 export default Reveal;
diff --git a/web/src/pages/Cases/CaseDetails/Voting/Classic/index.tsx b/web/src/pages/Cases/CaseDetails/Voting/Classic/index.tsx
@@ -17,15 +17,16 @@ const Classic: React.FC<IClassic> = ({ arbitrable, setIsOpen }) => {
   const { address } = useAccount();
   const { data: disputeData } = useDisputeDetailsQuery(id);
   const { data: drawData } = useDrawQuery(address?.toLowerCase(), id, disputeData?.dispute?.currentRound.id);
-  const isCommitReveal = useMemo(() => disputeData?.dispute?.court.hiddenVotes, [disputeData]);
+  const isHiddenVotes = useMemo(() => disputeData?.dispute?.court.hiddenVotes, [disputeData]);
+  const isCommitPeriod = useMemo(() => disputeData?.dispute?.period === "commit", [disputeData]);
   const commited = useMemo(() => drawData?.draws[0].vote?.commited, [drawData]);
   const commit = useMemo(() => drawData?.draws[0].vote?.commit, [drawData]);
   const voteIDs = useMemo(() => drawData?.draws?.map((draw) => draw.voteIDNum) as string[], [drawData]);
-  return id && isCommitReveal ? (
-    !commited ? (
+  return id && isHiddenVotes ? (
+    isCommitPeriod && !commited ? (
       <Commit {...{ arbitrable, setIsOpen, voteIDs }} />
     ) : (
-      <Reveal {...{ arbitrable, setIsOpen, voteIDs, commit }} />
+      <Reveal {...{ arbitrable, setIsOpen, voteIDs, commit, isRevealPeriod: !isCommitPeriod }} />
     )
   ) : (
     <Vote {...{ arbitrable, setIsOpen, voteIDs }} />