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 }
     >
+      <Tooltip content="Chains list" disableOnMobile open={ tooltip.open } onOpenChange={ handleTooltipOpenChange }>
+        <Flex alignItems="center">
           <PopoverTrigger>
             <IconButton
               variant="link"
@@ -28,6 +45,8 @@ const NetworkMenu = () => {
               <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,16 +13,30 @@ 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 }
     >
+      <Tooltip content="Website settings" disableOnMobile open={ tooltip.open } onOpenChange={ handleTooltipOpenChange }>
+        <Flex alignItems="center">
           <PopoverTrigger>
             <IconButton
               variant="link"
@@ -32,9 +47,11 @@ const 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/>