make custom useDisclosure hook

eslint.config.mjs

@@ -27,7 +27,7 @@ const RESTRICTED_MODULES = {
     { name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
     {
       name: '@chakra-ui/react',
-      importNames: [ 'Menu', 'PinInput', 'useToast' ],
+      importNames: [ 'Menu', 'PinInput', 'useToast', 'useDisclosure' ],
       message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
     },
     {

toolkit/hooks/useDisclosure.tsx

+// eslint-disable-next-line no-restricted-imports
+import { useDisclosure as useDisclosureChakra } from '@chakra-ui/react';
+import React from 'react';
+
+export function useDisclosure() {
+  const { open, onOpen, onClose, onToggle } = useDisclosureChakra();
+
+  const onOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    if (open) {
+      onOpen();
+    } else {
+      onClose();
+    }
+  }, [ onOpen, onClose ]);
+
+  return {
+    open,
+    onOpenChange,
+    onClose,
+    onOpen,
+    onToggle,
+  };
+}

ui/snippets/networkMenu/useNetworkMenu.tsx

-import { useDisclosure } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
@@ -8,9 +7,10 @@ import { NETWORK_GROUPS } from 'types/networks';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import useFetch from 'lib/hooks/useFetch';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 
 export default function useNetworkMenu() {
-  const { open, onClose, onOpen, onToggle } = useDisclosure();
+  const { open, onClose, onOpen, onOpenChange, onToggle } = useDisclosure();
 
   const fetch = useFetch();
   const { isPending, data } = useQuery<unknown, ResourceError<unknown>, Array<FeaturedNetwork>>({
@@ -20,14 +20,6 @@ export default function useNetworkMenu() {
     staleTime: Infinity,
   });
 
-  const onOpenChange = React.useCallback(({ open }: { open: boolean }) => {
-    if (open) {
-      onOpen();
-    } else {
-      onClose();
-    }
-  }, [ onOpen, onClose ]);
-
   return React.useMemo(() => ({
     open,
     onClose,

ui/snippets/topBar/settings/Settings.tsx

-import { Box, useDisclosure } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import { IconButton } from 'toolkit/chakra/icon-button';
 import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 
 import SettingsAddressFormat from './SettingsAddressFormat';
@@ -10,23 +11,14 @@ import SettingsColorTheme from './SettingsColorTheme';
 import SettingsIdentIcon from './SettingsIdentIcon';
 
 const Settings = () => {
-  // TODO tom2drum refactor to separate hook
-  const { open, onOpen, onClose } = useDisclosure();
-
-  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
-    if (open) {
-      onOpen();
-    } else {
-      onClose();
-    }
-  }, [ onOpen, onClose ]);
+  const { open, onOpenChange, onClose } = useDisclosure();
 
   return (
     <PopoverRoot
       positioning={{ placement: 'bottom-start' }}
       lazyMount
       open={ open }
-      onOpenChange={ handleOpenChange }
+      onOpenChange={ onOpenChange }
     >
       <PopoverTrigger>
         <IconButton