Feat/devtools ruler functionality

web-devtools/.env.local.example

@@ -2,4 +2,5 @@
 export NEXT_PUBLIC_ALCHEMY_API_KEY=
 export NEXT_PUBLIC_DEPLOYMENT=devnet
 export NEXT_PUBLIC_CORE_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-core-devnet/version/latest
-export NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
+export NEXT_PUBLIC_DRT_ARBSEPOLIA_SUBGRAPH=https://api.studio.thegraph.com/query/61738/kleros-v2-drt-arbisep-devnet/version/latest
+export NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=

web-devtools/package.json

@@ -30,19 +30,28 @@
     "@types/node": "^20",
     "@types/react": "18.2.0",
     "@types/react-dom": "^18.2.18",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "@typescript-eslint/utils": "^5.62.0",
     "@wagmi/cli": "^2.0.3",
+    "eslint": "^8.56.0",
     "eslint-config-next": "^14.2.5",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.5.3"
   },
   "dependencies": {
     "@kleros/kleros-sdk": "workspace:^",
-    "@kleros/ui-components-library": "^2.10.0",
+    "@kleros/ui-components-library": "^2.15.0",
     "graphql": "^16.9.0",
     "next": "14.2.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-markdown": "^8.0.7",
+    "react-toastify": "^10.0.5",
     "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.4",
     "viem": "^2.1.0",

web-devtools/src/app/(main)/layout.tsx

@@ -2,22 +2,35 @@
 import React from "react";
 import styled from "styled-components";
 
+import "react-toastify/dist/ReactToastify.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ToastContainer } from "react-toastify";
 
 import GraphqlBatcherProvider from "context/GraphqlBatcher";
+import Web3Provider from "context/Web3Provider";
 
 const Main = styled.main`
   min-height: calc(100vh - 130px);
 `;
 const queryClient = new QueryClient();
 
+const StyledToastContainer = styled(ToastContainer)`
+  padding: 16px;
+  padding-top: 70px;
+`;
+
 const Layout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
   return (
-    <QueryClientProvider client={queryClient}>
-      <GraphqlBatcherProvider>
-        <Main>{children}</Main>
-      </GraphqlBatcherProvider>
-    </QueryClientProvider>
+    <Web3Provider>
+      <QueryClientProvider client={queryClient}>
+        <GraphqlBatcherProvider>
+          <Main>
+            <StyledToastContainer />
+            {children}
+          </Main>
+        </GraphqlBatcherProvider>
+      </QueryClientProvider>
+    </Web3Provider>
   );
 };
 

web-devtools/src/app/(main)/ruler/ChangeDeveloper.tsx

@@ -1,11 +1,20 @@
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { Address, isAddress } from "viem";
+import { useAccount, usePublicClient } from "wagmi";
+
 import { Button } from "@kleros/ui-components-library";
 
+import { useRulerContext } from "context/RulerContext";
+import { useSimulateKlerosCoreRulerChangeRuler, useWriteKlerosCoreRulerChangeRuler } from "hooks/contracts/generated";
+import { isUndefined } from "utils/isUndefined";
+import { wrapWithToast } from "utils/wrapWithToast";
+
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -25,14 +34,60 @@ const StyledLabel = styled.label`
 `;
 
 const ChangeDeveloper: React.FC = () => {
+  const { isConnected, chainId } = useAccount();
+  const { arbitrable, currentDeveloper, refetchData } = useRulerContext();
+  const [newDeveloper, setNewDeveloper] = useState("");
+  const [isChanging, setIsChanging] = useState(false);
+  const publicClient = usePublicClient();
+
+  const isValid = useMemo(() => newDeveloper === "" || isAddress(newDeveloper), [newDeveloper]);
+
+  const {
+    data: changeRulerConfig,
+    isLoading,
+    isError,
+  } = useSimulateKlerosCoreRulerChangeRuler({
+    query: {
+      enabled: !isUndefined(arbitrable) && !isUndefined(newDeveloper) && isAddress(newDeveloper),
+    },
+    args: [(arbitrable ?? "") as Address, newDeveloper as Address],
+  });
+
+  const { writeContractAsync: changeRuler } = useWriteKlerosCoreRulerChangeRuler();
+
+  const handleClick = useCallback(() => {
+    if (!publicClient || !changeRulerConfig) return;
+    setIsChanging(true);
+    wrapWithToast(async () => changeRuler(changeRulerConfig.request), publicClient)
+      .then(() => refetchData())
+      .finally(() => setIsChanging(false));
+  }, [publicClient, changeRulerConfig, changeRuler, refetchData]);
+
+  const isDisabled = useMemo(
+    () =>
+      !isConnected ||
+      chainId !== DEFAULT_CHAIN ||
+      !changeRulerConfig ||
+      isError ||
+      isLoading ||
+      isChanging ||
+      isUndefined(arbitrable) ||
+      !isValid,
+    [changeRulerConfig, isError, isLoading, isChanging, arbitrable, isValid, isConnected, chainId]
+  );
   return (
     <Container>
-      <Header text="Developer" />
+      <Header text="Developer" tooltipMsg="Address of the current ruler of the selected arbitrable" />
       <InputContainer>
-        <StyledLabel>Current Developer : 0xbe8d95497E53aB41d5A45CC8def90d0e59b49f99</StyledLabel>
-        <LabeledInput label="New Developer" />
+        <StyledLabel>Current Developer : {currentDeveloper ?? "None"}</StyledLabel>
+        <LabeledInput
+          label="New Developer"
+          onChange={(e) => setNewDeveloper(e.target.value)}
+          message={isValid ? "" : "Invalid Address"}
+          variant={isValid ? "" : "error"}
+        />
       </InputContainer>
-      <Button text="Update" />
+      <Button text="Update" onClick={handleClick} isLoading={isLoading || isChanging} disabled={isDisabled} />
     </Container>
   );
 };

web-devtools/src/app/(main)/ruler/Header.tsx

@@ -1,11 +1,25 @@
 import React from "react";
 import styled from "styled-components";
+import WithHelpTooltip from "components/WithHelpTooltip";
 
-const Container = styled.h2`
+const Container = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
   border-bottom: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
   padding: 8px 0px;
 `;
 
-const Header: React.FC<{ text: string }> = ({ text }) => <Container>{text}</Container>;
+const Title = styled.h2`
+  margin: 0;
+`;
+
+const Header: React.FC<{ text: string; tooltipMsg: string }> = ({ text, tooltipMsg }) => (
+  <Container>
+    <WithHelpTooltip tooltipMsg={tooltipMsg} place="right">
+      <Title>{text}</Title>
+    </WithHelpTooltip>
+  </Container>
+);
 
 export default Header;

web-devtools/src/app/(main)/ruler/ManualRuling.tsx

@@ -1,11 +1,26 @@
-import React, { useState } from "react";
+"use client";
+import React, { useCallback, useMemo, useState } from "react";
 import styled from "styled-components";
 
+import { RULING_MODE } from "consts";
+import { useAccount, usePublicClient } from "wagmi";
+
 import { Button } from "@kleros/ui-components-library";
 
+import { useRulerContext } from "context/RulerContext";
+import {
+  useSimulateKlerosCoreRulerChangeRulingModeToManual,
+  useSimulateKlerosCoreRulerExecuteRuling,
+  useWriteKlerosCoreRulerChangeRulingModeToManual,
+  useWriteKlerosCoreRulerExecuteRuling,
+} from "hooks/contracts/generated";
+import { isUndefined } from "utils/isUndefined";
+import { wrapWithToast } from "utils/wrapWithToast";
+
 import LabeledInput from "components/LabeledInput";
 
 import Header from "./Header";
+import { DEFAULT_CHAIN } from "consts/chains";
 
 const Container = styled.div`
   width: 100%;
@@ -22,14 +37,75 @@ const SelectContainer = styled.div`
 `;
 
 const ManualRuling: React.FC = () => {
-  const [tie, setTie] = useState<boolean>(false);
-  const [overriden, setOverriden] = useState<boolean>(false);
+  const { isConnected, chainId } = useAccount();
+  const { arbitrable, arbitrableSettings } = useRulerContext();
+  const [isSending, setIsSending] = useState<boolean>(false);
+  const [tie, setTie] = useState(arbitrableSettings?.tied ?? false);
+  const [overridden, setOverridden] = useState(arbitrableSettings?.overridden ?? false);
+  const [ruling, setRuling] = useState(arbitrableSettings?.ruling);
   const [disputeId, setDisputeId] = useState<number>();
-  const [ruling, setRuling] = useState<number>();
+
+  const publicClient = usePublicClient();
+
+  const { data: manualModeConfig } = useSimulateKlerosCoreRulerChangeRulingModeToManual({
+    query: {
+      enabled: arbitrableSettings?.rulingMode !== RULING_MODE.Manual && !isUndefined(arbitrable),
+    },
+    args: [arbitrable as `0x${string}`],
+  });
+  const { writeContractAsync: changeToManualMode } = useWriteKlerosCoreRulerChangeRulingModeToManual();
+
+  const isDisabled = useMemo(() => {
+    return (
+      !isConnected ||
+      chainId !== DEFAULT_CHAIN ||
+      isUndefined(disputeId) ||
+      isUndefined(ruling) ||
+      isUndefined(arbitrable)
+    );
+  }, [disputeId, ruling, arbitrable, isConnected, chainId]);
+
+  const {
+    data: executeConfig,
+    isLoading: isLoadingExecuteConfig,
+    isError,
+  } = useSimulateKlerosCoreRulerExecuteRuling({
+    query: {
+      enabled: arbitrableSettings?.rulingMode === RULING_MODE.Manual && !isUndefined(arbitrable) && !isDisabled,
+    },
+    args: [BigInt(disputeId ?? 0), BigInt(ruling ?? 0), tie, overridden],
+  });
+
+  const { writeContractAsync: executeRuling } = useWriteKlerosCoreRulerExecuteRuling();
+
+  const handleRuling = useCallback(async () => {
+    if (!publicClient) return;
+    if (arbitrableSettings?.rulingMode !== RULING_MODE.Manual) {
+      if (!manualModeConfig) return;
+      setIsSending(true);
+
+      wrapWithToast(async () => await changeToManualMode(manualModeConfig.request), publicClient)
+        .then(async (res) => {
+          if (res.status && executeConfig) {
+            wrapWithToast(async () => await executeRuling(executeConfig.request), publicClient);
+          }
+        })
+        .finally(() => setIsSending(false));
+    } else if (executeConfig) {
+      setIsSending(true);
+
+      wrapWithToast(async () => await executeRuling(executeConfig.request), publicClient).finally(() =>
+        setIsSending(false)
+      );
+    }
+  }, [publicClient, executeConfig, manualModeConfig, arbitrableSettings, changeToManualMode, executeRuling]);
 
   return (
     <Container>
-      <Header text="Manual Ruling" />
+      <Header
+        text="Manual Ruling"
+        tooltipMsg="Provide Manual ruling for the arbitrator. This operation will change the ruling mode to Manual, if the ruling mode is not Manual"
+      />
       <SelectContainer>
         <LabeledInput
           label="Dispute ID"
@@ -43,12 +119,16 @@ const ManualRuling: React.FC = () => {
         <LabeledInput
           label="Overidden"
           inputType="checkbox"
-          checked={overriden}
-          onChange={() => setOverriden((prev) => !prev)}
+          checked={overridden}
+          onChange={() => setOverridden((prev) => !prev)}
         />
       </SelectContainer>
-
-      <Button text="Rule" />
+      <Button
+        text="Rule"
+        onClick={handleRuling}
+        isLoading={isLoadingExecuteConfig || isSending}
+        disabled={isDisabled || isError || isSending || isLoadingExecuteConfig}
+      />
     </Container>
   );
 };