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,28 +63,39 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
       isOpen={ isPopoverOpen }
       onClose={ setIsPopoverOpen.off }
     >
-      <PopoverTrigger>
-        <Button
-          variant={ variant }
-          colorScheme="blue"
-          flexShrink={ 0 }
-          isLoading={ isModalOpening || isModalOpen }
-          loadingText="Connect wallet"
-          onClick={ isWalletConnected ? setIsPopoverOpen.on : connect }
-          ml={ 3 }
-          fontSize="sm"
-          { ...buttonStyles }
-        >
-          { isWalletConnected ? (
-            <>
-              <Box mr={ 2 }>
-                <AddressIdenticon size={ 20 } hash={ address }/>
-              </Box>
-              <HashStringShorten hash={ address } isTooltipDisabled/>
-            </>
-          ) : 'Connect wallet' }
-        </Button>
-      </PopoverTrigger>
+      <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 }
+              colorScheme="blue"
+              flexShrink={ 0 }
+              isLoading={ isModalOpening || isModalOpen }
+              loadingText="Connect wallet"
+              onClick={ isWalletConnected ? setIsPopoverOpen.on : connect }
+              fontSize="sm"
+              { ...buttonStyles }
+            >
+              { isWalletConnected ? (
+                <>
+                  <Box mr={ 2 }>
+                    <AddressIdenticon size={ 20 } hash={ address }/>
+                  </Box>
+                  <HashStringShorten hash={ address } isTooltipDisabled/>
+                </>
+              ) : 'Connect wallet' }
+            </Button>
+          </PopoverTrigger>
+        </Box>
+      </Tooltip>
       { isWalletConnected && (
         <PopoverContent w="235px">
           <PopoverBody padding="24px 16px 16px 16px">