feat(web): new mini guide screen for commit-reveal, link voting guide…

web/src/components/Popup/MiniGuides/BinaryVoting/PrivateVoting.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import styled from "styled-components";
+import PrivateVotingSvg from "tsx:assets/svgs/mini-guides/binary-voting/private-voting.svg";
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledPrivateVotingSvg = styled(PrivateVotingSvg)`
+  [class$="rect-1"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="circle-1"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+    stroke: ${({ theme }) => theme.primaryBlue};
+  }
+  [class$="circle-2"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="circle-3"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+    stroke: ${({ theme }) => theme.primaryBlue};
+  }
+  [class$="path-1"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+  [class$="path-2"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="path-3"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-4"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="path-5"] {
+    fill: ${({ theme }) => theme.stroke};
+  }
+  [class$="path-6"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-7"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+  [class$="path-8"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+  [class$="path-9"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+  [class$="path-10"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+  [class$="path-11"] {
+    stroke: ${({ theme }) => theme.stroke};
+  }
+`;
+
+const PrivateVoting: React.FC = () => <StyledImage as={StyledPrivateVotingSvg} />;
+
+export default PrivateVoting;

web/src/components/Popup/MiniGuides/BinaryVoting/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import PageContentsTemplate from "../PageContentsTemplate";
 import JurorRewards from "../Staking/JurorRewards";
 import VotingModule from "./VotingModule";
+import PrivateVoting from "./PrivateVoting";
 
 const leftPageContents = [
   {
@@ -13,6 +14,17 @@ const leftPageContents = [
         " is considered the winner.",
     ],
   },
+  {
+    title: "Private Voting",
+    paragraphs: [
+      "This feature introduces the commit and reveal mechanism, enhancing the secrecy and integrity of votes.",
+      "What’s different? In courts with private voting, jurors cast their votes in two parts: Firstly, they" +
+        " vote on a chosen option. The vote is kept secret from other jurors. (Commit period). Finally, they reveal" +
+        " their votes adding a justification (Voting Period).",
+      "Note that jurors who miss the Commit period, cannot progress to the Voting period, not being able to conclude" +
+        " the voting. Make sure not to miss the Commit, and the Voting periods.",
+    ],
+  },
   {
     title: "Juror Rewards",
     paragraphs: [
@@ -23,7 +35,7 @@ const leftPageContents = [
   },
 ];
 
-const rightPageComponents = [VotingModule, JurorRewards];
+const rightPageComponents = [VotingModule, PrivateVoting, JurorRewards];
 
 interface IBinaryVoting {
   toggleMiniGuide: () => void;

web/src/components/Popup/MiniGuides/RankedVoting/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import JurorRewards from "../Staking/JurorRewards";
 import VotingModule from "./VotingModule";
 import PageContentsTemplate from "../PageContentsTemplate";
+import PrivateVoting from "../BinaryVoting/PrivateVoting";
 
 const leftPageContents = [
   {
@@ -15,6 +16,17 @@ const leftPageContents = [
         " considered the winner.",
     ],
   },
+  {
+    title: "Private Voting",
+    paragraphs: [
+      "This feature introduces the commit and reveal mechanism, enhancing the secrecy and integrity of votes.",
+      "What’s different? In courts with private voting, jurors cast their votes in two parts: Firstly, they" +
+        " vote on a chosen option. The vote is kept secret from other jurors. (Commit period). Finally, they reveal" +
+        " their votes adding a justification (Voting Period).",
+      "Note that jurors who miss the Commit period, cannot progress to the Voting period, not being able to conclude" +
+        " the voting. Make sure not to miss the Commit, and the Voting periods.",
+    ],
+  },
   {
     title: "Juror Rewards",
     paragraphs: [
@@ -25,7 +37,7 @@ const leftPageContents = [
   },
 ];
 
-const rightPageComponents = [VotingModule, JurorRewards];
+const rightPageComponents = [VotingModule, PrivateVoting, JurorRewards];
 
 interface IRankedVoting {
   toggleMiniGuide: () => void;

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

@@ -1,16 +1,20 @@
 import React, { useEffect, useMemo, useState } from "react";
 import styled from "styled-components";
+import { responsiveSize } from "styles/responsiveSize";
 import { useParams } from "react-router-dom";
 import ReactMarkdown from "react-markdown";
+import { useToggle } from "react-use";
+import Skeleton from "react-loading-skeleton";
 import { Tabs } from "@kleros/ui-components-library";
 import { useVotingHistory } from "queries/useVotingHistory";
-import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
+import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
+import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData";
 import { getLocalRounds } from "utils/getLocalRounds";
-import PendingVotesBox from "./PendingVotesBox";
 import { getDrawnJurorsWithCount } from "utils/getDrawnJurorsWithCount";
-import { useDisputeDetailsQuery } from "hooks/queries/useDisputeDetailsQuery";
 import VotesAccordion from "./VotesDetails";
-import Skeleton from "react-loading-skeleton";
+import PendingVotesBox from "./PendingVotesBox";
+import HowItWorks from "components/HowItWorks";
+import BinaryVoting from "components/Popup/MiniGuides/BinaryVoting";
 
 const Container = styled.div``;
 
@@ -19,13 +23,28 @@ const StyledTabs = styled(Tabs)`
   margin-bottom: 16px;
 `;
 
+const Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  margin-bottom: ${responsiveSize(16, 32)};
+`;
+
+const StyledTitle = styled.h1`
+  margin-bottom: 0;
+`;
+
 const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean }> = ({ arbitrable, isQuestion }) => {
   const { id } = useParams();
   const { data: votingHistory } = useVotingHistory(id);
   const { data: disputeData } = useDisputeDetailsQuery(id);
   const [currentTab, setCurrentTab] = useState(0);
   const { data: disputeDetails } = usePopulatedDisputeData(id, arbitrable);
   const rounds = votingHistory?.dispute?.rounds;
+  const [isBinaryVotingMiniGuideOpen, toggleBinaryVotingMiniGuide] = useToggle(false);
 
   const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
   //set current tab to latest round
@@ -39,7 +58,14 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
 
   return (
     <Container>
-      <h1>Voting History</h1>
+      <Header>
+        <StyledTitle>Voting History</StyledTitle>
+        <HowItWorks
+          isMiniGuideOpen={isBinaryVotingMiniGuideOpen}
+          toggleMiniGuide={toggleBinaryVotingMiniGuide}
+          MiniGuideComponent={BinaryVoting}
+        />
+      </Header>
       {rounds && localRounds && disputeDetails ? (
         <>
           {isQuestion && disputeDetails.question ? (

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

@@ -1,7 +1,9 @@
 import React, { useMemo, useState } from "react";
 import styled from "styled-components";
-import { useParams } from "react-router-dom";
 import { responsiveSize } from "styles/responsiveSize";
+import { useParams } from "react-router-dom";
+import Skeleton from "react-loading-skeleton";
+import { useAccount } from "wagmi";
 import VoteIcon from "assets/svgs/icons/voted.svg";
 import { Periods } from "consts/periods";
 import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
@@ -15,9 +17,7 @@ import { getPeriodEndTimestamp } from "components/DisputeCard";
 import InfoCard from "components/InfoCard";
 import Classic from "./Classic";
 import VotingHistory from "./VotingHistory";
-import Skeleton from "react-loading-skeleton";
 import { useVotingContext } from "hooks/useVotingContext";
-import { useAccount } from "wagmi";
 
 const Container = styled.div`
   padding: ${responsiveSize(16, 32)};