Feat/kleros app

.gitignore

@@ -202,3 +202,6 @@ subgraph/*/contracts/*
 
 # Local Netlify folder
 .netlify
+
+#.parcel
+.parcel-cache

kleros-app/README.md

@@ -0,0 +1 @@
+# kleros-app

kleros-app/eslint.config.mjs

@@ -0,0 +1,120 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import security from "eslint-plugin-security";
+import _import from "eslint-plugin-import";
+import globals from "globals";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: ["src/assets"],
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      "plugin:react/recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:import/recommended",
+      "plugin:import/react",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:prettier/recommended",
+      "prettier"
+    )
+  ),
+  {
+    plugins: {
+      react: fixupPluginRules(react),
+      "react-hooks": fixupPluginRules(reactHooks),
+      security: fixupPluginRules(security),
+      import: fixupPluginRules(_import),
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+        Atomics: "readonly",
+        SharedArrayBuffer: "readonly",
+      },
+
+      parser: tsParser,
+      ecmaVersion: 2020,
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    settings: {
+      react: {
+        version: "^18.3.1",
+      },
+
+      "import/resolver": {
+        typescript: {
+          project: "./tsconfig.json",
+        },
+      },
+    },
+
+    rules: {
+      "max-len": [
+        "warn",
+        {
+          code: 120,
+        },
+      ],
+
+      "react/prop-types": 0,
+      "no-unused-vars": "off",
+
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          varsIgnorePattern: "(^_+[0-9]*$)|([iI]gnored$)|(^ignored)",
+          argsIgnorePattern: "(^_+[0-9]*$)|([iI]gnored$)|(^ignored)",
+        },
+      ],
+
+      "no-console": [
+        "error",
+        {
+          allow: ["warn", "error", "info", "debug"],
+        },
+      ],
+
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "security/detect-object-injection": "off",
+      "security/detect-non-literal-fs-filename": "off",
+
+      "import/extensions": [
+        "error",
+        "ignorePackages",
+        {
+          js: "never",
+          jsx: "never",
+          ts: "never",
+          tsx: "never",
+        },
+      ],
+
+      "import/no-unresolved": "off",
+    },
+  },
+];

kleros-app/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@kleros/kleros-app",
+  "version": "1.0.0",
+  "source": "src/lib/index.ts",
+  "main": "dist/main.js",
+  "module": "dist/module.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "clear": "rm -r ../.parcel-cache",
+    "clean": "rm -rf dist",
+    "start": "parcel src/index.html",
+    "build": "yarn clear & yarn clean & yarn parcel build",
+    "check-style": "eslint 'src/**/*.{ts,tsx}'",
+    "check-types": "tsc --noEmit"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+ssh://[email protected]/kleros/kleros-v2.git"
+  },
+  "keywords": [
+    "kleros",
+    "dapp",
+    "atlas"
+  ],
+  "author": "Kleros",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kleros/kleros-v2/issues"
+  },
+  "homepage": "https://github.com/kleros/kleros-v2#readme",
+  "description": "",
+  "files": [
+    "dist"
+  ],
+  "prettier": "@kleros/kleros-v2-prettier-config",
+  "devDependencies": {
+    "@eslint/compat": "^1.2.2",
+    "@eslint/eslintrc": "^3.1.0",
+    "@eslint/js": "^9.14.0",
+    "@kleros/kleros-v2-eslint-config": "workspace:^",
+    "@kleros/kleros-v2-prettier-config": "workspace:^",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@typescript-eslint/eslint-plugin": "^8.15.0",
+    "@typescript-eslint/parser": "^8.15.0",
+    "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-import": "^2.31.0",
+    "globals": "^15.12.0",
+    "parcel": "^2.12.0",
+    "typescript": "^5.6.3"
+  },
+  "dependencies": {
+    "@kleros/ui-components-library": "^2.15.0",
+    "jose": "^5.9.6",
+    "wagmi": "^2.13.0"
+  },
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.59.20",
+    "graphql": "^16.9.0",
+    "graphql-request": "^7.1.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "viem": "^2.21.42"
+  }
+}

kleros-app/src/App.tsx

@@ -0,0 +1,18 @@
+import { createRoot } from "react-dom/client";
+import React from "react";
+
+const App = () => {
+  return (
+    <React.StrictMode>
+      <div>
+        <h1>Kleros</h1>
+      </div>
+    </React.StrictMode>
+  );
+};
+
+const app = document.getElementById("app");
+if (app) {
+  const root = createRoot(app);
+  root.render(<App />);
+}

kleros-app/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Kleros App</title>
+  </head>
+
+  <body>
+    <div id="app"></div>
+    <script type="module" src="App.tsx"></script>
+  </body>
+</html>

kleros-app/src/lib/atlas/hooks/useSessionStorage.ts

@@ -0,0 +1,23 @@
+import { useState } from "react";
+
+export function useSessionStorage<T>(keyName: string, defaultValue: T) {
+  const [storedValue, setStoredValue] = useState<T>(() => {
+    try {
+      const value = window.sessionStorage.getItem(keyName);
+
+      return value ? JSON.parse(value) : defaultValue;
+    } catch (err) {
+      return defaultValue;
+    }
+  });
+
+  const setValue = (newValue: T) => {
+    try {
+      window.sessionStorage.setItem(keyName, JSON.stringify(newValue));
+    } finally {
+      setStoredValue(newValue);
+    }
+  };
+
+  return [storedValue, setValue] as [T, (newValue: T) => void];
+}

kleros-app/src/lib/atlas/index.ts

@@ -0,0 +1,2 @@
+export * from "./providers";
+export * from "./utils";