Feat(web): add Home page

package.json

@@ -33,6 +33,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-promise": "^5.1.1",
+    "eslint-utils": "^3.0.0",
     "husky": "^7.0.0",
     "lint-staged": "^11.0.0",
     "npm-run-all": "^4.1.5",

web/.yarnrc.yml

@@ -1,3 +1,2 @@
 nodeLinker: node-modules
-cacheFolder: $HOME/.yarn_cache
 

web/codegen.yaml

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

web/netlify.toml

@@ -4,5 +4,5 @@
 NETLIFY_USE_YARN = "true"
 NETLIFY_YARN_WORKSPACES = "true"
 YARN_ENABLE_GLOBAL_CACHE = "true"
-YARN_CACHE_FOLDER = "$HOME/.yarn_cache"
+# YARN_CACHE_FOLDER = "$HOME/.yarn_cache"
 # YARN_VERSION = "3.2.0"

web/package.json

@@ -2,7 +2,7 @@
   "name": "@kleros/kleros-v2-web",
   "version": "0.1.0",
   "source": "src/index.html",
-  "browserslist": "> 0.5%, last 2 versions, not dead, not ios_saf < 13",
+  "browserslist": "> 0.5%, not dead",
   "repository": "",
   "author": "",
   "license": "MIT",
@@ -14,6 +14,7 @@
     "layout": "./src/layout",
     "consts": "./src/consts",
     "hooks": "./src/hooks",
+    "queries": "./src/hooks/queries",
     "pages": "./src/pages",
     "styles": "./src/styles",
     "svgs": "./src/assets/svgs"
@@ -25,36 +26,50 @@
     "start": "parcel",
     "build": "parcel build",
     "check-style": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
-    "check-types": "tsc --noEmit"
+    "check-types": "tsc --noEmit",
+    "generate": "graphql-codegen"
   },
   "devDependencies": {
-    "@parcel/transformer-svg-react": "^2.2.1",
-    "@types/react": "^17.0.38",
-    "@types/react-dom": "^17.0.11",
+    "@parcel/transformer-svg-react": "^2.5.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@types/styled-components": "^5.1.21",
-    "@typescript-eslint/eslint-plugin": "^5.10.1",
-    "@typescript-eslint/parser": "^5.10.1",
-    "eslint": "^8.7.0",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
+    "@typescript-eslint/utils": "^5.27.0",
+    "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-import-resolver-parcel": "^1.10.6",
     "eslint-plugin-import": "^2.25.4",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.28.0",
     "eslint-plugin-react-hooks": "^4.3.0",
     "eslint-plugin-security": "^1.4.0",
+    "eslint-utils": "^3.0.0",
     "lru-cache": "^7.8.0",
-    "parcel": "^2.4.1",
+    "parcel": "^2.6.0",
     "prettier": "^2.5.1",
     "typescript": "^4.5.5"
   },
   "dependencies": {
+    "@graphql-codegen/cli": "^2.6.2",
+    "@graphql-codegen/typescript": "^2.4.9",
+    "@graphql-codegen/typescript-operations": "^2.3.6",
     "@kleros/kleros-v2-contracts": "workspace:^",
-    "@kleros/ui-components-library": "^0.1.5",
+    "@kleros/ui-components-library": "^1.1.0",
+    "chart.js": "^3.7.1",
+    "chartjs-adapter-moment": "^1.0.0",
     "core-js": "^3.21.1",
+    "ethers": "^5.6.5",
+    "graphql": "^16.4.0",
+    "graphql-request": "^4.2.0",
+    "moment": "^2.29.3",
     "react": "^18.0.0",
+    "react-chartjs-2": "^4.1.0",
     "react-dom": "^18.0.0",
     "react-is": "^18.0.0",
     "react-router-dom": "6",
-    "styled-components": "^5.3.5"
+    "styled-components": "^5.3.5",
+    "swr": "^1.3.0"
   }
 }

web/src/app.tsx

@@ -1,24 +1,43 @@
 import React from "react";
-import { Routes, Route } from "react-router-dom";
 import StyledComponentsProvider from "context/StyledComponentsProvider";
+import { SWRConfig } from "swr";
+import { request } from "graphql-request";
+import { Routes, Route } from "react-router-dom";
 import Layout from "layout/index";
 import Home from "./pages/home";
 
-const App: React.FC = () => (
-  <StyledComponentsProvider>
-    <Routes>
-      <Route path="/" element={<Layout />}>
-        <Route index element={<Home />} />
-        <Route path="cases" element={<h1>Cases</h1>} />
-        <Route path="courts" element={<h1>Courts</h1>} />
-        <Route path="dashboard" element={<h1>Dashboard</h1>} />
-        <Route
-          path="*"
-          element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>}
-        />
-      </Route>
-    </Routes>
-  </StyledComponentsProvider>
-);
+const fetcherBuilder =
+  (url: string) =>
+  ({ query, variables }: { query: string; variables?: any }) => {
+    console.log("fetch");
+    return request(url, query, variables);
+  };
+
+const App: React.FC = () => {
+  return (
+    <StyledComponentsProvider>
+      <SWRConfig
+        value={{
+          fetcher: fetcherBuilder(
+            "https://api.thegraph.com/subgraphs/name/alcercu/kleros-core"
+          ),
+        }}
+      >
+        <Routes>
+          <Route path="/" element={<Layout />}>
+            <Route index element={<Home />} />
+            <Route path="cases" element={<h1>Cases</h1>} />
+            <Route path="courts" element={<h1>Courts</h1>} />
+            <Route path="dashboard" element={<h1>Dashboard</h1>} />
+            <Route
+              path="*"
+              element={<h1>Justice not found here ¯\_( ͡° ͜ʖ ͡°)_/¯</h1>}
+            />
+          </Route>
+        </Routes>
+      </SWRConfig>
+    </StyledComponentsProvider>
+  );
+};
 
 export default App;