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

Author: tractorss

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

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/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) => ({