Skip to content

Commit 9ec8924

Browse files
nikhilverma360nikhilverma360
committed
feat(devtools): ruler ui
1 parent a48febe commit 9ec8924

File tree

8 files changed

+302
-93
lines changed

8 files changed

+302
-93
lines changed

‎web-devtools/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
"next": "14.2.4",
3232
"react": "^18.2.0",
3333
"react-dom": "^18.2.0",
34-
"styled-components": "^6.1.11",
34+
"styled-components": "^5.3.11",
3535
"viem": "^1.21.4",
3636
"wagmi": "^1.4.13"
3737
}

‎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 = () => {
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: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
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 = (arbitrable) => {
37+
const [checked, setChecked] = useState(false);
38+
39+
return (
40+
<div>
41+
<h3>Ruling Mode</h3>
42+
<Container>
43+
<RulingSettings>
44+
<LightButton text={"Rule Now Manually"} />
45+
<FieldContainer>
46+
ruling <Field placeholder={"1"}></Field>
47+
</FieldContainer>
48+
</RulingSettings>
49+
50+
<RulingSettings>
51+
<LightButton text={"Run Automatically with a Preset"} />
52+
<FieldContainer>
53+
ruling <Field placeholder={"1"}></Field>
54+
</FieldContainer>
55+
<FieldContainer>
56+
<Checkbox label="" small checked={checked} onChange={() => setChecked((old) => !old)} />
57+
<Field placeholder={"0x00[dev address]"}></Field>
58+
</FieldContainer>
59+
<FieldContainer>
60+
<Checkbox label="" small checked={checked} onChange={() => setChecked((old) => !old)} />
61+
<Field placeholder={"0x00[dev address]"}></Field>
62+
</FieldContainer>
63+
</RulingSettings>
64+
65+
<RulingSettings>
66+
<LightButton text={"Run Automatically Randomly"} />
67+
</RulingSettings>
68+
</Container>
69+
</div>
70+
);
71+
};
72+
73+
export default RulingModes;

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

Lines changed: 84 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
"use client";
2+
import React, { useState } from "react";
3+
import styled from "styled-components";
4+
5+
import { DropdownCascader, Field } from "@kleros/ui-components-library";
6+
7+
import { SelectArbitrable } from "utils/dumyData";
8+
9+
import LightButton from "components/LightButton";
10+
11+
import ChangeRuler from "./ChangeRuler";
12+
import RulingModes from "./RulingModes";
13+
14+
const Container = styled.div`
15+
min-height: calc(100vh - 160px);
16+
display: flex;
17+
flex-direction: column;
18+
margin: 16px 32px;
19+
align-items: center;
20+
`;
21+
const Arbitrables = styled.div`
22+
display: flex;
23+
flex-wrap: wrap;
24+
gap: 8px;
25+
margin: 16px 0;
26+
`;
27+
28+
const SettingsPane = styled.div`
29+
display: flex;
30+
flex-wrap: wrap;
31+
gap: 16px;
32+
margin: 16px 0;
33+
`;
34+
const RulingSettings = styled.div`
35+
display: flex;
36+
flex-direction: column;
37+
gap: 8px;
38+
margin: 16px 0;
39+
`;
40+
41+
const FieldContainer = styled.div`
42+
display: flex;
43+
align-items: center;
44+
width: fit-content;
45+
height: fit-content;
46+
padding-left: 8px;
47+
gap: 8px;
48+
font-size: 14px;
49+
border-radius: 4px;
50+
border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
51+
color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
52+
`;
53+
54+
export default function Home() {
55+
const [selectedArbitrable, setSelectedArbitrable] = useState<string | number>("");
56+
57+
return (
58+
<Container>
59+
<h1>Ruler</h1>
60+
61+
<Arbitrables>
62+
<div>
63+
<label>Select Arbitrable</label>
64+
<DropdownCascader
65+
placeholder={"Select Arbitrable"}
66+
onSelect={(value) => {
67+
setSelectedArbitrable(value);
68+
}}
69+
items={SelectArbitrable}
70+
/>
71+
</div>
72+
<div>
73+
<label>Current Ruling Mode</label>
74+
<Field value={"auto random"}></Field>
75+
</div>
76+
</Arbitrables>
77+
78+
<SettingsPane>
79+
<RulingModes />
80+
<ChangeRuler />
81+
</SettingsPane>
82+
</Container>
83+
);
84+
}

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

Lines changed: 0 additions & 15 deletions
This file was deleted.

‎web-devtools/src/components/LightButton.tsx

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
4+
import { Button } from "@kleros/ui-components-library";
5+
6+
const StyledButton = styled(Button)`
7+
background-color: ${({ theme }) => theme.klerosUIComponentsPrimaryBackground};
8+
.button-text {
9+
font-weight: 400;
10+
}
11+
.button-svg {
12+
fill: ${({ theme }) => theme.klerosUIComponentsSecondaryPurple};
13+
}
14+
:focus,
15+
:hover {
16+
background-color: ${({ theme }) => theme.klerosUIComponentsSecondaryBackground};
17+
}
18+
`;
19+
20+
interface ILightButton {
21+
text: string;
22+
Icon?: React.FC<React.SVGAttributes<SVGElement>>;
23+
onClick?: React.MouseEventHandler<HTMLButtonElement>;
24+
disabled?: boolean;
25+
className?: string;
26+
}
27+
28+
const LightButton: React.FC<ILightButton> = ({ text, Icon, onClick, disabled, className }) => (
29+
<StyledButton variant="primary" small {...{ text, Icon, onClick, disabled, className }} />
30+
);
31+
32+
export default LightButton;

‎web-devtools/src/utils/dumyData.ts

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
export const SelectArbitrable = [
2+
{
3+
label: "0xb78......09e441",
4+
value: "0xb7859f08d656c6e25d9ea0470860b28f7609e441",
5+
},
6+
{
7+
label: "0xb78......09e355",
8+
value: "0xb7859f08d656c6e25d9ea0470860b28f7609e355",
9+
},
10+
{
11+
label: "0xb78......09e987",
12+
value: "0xb7859f08d656c6e25d9ea0470860b28f7609e987",
13+
},
14+
{
15+
label: "0xb78......09e111",
16+
value: "0xb7859f08d656c6e25d9ea0470860b28f7609e111",
17+
},
18+
];

0 commit comments

Comments
 (0)