feat(web): create ranked voting and binary voting miniguides

Author: kemuru

web/src/assets/svgs/mini-guides/binary-voting/voting-module-dark-mode.svg

@@ -0,0 +1,10 @@
+import React from "react";
+import DarkModeVotingModuleImage from "tsx:assets/svgs/mini-guides/binary-voting/voting-module-dark-mode.svg";
+import LightModeVotingModuleImage from "tsx:assets/svgs/mini-guides/binary-voting/voting-module-light-mode.svg";
+import ImageRenderer from "../ImageRenderer";
+
+const VotingModule: React.FC = () => (
+  <ImageRenderer darkModeImage={DarkModeVotingModuleImage} lightModeImage={LightModeVotingModuleImage} />
+);
+
+export default VotingModule;

web/src/assets/svgs/mini-guides/binary-voting/voting-module-light-mode.svg

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import JurorRewards from "../Staking/JurorRewards";
+import Template, { Title, ParagraphsContainer, LeftContentContainer } from "../Template";
+import VotingModule from "./VotingModule";
+
+const leftPageContents = [
+  {
+    title: "Binary Voting",
+    paragraphs: [
+      "Jurors choose one option to vote. The option which receives the majority of votes is considered the winner.",
+      "Refuse to Arbitrate is used when a dispute has been posted in the wrong court, has no clear outcome, or" +
+        " evidence is immoral and/or illegal. In case the majority decides to Refuse to Arbitrate, that option" +
+        " is considered the winner.",
+    ],
+  },
+  {
+    title: "Juror Rewards",
+    paragraphs: [
+      "Jurors whose vote is coherent with the final jury decision (after all the appeal instances) receive the" +
+        " Juror Rewards composed of arbitration fees (ETH) + PNK redistribution between jurors. Jurors whose vote" +
+        " is not coherent with the final jury decision, lose their locked PNK.",
+    ],
+  },
+];
+
+const rightPageComponents = [() => <VotingModule />, () => <JurorRewards />];
+
+const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const { title, paragraphs } = leftPageContents[currentPage - 1];
+
+  return (
+    <LeftContentContainer>
+      <Title>{title}</Title>
+      <ParagraphsContainer>
+        {paragraphs.map((paragraph, index) => (
+          <label key={index}>{paragraph}</label>
+        ))}
+      </ParagraphsContainer>
+    </LeftContentContainer>
+  );
+};
+
+const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const RightPageComponent = rightPageComponents[currentPage - 1];
+
+  return <RightPageComponent />;
+};
+
+interface IBinaryVoting {
+  toggleMiniGuide: () => void;
+}
+
+const BinaryVoting: React.FC<IBinaryVoting> = ({ toggleMiniGuide }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  return (
+    <Template
+      LeftContent={<LeftContent currentPage={currentPage} />}
+      RightContent={<RightContent currentPage={currentPage} />}
+      onClose={toggleMiniGuide}
+      currentPage={currentPage}
+      setCurrentPage={setCurrentPage}
+      numPages={leftPageContents.length}
+      isOnboarding={false}
+    />
+  );
+};
+
+export default BinaryVoting;

web/src/assets/svgs/mini-guides/ranked-voting/voting-module-dark-mode.svg

@@ -117,11 +117,11 @@ const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
   );
 };
 
-interface ILevel {
+interface IJurorLevels {
   toggleMiniGuide: () => void;
 }
 
-const Level: React.FC<ILevel> = ({ toggleMiniGuide }) => {
+const JurorLevels: React.FC<IJurorLevels> = ({ toggleMiniGuide }) => {
   const [currentPage, setCurrentPage] = useState(1);
 
   return (
@@ -137,4 +137,4 @@ const Level: React.FC<ILevel> = ({ toggleMiniGuide }) => {
   );
 };
 
-export default Level;
+export default JurorLevels;

web/src/assets/svgs/mini-guides/ranked-voting/voting-module-light-mode.svg

@@ -0,0 +1,10 @@
+import React from "react";
+import DarkModeVotingModuleImage from "tsx:assets/svgs/mini-guides/ranked-voting/voting-module-dark-mode.svg";
+import LightModeVotingModuleImage from "tsx:assets/svgs/mini-guides/ranked-voting/voting-module-light-mode.svg";
+import ImageRenderer from "../ImageRenderer";
+
+const VotingModule: React.FC = () => (
+  <ImageRenderer darkModeImage={DarkModeVotingModuleImage} lightModeImage={LightModeVotingModuleImage} />
+);
+
+export default VotingModule;

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

@@ -0,0 +1,71 @@
+import React, { useState } from "react";
+import JurorRewards from "../Staking/JurorRewards";
+import Template, { Title, ParagraphsContainer, LeftContentContainer } from "../Template";
+import VotingModule from "./VotingModule";
+
+const leftPageContents = [
+  {
+    title: "Ranked Voting",
+    paragraphs: [
+      "Jurors rank the options in order of preference. The number of options you rank doesn’t affect the rewards" +
+        " you may win as long as you rank the winning option. Note it’s also possible to reject some options you" +
+        " consider inadequate.",
+      "Refuse to Arbitrate is used when a dispute has been posted in the wrong court, has no clear outcome, or" +
+        " evidence is immoral and/or illegal. In case the majority decides to Refuse to Arbitrate, that option is" +
+        " considered the winner.",
+    ],
+  },
+  {
+    title: "Juror Rewards",
+    paragraphs: [
+      "Jurors whose vote is coherent with the final jury decision (after all the appeal instances) receive the" +
+        " Juror Rewards composed of arbitration fees (ETH) + PNK redistribution between jurors. Jurors whose vote" +
+        " is not coherent with the final jury decision, lose their locked PNK.",
+    ],
+  },
+];
+
+const rightPageComponents = [() => <VotingModule />, () => <JurorRewards />];
+
+const LeftContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const { title, paragraphs } = leftPageContents[currentPage - 1];
+
+  return (
+    <LeftContentContainer>
+      <Title>{title}</Title>
+      <ParagraphsContainer>
+        {paragraphs.map((paragraph, index) => (
+          <label key={index}>{paragraph}</label>
+        ))}
+      </ParagraphsContainer>
+    </LeftContentContainer>
+  );
+};
+
+const RightContent: React.FC<{ currentPage: number }> = ({ currentPage }) => {
+  const RightPageComponent = rightPageComponents[currentPage - 1];
+
+  return <RightPageComponent />;
+};
+
+interface IRankedVoting {
+  toggleMiniGuide: () => void;
+}
+
+const RankedVoting: React.FC<IRankedVoting> = ({ toggleMiniGuide }) => {
+  const [currentPage, setCurrentPage] = useState(1);
+
+  return (
+    <Template
+      LeftContent={<LeftContent currentPage={currentPage} />}
+      RightContent={<RightContent currentPage={currentPage} />}
+      onClose={toggleMiniGuide}
+      currentPage={currentPage}
+      setCurrentPage={setCurrentPage}
+      numPages={leftPageContents.length}
+      isOnboarding={false}
+    />
+  );
+};
+
+export default RankedVoting;

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

@@ -4,7 +4,7 @@ import { landscapeStyle } from "styles/landscapeStyle";
 import { useToggle } from "react-use";
 import XIcon from "svgs/socialmedia/x.svg";
 import HowItWorks from "components/HowItWorks";
-import Level from "components/Popup/MiniGuides/Level";
+import JurorLevels from "components/Popup/MiniGuides/JurorLevels";
 
 const Container = styled.div`
   display: flex;
@@ -63,7 +63,7 @@ interface IHeader {
 }
 
 const Header: React.FC<IHeader> = ({ levelTitle, levelNumber, totalCoherent, totalResolvedDisputes }) => {
-  const [isLevelMiniGuideOpen, toggleLevelMiniGuide] = useToggle(false);
+  const [isJurorLevelsMiniGuideOpen, toggleJurorLevelsMiniGuide] = useToggle(false);
 
   const coherencePercentage = parseFloat(((totalCoherent / Math.max(totalResolvedDisputes, 1)) * 100).toFixed(2));
   const courtUrl = window.location.origin;
@@ -75,9 +75,9 @@ const Header: React.FC<IHeader> = ({ levelTitle, levelNumber, totalCoherent, tot
       <StyledTitle>Juror Dashboard</StyledTitle>
       <LinksContainer>
         <HowItWorks
-          isMiniGuideOpen={isLevelMiniGuideOpen}
-          toggleMiniGuide={toggleLevelMiniGuide}
-          MiniGuideComponent={Level}
+          isMiniGuideOpen={isJurorLevelsMiniGuideOpen}
+          toggleMiniGuide={toggleJurorLevelsMiniGuide}
+          MiniGuideComponent={JurorLevels}
         />
         {totalResolvedDisputes > 0 ? (
           <StyledLink href={xShareUrl} target="_blank" rel="noreferrer">