Feat(web)/dispute details page

web/package.json

@@ -58,7 +58,8 @@
     "@graphql-codegen/typescript": "^2.7.3",
     "@graphql-codegen/typescript-operations": "^2.5.3",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^1.7.0",
+    "@kleros/ui-components-library": "^1.8.1",
+    "@types/react-modal": "^3.13.1",
     "@web3-react/core": "^6.1.9",
     "@web3-react/injected-connector": "^6.0.7",
     "@web3-react/types": "^6.0.7",
@@ -74,7 +75,10 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^3.1.4",
     "react-is": "^18.2.0",
-    "react-router-dom": "6",
+    "react-jazzicon": "^1.0.4",
+    "react-loading-skeleton": "^3.1.0",
+    "react-modal": "^3.15.1",
+    "react-router-dom": "^6.4.0",
     "styled-components": "^5.3.5",
     "swr": "^1.3.0"
   }

web/src/app.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { SWRConfig } from "swr";
 import { request } from "graphql-request";
 import { Routes, Route } from "react-router-dom";
+import "react-loading-skeleton/dist/skeleton.css";
 import Web3Provider from "context/Web3Provider";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
 import WrongChainBoundary from "components/WrongChainBoundary";
@@ -13,7 +14,7 @@ import Dashboard from "./pages/Dashboard";
 const fetcherBuilder =
   (url: string) =>
   ({ query, variables }: { query: string; variables?: any }) => {
-    console.log("fetch");
+    console.log("fetching subgraph");
     return request(url, query, variables);
   };
 
@@ -32,7 +33,7 @@ const App: React.FC = () => {
             <Routes>
               <Route path="/" element={<Layout />}>
                 <Route index element={<Home />} />
-                <Route path="cases" element={<Cases />} />
+                <Route path="cases/*" element={<Cases />} />
                 <Route path="courts" element={<h1>Courts</h1>} />
                 <Route path="dashboard" element={<Dashboard />} />
                 <Route

web/src/components/CasesDisplay/CasesGrid.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "styled-components";
 import { StandardPagination } from "@kleros/ui-components-library";
+import { CasesPageQuery } from "queries/useCasesQuery";
 import DisputeCard from "components/DisputeCard";
 
 const Container = styled.div`
@@ -18,42 +19,34 @@ const StyledPagination = styled(StandardPagination)`
 `;
 
 export interface ICasesGrid {
+  disputes: CasesPageQuery["disputes"];
+  currentPage: number;
+  setCurrentPage: (newPage: number) => void;
+  numberDisputes: number;
   casesPerPage: number;
 }
 
-const CasesGrid: React.FC<ICasesGrid> = ({ casesPerPage }) => (
-  <>
-    <Container>
-      <DisputeCard
-        title="Register Profile in Proof of Humanity"
-        id={600}
-        period={1}
-        court="Humanity"
-        category="Identity"
-        rewards="≥ 0.3 ETH"
-        date={1651244935}
+const CasesGrid: React.FC<ICasesGrid> = ({
+  disputes,
+  currentPage,
+  setCurrentPage,
+  numberDisputes,
+  casesPerPage,
+}) => {
+  return (
+    <>
+      <Container>
+        {disputes.map((dispute, i) => {
+          return <DisputeCard key={i} {...dispute} />;
+        })}
+      </Container>
+      <StyledPagination
+        {...{ currentPage }}
+        numPages={Math.ceil(numberDisputes / casesPerPage)}
+        callback={(page: number) => setCurrentPage(page)}
       />
-      <DisputeCard
-        title="Register Profile in Proof of Humanity"
-        id={600}
-        period={3}
-        court="Humanity"
-        category="Identity"
-        rewards="≥ 0.3 ETH"
-        date={1651244935}
-      />
-      <DisputeCard
-        title="Register Profile in Proof of Humanity"
-        id={600}
-        period={4}
-        court="Humanity"
-        category="Identity"
-        rewards="≥ 0.3 ETH"
-        date={1651244935}
-      />
-    </Container>
-    <StyledPagination currentPage={1} numPages={1} callback={() => {}} />
-  </>
-);
+    </>
+  );
+};
 
 export default CasesGrid;

web/src/components/CasesDisplay/index.tsx

@@ -15,6 +15,10 @@ interface ICasesDisplay extends ICasesGrid {
 }
 
 const CasesDisplay: React.FC<ICasesDisplay> = ({
+  disputes,
+  currentPage,
+  setCurrentPage,
+  numberDisputes,
   casesPerPage,
   title = "Cases",
   className,
@@ -24,7 +28,15 @@ const CasesDisplay: React.FC<ICasesDisplay> = ({
     <Search />
     <StatsAndFilters />
     <StyledHR />
-    <CasesGrid {...{ casesPerPage }} />
+    <CasesGrid
+      {...{
+        disputes,
+        currentPage,
+        setCurrentPage,
+        numberDisputes,
+        casesPerPage,
+      }}
+    />
   </div>
 );
 

web/src/components/DisputeCard/DisputeInfo.tsx

@@ -45,21 +45,23 @@ const Container = styled.div`
 
 const getPeriodPhrase = (period: Periods) => {
   switch (period) {
-    case Periods.appeal:
+    case Periods.Evidence:
+      return "Voting Starts";
+    case Periods.Appeal:
       return "Appeal Deadline";
-    case Periods.execution:
+    case Periods.Execution:
       return "Final Decision";
     default:
       return "Voting Deadline";
   }
 };
 
 export interface IDisputeInfo {
-  court: string;
-  category: string;
-  rewards: string;
-  period: Periods;
-  date: number;
+  court?: string;
+  category?: string;
+  rewards?: string;
+  period?: Periods;
+  date?: number;
 }
 
 const DisputeInfo: React.FC<IDisputeInfo> = ({
@@ -70,14 +72,18 @@ const DisputeInfo: React.FC<IDisputeInfo> = ({
   date,
 }) => (
   <Container>
-    <Field icon={LawBalanceIcon} name="Court" value={court} />
-    <Field icon={BookmarkIcon} name="Category" value={category} />
-    <Field icon={PileCoinsIcon} name="Juror Rewards" value={rewards} />
-    <Field
-      icon={CalendarIcon}
-      name={getPeriodPhrase(period)}
-      value={new Date(date * 1000).toLocaleString()}
-    />
+    {category && <Field icon={BookmarkIcon} name="Category" value={category} />}
+    {court && <Field icon={LawBalanceIcon} name="Court" value={court} />}
+    {rewards && (
+      <Field icon={PileCoinsIcon} name="Juror Rewards" value={rewards} />
+    )}
+    {typeof period !== "undefined" && date && (
+      <Field
+        icon={CalendarIcon}
+        name={getPeriodPhrase(period)}
+        value={new Date(date * 1000).toLocaleString()}
+      />
+    )}
   </Container>
 );
 

web/src/components/DisputeCard/PeriodBanner.tsx

@@ -9,9 +9,9 @@ export interface IPeriodBanner {
 
 const getPeriodColors = (period: Periods, theme: Theme): [string, string] => {
   switch (period) {
-    case Periods.appeal:
+    case Periods.Appeal:
       return [theme.tint, theme.tintMedium];
-    case Periods.execution:
+    case Periods.Execution:
       return [theme.secondaryPurple, theme.mediumPurple];
     default:
       return [theme.primaryBlue, theme.mediumBlue];
@@ -56,9 +56,9 @@ const Container = styled.div<Omit<IPeriodBanner, "id">>`
 
 const getPeriodLabel = (period: Periods) => {
   switch (period) {
-    case Periods.appeal:
+    case Periods.Appeal:
       return "Crowdfunding Appeal";
-    case Periods.execution:
+    case Periods.Execution:
       return "Closed";
     default:
       return "In Progress";

web/src/components/DisputeCard/index.tsx

@@ -1,8 +1,16 @@
 import React from "react";
 import styled from "styled-components";
+import { useNavigate } from "react-router-dom";
+import { utils } from "ethers";
+import Skeleton from "react-loading-skeleton";
 import { Card } from "@kleros/ui-components-library";
-import PeriodBanner, { IPeriodBanner } from "./PeriodBanner";
-import DisputeInfo, { IDisputeInfo } from "./DisputeInfo";
+import { Periods } from "consts/periods";
+import { useGetMetaEvidence } from "queries/useGetMetaEvidence";
+import { useCourtPolicy } from "queries/useCourtPolicy";
+import { useIPFSQuery } from "hooks/useIPFSQuery";
+import { CasesPageQuery } from "queries/useCasesQuery";
+import PeriodBanner from "./PeriodBanner";
+import DisputeInfo from "./DisputeInfo";
 
 const StyledCard = styled(Card)`
   max-width: 380px;
@@ -22,26 +30,52 @@ const Container = styled.div`
   }
 `;
 
-interface IDisputeCard extends IPeriodBanner, Omit<IDisputeInfo, "period"> {
-  title: string;
-}
+const getTimeLeft = (
+  lastPeriodChange: string,
+  currentPeriodIndex: number,
+  timesPerPeriod: string[]
+) => {
+  const durationCurrentPeriod = parseInt(timesPerPeriod[currentPeriodIndex]);
+  return parseInt(lastPeriodChange) + durationCurrentPeriod;
+};
 
-const DisputeCard: React.FC<IDisputeCard> = ({
+const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
   id,
+  arbitrated,
   period,
-  title,
-  court,
-  category,
-  rewards,
-  date,
-}) => (
-  <StyledCard>
-    <PeriodBanner {...{ id, period }} />
-    <Container>
-      <h3>{title}</h3>
-      <DisputeInfo {...{ court, category, rewards, period, date }} />
-    </Container>
-  </StyledCard>
-);
+  lastPeriodChange,
+  subcourtID,
+}) => {
+  const currentPeriodIndex = Periods[period];
+  const rewards = `≥ ${utils.formatEther(subcourtID.feeForJuror)} ETH`;
+  const date =
+    currentPeriodIndex === 4
+      ? lastPeriodChange
+      : getTimeLeft(
+          lastPeriodChange,
+          currentPeriodIndex,
+          subcourtID.timesPerPeriod
+        );
+  const { data: metaEvidence } = useGetMetaEvidence(id, arbitrated);
+  const title = metaEvidence ? metaEvidence.title : <Skeleton />;
+  const { data: courtPolicyPath } = useCourtPolicy(parseInt(subcourtID.id));
+  const { data: courtPolicy } = useIPFSQuery(courtPolicyPath?.args._policy);
+  const courtName = courtPolicy?.name;
+  const category = metaEvidence ? metaEvidence.category : undefined;
+  const navigate = useNavigate();
+  return (
+    <StyledCard hover onClick={() => navigate(`/cases/${id.toString()}`)}>
+      <PeriodBanner id={parseInt(id)} period={currentPeriodIndex} />
+      <Container>
+        <h3>{title}</h3>
+        <DisputeInfo
+          court={courtName}
+          period={currentPeriodIndex}
+          {...{ category, rewards, date }}
+        />
+      </Container>
+    </StyledCard>
+  );
+};
 
 export default DisputeCard;