feat(web): vote-commited-indicator-in-voting-history

Author: tractorss

web/src/hooks/queries/useVotingHistory.ts

@@ -27,6 +27,7 @@ const votingHistoryQuery = graphql(`
           }
           vote {
             ... on ClassicVote {
+              commited
               justification {
                 choice
                 reference

web/src/pages/Cases/CaseDetails/Voting/VotesDetails/AccordionTitle.tsx

@@ -42,10 +42,22 @@ const VoteStatus: React.FC<{
   choice?: string;
   period: string;
   answers: Answer[];
+  commited: boolean;
   isActiveRound: boolean;
-}> = ({ choice, period, answers, isActiveRound }) => {
+  hiddenVotes: boolean;
+}> = ({ choice, period, answers, isActiveRound, commited, hiddenVotes }) => {
+  if (hiddenVotes) {
+    if (!commited && (isActiveRound ? ["vote", "appeal", "execution"].includes(period) : true))
+      return <StyledLabel>Did not commit vote </StyledLabel>;
+
+    if (["evidence", "commit"].includes(period))
+      return <StyledLabel>{commited ? "Vote committed" : "Pending vote commitment"}</StyledLabel>;
+  }
+
+  // not voted
   if (isUndefined(choice) && (isActiveRound ? ["appeal", "execution"].includes(period) : true))
     return <StyledLabel>Did not vote</StyledLabel>;
+
   return (
     <StyledLabel>
       {isUndefined(choice) ? "Pending Vote" : <StyledSmall>{getVoteChoice(parseInt(choice), answers)}</StyledSmall>}
@@ -60,14 +72,16 @@ const AccordionTitle: React.FC<{
   period: string;
   answers: Answer[];
   isActiveRound: boolean;
-}> = ({ juror, choice, voteCount, period, answers, isActiveRound }) => {
+  commited: boolean;
+  hiddenVotes: boolean;
+}> = ({ juror, choice, voteCount, period, answers, isActiveRound, commited, hiddenVotes }) => {
   return (
     <TitleContainer>
       <AddressContainer>
         <Identicon size="20" string={juror} />
         <StyledLabel variant="secondaryText">{shortenAddress(juror)}</StyledLabel>
       </AddressContainer>
-      <VoteStatus {...{ choice, period, answers, isActiveRound }} />
+      <VoteStatus {...{ choice, period, answers, isActiveRound, commited, hiddenVotes }} />
       <StyledLabel variant="secondaryPurple">
         {voteCount} vote{voteCount > 1 && "s"}
       </StyledLabel>

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

@@ -95,9 +95,10 @@ interface IVotesAccordion {
   period: string;
   answers: Answer[];
   isActiveRound: boolean;
+  hiddenVotes: boolean;
 }
 
-const VotesAccordion: React.FC<IVotesAccordion> = ({ drawnJurors, period, answers, isActiveRound }) => {
+const VotesAccordion: React.FC<IVotesAccordion> = ({ drawnJurors, period, answers, isActiveRound, hiddenVotes }) => {
   const accordionItems = useMemo(() => {
     return drawnJurors
       .map((drawnJuror) =>
@@ -111,6 +112,8 @@ const VotesAccordion: React.FC<IVotesAccordion> = ({ drawnJurors, period, answer
                   period={period}
                   answers={answers}
                   isActiveRound={isActiveRound}
+                  commited={Boolean(drawnJuror.vote.commited)}
+                  hiddenVotes={hiddenVotes}
                 />
               ),
               body: (
@@ -124,7 +127,7 @@ const VotesAccordion: React.FC<IVotesAccordion> = ({ drawnJurors, period, answer
           : null
       )
       .filter((item) => item !== null);
-  }, [drawnJurors, period, answers, isActiveRound]);
+  }, [drawnJurors, period, answers, isActiveRound, hiddenVotes]);
 
   return (
     <>
@@ -146,6 +149,8 @@ const VotesAccordion: React.FC<IVotesAccordion> = ({ drawnJurors, period, answer
                   period={period}
                   answers={answers}
                   isActiveRound={isActiveRound}
+                  hiddenVotes={hiddenVotes}
+                  commited={Boolean(drawnJuror.vote?.commited)}
                 />
               </StyledCard>
             )

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

@@ -116,6 +116,7 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
             period={disputeData?.dispute?.period}
             answers={answers}
             isActiveRound={localRounds?.length - 1 === currentTab}
+            hiddenVotes={Boolean(disputeData?.dispute?.court.hiddenVotes)}
           />
         </>
       ) : (