refactor(useLocalStorage): use own code

config/feature-flags/context-hook.tsx

@@ -1,5 +1,6 @@
 import { useMemo, useState, useCallback } from 'react';
-import { useLocalStorage } from '@lido-sdk/react';
+
+import { useLocalStorage } from 'shared/hooks/use-local-storage';
 
 import { getFeatureFlagsDefault } from './utils';
 import { FeatureFlagsType } from './types';

config/user-config/context-hook.tsx

@@ -1,8 +1,7 @@
 import { useMemo, useState, useCallback } from 'react';
 
-import { useLocalStorage } from '@lido-sdk/react';
-
 import { CHAINS } from 'consts/chains';
+import { useLocalStorage } from 'shared/hooks/use-local-storage';
 
 import { getUserConfigDefault } from './utils';
 import { UserConfigDefaultType } from './types';

providers/ipfs-info-box-statuses.tsx

@@ -7,7 +7,6 @@ import {
   useMemo,
 } from 'react';
 import invariant from 'tiny-invariant';
-import { useLocalStorage } from '@lido-sdk/react';
 
 import { config } from 'config';
 import { useRpcUrl } from 'config/rpc';
@@ -18,6 +17,7 @@ import { useDappStatus } from 'modules/web3';
 import { useCSPViolation } from 'features/ipfs/csp-violation-box/use-csp-violation';
 import { useRouterPath } from 'shared/hooks/use-router-path';
 import { useLidoQuery } from 'shared/hooks/use-lido-query';
+import { useLocalStorage } from 'shared/hooks/use-local-storage';
 import { checkRpcUrl } from 'utils/check-rpc-url';
 
 type IPFSInfoBoxStatusesContextValue = {

shared/hooks/use-local-storage.ts

@@ -0,0 +1,75 @@
+import {
+  useCallback,
+  useEffect,
+  useState,
+  Dispatch,
+  SetStateAction,
+} from 'react';
+
+export const useLocalStorage = <T>(
+  key: string,
+  initialValue: T,
+): [storedValue: T, setValue: Dispatch<SetStateAction<T>>] => {
+  const readValue = useCallback(() => {
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? (JSON.parse(item) as T) : initialValue;
+    } catch (error) {
+      if (typeof window === 'undefined') {
+        console.warn(`Error reading localStorage key "${key}"`);
+      }
+      return initialValue;
+    }
+  }, [initialValue, key]);
+
+  const [storedValue, setStoredValue] = useState(readValue);
+
+  const saveToStorage = useCallback(
+    (newValue: T) => {
+      try {
+        window.localStorage.setItem(key, JSON.stringify(newValue));
+        window.dispatchEvent(new Event('local-storage'));
+      } catch (error) {
+        if (typeof window === 'undefined') {
+          console.warn(`Error setting localStorage key "${key}"`);
+        }
+      }
+    },
+    [key],
+  );
+
+  const setValue = useCallback<Dispatch<SetStateAction<T>>>(
+    (value) => {
+      if (value instanceof Function) {
+        setStoredValue((current) => {
+          const newValue = value(current);
+          saveToStorage(newValue);
+          return newValue;
+        });
+      } else {
+        saveToStorage(value);
+        setStoredValue(value);
+      }
+    },
+    [saveToStorage],
+  );
+
+  useEffect(() => {
+    setStoredValue(readValue());
+  }, [readValue]);
+
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setStoredValue(readValue());
+    };
+    window.addEventListener('storage', handleStorageChange);
+    window.addEventListener('local-storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+      window.removeEventListener('local-storage', handleStorageChange);
+    };
+  }, [readValue]);
+
+  return [storedValue, setValue];
+};