Skip to content

Commit e15dab0

Browse files
authored
Merge branch 'dev' into chore(web)/standard-ipfs-url
2 parents 4bea274 + 4096a12 commit e15dab0

File tree

6 files changed

+138
-11
lines changed

6 files changed

+138
-11
lines changed

web/src/assets/svgs/mini-guides/binary-voting/private-voting.svg

Lines changed: 17 additions & 0 deletions
Loading
Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import PrivateVotingSvg from "tsx:assets/svgs/mini-guides/binary-voting/private-voting.svg";
4+
import { StyledImage } from "../PageContentsTemplate";
5+
6+
const StyledPrivateVotingSvg = styled(PrivateVotingSvg)`
7+
[class$="rect-1"] {
8+
fill: ${({ theme }) => theme.whiteBackground};
9+
stroke: ${({ theme }) => theme.stroke};
10+
}
11+
[class$="circle-1"] {
12+
fill: ${({ theme }) => theme.primaryBlue};
13+
stroke: ${({ theme }) => theme.primaryBlue};
14+
}
15+
[class$="circle-2"] {
16+
fill: ${({ theme }) => theme.whiteBackground};
17+
stroke: ${({ theme }) => theme.stroke};
18+
}
19+
[class$="circle-3"] {
20+
fill: ${({ theme }) => theme.primaryBlue};
21+
stroke: ${({ theme }) => theme.primaryBlue};
22+
}
23+
[class$="path-1"] {
24+
fill: ${({ theme }) => theme.secondaryText};
25+
}
26+
[class$="path-2"] {
27+
fill: ${({ theme }) => theme.whiteBackground};
28+
}
29+
[class$="path-3"] {
30+
fill: ${({ theme }) => theme.primaryText};
31+
}
32+
[class$="path-4"] {
33+
stroke: ${({ theme }) => theme.stroke};
34+
}
35+
[class$="path-5"] {
36+
fill: ${({ theme }) => theme.stroke};
37+
}
38+
[class$="path-6"] {
39+
fill: ${({ theme }) => theme.primaryText};
40+
}
41+
[class$="path-7"] {
42+
fill: ${({ theme }) => theme.secondaryText};
43+
}
44+
[class$="path-8"] {
45+
stroke: ${({ theme }) => theme.stroke};
46+
}
47+
[class$="path-9"] {
48+
fill: ${({ theme }) => theme.whiteBackground};
49+
}
50+
[class$="path-10"] {
51+
fill: ${({ theme }) => theme.primaryText};
52+
}
53+
[class$="path-11"] {
54+
stroke: ${({ theme }) => theme.stroke};
55+
}
56+
`;
57+
58+
const PrivateVoting: React.FC = () => <StyledImage as={StyledPrivateVotingSvg} />;
59+
60+
export default PrivateVoting;

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import PageContentsTemplate from "../PageContentsTemplate";
33
import JurorRewards from "../Staking/JurorRewards";
44
import VotingModule from "./VotingModule";
5+
import PrivateVoting from "./PrivateVoting";
56

67
const leftPageContents = [
78
{
@@ -13,6 +14,17 @@ const leftPageContents = [
1314
" is considered the winner.",
1415
],
1516
},
17+
{
18+
title: "Private Voting",
19+
paragraphs: [
20+
"This feature introduces the commit and reveal mechanism, enhancing the secrecy and integrity of votes.",
21+
"What’s different? In courts with private voting, jurors cast their votes in two parts: Firstly, they" +
22+
" vote on a chosen option. The vote is kept secret from other jurors. (Commit period). Finally, they reveal" +
23+
" their votes adding a justification (Voting Period).",
24+
"Note that jurors who miss the Commit period, cannot progress to the Voting period, not being able to conclude" +
25+
" the voting. Make sure not to miss the Commit, and the Voting periods.",
26+
],
27+
},
1628
{
1729
title: "Juror Rewards",
1830
paragraphs: [
@@ -23,7 +35,7 @@ const leftPageContents = [
2335
},
2436
];
2537

26-
const rightPageComponents = [VotingModule, JurorRewards];
38+
const rightPageComponents = [VotingModule, PrivateVoting, JurorRewards];
2739

2840
interface IBinaryVoting {
2941
toggleMiniGuide: () => void;

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

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from "react";
22
import JurorRewards from "../Staking/JurorRewards";
33
import VotingModule from "./VotingModule";
44
import PageContentsTemplate from "../PageContentsTemplate";
5+
import PrivateVoting from "../BinaryVoting/PrivateVoting";
56

67
const leftPageContents = [
78
{
@@ -15,6 +16,17 @@ const leftPageContents = [
1516
" considered the winner.",
1617
],
1718
},
19+
{
20+
title: "Private Voting",
21+
paragraphs: [
22+
"This feature introduces the commit and reveal mechanism, enhancing the secrecy and integrity of votes.",
23+
"What’s different? In courts with private voting, jurors cast their votes in two parts: Firstly, they" +
24+
" vote on a chosen option. The vote is kept secret from other jurors. (Commit period). Finally, they reveal" +
25+
" their votes adding a justification (Voting Period).",
26+
"Note that jurors who miss the Commit period, cannot progress to the Voting period, not being able to conclude" +
27+
" the voting. Make sure not to miss the Commit, and the Voting periods.",
28+
],
29+
},
1830
{
1931
title: "Juror Rewards",
2032
paragraphs: [
@@ -25,7 +37,7 @@ const leftPageContents = [
2537
},
2638
];
2739

28-
const rightPageComponents = [VotingModule, JurorRewards];
40+
const rightPageComponents = [VotingModule, PrivateVoting, JurorRewards];
2941

3042
interface IRankedVoting {
3143
toggleMiniGuide: () => void;

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

Lines changed: 32 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,21 @@
11
import React, { useEffect, useMemo, useState } from "react";
22
import styled from "styled-components";
3+
import { responsiveSize } from "styles/responsiveSize";
34
import { useParams } from "react-router-dom";
45
import ReactMarkdown from "react-markdown";
6+
import { useToggle } from "react-use";
7+
import Skeleton from "react-loading-skeleton";
58
import { Tabs } from "@kleros/ui-components-library";
69
import { useVotingHistory } from "queries/useVotingHistory";
7-
import { usePopulatedDisputeData } from "hooks/queries/usePopulatedDisputeData";
10+
import { useDisputeDetailsQuery } from "queries/useDisputeDetailsQuery";
11+
import { usePopulatedDisputeData } from "queries/usePopulatedDisputeData";
12+
import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index";
813
import { getLocalRounds } from "utils/getLocalRounds";
9-
import PendingVotesBox from "./PendingVotesBox";
1014
import { getDrawnJurorsWithCount } from "utils/getDrawnJurorsWithCount";
11-
import { useDisputeDetailsQuery } from "hooks/queries/useDisputeDetailsQuery";
15+
import HowItWorks from "components/HowItWorks";
16+
import BinaryVoting from "components/Popup/MiniGuides/BinaryVoting";
1217
import VotesAccordion from "./VotesDetails";
13-
import Skeleton from "react-loading-skeleton";
14-
import { INVALID_DISPUTE_DATA_ERROR, RPC_ERROR } from "consts/index";
18+
import PendingVotesBox from "./PendingVotesBox";
1519

1620
const Container = styled.div``;
1721

@@ -20,13 +24,28 @@ const StyledTabs = styled(Tabs)`
2024
margin-bottom: 16px;
2125
`;
2226

27+
const Header = styled.div`
28+
display: flex;
29+
flex-direction: row;
30+
flex-wrap: wrap;
31+
align-items: center;
32+
justify-content: space-between;
33+
gap: 16px;
34+
margin-bottom: ${responsiveSize(16, 32)};
35+
`;
36+
37+
const StyledTitle = styled.h1`
38+
margin-bottom: 0;
39+
`;
40+
2341
const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean }> = ({ arbitrable, isQuestion }) => {
2442
const { id } = useParams();
2543
const { data: votingHistory } = useVotingHistory(id);
2644
const { data: disputeData } = useDisputeDetailsQuery(id);
2745
const [currentTab, setCurrentTab] = useState(0);
2846
const { data: disputeDetails, isError } = usePopulatedDisputeData(id, arbitrable);
2947
const rounds = votingHistory?.dispute?.rounds;
48+
const [isBinaryVotingMiniGuideOpen, toggleBinaryVotingMiniGuide] = useToggle(false);
3049

3150
const localRounds = getLocalRounds(votingHistory?.dispute?.disputeKitDispute);
3251
//set current tab to latest round
@@ -40,7 +59,14 @@ const VotingHistory: React.FC<{ arbitrable?: `0x${string}`; isQuestion: boolean
4059

4160
return (
4261
<Container>
43-
<h1>Voting History</h1>
62+
<Header>
63+
<StyledTitle>Voting History</StyledTitle>
64+
<HowItWorks
65+
isMiniGuideOpen={isBinaryVotingMiniGuideOpen}
66+
toggleMiniGuide={toggleBinaryVotingMiniGuide}
67+
MiniGuideComponent={BinaryVoting}
68+
/>
69+
</Header>
4470
{rounds && localRounds && disputeDetails ? (
4571
<>
4672
{isQuestion && disputeDetails.question ? (

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import React, { useMemo, useState } from "react";
22
import styled from "styled-components";
3-
import { useParams } from "react-router-dom";
43
import { responsiveSize } from "styles/responsiveSize";
4+
import { useParams } from "react-router-dom";
5+
import Skeleton from "react-loading-skeleton";
6+
import { useAccount } from "wagmi";
57
import VoteIcon from "assets/svgs/icons/voted.svg";
68
import { Periods } from "consts/periods";
79
import { useLockOverlayScroll } from "hooks/useLockOverlayScroll";
@@ -15,9 +17,7 @@ import { getPeriodEndTimestamp } from "components/DisputeCard";
1517
import InfoCard from "components/InfoCard";
1618
import Classic from "./Classic";
1719
import VotingHistory from "./VotingHistory";
18-
import Skeleton from "react-loading-skeleton";
1920
import { useVotingContext } from "hooks/useVotingContext";
20-
import { useAccount } from "wagmi";
2121

2222
const Container = styled.div`
2323
padding: ${responsiveSize(16, 32)};

0 commit comments

Comments
 (0)