remove usehooks-ts (#2436)

we only use one hook from package,
& usehooks-ts is one of the packages blocking react 19

ui/app/mirror-logs/table.tsx

@@ -5,15 +5,15 @@ import { ListMirrorNamesResponse } from '@/grpc_generated/route';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import ReactSelect from 'react-select';
 import useSWR from 'swr';
-import { useLocalStorage } from 'usehooks-ts';
 import { fetcher } from '../utils/swr';
+import useLocalStorage from '../utils/useLocalStorage';
 
 export default function LogsView() {
-  const [mirrorName, setMirrorName] = useLocalStorage<string>(
+  const [mirrorName, setMirrorName] = useLocalStorage(
     'peerdbMirrorNameFilterForLogs',
     ''
   );
-  const [logLevel, setLogLevel] = useLocalStorage<string>(
+  const [logLevel, setLogLevel] = useLocalStorage(
     'peerdbLogTypeFilterForLogs',
     'all'
   );

ui/app/mirrors/[mirrorId]/cdc.tsx

@@ -1,10 +1,10 @@
 'use client';
+import useLocalStorage from '@/app/utils/useLocalStorage';
 import { MirrorStatusResponse } from '@/grpc_generated/route';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import { Tab, TabGroup, TabList, TabPanel, TabPanels } from '@tremor/react';
 import { useEffect, useState } from 'react';
-import { useLocalStorage } from 'usehooks-ts';
 import CdcDetails from './cdcDetails';
 import { SnapshotStatusTable } from './snapshot';
 

ui/app/peers/[peerName]/lagGraph.tsx

@@ -1,6 +1,7 @@
 'use client';
 import SelectTheme from '@/app/styles/select';
 import { TimeAggregateTypes, timeOptions } from '@/app/utils/graph';
+import useLocalStorage from '@/app/utils/useLocalStorage';
 import {
   GetSlotLagHistoryRequest,
   GetSlotLagHistoryResponse,
@@ -11,7 +12,6 @@ import { LineChart } from '@tremor/react';
 import moment from 'moment';
 import { useCallback, useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
-import { useLocalStorage } from 'usehooks-ts';
 import { getSlotData } from './helpers';
 
 type LagGraphProps = {

ui/app/utils/useLocalStorage.ts

@@ -0,0 +1,20 @@
+import { Dispatch, SetStateAction, useEffect, useState } from 'react';
+
+export default function useLocalStorage<T>(
+  key: string,
+  defaultValue: T
+): [T, Dispatch<SetStateAction<T>>] {
+  const [value, setValue] = useState(() => {
+    if (typeof localStorage === 'undefined') return defaultValue;
+    const json = localStorage.getItem(key);
+    if (!json) return defaultValue;
+    return JSON.parse(json);
+  });
+
+  useEffect(() => {
+    if (typeof localStorage !== 'undefined')
+      localStorage.setItem(key, JSON.stringify(value));
+  }, [key, value]);
+
+  return [value, setValue];
+}

ui/components/SidebarComponent.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { fetcher } from '@/app/utils/swr';
+import useLocalStorage from '@/app/utils/useLocalStorage';
 import Logout from '@/components/Logout';
 import { PeerDBVersionResponse } from '@/grpc_generated/route';
 import { BrandLogo } from '@/lib/BrandLogo';
@@ -12,7 +13,6 @@ import { Sidebar, SidebarItem } from '@/lib/Sidebar';
 import { SessionProvider } from 'next-auth/react';
 import Link from 'next/link';
 import useSWR from 'swr';
-import { useLocalStorage } from 'usehooks-ts';
 
 const centerFlexStyle = {
   display: 'flex',

ui/components/TimeComponent.tsx

@@ -1,9 +1,9 @@
 'use client';
+import useLocalStorage from '@/app/utils/useLocalStorage';
 import { Label } from '@/lib/Label';
 import { ProgressCircle } from '@/lib/ProgressCircle';
 import moment from 'moment-timezone';
 import { useEffect, useState } from 'react';
-import { useLocalStorage } from 'usehooks-ts';
 
 const TimeLabel = ({
   timeVal,

ui/package.json

@@ -46,7 +46,6 @@
     "react-toastify": "^11.0.2",
     "styled-components": "^6.1.13",
     "swr": "^2.2.5",
-    "usehooks-ts": "^3.1.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {