Merge pull request #1676 from kleros/feat/rewards-and-execution-indicators

feat(web): ruling-and-rewards-indicators

Author: alcercu

web/src/hooks/queries/useVotingHistory.ts

@@ -12,8 +12,10 @@ const votingHistoryQuery = graphql(`
     dispute(id: $disputeID) {
       id
       createdAt
+      ruled
       rounds {
         nbVotes
+        jurorRewardsDispersed
         court {
           id
           name
@@ -25,6 +27,7 @@ const votingHistoryQuery = graphql(`
           }
           vote {
             ... on ClassicVote {
+              commited
               justification {
                 choice
                 reference

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

@@ -0,0 +1,27 @@
+import React from "react";
+import styled from "styled-components";
+
+import CheckCircle from "svgs/icons/check-circle-outline.svg";
+import Coins from "svgs/icons/pile-coins.svg";
+
+import Label from "components/DisputeView/CardLabels/Label";
+
+const Container = styled.div`
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+
+interface IRulingAndRewardsIndicators {
+  jurorRewardsDispersed: boolean;
+  ruled: boolean;
+}
+
+const RulingAndRewardsIndicators: React.FC<IRulingAndRewardsIndicators> = ({ jurorRewardsDispersed, ruled }) => (
+  <Container>
+    {ruled ? <Label icon={CheckCircle} text="Ruling executed" color="green" /> : null}
+    {jurorRewardsDispersed ? <Label icon={Coins} text="Juror rewards distributed" color="green" /> : null}
+  </Container>
+);
+
+export default RulingAndRewardsIndicators;

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

@@ -22,13 +22,15 @@ import HowItWorks from "components/HowItWorks";
 import BinaryVoting from "components/Popup/MiniGuides/BinaryVoting";
 
 import PendingVotesBox from "./PendingVotesBox";
+import RulingAndRewardsIndicators from "./RulingAndRewardsIndicators";
 import VotesAccordion from "./VotesDetails";
 
 const Container = styled.div``;
 
 const StyledTabs = styled(Tabs)`
   width: 100%;
   margin-bottom: 16px;
+  margin-top: 48px;
 `;
 
 const Header = styled.div`
@@ -69,6 +71,8 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
     [votingHistory, currentTab]
   );
 
+  const jurorRewardsDispersed = useMemo(() => Boolean(rounds?.every((round) => round.jurorRewardsDispersed)), [rounds]);
+
   return (
     <Container>
       <Header>
@@ -90,6 +94,10 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
               )}
             </>
           )}
+          <RulingAndRewardsIndicators
+            ruled={Boolean(disputeData?.dispute?.ruled)}
+            jurorRewardsDispersed={jurorRewardsDispersed}
+          />
           <StyledTabs
             currentValue={currentTab}
             items={rounds.map((_, i) => ({
@@ -108,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)}
           />
         </>
       ) : (