Feat(web): add dispute template previewer

web/src/app.tsx

@@ -11,6 +11,7 @@ import Home from "./pages/Home";
 import Cases from "./pages/Cases";
 import Dashboard from "./pages/Dashboard";
 import Courts from "./pages/Courts";
+import DisputeTemplateView from "./pages/DisputeTemplateView";
 
 const App: React.FC = () => {
   return (
@@ -24,6 +25,7 @@ const App: React.FC = () => {
               <Route path="cases/*" element={<Cases />} />
               <Route path="courts/*" element={<Courts />} />
               <Route path="dashboard" element={<Dashboard />} />
+              <Route path="disputeTemplate" element={<DisputeTemplateView />} />
               <Route path="*" element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>} />
             </Route>
           </Routes>

web/src/components/ReactMarkdown.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import styled from "styled-components";
+import Reactmkdwn from "react-markdown";
+
+const StyledMarkdown = styled(Reactmkdwn)`
+  font-size: 16px;
+  *,
+  ** {
+    font-size: 16px;
+  }
+`;
+
+const ReactMarkdown: React.FC<{ children: string }> = ({ children }) => <StyledMarkdown>{children}</StyledMarkdown>;
+
+export default ReactMarkdown;

web/src/pages/DisputeTemplateView.tsx

@@ -0,0 +1,157 @@
+import React, { useMemo, useState } from "react";
+import styled from "styled-components";
+import Skeleton from "react-loading-skeleton";
+import { Textarea } from "@kleros/ui-components-library";
+import PolicyIcon from "svgs/icons/policy.svg";
+import ReactMarkdown from "components/ReactMarkdown";
+import { isUndefined } from "utils/index";
+
+const Wrapper = styled.div`
+  min-height: calc(100vh - 144px);
+  margin: 24px;
+  display: flex;
+  gap: 12px;
+`;
+
+const StyledTextArea = styled(Textarea)`
+  width: 50%;
+  height: calc(100vh - 300px);
+`;
+
+const DisputeTemplateView: React.FC = () => {
+  const [disputeTemplate, setDisputeTemplate] = useState<string>("");
+  const [errorMsg, setErrorMessage] = useState<string>("");
+  const parsedDisputeTemplate = useMemo(() => {
+    try {
+      const parsed = JSON.parse(disputeTemplate);
+      setErrorMessage("");
+      return parsed;
+    } catch (e) {
+      setErrorMessage((e as SyntaxError).message);
+      return undefined;
+    }
+  }, [disputeTemplate]);
+  const isThereInput = useMemo(() => disputeTemplate !== "", [disputeTemplate]);
+  return (
+    <Wrapper>
+      <StyledTextArea
+        value={disputeTemplate}
+        onChange={(e) => setDisputeTemplate(e.target.value)}
+        placeholder="Enter dispute template"
+        variant={isThereInput && errorMsg !== "" ? "error" : ""}
+        message={isThereInput ? errorMsg : ""}
+      />
+      <Overview disputeTemplate={parsedDisputeTemplate} />
+    </Wrapper>
+  );
+};
+
+const Container = styled.div`
+  width: 50%;
+  height: auto;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  > h1 {
+    margin: 0;
+  }
+
+  > hr {
+    width: 100%;
+  }
+`;
+
+const QuestionAndDescription = styled.div`
+  display: flex;
+  flex-direction: column;
+  > * {
+    margin: 0px;
+  }
+`;
+
+const VotingOptions = styled(QuestionAndDescription)`
+  display: flex;
+  flex-direction: column;
+  > span {
+    margin: 0px;
+    display: flex;
+    gap: 8px;
+  }
+`;
+
+const ShadeArea = styled.div`
+  width: 100%;
+  padding: 16px;
+  margin-top: 16px;
+  background-color: ${({ theme }) => theme.mediumBlue};
+  > p {
+    margin-top: 0;
+  }
+`;
+
+const StyledA = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  > svg {
+    width: 16px;
+    fill: ${({ theme }) => theme.primaryBlue};
+  }
+`;
+
+const LinkContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+const Overview: React.FC<{ disputeTemplate: any }> = ({ disputeTemplate }) => {
+  return (
+    <>
+      <Container>
+        <h1>
+          {isUndefined(disputeTemplate) ? (
+            <Skeleton />
+          ) : (
+            disputeTemplate?.title ?? "The dispute's template is not correct please vote refuse to arbitrate"
+          )}
+        </h1>
+        <QuestionAndDescription>
+          <ReactMarkdown>{disputeTemplate?.question}</ReactMarkdown>
+          <p>{disputeTemplate?.description}</p>
+        </QuestionAndDescription>
+        {disputeTemplate?.frontendUrl && (
+          <a href={disputeTemplate?.frontendUrl} target="_blank" rel="noreferrer">
+            Go to arbitrable
+          </a>
+        )}
+        <VotingOptions>
+          {disputeTemplate && <h3>Voting Options</h3>}
+          {disputeTemplate?.answers?.map((answer: { title: string; description: string }, i: number) => (
+            <span key={i}>
+              <small>Option {i + 1}:</small>
+              <label>{answer.title}</label>
+            </span>
+          ))}
+        </VotingOptions>
+        <ShadeArea>
+          <p>Make sure you understand the Policies</p>
+          <LinkContainer>
+            {disputeTemplate?.policyURI && (
+              <StyledA
+                href={`https://cloudflare-ipfs.com${disputeTemplate.policyURI}`}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <PolicyIcon />
+                Dispute Policy
+              </StyledA>
+            )}
+          </LinkContainer>
+        </ShadeArea>
+      </Container>
+    </>
+  );
+};
+
+export default DisputeTemplateView;