feat(web): list page, item page, submit item wizard, popups, stylings

web/package.json

@@ -73,7 +73,7 @@
   },
   "dependencies": {
     "@filebase/client": "^0.0.5",
-    "@kleros/ui-components-library": "^2.6.3",
+    "@kleros/ui-components-library": "^2.7.1",
     "@sentry/react": "^7.93.0",
     "@sentry/tracing": "^7.93.0",
     "@supabase/supabase-js": "^2.39.3",

web/src/app.tsx

@@ -11,6 +11,8 @@ import RefetchOnBlock from "context/RefetchOnBlock";
 import Layout from "layout/index";
 import Home from "./pages/Home";
 import AllLists from "./pages/AllLists";
+import SubmitItem from "./pages/SubmitItem";
+import { SubmitItemProvider } from "./context/SubmitItemContext";
 
 const App: React.FC = () => {
   return (
@@ -19,13 +21,16 @@ const App: React.FC = () => {
         <RefetchOnBlock />
         <Web3Provider>
           <IsListProvider>
-            <SentryRoutes>
-              <Route path="/" element={<Layout />}>
-                <Route index element={<Home />} />
-                <Route path="lists/*" element={<AllLists />} />
-                <Route path="*" element={<h1>404 not found</h1>} />
-              </Route>
-            </SentryRoutes>
+            <SubmitItemProvider>
+              <SentryRoutes>
+                <Route path="/" element={<Layout />}>
+                  <Route index element={<Home />} />
+                  <Route path="lists/*" element={<AllLists />} />
+                  <Route path="submitItem/*" element={<SubmitItem />} />
+                  <Route path="*" element={<h1>404 not found</h1>} />
+                </Route>
+              </SentryRoutes>
+            </SubmitItemProvider>
           </IsListProvider>
         </Web3Provider>
       </QueryClientProvider>

web/src/components/ChainIcon.tsx

@@ -6,7 +6,7 @@ import PolygonIcon from "svgs/chains/polygon.svg";
 import GnosisIcon from "svgs/chains/gnosis.svg";
 import styled from "styled-components";
 
-const getChainIcon = (chainId: number) => {
+export const getChainIcon = (chainId: number) => {
   switch (chainId) {
     case mainnet.id:
     case sepolia.id:
@@ -25,6 +25,25 @@ const getChainIcon = (chainId: number) => {
   }
 };
 
+export const getChainName = (chainId: number) => {
+  switch (chainId) {
+    case mainnet.id:
+    case sepolia.id:
+      return "Ethereum";
+    case arbitrum.id:
+    case arbitrumSepolia.id:
+      return "Arbitrum";
+    case gnosis.id:
+    case gnosisChiado.id:
+      return "Gnosis";
+    case polygon.id:
+    case polygonMumbai.id:
+      return "Polygon";
+    default:
+      return "Ethereum";
+  }
+};
+
 const SVGContainer = styled.div`
   display: flex;
   align-items: center;

web/src/components/HistoryDisplay/Header.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import styled from "styled-components";
+import HistoryIcon from "assets/svgs/icons/history.svg";
+
+const HeaderContainer = styled.div`
+  display: flex;
+  gap: 8px;
+`;
+
+const StyledP = styled.p`
+  margin: 0;
+  color: ${({ theme }) => theme.primaryText};
+`;
+
+const SVGContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  svg {
+    fill: ${({ theme }) => theme.primaryText};
+    height: 16px;
+    width: 17px;
+  }
+`;
+const Header: React.FC = () => {
+  return (
+    <HeaderContainer>
+      <SVGContainer>
+        <HistoryIcon />
+      </SVGContainer>
+      <StyledP>History</StyledP>
+    </HeaderContainer>
+  );
+};
+
+export default Header;

web/src/components/HistoryDisplay/index.tsx

@@ -0,0 +1,33 @@
+import { Card, CustomTimeline, _TimelineItem1 as TimelineItem } from "@kleros/ui-components-library";
+import React from "react";
+import styled from "styled-components";
+import Header from "./Header";
+
+const Container = styled(Card)`
+  display: flex;
+  width: 100%;
+  height: auto;
+  flex-direction: column;
+  align-items: start;
+  padding: 22px 32px;
+  gap: 54px;
+`;
+
+const StyledTimeline = styled(CustomTimeline)`
+  width: 100%;
+  margin-bottom: 30px;
+`;
+
+interface IHistory {
+  items: TimelineItem[];
+}
+
+const History: React.FC<IHistory> = ({ items }) => {
+  return (
+    <Container>
+      <Header />
+      <StyledTimeline {...{ items }} />
+    </Container>
+  );
+};
+export default History;

web/src/components/InformationCard/Policies.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import { landscapeStyle } from "styles/landscapeStyle";
+import PolicyIcon from "svgs/icons/policy.svg";
+import { responsiveSize } from "styles/responsiveSize";
+// import { getIpfsUrl } from "utils/getIpfsUrl";
+
+const ShadeArea = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  width: 100%;
+  padding: ${responsiveSize(16, 20)} ${responsiveSize(16, 32)};
+  margin-top: 16px;
+  background-color: ${({ theme }) => theme.mediumBlue};
+
+  ${landscapeStyle(
+    () => css`
+      flex-direction: row;
+      justify-content: space-between;
+    `
+  )};
+`;
+
+const StyledP = styled.p`
+  font-size: 14px;
+  margin-top: 0;
+  margin-bottom: 16px;
+  color: ${({ theme }) => theme.primaryBlue};
+  ${landscapeStyle(
+    () => css`
+      margin-bottom: 0;
+    `
+  )};
+`;
+
+const StyledA = styled.a`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+`;
+
+const StyledPolicyIcon = styled(PolicyIcon)`
+  width: 16px;
+  fill: ${({ theme }) => theme.primaryBlue};
+`;
+
+const LinkContainer = styled.div`
+  display: flex;
+  gap: ${responsiveSize(16, 24)};
+  flex-wrap: wrap;
+`;
+
+type Attachment = {
+  label?: string;
+  uri: string;
+};
+interface IPolicies {
+  disputePolicyURI?: string;
+  courtId?: string;
+  attachment?: Attachment;
+}
+
+export const Policies: React.FC<IPolicies> = ({ disputePolicyURI, courtId, attachment }) => {
+  return (
+    <ShadeArea>
+      <StyledP>Make sure you read and understand the Policies</StyledP>
+      <LinkContainer>
+        <StyledA target="_blank" rel="noreferrer">
+          <StyledPolicyIcon />
+          Curation Policy
+        </StyledA>
+        <StyledA href={`#/courts/${courtId}/purpose?section=description`}>
+          <StyledPolicyIcon />
+          List Policy
+        </StyledA>
+      </LinkContainer>
+    </ShadeArea>
+  );
+};