refactoring

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -2,6 +2,7 @@ import type { ButtonProps } from '@chakra-ui/react';
 import { Popover, PopoverContent, PopoverBody, PopoverTrigger, Button, Box, useBoolean } from '@chakra-ui/react';
 import React from 'react';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
@@ -18,6 +19,7 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
   const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
   const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
   const [ isPopoverOpen, setIsPopoverOpen ] = useBoolean(false);
+  const isMobile = useIsMobile();
 
   const variant = React.useMemo(() => {
     if (isWalletConnected) {
@@ -55,7 +57,7 @@ const WalletMenuDesktop = ({ isHomePage }: Props) => {
       isOpen={ isPopoverOpen }
       onClose={ setIsPopoverOpen.off }
     >
-      <WalletTooltip isDisabled={ isWalletConnected }>
+      <WalletTooltip isDisabled={ isWalletConnected || isMobile === undefined || isMobile }>
         <Box ml={ 2 }>
           <PopoverTrigger>
             <Button

ui/snippets/walletMenu/WalletMenuMobile.tsx

@@ -2,6 +2,7 @@ import { Drawer, DrawerOverlay, DrawerContent, DrawerBody, useDisclosure, IconBu
 import React from 'react';
 
 import walletIcon from 'icons/wallet.svg';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressIdenticon from 'ui/shared/entities/address/AddressIdenticon';
 import useWallet from 'ui/snippets/walletMenu/useWallet';
 import WalletMenuContent from 'ui/snippets/walletMenu/WalletMenuContent';
@@ -13,10 +14,11 @@ const WalletMenuMobile = () => {
   const { isOpen, onOpen, onClose } = useDisclosure();
   const { isWalletConnected, address, connect, disconnect, isModalOpening, isModalOpen } = useWallet();
   const { themedBackground, themedBorderColor, themedColor } = useMenuButtonColors();
+  const isMobile = useIsMobile();
 
   return (
     <>
-      <WalletTooltip isDisabled={ isWalletConnected } isMobile>
+      <WalletTooltip isDisabled={ isWalletConnected || isMobile === undefined || !isMobile } isMobile>
         <IconButton
           aria-label="wallet menu"
           icon={ isWalletConnected ?

ui/snippets/walletMenu/WalletTooltip.tsx

@@ -18,18 +18,18 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
     const label = isAppPage ?
       <span>Connect once to use your wallet with<br/>all apps in the DAppscout marketplace!</span> :
       defaultLabel;
-    const localStorageKey = `${ isAppPage ? 'dapp-' : '' }wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
+    const localStorageKey = `${ isAppPage ? 'dapp-' : '' }wallet-connect-tooltip-shown`;
     return { defaultLabel, label, localStorageKey };
-  }, [ router.pathname, isMobile ]);
+  }, [ router.pathname ]);
 
   React.useEffect(() => {
     const wasShown = window.localStorage.getItem(localStorageKey);
-    if (!wasShown) {
+    if (!isDisabled && !wasShown) {
       setIsTooltipShown.on();
       window.localStorage.setItem(localStorageKey, 'true');
       setTimeout(() => setIsTooltipShown.off(), 3000);
     }
-  }, [ setIsTooltipShown, localStorageKey ]);
+  }, [ setIsTooltipShown, localStorageKey, isDisabled ]);
 
   return (
     <Tooltip
@@ -40,7 +40,6 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
       openDelay={ 300 }
       isOpen={ isTooltipShown || (isMobile ? false : undefined) }
       onClose={ setIsTooltipShown.off }
-      display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
     >
       { children }
     </Tooltip>