Dev Tools UI

package.json

@@ -22,6 +22,7 @@
     "kleros-sdk",
     "subgraph",
     "web",
+    "web-devtools",
     "eslint-config",
     "prettier-config",
     "tsconfig"

web-devtools/.editorconfig

@@ -0,0 +1,15 @@
+root = true
+
+[*]
+end_of_line = lf
+trim_trailing_whitespace = true
+insert_final_newline = true
+charset = utf-8
+
+[*.{html,js,.json,mjs,rjson,ts}]
+indent_style = space
+indent_size = 2
+
+[*.sol]
+indent_style = space
+indent_size = 4

web-devtools/.eslintrc.json

@@ -0,0 +1,166 @@
+{
+  "env": {
+    "es6": true,
+    "browser": true,
+    "node": true
+  },
+  "root": true,
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "extends": [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:import/recommended",
+    "plugin:import/react",
+    "plugin:security/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "plugins": [
+    "react",
+    "react-hooks",
+    "security",
+    "import"
+  ],
+  "ignorePatterns": [
+    "src/assets"
+  ],
+  "settings": {
+    "react": {
+      "version": "^16.12.0"
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      },
+      "node": {
+        "extensions": [
+          ".js",
+          ".jsx",
+          ".ts",
+          ".tsx"
+        ]
+      }
+    }
+  },
+  "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",
+    "import/order": [
+      "warn",
+      {
+        "groups": [
+          "builtin",
+          "external",
+          "internal",
+          "parent",
+          "sibling",
+          "index"
+        ],
+        "pathGroups": [
+          {
+            "pattern": "{react,styled-components}",
+            "group": "external",
+            "position": "before"
+          },
+          {
+            "pattern": "@kleros/**",
+            "group": "external",
+            "position": "after"
+          },
+          {
+            "pattern": "{svgs/**,assets/**}",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "{hooks/**,utils/**,consts/**,types/**,context/**,connectors/**,}",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "{queries/**,}",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "{src/**,}",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "{styles/**,}",
+            "group": "internal",
+            "position": "after"
+          },
+          {
+            "pattern": "{layout/**,pages/**,components/**,}",
+            "group": "internal",
+            "position": "after"
+          }
+        ],
+        "pathGroupsExcludedImportTypes": [
+          "builtin"
+        ],
+        "newlines-between": "always",
+        "alphabetize": {
+          "order": "asc",
+          "caseInsensitive": true
+        }
+      }
+    ]
+  }
+}

web-devtools/.gitignore

@@ -0,0 +1,46 @@
+# dependencies
+/.yarn/*
+!/.yarn/versions
+!/.yarn/plugins
+!/.yarn/releases
+!/.yarn/sdks
+/.pnp.*
+node_modules
+
+# next.js
+/.next/
+/out/
+development
+build
+dist
+
+# misc
+*.pem
+.eslintcache
+.DS_Store
+.env
+.env.test
+.env.testnet
+.env.devnet
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# generated code
+src/hooks/contracts/generated.ts
+src/graphql
+generatedGitInfo.json
+generatedNetlifyInfo.json
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# testing
+/coverage
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

web-devtools/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Kleros
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

web-devtools/README.md

@@ -0,0 +1,3 @@
+# Dev Tools Frontend
+
+In construction

web-devtools/global.d.ts

@@ -0,0 +1,6 @@
+import { DefaultTheme } from "styled-components";
+import { theme } from "styles/Theme";
+declare module "styled-components" {
+  type Theme = typeof theme;
+  export interface DefaultTheme extends Theme {}
+}

web-devtools/netlify.toml

@@ -0,0 +1,14 @@
+## Yarn 3 cache does not work out of the box as of Jan 2022. Context:
+## https://github.com/netlify/build/issues/1535#issuecomment-1021947989
+[build.environment]
+NETLIFY_USE_YARN = "true"
+NETLIFY_YARN_WORKSPACES = "true"
+YARN_ENABLE_GLOBAL_CACHE = "true"
+# YARN_CACHE_FOLDER = "$HOME/.yarn_cache"
+# YARN_VERSION = "3.2.0"
+
+[functions]
+directory = "web-devtools/netlify/functions/"
+
+[dev]
+framework = "nextjs"

web-devtools/next.config.mjs

@@ -0,0 +1,33 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  compiler: {
+    styledComponents: true,
+  },
+  webpack(config) {
+    // Grab the existing rule that handles SVG imports
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"));
+
+    config.module.rules.push(
+      // Reapply the existing rule, but only for svg imports ending in ?url
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/, // *.svg?url
+      },
+      // Convert all other *.svg imports to React components
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
+        use: ["@svgr/webpack"],
+      }
+    );
+
+    // Modify the file loader rule to ignore *.svg, since we have it handled now.
+    fileLoaderRule.exclude = /\.svg$/i;
+
+    return config;
+  },
+};
+
+export default nextConfig;

web-devtools/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@kleros/kleros-v2-web-devtools",
+  "version": "0.1.0",
+  "source": "src/index.html",
+  "browserslist": "> 0.5%, not dead",
+  "repository": "",
+  "author": "",
+  "license": "MIT",
+  "packageManager": "[email protected]+sha256.825003a0f561ad09a3b1ac4a3b3ea6207af2796d54f62a9420520915721f5186",
+  "volta": {
+    "node": "20.11.0",
+    "yarn": "4.3.1"
+  },
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "prettier": "@kleros/kleros-v2-prettier-config",
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/node": "^20",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "^18.2.18",
+    "typescript": "^5.3.3"
+  },
+  "dependencies": {
+    "@kleros/kleros-sdk": "workspace:^",
+    "@kleros/ui-components-library": "^2.10.0",
+    "next": "14.2.4",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.11",
+    "viem": "^1.21.4",
+    "wagmi": "^1.4.13"
+  }
+}