Skip to content

Commit 0fc3ef7

Browse files
authored
Merge pull request #1636 from kleros/feat/add-resolver-miniguides
feat: resolver miniguides
2 parents bbf5be2 + 062af96 commit 0fc3ef7

26 files changed

+725
-75
lines changed

web/package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"@cyntler/react-doc-viewer": "^1.16.3",
7878
"@filebase/client": "^0.0.5",
7979
"@kleros/kleros-sdk": "workspace:^",
80-
"@kleros/ui-components-library": "^2.12.0",
80+
"@kleros/ui-components-library": "^2.14.0",
8181
"@lifi/widget": "^2.10.1",
8282
"@middy/core": "^5.3.2",
8383
"@middy/http-json-body-parser": "^5.3.2",

web/src/assets/svgs/mini-guides/dispute-resolver/parameters.svg

+42
Loading

web/src/assets/svgs/mini-guides/dispute-resolver/parties.svg

+29
Loading

web/src/assets/svgs/mini-guides/dispute-resolver/policy.svg

+37
Loading

web/src/assets/svgs/mini-guides/dispute-resolver/start-a-case.svg

+39
Loading

web/src/assets/svgs/mini-guides/dispute-resolver/voting-options.svg

+53
Loading

web/src/assets/svgs/mini-guides/dispute-resolver/well-done.svg

+78
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import ParametersSvg from "svgs/mini-guides/dispute-resolver/parameters.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledParametersSvg = styled(ParametersSvg)`
9+
[class$="rect-1"],
10+
[class$="rect-3"],
11+
[class$="rect-7"],
12+
[class$="path-3"] {
13+
fill: ${({ theme }) => theme.whiteBackground};
14+
}
15+
[class$="rect-2"],
16+
[class$="rect-6"],
17+
[class$="rect-8"] {
18+
stroke: ${({ theme }) => theme.stroke};
19+
}
20+
[class$="rect-4"] {
21+
stroke: ${({ theme }) => theme.primaryBlue};
22+
}
23+
[class$="rect-5"],
24+
[class$="path-2"] {
25+
fill: ${({ theme }) => theme.primaryBlue};
26+
}
27+
[class$="path-1"],
28+
[class$="path-4"],
29+
[class$="path-7"],
30+
[class$="path-8"] {
31+
fill: ${({ theme }) => theme.primaryText};
32+
}
33+
[class$="path-5"] {
34+
fill: ${({ theme }) => theme.stroke};
35+
}
36+
[class$="path-6"] {
37+
fill: ${({ theme }) => theme.secondaryPurple};
38+
}
39+
`;
40+
41+
const Parameters: React.FC = () => <StyledImage as={StyledParametersSvg} />;
42+
43+
export default Parameters;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import PartiesSvg from "svgs/mini-guides/dispute-resolver/parties.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledPartiesSvg = styled(PartiesSvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"],
13+
[class$="rect-3"],
14+
[class$="rect-4"],
15+
[class$="rect-5"],
16+
[class$="rect-6"] {
17+
stroke: ${({ theme }) => theme.stroke};
18+
fill: ${({ theme }) => theme.whiteBackground};
19+
}
20+
[class$="path-1"],
21+
[class$="path-3"],
22+
[class$="path-5"],
23+
[class$="path-7"] {
24+
fill: ${({ theme }) => theme.secondaryText};
25+
}
26+
[class$="path-2"],
27+
[class$="path-4"],
28+
[class$="path-6"],
29+
[class$="path-8"] {
30+
fill: ${({ theme }) => theme.primaryText};
31+
}
32+
`;
33+
34+
const Parties: React.FC = () => <StyledImage as={StyledPartiesSvg} />;
35+
36+
export default Parties;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import PolicySvg from "svgs/mini-guides/dispute-resolver/policy.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledPolicySvg = styled(PolicySvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"] {
13+
stroke: ${({ theme }) => theme.stroke};
14+
}
15+
[class$="rect-3"] {
16+
fill: ${({ theme }) => theme.mediumBlue};
17+
stroke: ${({ theme }) => theme.primaryBlue};
18+
}
19+
[class$="path-1"],
20+
[class$="path-3"] {
21+
fill: ${({ theme }) => theme.primaryText};
22+
}
23+
[class$="path-2"],
24+
[class$="path-4"] {
25+
fill: ${({ theme }) => theme.primaryBlue};
26+
}
27+
`;
28+
29+
const Policy: React.FC = () => <StyledImage as={StyledPolicySvg} />;
30+
31+
export default Policy;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import StartACaseSvg from "svgs/mini-guides/dispute-resolver/start-a-case.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledStartACaseSvg = styled(StartACaseSvg)`
9+
[class$="rect-1"],
10+
[class$="path-1"] {
11+
fill: ${({ theme }) => theme.whiteBackground};
12+
}
13+
[class$="rect-2"],
14+
[class$="circle-2"],
15+
[class$="circle-3"],
16+
[class$="circle-4"],
17+
[class$="path-12"],
18+
[class$="path-13"] {
19+
stroke: ${({ theme }) => theme.stroke};
20+
}
21+
[class$="circle-1"],
22+
[class$="path-11"] {
23+
stroke: ${({ theme }) => theme.primaryBlue};
24+
fill: ${({ theme }) => theme.primaryBlue};
25+
}
26+
[class$="circle-2"],
27+
[class$="circle-3"],
28+
[class$="circle-4"] {
29+
fill: ${({ theme }) => theme.whiteBackground};
30+
}
31+
[class$="path-2"],
32+
[class$="path-18"] {
33+
fill: ${({ theme }) => theme.primaryText};
34+
}
35+
[class$="path-3"],
36+
[class$="path-5"],
37+
[class$="path-6"],
38+
[class$="path-7"],
39+
[class$="path-8"],
40+
[class$="path-9"],
41+
[class$="path-10"],
42+
[class$="path-15"],
43+
[class$="path-17"] {
44+
fill: ${({ theme }) => theme.secondaryText};
45+
}
46+
[class$="path-4"],
47+
[class$="path-14"],
48+
[class$="path-16"] {
49+
fill: ${({ theme }) => theme.stroke};
50+
}
51+
`;
52+
53+
const StartACase: React.FC = () => <StyledImage as={StyledStartACaseSvg} />;
54+
55+
export default StartACase;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import VotingOptionsSvg from "svgs/mini-guides/dispute-resolver/voting-options.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledVotingOptionsSvg = styled(VotingOptionsSvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"],
13+
[class$="rect-3"],
14+
[class$="rect-4"],
15+
[class$="rect-5"] {
16+
stroke: ${({ theme }) => theme.stroke};
17+
fill: ${({ theme }) => theme.whiteBackground};
18+
}
19+
[class$="circle-1"],
20+
[class$="circle-2"],
21+
[class$="path-8"] {
22+
fill: ${({ theme }) => theme.primaryBlue};
23+
}
24+
[class$="path-1"],
25+
[class$="path-3"],
26+
[class$="path-5"],
27+
[class$="path-7"] {
28+
fill: ${({ theme }) => theme.primaryText};
29+
}
30+
[class$="path-2"],
31+
[class$="path-4"],
32+
[class$="path-6"],
33+
[class$="path-9"] {
34+
fill: ${({ theme }) => theme.secondaryText};
35+
}
36+
`;
37+
38+
const VotingOptions: React.FC = () => <StyledImage as={StyledVotingOptionsSvg} />;
39+
40+
export default VotingOptions;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import WellDoneSvg from "svgs/mini-guides/dispute-resolver/well-done.svg";
5+
6+
import { StyledImage } from "../PageContentsTemplate";
7+
8+
const StyledWellDoneSvg = styled(WellDoneSvg)`
9+
[class$="rect-1"] {
10+
fill: ${({ theme }) => theme.whiteBackground};
11+
}
12+
[class$="rect-2"],
13+
[class$="rect-3"],
14+
[class$="line-1"],
15+
[class$="line-2"] {
16+
stroke: ${({ theme }) => theme.stroke};
17+
}
18+
[class$="circle-1"] {
19+
fill: ${({ theme }) => theme.primaryPurple};
20+
}
21+
[class$="path-1"],
22+
[class$="path-2"],
23+
[class$="path-4"],
24+
[class$="path-5"],
25+
[class$="path-7"],
26+
[class$="path-9"],
27+
[class$="path-11"],
28+
[class$="path-15"],
29+
[class$="path-18"],
30+
[class$="path-21"] {
31+
fill: ${({ theme }) => theme.primaryText};
32+
}
33+
[class$="path-3"],
34+
[class$="path-6"],
35+
[class$="path-8"],
36+
[class$="path-10"],
37+
[class$="path-12"],
38+
[class$="path-14"],
39+
[class$="path-17"],
40+
[class$="path-20"] {
41+
fill: ${({ theme }) => theme.secondaryText};
42+
}
43+
[class$="path-13"],
44+
[class$="path-16"],
45+
[class$="path-19"] {
46+
fill: ${({ theme }) => theme.secondaryPurple};
47+
}
48+
`;
49+
50+
const WellDone: React.FC = () => <StyledImage as={StyledWellDoneSvg} />;
51+
52+
export default WellDone;
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React from "react";
2+
3+
import PageContentsTemplate from "../PageContentsTemplate";
4+
5+
import StartACase from "./StartACase";
6+
import Parameters from "./Parameters";
7+
import VotingOptions from "./VotingOptions";
8+
import Parties from "./Parties";
9+
import Policy from "./Policy";
10+
import WellDone from "./WellDone";
11+
12+
const leftPageContents = [
13+
{
14+
title: "Start a case",
15+
paragraphs: [
16+
"First, you need to write a title, and a description for the case. Make it simple to read and understand.",
17+
],
18+
},
19+
{
20+
title: "Parameters",
21+
paragraphs: [
22+
"Define some parameters:",
23+
"• Choose a court to arbitrate the case.\n• Select a category.\n• Select the number of jurors.",
24+
"The more jurors you select, higher the arbitration cost will be. By default we use 3 jurors for the first " +
25+
"round. The arbitration cost is the value used to pay the jurors for their work.",
26+
],
27+
},
28+
{
29+
title: "Voting options",
30+
paragraphs: [
31+
"Write the question jurors will answer when voting, and the voting options. You can have 2 or more options if needed.",
32+
],
33+
},
34+
{
35+
title: "Parties of the dispute",
36+
paragraphs: ["Define the parties involved in the dispute."],
37+
},
38+
{
39+
title: "Policy",
40+
paragraphs: [
41+
"Submit a Policy. The Policy provides jurors with a framework to vote fairly. It can be a set of " +
42+
"criteria, a contract stating the rights and duties of the parties, or any set of pre-defined rules " +
43+
"that are relevant to jurors' decision-making.",
44+
],
45+
},
46+
{
47+
title: "Well done!",
48+
paragraphs: [
49+
"The case is ready to be created! Review the information, and submit the case. Don't forget to submit " +
50+
"evidence, and follow up the dispute resolution process until its conclusion.",
51+
],
52+
},
53+
];
54+
55+
const rightPageComponents = [StartACase, Parameters, VotingOptions, Parties, Policy, WellDone];
56+
57+
interface IDisputeResolver {
58+
toggleMiniGuide: () => void;
59+
}
60+
61+
const DisputeResolver: React.FC<IDisputeResolver> = ({ toggleMiniGuide }) => {
62+
return (
63+
<PageContentsTemplate
64+
toggleMiniGuide={toggleMiniGuide}
65+
leftPageContents={leftPageContents}
66+
rightPageComponents={rightPageComponents}
67+
isOnboarding={false}
68+
canClose={true}
69+
isVisible={true}
70+
/>
71+
);
72+
};
73+
74+
export default DisputeResolver;

web/src/components/Popup/MiniGuides/JurorLevels.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
100100
<Title>{title}</Title>
101101
<ParagraphsContainer>
102102
{paragraphs.map((paragraph, index) => (
103-
<label key={index}>{paragraph}</label>
103+
<label key={paragraph}>{paragraph}</label>
104104
))}
105105
</ParagraphsContainer>
106106
</LeftContentContainer>

0 commit comments

Comments
 (0)