UX: add tooltip (setting/chains) (#2890)

Fixes #2877

ui/snippets/topBar/NetworkMenu.tsx

+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import { IconButton } from 'toolkit/chakra/icon-button';
 import { PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 import NetworkMenuContentDesktop from 'ui/snippets/networkMenu/NetworkMenuContentDesktop';
 import useNetworkMenu from 'ui/snippets/networkMenu/useNetworkMenu';
 
 const NetworkMenu = () => {
   const menu = useNetworkMenu();
+  const tooltip = useDisclosure();
+
+  const handlePopoverOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    open && tooltip.onClose();
+    menu.onOpenChange({ open });
+  }, [ menu, tooltip ]);
+
+  const handleTooltipOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    if (!menu.open) {
+      tooltip.onOpenChange({ open });
+    }
+  }, [ menu, tooltip ]);
 
   return (
     <PopoverRoot
       positioning={{ placement: 'bottom-start', offset: { mainAxis: 6 } }}
       lazyMount
       open={ menu.open }
-      onOpenChange={ menu.onOpenChange }
+      onOpenChange={ handlePopoverOpenChange }
     >
-      <PopoverTrigger>
-        <IconButton
-          variant="link"
-          boxSize={ 5 }
-          aria-label="Network menu"
-          borderRadius="sm"
-          onClick={ menu.onToggle }
-          p={ 0.5 }
-        >
-          <IconSvg name="networks" boxSize="full"/>
-        </IconButton>
-      </PopoverTrigger>
+      <Tooltip content="Chains list" disableOnMobile open={ tooltip.open } onOpenChange={ handleTooltipOpenChange }>
+        <Flex alignItems="center">
+          <PopoverTrigger>
+            <IconButton
+              variant="link"
+              boxSize={ 5 }
+              aria-label="Network menu"
+              borderRadius="sm"
+              onClick={ menu.onToggle }
+              p={ 0.5 }
+            >
+              <IconSvg name="networks" boxSize="full"/>
+            </IconButton>
+          </PopoverTrigger>
+        </Flex>
+      </Tooltip>
       <NetworkMenuContentDesktop items={ menu.data } tabs={ menu.availableTabs }/>
     </PopoverRoot>
   );

ui/snippets/topBar/settings/Settings.tsx

-import { Box } from '@chakra-ui/react';
+import { Box, Flex } 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 { Tooltip } from 'toolkit/chakra/tooltip';
 import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -12,29 +13,45 @@ import SettingsIdentIcon from './SettingsIdentIcon';
 import SettingsScamTokens from './SettingsScamTokens';
 
 const Settings = () => {
-  const { open, onOpenChange, onClose } = useDisclosure();
+  const popover = useDisclosure();
+  const tooltip = useDisclosure();
+
+  const handlePopoverOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    open && tooltip.onClose();
+    popover.onOpenChange({ open });
+  }, [ popover, tooltip ]);
+
+  const handleTooltipOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    if (!popover.open) {
+      tooltip.onOpenChange({ open });
+    }
+  }, [ popover, tooltip ]);
 
   return (
     <PopoverRoot
       positioning={{ placement: 'bottom-start' }}
-      open={ open }
-      onOpenChange={ onOpenChange }
+      open={ popover.open }
+      onOpenChange={ handlePopoverOpenChange }
       // should be false to enable auto-switch to default color theme
       lazyMount={ false }
     >
-      <PopoverTrigger>
-        <IconButton
-          variant="link"
-          size="2xs"
-          borderRadius="sm"
-          aria-label="User settings"
-        >
-          <IconSvg name="gear_slim"/>
-        </IconButton>
-      </PopoverTrigger>
+      <Tooltip content="Website settings" disableOnMobile open={ tooltip.open } onOpenChange={ handleTooltipOpenChange }>
+        <Flex alignItems="center">
+          <PopoverTrigger>
+            <IconButton
+              variant="link"
+              size="2xs"
+              borderRadius="sm"
+              aria-label="User settings"
+            >
+              <IconSvg name="gear_slim"/>
+            </IconButton>
+          </PopoverTrigger>
+        </Flex>
+      </Tooltip>
       <PopoverContent overflowY="hidden" w="auto" fontSize="sm">
         <PopoverBody>
-          <SettingsColorTheme onSelect={ onClose }/>
+          <SettingsColorTheme onSelect={ popover.onClose }/>
           <Box borderColor="border.divider" borderTopWidth="1px" my={ 3 }/>
           <SettingsIdentIcon/>
           <SettingsAddressFormat/>