Skip to content

F
frontend
Commit cc972d23 authored by Max Alekseenko's avatar Max Alekseenko Committed by GitHub
Browse files
Options

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

Fix tooltip for `connect wallet` button
parents ea9e0cd5 b2d9814a
Hide whitespace changes
Inline Side-by-side
Showing with 4 additions and 1 deletion
ui/snippets/walletMenu/WalletTooltip.tsx
View file @ cc972d23
import { Tooltip, useBoolean } from '@chakra-ui/react'; import { Tooltip, useBoolean, useOutsideClick } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
type Props = { type Props = {
...@@ -9,6 +9,8 @@ type Props = { ...@@ -9,6 +9,8 @@ type Props = {
const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => { const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false); const [ isTooltipShown, setIsTooltipShown ] = useBoolean(false);
const ref = React.useRef(null);
useOutsideClick({ ref, handler: setIsTooltipShown.off });
React.useEffect(() => { React.useEffect(() => {
const key = `wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`; const key = `wallet-connect-tooltip-shown-${ isMobile ? 'mobile' : 'desktop' }`;
...@@ -29,6 +31,7 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => { ...@@ -29,6 +31,7 @@ const WalletTooltip = ({ children, isDisabled, isMobile }: Props) => {
isOpen={ isTooltipShown || (isMobile ? false : undefined) } isOpen={ isTooltipShown || (isMobile ? false : undefined) }
onClose={ setIsTooltipShown.off } onClose={ setIsTooltipShown.off }
display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } } display={ isMobile ? { base: 'flex', lg: 'none' } : { base: 'none', lg: 'flex' } }
ref={ ref }
> >
{ children } { children }
</Tooltip> </Tooltip>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment