diff --git a/web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx b/web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx
new file mode 100644
index 000000000..8d9624ff7
--- /dev/null
+++ b/web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Button } from "@kleros/ui-components-library";
+
+import LabeledInput from "components/LabeledInput";
+
+import Header from "./Header";
+
+const Container = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+`;
+
+const InputContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 16px;
+`;
+
+const StyledLabel = styled.label`
+ word-wrap: break-word;
+`;
+
+const ChangeDeveloper: React.FC = () => {
+ return (
+
+
+
+ Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99
+
+
+
+
+ );
+};
+
+export default ChangeDeveloper;
diff --git a/web-devtools/src/app/(main)/ruler/ChangeRuler.tsx b/web-devtools/src/app/(main)/ruler/ChangeRuler.tsx
deleted file mode 100644
index a96f9da76..000000000
--- a/web-devtools/src/app/(main)/ruler/ChangeRuler.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-import { Field } from "@kleros/ui-components-library";
-
-import LightButton from "components/LightButton";
-
-const Container = styled.div`
- border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
- border-radius: 4px;
- padding: 16px;
-`;
-
-const RulingSettings = styled.div`
- display: flex;
- flex-direction: column;
- gap: 8px;
- margin: 16px 0;
-`;
-const FieldContainer = styled.div`
- display: flex;
- align-items: center;
- width: fit-content;
- height: fit-content;
- padding-left: 8px;
- gap: 8px;
- font-size: 14px;
- border-radius: 4px;
- border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
- color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
-`;
-
-const ChangeRuler: React.FC = () => {
- return (
-
-
Change Ruler
-
-
-
-
-
-
- address
-
-
-
-
- );
-};
-
-export default ChangeRuler;
diff --git a/web-devtools/src/app/(main)/ruler/Header.tsx b/web-devtools/src/app/(main)/ruler/Header.tsx
new file mode 100644
index 000000000..bd462f1a1
--- /dev/null
+++ b/web-devtools/src/app/(main)/ruler/Header.tsx
@@ -0,0 +1,11 @@
+import React from "react";
+import styled from "styled-components";
+
+const Container = styled.h2`
+ border-bottom: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
+ padding: 8px 0px;
+`;
+
+const Header: React.FC<{ text: string }> = ({ text }) => {text};
+
+export default Header;
diff --git a/web-devtools/src/app/(main)/ruler/ManualRuling.tsx b/web-devtools/src/app/(main)/ruler/ManualRuling.tsx
new file mode 100644
index 000000000..477b1476f
--- /dev/null
+++ b/web-devtools/src/app/(main)/ruler/ManualRuling.tsx
@@ -0,0 +1,56 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+import { Button } from "@kleros/ui-components-library";
+
+import LabeledInput from "components/LabeledInput";
+
+import Header from "./Header";
+
+const Container = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+`;
+
+const SelectContainer = styled.div`
+ display: flex;
+ gap: 16px;
+ justify-content: space-around;
+ flex-wrap: wrap;
+`;
+
+const ManualRuling: React.FC = () => {
+ const [tie, setTie] = useState(false);
+ const [overriden, setOverriden] = useState(false);
+ const [disputeId, setDisputeId] = useState();
+ const [ruling, setRuling] = useState();
+
+ return (
+
+
+
+ setDisputeId(Number(e.target.value))}
+ />
+
+ setRuling(Number(e.target.value))} />
+ setTie((prev) => !prev)} />
+ setOverriden((prev) => !prev)}
+ />
+
+
+
+
+ );
+};
+
+export default ManualRuling;
diff --git a/web-devtools/src/app/(main)/ruler/RulingModes.tsx b/web-devtools/src/app/(main)/ruler/RulingModes.tsx
index 27e4deb0e..8b9f1db4e 100644
--- a/web-devtools/src/app/(main)/ruler/RulingModes.tsx
+++ b/web-devtools/src/app/(main)/ruler/RulingModes.tsx
@@ -1,73 +1,89 @@
import React, { useState } from "react";
import styled from "styled-components";
-import { Checkbox, Field } from "@kleros/ui-components-library";
+import { RULING_MODE } from "consts";
-import LightButton from "components/LightButton";
+import { Button, Radio } from "@kleros/ui-components-library";
+
+import LabeledInput from "components/LabeledInput";
+
+import Header from "./Header";
const Container = styled.div`
+ width: 100%;
display: flex;
- flex-wrap: wrap;
- gap: 8px;
- margin: 16px 0;
- border: ${({ theme }) => theme.klerosUIComponentsPrimaryBlue} 1px solid;
- border-radius: 4px;
- padding: 16px;
+ flex-direction: column;
+ gap: 32px;
`;
-const RulingSettings = styled.div`
+
+const SelectContainer = styled.div`
+ width: 100%;
display: flex;
flex-direction: column;
- gap: 8px;
- margin: 16px 0;
+ flex-wrap: wrap;
+ gap: 16px;
`;
-const FieldContainer = styled.div`
+
+const AutomaticPresetInputsContainer = styled.div`
display: flex;
- align-items: center;
- width: fit-content;
- height: fit-content;
- padding-left: 8px;
- gap: 8px;
- font-size: 14px;
- border-radius: 4px;
- border: ${({ theme }) => theme.klerosUIComponentsStroke} 1px solid;
- color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
+ gap: 16px;
+ justify-content: space-around;
+ flex-wrap: wrap;
`;
const RulingModes: React.FC = () => {
const [tie, setTie] = useState(false);
const [overriden, setOverriden] = useState(false);
+ const [ruling, setRuling] = useState();
+ const [rulingMode, setRulingMode] = useState(null);
return (
-
-
Ruling Mode
-
-
-
-
- ruling
-
-
-
-
-
-
- ruling
-
-
- setTie((old) => !old)} />
-
-
-
- setOverriden((old) => !old)} />
-
-
-
+
+
+
+ {
+ setRulingMode(RULING_MODE.Manual);
+ }}
+ />
+ {
+ setRulingMode(RULING_MODE.RandomPreset);
+ }}
+ />
+ {
+ setRulingMode(RULING_MODE.AutomaticPreset);
+ }}
+ />
+
+ setRuling(Number(e.target.value))}
+ />
+ setTie((prev) => !prev)} />
+ setOverriden((prev) => !prev)}
+ />
+
+
-
-
-
-
- Ruler
-
-
- {
- //todo;
- }}
- items={SelectArbitrable}
- />
-
-
-
-
-
+ Arbitrable:
+ {
+ //todo;
+ }}
+ items={SelectArbitrable}
+ />
-
-
-
-
+
+
+
);
};
diff --git a/web-devtools/src/components/LabeledInput.tsx b/web-devtools/src/components/LabeledInput.tsx
new file mode 100644
index 000000000..353bea8d4
--- /dev/null
+++ b/web-devtools/src/components/LabeledInput.tsx
@@ -0,0 +1,69 @@
+import React from "react";
+import styled from "styled-components";
+
+import { Checkbox, Field, type CheckboxProps, type FieldProps } from "@kleros/ui-components-library";
+
+const Container = styled.div`
+ display: flex;
+ max-width: 300px;
+ min-width: 250px;
+ height: 50px;
+`;
+
+const LabelContainer = styled.div`
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
+ border-radius: 6px 0px 0px 6px;
+`;
+
+const Label = styled.label`
+ color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
+`;
+
+const InputContainer = styled(LabelContainer)`
+ position: relative;
+ border-radius: 0px 6px 6px 0px;
+ border-left: none;
+`;
+
+const StyledField = styled(Field)`
+ width: auto;
+ > input {
+ border: none;
+ }
+`;
+
+const StyledCheckbox = styled(Checkbox)`
+ height: 24px;
+ width: 24px;
+ padding: 0;
+`;
+
+type BaseProps = {
+ inputType?: "field" | "checkbox";
+ label: string;
+};
+
+type CheckboxInputProps = CheckboxProps & { inputType: "checkbox" };
+type DefaultInputProps = FieldProps & { inputType?: "field" };
+
+type LabeledInputProps = BaseProps & (CheckboxInputProps | DefaultInputProps);
+
+const LabeledInput: React.FC = ({ inputType = "field", label, ...props }) => {
+ return (
+
+
+
+
+
+ {inputType === "field" && }
+ {inputType === "checkbox" && }
+
+
+ );
+};
+
+export default LabeledInput;
diff --git a/web-devtools/src/consts/index.ts b/web-devtools/src/consts/index.ts
index 9c0d9b51f..685df90de 100644
--- a/web-devtools/src/consts/index.ts
+++ b/web-devtools/src/consts/index.ts
@@ -4,3 +4,9 @@ export const IPFS_GATEWAY = process.env.NEXT_PUBLIC_IPFS_GATEWAY || "https://cdn
export const INVALID_DISPUTE_DATA_ERROR = `The dispute data is not valid, please vote "Refuse to arbitrate"`;
export const RPC_ERROR = `RPC Error: Unable to fetch dispute data. Please avoid voting.`;
+
+export enum RULING_MODE {
+ Manual,
+ AutomaticPreset,
+ RandomPreset,
+}