Feat(web): Appeal Flow

web/codegen.yaml

@@ -1,4 +1,4 @@
-schema: https://api.thegraph.com/subgraphs/name/alcercu/kleros-core
+schema: https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest
 documents: './src/hooks/queries/*.ts'
 generates:
   src/graphql/generated.ts:

web/package.json

@@ -32,9 +32,9 @@
     "generate": "graphql-codegen"
   },
   "devDependencies": {
-    "@parcel/transformer-svg-react": "^2.7.0",
-    "@types/react": "^18.0.24",
-    "@types/react-dom": "^18.0.6",
+    "@parcel/transformer-svg-react": "^2.8.2",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
     "@types/styled-components": "^5.1.26",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
@@ -49,7 +49,7 @@
     "eslint-plugin-security": "^1.4.0",
     "eslint-utils": "^3.0.0",
     "lru-cache": "^7.8.0",
-    "parcel": "^2.7.0",
+    "parcel": "^2.8.2",
     "prettier": "^2.5.1",
     "typescript": "^4.5.5"
   },
@@ -79,6 +79,7 @@
     "react-loading-skeleton": "^3.1.0",
     "react-modal": "^3.16.1",
     "react-router-dom": "^6.4.2",
+    "react-use": "^17.4.0",
     "styled-components": "^5.3.6",
     "swr": "^1.3.0"
   },

web/src/app.tsx

@@ -14,7 +14,7 @@ import Dashboard from "./pages/Dashboard";
 const fetcherBuilder =
   (url: string) =>
   ({ query, variables }: { query: string; variables?: any }) => {
-    console.log("fetching subgraph");
+    console.log("fetching subgraph", query, variables);
     return request(url, query, variables);
   };
 
@@ -24,7 +24,7 @@ const App: React.FC = () => {
       <SWRConfig
         value={{
           fetcher: fetcherBuilder(
-            "https://api.thegraph.com/subgraphs/name/kleros/kleros-v2-core-arbitrum-goerli"
+            "https://api.thegraph.com/subgraphs/name/alcercu/kleroscoretest"
           ),
         }}
       >

web/src/components/DisputeCard/DisputeInfo.tsx

@@ -45,11 +45,11 @@ const Container = styled.div`
 
 const getPeriodPhrase = (period: Periods) => {
   switch (period) {
-    case Periods.Evidence:
+    case Periods.evidence:
       return "Voting Starts";
-    case Periods.Appeal:
+    case Periods.appeal:
       return "Appeal Deadline";
-    case Periods.Execution:
+    case Periods.execution:
       return "Final Decision";
     default:
       return "Voting Deadline";

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

@@ -44,21 +44,17 @@ const DisputeCard: React.FC<CasesPageQuery["disputes"][number]> = ({
   arbitrated,
   period,
   lastPeriodChange,
-  courtID,
+  court,
 }) => {
   const currentPeriodIndex = Periods[period];
-  const rewards = `≥ ${utils.formatEther(courtID.feeForJuror)} ETH`;
+  const rewards = `≥ ${utils.formatEther(court.feeForJuror)} ETH`;
   const date =
     currentPeriodIndex === 4
       ? lastPeriodChange
-      : getTimeLeft(
-          lastPeriodChange,
-          currentPeriodIndex,
-          courtID.timesPerPeriod
-        );
-  const { data: metaEvidence } = useGetMetaEvidence(id, arbitrated);
+      : getTimeLeft(lastPeriodChange, currentPeriodIndex, court.timesPerPeriod);
+  const { data: metaEvidence } = useGetMetaEvidence(id, arbitrated.id);
   const title = metaEvidence ? metaEvidence.title : <Skeleton />;
-  const { data: courtPolicyPath } = useCourtPolicy(parseInt(courtID.id));
+  const { data: courtPolicyPath } = useCourtPolicy(court.id);
   const { data: courtPolicy } = useIPFSQuery(courtPolicyPath?.args._policy);
   const courtName = courtPolicy?.name;
   const category = metaEvidence ? metaEvidence.category : undefined;

web/src/consts/periods.ts

@@ -1,7 +1,7 @@
 export enum Periods {
-  Evidence,
-  Commit,
-  Vote,
-  Appeal,
-  Execution,
+  evidence,
+  commit,
+  vote,
+  appeal,
+  execution,
 }