chore(web-devtools): upgraded Next to 15, React to 19, removed unused eslint-config-standard

Author: jaybuidl

eslint-config/package.json

@@ -8,14 +8,15 @@
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "@typescript-eslint/utils": "^8.15.0",
+    "eslint": "^9.15.0",
     "eslint-config-prettier": "^9.1.0",
-    "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-promise": "^6.6.0",
     "eslint-plugin-security": "^3.0.1",
-    "eslint-utils": "^3.0.0"
+    "eslint-utils": "^3.0.0",
+    "prettier": "^3.3.3"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.2.0",

web-devtools/package.json

@@ -29,33 +29,40 @@
     "@graphql-codegen/client-preset": "^4.5.0",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.17.6",
-    "@types/react": "18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "npm:[email protected]",
+    "@types/react-dom": "npm:[email protected]",
+    "@types/react-is": "^18.3.0",
+    "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "@typescript-eslint/utils": "^8.15.0",
     "@wagmi/cli": "^2.1.18",
     "eslint": "^9.15.0",
-    "eslint-config-next": "^14.2.18",
+    "eslint-config-next": "15.0.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-import-resolver-typescript": "^3.6.3",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "rimraf": "^6.0.1",
     "ts-node": "^10.9.2",
     "typescript": "^5.6.3"
   },
   "dependencies": {
     "@kleros/kleros-sdk": "workspace:^",
     "@kleros/ui-components-library": "^2.15.0",
+    "@tanstack/react-query": "^5.61.0",
+    "@wagmi/connectors": "^5.5.0",
+    "@wagmi/core": "^2.15.0",
     "@web3modal/wagmi": "^5.1.11",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
-    "next": "14.2.18",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "next": "15.0.3",
+    "react": "19.0.0-rc-66855b96-20241106",
+    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-is": "^18.3.1",
     "react-markdown": "^8.0.7",
     "react-toastify": "^10.0.6",
+    "styled-components": "^5.3.11",
     "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.6",
     "viem": "^2.21.48",

web-devtools/src/app/(main)/dispute-template/FetchDisputeRequestInput.tsx

@@ -22,7 +22,7 @@ const InputContainer = styled.div`
   flex-wrap: wrap;
   gap: 8px;
 `;
-const StyledChainInput = styled(Field)`
+const StyledChainInput = styled(Field as any)`
   width: 120px;
 `;
 const StyledHeader = styled.h2`
@@ -115,7 +115,7 @@ const FetchDisputeRequestInput: React.FC<IFetchDisputeRequestInput> = ({ setPara
           value={chainId}
           placeholder="Enter chain Id"
           type="number"
-          onChange={(e) => setChainId(Number(e.target.value))}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => setChainId(Number(e.target.value))}
         />
       </InputContainer>
       <StyledH3>Presets</StyledH3>

web-devtools/src/app/(main)/dispute-template/FetchFromIdInput.tsx

@@ -15,7 +15,7 @@ const Container = styled.div`
   margin-left: 24px;
 `;
 
-const StyledInput = styled(Field)``;
+const StyledInput = styled(Field as any)``;
 const StyledHeader = styled.h2`
   margin-top: 24px;
 `;
@@ -60,7 +60,7 @@ const FetchFromIDInput: React.FC<IFetchFromID> = ({
         value={templateId}
         placeholder="Enter template Id"
         message={isLoading ? "fetching ..." : ""}
-        onChange={(e) => setTemplateId(e.target.value)}
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTemplateId(e.target.value)}
       />
     </Container>
   );

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

@@ -48,7 +48,7 @@ const SelectContainer = styled.div`
   position: relative;
 `;
 
-const StyledField = styled(Field)`
+const StyledField = styled(Field as any)`
   width: auto;
   ${landscapeStyle(
     () => css`

web-devtools/src/components/LabeledInput.tsx

@@ -57,7 +57,7 @@ const InputContainer = styled.div<{ isField?: boolean }>`
     `}
 `;
 
-const StyledField = styled(Field)<{ paddingLeft?: number }>`
+const StyledField = styled(Field as any)<{ paddingLeft?: number }>`
   width: 100%;
   > input {
     border: none;

web-devtools/src/layout/Header/navbar/Explore.tsx

@@ -38,12 +38,12 @@ const Title = styled.h1`
   )};
 `;
 
-const StyledLink = styled(Link)<{ isActive: boolean }>`
+const StyledLink = styled(Link)<{ $isActive: boolean }>`
   color: ${({ theme }) => theme.klerosUIComponentsPrimaryText};
   text-decoration: none;
   font-size: 16px;
 
-  font-weight: ${({ isActive }) => (isActive ? "600" : "normal")};
+  font-weight: ${({ $isActive }) => ($isActive ? "600" : "normal")};
 
   ${landscapeStyle(
     () => css`
@@ -70,7 +70,7 @@ const Explore: React.FC = () => {
           <StyledLink
             href={to}
             onClick={toggleIsOpen}
-            isActive={to === "/" ? pathname === "/" : pathname.startsWith(to)}
+            $isActive={to === "/" ? pathname === "/" : pathname.startsWith(to)}
           >
             {text}
           </StyledLink>

web-devtools/tsconfig.json

@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "target": "ES2022",
     "lib": [
       "dom",
       "dom.iterable",

web-devtools/wagmi.config.ts

@@ -6,8 +6,8 @@ import { react, actions } from "@wagmi/cli/plugins";
 import dotenv from "dotenv";
 import { Abi, Chain } from "viem";
 
-import IArbitrableV2 from "@kleros/kleros-v2-contracts/artifacts/src/arbitration/interfaces/IArbitrableV2.sol/IArbitrableV2.json" assert { type: "json" };
-import IHomeGateway from "@kleros/kleros-v2-contracts/artifacts/src/gateway/interfaces/IHomeGateway.sol/IHomeGateway.json" assert { type: "json" };
+import IArbitrableV2 from "@kleros/kleros-v2-contracts/artifacts/src/arbitration/interfaces/IArbitrableV2.sol/IArbitrableV2.json" with { type: "json" };
+import IHomeGateway from "@kleros/kleros-v2-contracts/artifacts/src/gateway/interfaces/IHomeGateway.sol/IHomeGateway.json" with { type: "json" };
 
 import { ArbitratorTypes, getArbitratorType } from "./src/consts/arbitratorTypes";
 import { arbitrum, arbitrumSepolia, gnosis, gnosisChiado, mainnet, sepolia } from "viem/chains";