fix tooltip

ui/snippets/walletMenu/WalletMenuDesktop.tsx

@@ -70,13 +70,13 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
       isOpen={ isPopoverOpen }
       onClose={ setIsPopoverOpen.off }
     >
+      <Box ml={ 2 }>
+        <PopoverTrigger>
           <WalletTooltip
             isDisabled={ isMobile === undefined || isMobile }
             isWalletConnected={ isWalletConnected }
             isAutoConnectDisabled={ isAutoConnectDisabled }
           >
-        <Box ml={ 2 }>
-          <PopoverTrigger>
             <Button
               className={ className }
               variant={ variant }
@@ -96,9 +96,9 @@ const WalletMenuDesktop = ({ isHomePage, className, size = 'md' }: Props) => {
                 </>
               ) : 'Connect wallet' }
             </Button>
+          </WalletTooltip>
         </PopoverTrigger>
       </Box>
-      </WalletTooltip>
       { isWalletConnected && (
         <PopoverContent w="235px">
           <PopoverBody padding="24px 16px 16px 16px">

ui/snippets/walletMenu/WalletTooltip.tsx

-import { Tooltip, useBoolean, useOutsideClick } from '@chakra-ui/react';
+import { Tooltip, useBoolean, useOutsideClick, Box } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -15,11 +15,11 @@ type Props = {
 
 const LOCAL_STORAGE_KEY = 'wallet-connect-tooltip-shown';
 
-const WalletTooltip = ({ children, isDisabled, isMobile, isWalletConnected, isAutoConnectDisabled }: Props) => {
+const WalletTooltip = ({ children, isDisabled, isMobile, isWalletConnected, isAutoConnectDisabled }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
   const router = useRouter();
   const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
-  const ref = React.useRef(null);
-  useOutsideClick({ ref, handler: setIsTooltipShown.off });
+  const innerRef = React.useRef(null);
+  useOutsideClick({ ref: innerRef, handler: setIsTooltipShown.off });
 
   const label = React.useMemo(() => {
     if (isWalletConnected) {
@@ -62,6 +62,7 @@ const WalletTooltip = ({ children, isDisabled, isMobile, isWalletConnected, isAu
   }, [ setIsTooltipShown, isDisabled, router, isAppPage ]);
 
   return (
+    <Box ref={ ref }>
       <Tooltip
         label={ label }
         textAlign="center"
@@ -71,11 +72,12 @@ const WalletTooltip = ({ children, isDisabled, isMobile, isWalletConnected, isAu
         isOpen={ isTooltipShown || (isMobile ? false : undefined) }
         onClose={ setIsTooltipShown.off }
         display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
-      ref={ ref }
+        ref={ innerRef }
       >
         { children }
       </Tooltip>
+    </Box>
   );
 };
 
-export default WalletTooltip;
+export default React.forwardRef(WalletTooltip);