Skip to content

Commit ba544c2

Browse files
alcercualcercu
authored
Merge pull request #1641 from kleros/feat(devtools)/initial-setup-for-devtool-website
feat(devtools): initial setup and ui for devtool website
2 parents bf9972a + d1b1841 commit ba544c2

37 files changed

+2611
-104
lines changed

‎web-devtools/.eslintrc.json‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
}
1515
},
1616
"extends": [
17+
"next/core-web-vitals",
1718
"eslint:recommended",
1819
"plugin:react/recommended",
1920
"plugin:react-hooks/recommended",
@@ -42,16 +43,16 @@
4243
"version": "^16.12.0"
4344
},
4445
"import/resolver": {
45-
"parcel": {
46-
"rootDir": "src",
46+
"typescript": {
47+
"alwaysTryTypes": true,
48+
"project": "./tsconfig.json"
49+
},
50+
"node": {
4751
"extensions": [
4852
".js",
4953
".jsx",
5054
".ts",
51-
".tsx",
52-
".svg",
53-
".png",
54-
".jpeg"
55+
".tsx"
5556
]
5657
}
5758
}

‎web-devtools/.gitignore‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
# dependencies
12
/.yarn/*
23
!/.yarn/versions
34
!/.yarn/plugins
@@ -6,14 +7,15 @@
67
/.pnp.*
78
node_modules
89

9-
# Parcel
10-
.parcel-cache
10+
# next.js
11+
/.next/
12+
/out/
1113
development
1214
build
1315
dist
14-
parcel-bundle-reports
1516

1617
# misc
18+
*.pem
1719
.eslintcache
1820
.DS_Store
1921
.env
@@ -35,3 +37,10 @@ generatedNetlifyInfo.json
3537
npm-debug.log*
3638
yarn-debug.log*
3739
yarn-error.log*
40+
41+
# testing
42+
/coverage
43+
44+
# typescript
45+
*.tsbuildinfo
46+
next-env.d.ts

‎web-devtools/global.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { DefaultTheme } from "styled-components";
2+
import { theme } from "styles/Theme";
3+
declare module "styled-components" {
4+
type Theme = typeof theme;
5+
export interface DefaultTheme extends Theme {}
6+
}

‎web-devtools/next.config.mjs‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/** @type {import('next').NextConfig} */
2+
const nextConfig = {
3+
compiler: {
4+
styledComponents: true,
5+
},
6+
webpack(config) {
7+
// Grab the existing rule that handles SVG imports
8+
const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.(".svg"));
9+
10+
config.module.rules.push(
11+
// Reapply the existing rule, but only for svg imports ending in ?url
12+
{
13+
...fileLoaderRule,
14+
test: /\.svg$/i,
15+
resourceQuery: /url/, // *.svg?url
16+
},
17+
// Convert all other *.svg imports to React components
18+
{
19+
test: /\.svg$/i,
20+
issuer: fileLoaderRule.issuer,
21+
resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] }, // exclude if *.svg?url
22+
use: ["@svgr/webpack"],
23+
}
24+
);
25+
26+
// Modify the file loader rule to ignore *.svg, since we have it handled now.
27+
fileLoaderRule.exclude = /\.svg$/i;
28+
29+
return config;
30+
},
31+
};
32+
33+
export default nextConfig;

‎web-devtools/package.json‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,18 +8,30 @@
88
"license": "MIT",
99
"packageManager": "yarn@4.0.2+sha256.825003a0f561ad09a3b1ac4a3b3ea6207af2796d54f62a9420520915721f5186",
1010
"volta": {
11-
"node": "20.11.0"
11+
"node": "20.11.0",
12+
"yarn": "4.3.1"
1213
},
1314
"scripts": {
14-
"hi": "echo hello world"
15+
"dev": "next dev",
16+
"build": "next build",
17+
"start": "next start",
18+
"lint": "next lint"
1519
},
1620
"prettier": "@kleros/kleros-v2-prettier-config",
1721
"devDependencies": {
22+
"@svgr/webpack": "^8.1.0",
23+
"@types/node": "^20",
24+
"@types/react": "18.2.0",
25+
"@types/react-dom": "^18.2.18",
1826
"typescript": "^5.3.3"
1927
},
2028
"dependencies": {
2129
"@kleros/kleros-sdk": "workspace:^",
2230
"@kleros/ui-components-library": "^2.10.0",
31+
"next": "14.2.4",
32+
"react": "^18.2.0",
33+
"react-dom": "^18.2.0",
34+
"styled-components": "^5.3.11",
2335
"viem": "^1.21.4",
2436
"wagmi": "^1.4.13"
2537
}

‎web-devtools/src/app/(main)/ChangeRuler.tsx‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import { Field } from "@kleros/ui-components-library";
5+
6+
import LightButton from "components/LightButton";
7+
8+
const Container = styled.div`
9+
border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
10+
border-radius: 4px;
11+
padding: 16px;
12+
`;
13+
14+
const RulingSettings = styled.div`
15+
display: flex;
16+
flex-direction: column;
17+
gap: 8px;
18+
margin: 16px 0;
19+
`;
20+
const FieldContainer = styled.div`
21+
display: flex;
22+
align-items: center;
23+
width: fit-content;
24+
height: fit-content;
25+
padding-left: 8px;
26+
gap: 8px;
27+
font-size: 14px;
28+
border-radius: 4px;
29+
border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
30+
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
31+
`;
32+
33+
const ChangeRuler: React.FC = () => {
34+
return (
35+
<div>
36+
<h3>Change Ruler</h3>
37+
<Container>
38+
<label>Current Ruler</label>
39+
<Field value={"0xb78......09e441"}></Field>
40+
<RulingSettings>
41+
<LightButton text={"Change Ruler"} />
42+
<FieldContainer>
43+
address <Field placeholder={"0x00[dev address]"}></Field>
44+
</FieldContainer>
45+
</RulingSettings>
46+
</Container>
47+
</div>
48+
);
49+
};
50+
51+
export default ChangeRuler;

‎web-devtools/src/app/(main)/RulingModes.tsx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import React, { useState } from "react";
2+
import styled from "styled-components";
3+
4+
import { Checkbox, Field } from "@kleros/ui-components-library";
5+
6+
import LightButton from "components/LightButton";
7+
8+
const Container = styled.div`
9+
display: flex;
10+
flex-wrap: wrap;
11+
gap: 8px;
12+
margin: 16px 0;
13+
border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
14+
border-radius: 4px;
15+
padding: 16px;
16+
`;
17+
const RulingSettings = styled.div`
18+
display: flex;
19+
flex-direction: column;
20+
gap: 8px;
21+
margin: 16px 0;
22+
`;
23+
const FieldContainer = styled.div`
24+
display: flex;
25+
align-items: center;
26+
width: fit-content;
27+
height: fit-content;
28+
padding-left: 8px;
29+
gap: 8px;
30+
font-size: 14px;
31+
border-radius: 4px;
32+
border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
33+
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
34+
`;
35+
36+
const RulingModes: React.FC = () => {
37+
const [tie, setTie] = useState<boolean>(false);
38+
const [overriden, setOverriden] = useState<boolean>(false);
39+
40+
return (
41+
<div>
42+
<h3>Ruling Mode</h3>
43+
<Container>
44+
<RulingSettings>
45+
<LightButton text={"Rule Now Manually"} />
46+
<FieldContainer>
47+
ruling <Field placeholder={"1"}></Field>
48+
</FieldContainer>
49+
</RulingSettings>
50+
51+
<RulingSettings>
52+
<LightButton text={"Run Automatically with a Preset"} />
53+
<FieldContainer>
54+
ruling <Field placeholder={"1"}></Field>
55+
</FieldContainer>
56+
<FieldContainer>
57+
<Checkbox label="" small checked={tie} onChange={() => setTie((old) => !old)} />
58+
<Field placeholder={"tie"}></Field>
59+
</FieldContainer>
60+
<FieldContainer>
61+
<Checkbox label="" small checked={overriden} onChange={() => setOverriden((old) => !old)} />
62+
<Field placeholder={"overriden"}></Field>
63+
</FieldContainer>
64+
</RulingSettings>
65+
66+
<RulingSettings>
67+
<LightButton text={"Run Automatically Randomly"} />
68+
</RulingSettings>
69+
</Container>
70+
</div>
71+
);
72+
};
73+
74+
export default RulingModes;

‎web-devtools/src/app/(main)/page.tsx‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
"use client";
2+
import React from "react";
3+
import styled from "styled-components";
4+
5+
import { DropdownCascader, Field } from "@kleros/ui-components-library";
6+
7+
import { SelectArbitrable } from "utils/dummyData";
8+
9+
import ChangeRuler from "./ChangeRuler";
10+
import RulingModes from "./RulingModes";
11+
12+
const Container = styled.div`
13+
min-height: calc(100vh - 160px);
14+
display: flex;
15+
flex-direction: column;
16+
margin: 16px 32px;
17+
align-items: center;
18+
`;
19+
const Arbitrables = styled.div`
20+
display: flex;
21+
flex-wrap: wrap;
22+
gap: 8px;
23+
margin: 16px 0;
24+
`;
25+
26+
const SettingsPane = styled.div`
27+
display: flex;
28+
flex-wrap: wrap;
29+
gap: 16px;
30+
margin: 16px 0;
31+
`;
32+
33+
const Home: React.FC = () => {
34+
return (
35+
<Container>
36+
<h1>Ruler</h1>
37+
38+
<Arbitrables>
39+
<div>
40+
<label>Select Arbitrable</label>
41+
<DropdownCascader
42+
placeholder={"Select Arbitrable"}
43+
onSelect={() => {
44+
//todo;
45+
}}
46+
items={SelectArbitrable}
47+
/>
48+
</div>
49+
<div>
50+
<label>Current Ruling Mode</label>
51+
<Field value={"auto random"}></Field>
52+
</div>
53+
</Arbitrables>
54+
55+
<SettingsPane>
56+
<RulingModes />
57+
<ChangeRuler />
58+
</SettingsPane>
59+
</Container>
60+
);
61+
};
62+
export default Home;

‎web-devtools/src/app/favicon.ico‎

238 KB
Binary file not shown.

‎web-devtools/src/app/layout.tsx‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from "react";
2+
3+
import type { Metadata } from "next";
4+
import { Open_Sans } from "next/font/google";
5+
6+
import StyledComponentsProvider from "context/StyledComponentsProvider";
7+
import StyledComponentsRegistry from "context/StyledComponentsRegistry";
8+
9+
import Footer from "layout/Footer";
10+
import Header from "layout/Header";
11+
12+
const font = Open_Sans({ subsets: ["latin"] });
13+
14+
export const metadata: Metadata = {
15+
title: "Dev Tools",
16+
};
17+
18+
const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
19+
return (
20+
<html lang="en">
21+
<body className={font.className}>
22+
<StyledComponentsRegistry>
23+
<StyledComponentsProvider>
24+
<Header />
25+
{children}
26+
<Footer />
27+
</StyledComponentsProvider>
28+
</StyledComponentsRegistry>
29+
</body>
30+
</html>
31+
);
32+
};
33+
34+
export default RootLayout;

0 commit comments

Comments
 (0)