Merge pull request #1438 from blockscout/fix-wallet-tooltip

Fix tooltip for `connect wallet` button
blockscout · Dec 25, 2023 · cc972d2 · cc972d2
2 parents ea9e0cd + b2d9814
commit cc972d2
Showing 1 changed file with 4 additions and 1 deletion.
diff --git a/ui/snippets/walletMenu/WalletTooltip.tsx b/ui/snippets/walletMenu/WalletTooltip.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, useBoolean } from '@chakra-ui/react';
+import { Tooltip, useBoolean, useOutsideClick } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
@@ -9,6 +9,8 @@ type Props = {
 
 const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
   const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
+  const ref = React.useRef(null);
+  useOutsideClick({ ref, handler: setIsTooltipShown.off });
 
   React.useEffect(() => {
     const key = `wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
@@ -29,6 +31,7 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
       isOpen={ isTooltipShown || (isMobile ? false : undefined) }
       onClose={ setIsTooltipShown.off }
       display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
+      ref={ ref }
     >
       { children }
     </Tooltip>