chore: update-dependencies

Author: Harman-singh-waraich

web-devtools/eslint.config.mjs

@@ -30,7 +30,6 @@ export default [
       "plugin:react-hooks/recommended",
       "plugin:import/recommended",
       "plugin:import/react",
-      "plugin:security/recommended",
       "plugin:@typescript-eslint/recommended",
       "plugin:prettier/recommended",
       "prettier"
@@ -41,7 +40,6 @@ export default [
       react: fixupPluginRules(react),
       "react-hooks": fixupPluginRules(reactHooks),
       security: fixupPluginRules(security),
-      import: fixupPluginRules(_import),
     },
 
     languageOptions: {

web-devtools/package.json

@@ -29,16 +29,16 @@
     "@graphql-codegen/client-preset": "^4.5.0",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^20.17.6",
-    "@types/react": "npm:[email protected]",
-    "@types/react-dom": "npm:[email protected].1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@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": "15.0.3",
+    "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",
@@ -57,12 +57,12 @@
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.2",
     "next": "15.0.3",
-    "react": "19.0.0-rc-66855b96-20241106",
-    "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-is": "^18.3.1",
-    "react-markdown": "^8.0.7",
+    "react-markdown": "^9.0.1",
     "react-toastify": "^10.0.6",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.1.13",
     "typewriter-effect": "^2.21.0",
     "vanilla-jsoneditor": "^0.21.6",
     "viem": "^2.21.48",

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

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

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

@@ -8,16 +8,16 @@ import { useOpenContext } from "../MobileHeader";
 
 import Explore from "./Explore";
 
-const Wrapper = styled.div<{ isOpen: boolean }>`
-  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
+const Wrapper = styled.div<{ $isOpen: boolean }>`
+  visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
   position: absolute;
   top: 100%;
   left: 0;
   width: 100vw;
   z-index: 30;
 `;
 
-const Container = styled.div<{ isOpen: boolean }>`
+const Container = styled.div<{ $isOpen: boolean }>`
   position: absolute;
   top: 0;
   left: 0;
@@ -29,8 +29,8 @@ const Container = styled.div<{ isOpen: boolean }>`
   border: 1px solid ${({ theme }) => theme.klerosUIComponentsStroke};
   box-shadow: 0px 2px 3px ${({ theme }) => theme.klerosUIComponentsDefaultShadow};
   transform-origin: top;
-  transform: scaleY(${({ isOpen }) => (isOpen ? "1" : "0")});
-  visibility: ${({ isOpen }) => (isOpen ? "visible" : "hidden")};
+  transform: scaleY(${({ $isOpen }) => ($isOpen ? "1" : "0")});
+  visibility: ${({ $isOpen }) => ($isOpen ? "visible" : "hidden")};
   transition-property: transform, visibility;
   transition-duration: ${({ theme }) => theme.klerosUIComponentsTransitionSpeed};
   transition-timing-function: ease;
@@ -47,8 +47,8 @@ const NavBar: React.FC = () => {
 
   return (
     <>
-      <Wrapper {...{ isOpen }}>
-        <Container {...{ isOpen }}>
+      <Wrapper {...{ $isOpen: isOpen }}>
+        <Container {...{ $isOpen: isOpen }}>
           <Explore />
         </Container>
       </Wrapper>

web-devtools/src/styles/landscapeStyle.ts

@@ -1,8 +1,8 @@
-import { css, DefaultTheme, FlattenInterpolation, ThemeProps } from "styled-components";
+import { css, RuleSet } from "styled-components";
 
 export const BREAKPOINT_LANDSCAPE = 900;
 
-export const landscapeStyle = (styleFn: () => FlattenInterpolation<ThemeProps<DefaultTheme>>) => css`
+export const landscapeStyle = (styleFn: () => RuleSet<object>) => css`
   @media (min-width: ${BREAKPOINT_LANDSCAPE}px) {
     ${() => styleFn()}
   }

web/package.json

@@ -56,7 +56,7 @@
     "@kleros/kleros-v2-prettier-config": "workspace:^",
     "@kleros/kleros-v2-tsconfig": "workspace:^",
     "@types/busboy": "^1.5.4",
-    "@types/react": "18.3.12",
+    "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
@@ -117,7 +117,7 @@
     "react-scripts": "^5.0.1",
     "react-toastify": "^9.1.3",
     "react-use": "^17.5.1",
-    "styled-components": "^5.3.11",
+    "styled-components": "^6.1.13",
     "viem": "^2.21.48",
     "wagmi": "^2.13.0"
   }