feat: setup structure for resolver miniguides

Author: kemuru

web/src/components/Popup/MiniGuides/DisputeResolver/CrowdfundAppeal.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+import CrowdfundAppealSvg from "svgs/mini-guides/appeal/crowdfund-appeal.svg";
+
+import { StyledImage } from "../PageContentsTemplate";
+
+const StyledCrowdfundAppealSvg = styled(CrowdfundAppealSvg)`
+  [class$="rect-bg"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+    stroke: ${({ theme }) => theme.stroke};
+  }
+
+  [class$="path-1"],
+  [class$="path-2"],
+  [class$="path-3"] {
+    fill: ${({ theme }) => theme.primaryText};
+  }
+
+  [class$="rect-fg"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+    stroke: ${({ theme }) => theme.stroke};
+  }
+
+  [class$="rect-accent"] {
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+
+  [class$="path-4"] {
+    fill: ${({ theme }) => theme.whiteBackground};
+  }
+
+  [class$="path-5"] {
+    fill: ${({ theme }) => theme.secondaryText};
+  }
+`;
+
+const CrowdfundAppeal: React.FC = () => <StyledImage as={StyledCrowdfundAppealSvg} />;
+
+export default CrowdfundAppeal;

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

@@ -0,0 +1,39 @@
+import React from "react";
+
+import PageContentsTemplate from "../PageContentsTemplate";
+
+import CrowdfundAppeal from "./CrowdfundAppeal";
+
+const leftPageContents = [
+  {
+    title: "Dispute Resolver",
+    paragraphs: [
+      "If after the jury has reached a decision, a party is not satisfied (because she thinks the result was" +
+        " unfair), she can appeal and have the dispute ruled again.",
+      "Every time the case is appealed a new round starts with all the voting options available for voting" +
+        " again. The results of the previous rounds are irrelevant in terms of what the final result will be.",
+      "Each new appeal instance will have twice the previous number of jurors plus one.",
+    ],
+  },
+];
+
+const rightPageComponents = [CrowdfundAppeal];
+
+interface IDisputeResolver {
+  toggleMiniGuide: () => void;
+}
+
+const DisputeResolver: React.FC<IDisputeResolver> = ({ toggleMiniGuide }) => {
+  return (
+    <PageContentsTemplate
+      toggleMiniGuide={toggleMiniGuide}
+      leftPageContents={leftPageContents}
+      rightPageComponents={rightPageComponents}
+      isOnboarding={false}
+      canClose={true}
+      isVisible={true}
+    />
+  );
+};
+
+export default DisputeResolver;

web/src/pages/Resolver/index.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled, { css } from "styled-components";
 
 import { Navigate, Route, Routes, useLocation } from "react-router-dom";
+import { useToggle } from "react-use";
 import { useAccount } from "wagmi";
 
 import { landscapeStyle } from "styles/landscapeStyle";
@@ -10,6 +11,8 @@ import { responsiveSize } from "styles/responsiveSize";
 import ConnectWallet from "components/ConnectWallet";
 import { EnsureAuth } from "components/EnsureAuth";
 import HeroImage from "components/HeroImage";
+import HowItWorks from "components/HowItWorks";
+import Resolver from "components/Popup/MiniGuides/DisputeResolver";
 
 import Description from "./Briefing/Description";
 import Title from "./Briefing/Title";
@@ -67,9 +70,10 @@ const StyledLabel = styled.label`
 
 const DisputeResolver: React.FC = () => {
   const location = useLocation();
-
+  const [isDisputeResolverMiniGuideOpen, toggleDisputeResolverMiniGuide] = useToggle(false);
   const { isConnected } = useAccount();
   const isPreviewPage = location.pathname.includes("/preview");
+
   return (
     <>
       <HeroImage />
@@ -79,6 +83,11 @@ const DisputeResolver: React.FC = () => {
           <StyledEnsureAuth>
             <MiddleContentContainer>
               {isConnected && !isPreviewPage ? <Timeline /> : null}
+              <HowItWorks
+                isMiniGuideOpen={isDisputeResolverMiniGuideOpen}
+                toggleMiniGuide={toggleDisputeResolverMiniGuide}
+                MiniGuideComponent={Resolver}
+              />
               <Routes>
                 <Route index element={<Navigate to="title" replace />} />
                 <Route path="/title/*" element={<Title />} />