deps(SPV-1286): update eslint and fix errors

package.json

@@ -62,8 +62,8 @@
     "zod": "^3.24.0"
   },
   "devDependencies": {
-    "@eslint/compat": "^1.0.1",
-    "@eslint/js": "^9.3.0",
+    "@eslint/compat": "^1.2.4",
+    "@eslint/js": "^9.16.0",
     "@playwright/test": "^1.49.1",
     "@tanstack/eslint-plugin-query": "^5.35.6",
     "@tanstack/router-devtools": "^1.33.4",
@@ -75,11 +75,11 @@
     "@vitejs/plugin-react-swc": "^3.7.2",
     "@vitest/coverage-v8": "^2.1.8",
     "autoprefixer": "^10.4.20",
-    "eslint": "^9.8.0",
-    "eslint-plugin-import": "^2.29.1",
-    "eslint-plugin-react": "^7.35.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
+    "eslint": "^9.16.0",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.3.0",
     "postcss": "^8.4.49",
     "prettier": "3.2.5",

src/components/AddXpubDialog/AddXpubDialog.tsx

@@ -9,7 +9,8 @@ import {
   DialogTitle,
   DialogTrigger,
 } from '@/components/ui/dialog.tsx';
-import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { FormProvider as Form } from 'react-hook-form';
 import { Input } from '@/components/ui/input.tsx';
 import { useSpvWalletClient } from '@/contexts';
 import { errorWrapper } from '@/utils';

src/components/RecordTxDialogUser/PrepareTxDialogUser.tsx

@@ -22,7 +22,8 @@ import { errorWrapper } from '@/utils';
 import { useForm } from 'react-hook-form';
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+import { FormProvider as Form } from 'react-hook-form';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 export interface RecordTxDialogProps {

src/components/ui/form/index.ts

@@ -1,2 +1,9 @@
-export * from './form.tsx';
 export * from './use-form-field.tsx';
+export * from './form-item.tsx';
+export * from './form-item-context.tsx';
+export * from './form-label.tsx';
+export * from './form-message.tsx';
+export * from './form-field.tsx';
+export * from './form-field-context.tsx';
+export * from './form-control.tsx';
+export * from './form-description.tsx';

src/contexts/AuthContext/AuthContext.tsx

@@ -1,6 +1,4 @@
-import React, { createContext, useState } from 'react';
-
-import { Role, useSpvWalletClient } from '@/contexts';
+import React, { createContext } from 'react';
 
 export interface AuthContext {
   isAuthenticated: boolean;
@@ -11,19 +9,3 @@ export interface AuthContext {
 }
 
 export const AuthContext = createContext<AuthContext | null>(null);
-
-export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
-  const { spvWalletClient } = useSpvWalletClient();
-
-  const [loginKey, setLoginKey] = useState<string>('');
-  const isAuthenticated = !!spvWalletClient;
-
-  const isAdmin = isAuthenticated && spvWalletClient?.role === Role.Admin;
-  const isUser = isAuthenticated && spvWalletClient?.role === Role.User;
-
-  return (
-    <AuthContext.Provider value={{ isAdmin, isAuthenticated, loginKey, setLoginKey, isUser }}>
-      {children}
-    </AuthContext.Provider>
-  );
-};

src/contexts/AuthContext/AuthProvider.tsx

@@ -0,0 +1,18 @@
+import React, { useState } from 'react';
+import { AuthContext, Role, useSpvWalletClient } from '@/contexts';
+
+export const AuthProvider = ({ children }: { children: React.ReactNode }) => {
+  const { spvWalletClient } = useSpvWalletClient();
+
+  const [loginKey, setLoginKey] = useState<string>('');
+  const isAuthenticated = !!spvWalletClient;
+
+  const isAdmin = isAuthenticated && spvWalletClient?.role === Role.Admin;
+  const isUser = isAuthenticated && spvWalletClient?.role === Role.User;
+
+  return (
+    <AuthContext.Provider value={{ isAdmin, isAuthenticated, loginKey, setLoginKey, isUser }}>
+      {children}
+    </AuthContext.Provider>
+  );
+};

src/contexts/AuthContext/index.ts

@@ -1,4 +1,5 @@
 export * from './AuthContext.tsx';
+export * from './AuthProvider.tsx';
 export * from './types.ts';
 export * from './useAuth.tsx';
 export * from './useServerUrl.tsx';

src/contexts/SpvWalletContext/SpvWalletContext.tsx

@@ -1,6 +1,6 @@
-import { TRole, useServerUrl } from '@/contexts';
+import { TRole } from '@/contexts';
 import { SpvWalletClient } from '@bsv/spv-wallet-js-client';
-import React, { createContext, useMemo, useState } from 'react';
+import React, { createContext } from 'react';
 
 export interface SpvWalletClientExtended extends SpvWalletClient {
   role?: TRole;
@@ -14,20 +14,3 @@ export interface SpvWalletContext {
 }
 
 export const SpvWalletContext = createContext<SpvWalletContext | null>(null);
-
-export const SpvWalletProvider = ({ children }: { children: React.ReactNode }) => {
-  const { serverUrl, setServerUrl } = useServerUrl();
-
-  const [spvWalletClient, setSpvWalletClient] = useState<SpvWalletClientExtended | null>(null);
-
-  const contextValue = useMemo(
-    () => ({
-      serverUrl,
-      setServerUrl,
-      spvWalletClient,
-      setSpvWalletClient,
-    }),
-    [serverUrl, setServerUrl, spvWalletClient, setSpvWalletClient],
-  );
-  return <SpvWalletContext.Provider value={contextValue}>{children}</SpvWalletContext.Provider>;
-};

src/contexts/SpvWalletContext/SpvWalletProvider.tsx

@@ -0,0 +1,19 @@
+import { SpvWalletClientExtended, SpvWalletContext, useServerUrl } from '@/contexts';
+import React, { useMemo, useState } from 'react';
+
+export const SpvWalletProvider = ({ children }: { children: React.ReactNode }) => {
+  const { serverUrl, setServerUrl } = useServerUrl();
+
+  const [spvWalletClient, setSpvWalletClient] = useState<SpvWalletClientExtended | null>(null);
+
+  const contextValue = useMemo(
+    () => ({
+      serverUrl,
+      setServerUrl,
+      spvWalletClient,
+      setSpvWalletClient,
+    }),
+    [serverUrl, setServerUrl, spvWalletClient, setSpvWalletClient],
+  );
+  return <SpvWalletContext.Provider value={contextValue}>{children}</SpvWalletContext.Provider>;
+};

src/contexts/SpvWalletContext/index.ts

@@ -1,2 +1,3 @@
 export * from './SpvWalletContext.tsx';
+export * from './SpvWalletProvider.tsx';
 export * from './useSpvWalletClient.tsx';

src/contexts/ThemeProviderContext/ThemeProvider.tsx

@@ -0,0 +1,46 @@
+import { Theme, ThemeProviderContext } from './ThemeProviderContext';
+import React, { useEffect, useState } from 'react';
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Theme;
+  storageKey?: string;
+};
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = 'vite-ui-theme',
+  ...props
+}: ThemeProviderProps) {
+  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+
+    root.classList.remove('light', 'dark');
+
+    if (theme === 'system') {
+      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+
+      root.classList.add(systemTheme);
+      return;
+    }
+
+    root.classList.add(theme);
+  }, [theme]);
+
+  const value = {
+    theme,
+    setTheme: (theme: Theme) => {
+      localStorage.setItem(storageKey, theme);
+      setTheme(theme);
+    },
+  };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}

src/contexts/ThemeProviderContext/ThemeProviderContext.tsx

@@ -1,12 +1,6 @@
-import React, { createContext, useEffect, useState } from 'react';
+import { createContext } from 'react';
 
-type Theme = 'dark' | 'light' | 'system';
-
-type ThemeProviderProps = {
-  children: React.ReactNode;
-  defaultTheme?: Theme;
-  storageKey?: string;
-};
+export type Theme = 'dark' | 'light' | 'system';
 
 type ThemeProviderState = {
   theme: Theme;
@@ -19,41 +13,3 @@ const initialState: ThemeProviderState = {
 };
 
 export const ThemeProviderContext = createContext<ThemeProviderState>(initialState);
-
-export function ThemeProvider({
-  children,
-  defaultTheme = 'system',
-  storageKey = 'vite-ui-theme',
-  ...props
-}: ThemeProviderProps) {
-  const [theme, setTheme] = useState<Theme>(() => (localStorage.getItem(storageKey) as Theme) || defaultTheme);
-
-  useEffect(() => {
-    const root = window.document.documentElement;
-
-    root.classList.remove('light', 'dark');
-
-    if (theme === 'system') {
-      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
-
-      root.classList.add(systemTheme);
-      return;
-    }
-
-    root.classList.add(theme);
-  }, [theme]);
-
-  const value = {
-    theme,
-    setTheme: (theme: Theme) => {
-      localStorage.setItem(storageKey, theme);
-      setTheme(theme);
-    },
-  };
-
-  return (
-    <ThemeProviderContext.Provider {...props} value={value}>
-      {children}
-    </ThemeProviderContext.Provider>
-  );
-}

src/contexts/ThemeProviderContext/index.ts

@@ -1,2 +1,3 @@
 export * from './ThemeProviderContext.tsx';
+export * from './ThemeProvider.tsx';
 export * from './useTheme.tsx';

src/routes/login.tsx

@@ -5,7 +5,6 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-  Form,
   FormControl,
   FormField,
   FormItem,
@@ -21,6 +20,7 @@ import {
   SelectValue,
   Toaster,
 } from '@/components';
+import { FormProvider as Form } from 'react-hook-form';
 import { Role, TRole, LoginType, useAuth, useSpvWalletClient } from '@/contexts';
 
 import { createClient, errorWrapper, getShortXprv } from '@/utils';