Merge pull request #1450 from blockscout/new-tooltip-for-connect-wall…

…et-button Add new text for `connect wallet` button tooltip
blockscout · Dec 26, 2023 · 3504d59 · 3504d59
2 parents af9693d + 4bc4e40
commit 3504d59
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 8 deletions.
diff --git a/ui/snippets/walletMenu/WalletMenuDesktop.tsx b/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

diff --git a/ui/snippets/walletMenu/WalletMenuMobile.tsx b/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 ?

diff --git a/ui/snippets/walletMenu/WalletTooltip.tsx b/ui/snippets/walletMenu/WalletTooltip.tsx
@@ -1,4 +1,5 @@
 import { Tooltip, useBoolean, useOutsideClick } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 type Props = {
@@ -8,22 +9,33 @@ type Props = {
 };
 
 const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
+  const router = useRouter();
   const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
   const ref = React.useRef(null);
   useOutsideClick({ ref, handler: setIsTooltipShown.off });
 
+  const { defaultLabel, label, localStorageKey } = React.useMemo(() => {
+    const isAppPage = router.pathname === '/apps/[id]';
+    const defaultLabel = <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span>;
+    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`;
+    return { defaultLabel, label, localStorageKey };
+  }, [ router.pathname ]);
+
   React.useEffect(() => {
-    const key = `wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
-    const wasShown = window.localStorage.getItem(key);
-    if (!wasShown) {
+    const wasShown = window.localStorage.getItem(localStorageKey);
+    if (!isDisabled && !wasShown) {
       setIsTooltipShown.on();
-      window.localStorage.setItem(key, 'true');
+      window.localStorage.setItem(localStorageKey, 'true');
+      setTimeout(() => setIsTooltipShown.off(), 3000);
     }
-  }, [ setIsTooltipShown, isMobile ]);
+  }, [ setIsTooltipShown, localStorageKey, isDisabled ]);
 
   return (
     <Tooltip
-      label={ <span>Your wallet is used to interact with<br/>apps and contracts in the explorer</span> }
+      label={ isTooltipShown ? label : defaultLabel }
       textAlign="center"
       padding={ 2 }
       isDisabled={ isDisabled }