chore: use @eslint-react/eslint-plugin

eslint.config.js

@@ -1,14 +1,13 @@
-import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import eslintReact from "@eslint-react/eslint-plugin";
+import { fixupPluginRules } from "@eslint/compat";
 import eslint from "@eslint/js";
 import reactCompiler from "eslint-plugin-react-compiler";
 import reactHooks from "eslint-plugin-react-hooks/index.js";
 import reactRefresh from "eslint-plugin-react-refresh";
-import reactJsxRuntime from "eslint-plugin-react/configs/jsx-runtime.js";
-import reactRecommended from "eslint-plugin-react/configs/recommended.js";
 import tseslint from "typescript-eslint";
 
 export default tseslint.config(
-  { ignores: ["src/components/ui/"] },
+  { ignores: ["src/components/ui/", "src/lib/"] },
   eslint.configs.recommended,
   ...tseslint.configs.recommended,
   {
@@ -25,8 +24,7 @@ export default tseslint.config(
       ],
     },
   },
-  reactRecommended,
-  reactJsxRuntime,
+  eslintReact.configs["recommended-typescript"],
   {
     plugins: {
       "react-hooks": fixupPluginRules(reactHooks),
@@ -42,16 +40,4 @@ export default tseslint.config(
       "react-compiler/react-compiler": "error",
     },
   },
-  {
-    settings: {
-      react: {
-        version: "detect",
-      },
-    },
-    rules: {
-      "react/display-name": "off",
-      "react/no-unescaped-entities": "off",
-      "react/no-unknown-property": ["error", { ignore: ["css"] }],
-    },
-  },
 );

package.json

@@ -52,6 +52,7 @@
     "zod": "^3.24.2"
   },
   "devDependencies": {
+    "@eslint-react/eslint-plugin": "^1.26.2",
     "@eslint/compat": "^1.2.6",
     "@eslint/js": "^9.20.0",
     "@pandacss/dev": "^0.53.0",
@@ -69,7 +70,6 @@
     "@types/react-dom": "^19.0.3",
     "babel-plugin-react-compiler": "19.0.0-beta-30d8a17-20250209",
     "eslint": "^9.20.1",
-    "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-compiler": "19.0.0-beta-30d8a17-20250209",
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",

src/components/param/codec.tsx

@@ -11,7 +11,7 @@ import { StructParam, type StructParamProps } from "./struct";
 import { TupleParam, type TupleParamProps } from "./tuple";
 import { VoidParam, type VoidParamProps } from "./void";
 import type { Decoded, Shape } from "@polkadot-api/view-builder";
-import { createContext, Suspense, useContext, useMemo } from "react";
+import { createContext, Suspense, use, useMemo } from "react";
 import { css } from "styled-system/css";
 import { type CssProperties } from "styled-system/types";
 
@@ -26,7 +26,7 @@ export function CodecParam<T = unknown>({
   shape,
   ...props
 }: CodecParamProps<T>) {
-  const depth = useContext(StorageParamDepthContext);
+  const depth = use(StorageParamDepthContext);
 
   return (
     <div