fix tooltip

ui/snippets/walletMenu/WalletMenuDesktop.tsx

 import type { ButtonProps } from '@chakra-ui/react';
-import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean, Tooltip } from '@chakra-ui/react';
+import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean } from '@chakra-ui/react';
 import React from 'react';
 
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
@@ -8,6 +8,7 @@ import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
 
 import useMenuButtonColors from '../useMenuButtonColors';
+import WalletTooltip from './WalletTooltip';
 
 type Props = {
   isHomePage?: boolean;
@@ -17,15 +18,6 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
   const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
   const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   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) {
@@ -63,16 +55,7 @@ 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 }
-        display={{ base: 'none', lg: 'flex' }}
-      >
+      <WalletTooltip isDisabled={ isWalletConnected }>
         <Box ml={ 2 }>
           <PopoverTrigger>
             <Button
@@ -96,7 +79,7 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
             </Button>
           </PopoverTrigger>
         </Box>
-      </Tooltip>
+      </WalletTooltip>
       { isWalletConnected && (
         <PopoverContent w="235px">
           <PopoverBody padding="24px 16px 16px 16px">

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -7,6 +7,7 @@ import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
 
 import useMenuButtonColors from '../useMenuButtonColors';
+import WalletTooltip from './WalletTooltip';
 
 const WalletMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
@@ -15,22 +16,24 @@ const WalletMenuMobile = () => {
 
   return (
     <>
-      <IconButton
-        aria-label="wallet menu"
-        icon={ isWalletConnected ?
-          <AddressIdenticon size={ 20 } hash={ address }/> :
-          <Icon as={ walletIcon } boxSize={ 6 }/>
-        }
-        variant={ isWalletConnected ? 'subtle' : 'outline' }
-        colorScheme="gray"
-        boxSize="40px"
-        flexShrink={ 0 }
-        bg={ isWalletConnected ? themedBackground : undefined }
-        color={ themedColor }
-        borderColor={ !isWalletConnected ? themedBorderColor : undefined }
-        onClick={ isWalletConnected ? onOpen : connect }
-        isLoading={ isModalOpening || isModalOpen }
-      />
+      <WalletTooltip isDisabled={ isWalletConnected } isMobile>
+        <IconButton
+          aria-label="wallet menu"
+          icon={ isWalletConnected ?
+            <AddressIdenticon size={ 20 } hash={ address }/> :
+            <Icon as={ walletIcon } boxSize={ 6 }/>
+          }
+          variant={ isWalletConnected ? 'subtle' : 'outline' }
+          colorScheme="gray"
+          boxSize="40px"
+          flexShrink={ 0 }
+          bg={ isWalletConnected ? themedBackground : undefined }
+          color={ themedColor }
+          borderColor={ !isWalletConnected ? themedBorderColor : undefined }
+          onClick={ isWalletConnected ? onOpen : connect }
+          isLoading={ isModalOpening || isModalOpen }
+        />
+      </WalletTooltip>
       { isWalletConnected && (
         <Drawer
           isOpen={ isOpen }

ui/snippets/walletMenu/WalletTooltip.tsx

+import { Tooltip, useBoolean } from '@chakra-ui/react';
+import React from 'react';
+
+type Props = {
+  children: React.ReactNode;
+  isDisabled?: boolean;
+  isMobile?: boolean;
+};
+
+const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
+  const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
+
+  React.useEffect(() => {
+    const key = `wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
+    const wasShown = window.localStorage.getItem(key);
+    if (!wasShown) {
+      setIsTooltipShown.on();
+      window.localStorage.setItem(key, 'true');
+    }
+  }, [ setIsTooltipShown, isMobile ]);
+
+  return (
+    <Tooltip
+      label={ <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span> }
+      textAlign="center"
+      padding={ 2 }
+      isDisabled={ isDisabled }
+      openDelay={ 300 }
+      isOpen={ isTooltipShown || (isMobile ? false : undefined) }
+      onClose={ setIsTooltipShown.off }
+      display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
+    >
+      { children }
+    </Tooltip>
+  );
+};
+
+export default WalletTooltip;