add tooltip for wallet connect button

ui/snippets/walletMenu/WalletMenuDesktop.tsx

 import type { ButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, useColorModeValue, Box, useBoolean } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, useColorModeValue, Box, useBoolean, Tooltip } from '@chakra-ui/react';
 import React from 'react';
 
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
@@ -14,6 +14,15 @@ type Props = {
 const WalletMenuDesktop = ({ isHomePage }: Props) => {
   const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
+  const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
+
+  React.useEffect(() => {
+    const wasShown = window.localStorage.getItem('wallet-connect-tooltip-shown');
+    if (!wasShown) {
+      setIsTooltipShown.on();
+      window.localStorage.setItem('wallet-connect-tooltip-shown', 'true');
+    }
+  }, [ setIsTooltipShown ]);
 
   const variant = React.useMemo(() => {
     if (isWalletConnected) {
@@ -54,6 +63,16 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
       isOpen={ isPopoverOpen }
       onClose={ setIsPopoverOpen.off }
     >
+      <Tooltip
+        label={ <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span> }
+        textAlign="center"
+        padding={ 2 }
+        isDisabled={ isWalletConnected }
+        openDelay={ 300 }
+        isOpen={ isTooltipShown || undefined }
+        onClose={ setIsTooltipShown.off }
+      >
+        <Box ml={ 3 }>
           <PopoverTrigger>
             <Button
               variant={ variant }
@@ -62,7 +81,6 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
               isLoading={ isModalOpening || isModalOpen }
               loadingText="Connect wallet"
               onClick={ isWalletConnected ? setIsPopoverOpen.on : connect }
-          ml={ 3 }
               fontSize="sm"
               { ...buttonStyles }
             >
@@ -76,6 +94,8 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
               ) : 'Connect wallet' }
             </Button>
           </PopoverTrigger>
+        </Box>
+      </Tooltip>
       { isWalletConnected && (
         <PopoverContent w="235px">
           <PopoverBody padding="24px 16px 16px 16px">