fix button with tooltip and popover

toolkit/chakra/tooltip.tsx

@@ -16,7 +16,6 @@ export interface TooltipProps extends ChakraTooltip.RootProps {
   disableOnMobile?: boolean;
 }
 
-// TODO @tom2drum fix flashing svg icons when use tooltip (disabled) + popover
 export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
   function Tooltip(props, ref) {
     const {
@@ -72,7 +71,7 @@ export const Tooltip = React.forwardRef<HTMLDivElement, TooltipProps>(
         open={ open }
         onOpenChange={ isMobile ? undefined : handleOpenChange }
         closeOnClick={ false }
-        closeOnPointerDown={ false }
+        closeOnPointerDown={ true }
         variant={ variant }
         lazyMount={ lazyMount }
         unmountOnExit={ unmountOnExit }

ui/address/SolidityscanReport.tsx

@@ -7,8 +7,7 @@ import React from 'react';
 import solidityScanIcon from 'icons/brands/solidity_scan.svg';
 import useFetchReport from 'lib/solidityScan/useFetchReport';
 import { Link } from 'toolkit/chakra/link';
-import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
-import { useDisclosure } from 'toolkit/hooks/useDisclosure';
+import { PopoverBody, PopoverContent, PopoverRoot } from 'toolkit/chakra/popover';
 import SolidityscanReportButton from 'ui/shared/solidityscanReport/SolidityscanReportButton';
 import SolidityscanReportDetails from 'ui/shared/solidityscanReport/SolidityscanReportDetails';
 import SolidityscanReportScore from 'ui/shared/solidityscanReport/SolidityscanReportScore';
@@ -18,7 +17,6 @@ interface Props {
 }
 
 const SolidityscanReport = ({ hash }: Props) => {
-  const { open, onOpenChange } = useDisclosure();
 
   const { data, isPlaceholderData, isError } = useFetchReport({ hash });
 
@@ -37,16 +35,11 @@ const SolidityscanReport = ({ hash }: Props) => {
   const vulnerabilitiesCount = vulnerabilitiesCounts.reduce((acc, val) => acc + val, 0);
 
   return (
-    <PopoverRoot onOpenChange={ onOpenChange } open={ open }>
-      <PopoverTrigger>
-        <Box>
-          <SolidityscanReportButton
-            score={ score }
-            isLoading={ isPlaceholderData }
-            isActive={ open }
-          />
-        </Box>
-      </PopoverTrigger>
+    <PopoverRoot>
+      <SolidityscanReportButton
+        score={ score }
+        isLoading={ isPlaceholderData }
+      />
       <PopoverContent w={{ base: '100vw', lg: '328px' }}>
         <PopoverBody textStyle="sm">
           <Box mb={ 5 } lineHeight="25px">

ui/address/ensDomains/AddressEnsDomains.tsx

@@ -37,8 +37,6 @@ const DomainsGrid = ({ data }: { data: Array<bens.Domain> }) => {
 };
 
 const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
-  // const { isOpen, onToggle, onClose } = useDisclosure();
-
   const { data, isPending, isError } = query;
 
   if (isError) {
@@ -85,9 +83,9 @@ const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
 
   return (
     <PopoverRoot>
-      <PopoverTrigger>
-        <Box>
-          <Tooltip content="List of names resolved or owned by this address">
+      <Tooltip content="List of names resolved or owned by this address">
+        <div>
+          <PopoverTrigger>
             <Button
               size="sm"
               variant="dropdown"
@@ -100,9 +98,9 @@ const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => {
               <chakra.span hideBelow="xl">{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
               <chakra.span hideFrom="xl">{ totalRecords }</chakra.span>
             </Button>
-          </Tooltip>
-        </Box>
-      </PopoverTrigger>
+          </PopoverTrigger>
+        </div>
+      </Tooltip>
       <PopoverContent w={{ lg: '500px' }}>
         <PopoverBody textStyle="sm" display="flex" flexDir="column" rowGap={ 5 } alignItems="flex-start">
           { mainDomain && (

ui/shared/CopyToClipboard.tsx

@@ -53,6 +53,7 @@ const CopyToClipboard = (props: Props) => {
       contentProps={{ zIndex: 'tooltip2' }}
       open={ disclosure.open }
       onOpenChange={ disclosure.onOpenChange }
+      closeOnPointerDown={ false }
     >
       <IconButton
         aria-label="copy"

ui/shared/VerifyWith.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import { Button } from 'toolkit/chakra/button';
 import { PopoverBody, PopoverContent, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
 import { Tooltip } from 'toolkit/chakra/tooltip';
-import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -17,17 +16,14 @@ interface Props {
 
 const VerifyWith = ({ className, links, label, longText, shortText }: Props) => {
 
-  const { open, onOpenChange } = useDisclosure();
-
   return (
-    <PopoverRoot positioning={{ placement: 'bottom-start' }} open={ open } onOpenChange={ onOpenChange }>
-      <PopoverTrigger>
+    <PopoverRoot>
+      <Tooltip content={ label } disableOnMobile>
         <Box className={ className }>
-          <Tooltip content={ label } disableOnMobile disabled={ open }>
+          <PopoverTrigger>
             <Button
               size="sm"
               variant="dropdown"
-              expanded={ open }
               aria-label={ label }
               fontWeight={ 500 }
               px={ shortText ? 2 : 1 }
@@ -38,9 +34,9 @@ const VerifyWith = ({ className, links, label, longText, shortText }: Props) =>
               <chakra.span hideBelow="xl">{ longText }</chakra.span>
               { shortText && <chakra.span hideFrom="xl">{ shortText }</chakra.span> }
             </Button>
-          </Tooltip>
+          </PopoverTrigger>
         </Box>
-      </PopoverTrigger>
+      </Tooltip>
       <PopoverContent w="auto">
         <PopoverBody >
           <chakra.span color="text.secondary" textStyle="xs">{ label }</chakra.span>

ui/shared/solidityscanReport/SolidityscanReportButton.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
 import type { ButtonProps } from 'toolkit/chakra/button';
 import { Button } from 'toolkit/chakra/button';
+import { PopoverTrigger } from 'toolkit/chakra/popover';
 import { Tooltip } from 'toolkit/chakra/tooltip';
 import IconSvg from 'ui/shared/IconSvg';
 
@@ -13,44 +14,45 @@ interface Props extends ButtonProps {
   score: number;
   isLoading?: boolean;
   onlyIcon?: boolean;
-  isActive?: boolean;
   label?: string | React.ReactElement;
 }
 
 const SolidityscanReportButton = (
-  { score, isLoading, onlyIcon, isActive, label = 'Security score', ...rest }: Props,
+  { score, isLoading, onlyIcon, label = 'Security score', ...rest }: Props,
 ) => {
   const { scoreColor } = useScoreLevelAndColor(score);
   const colorLoading = { _light: 'gray.300', _dark: 'gray.600' };
   const onFocusCapture = usePreventFocusAfterModalClosing();
 
   return (
-    <Tooltip content={ label } disableOnMobile disabled={ isActive }>
-      <Button
-        color={ isLoading ? colorLoading : scoreColor }
-        size="sm"
-        variant="dropdown"
-        expanded={ isActive }
-        aria-label="SolidityScan score"
-        fontWeight={ 500 }
-        px="6px"
-        flexShrink={ 0 }
-        columnGap={ 1 }
-        disabled={ isLoading }
-        _expanded={{ color: 'link.primary.hover' }}
-        _disabled={{
-          opacity: 1,
-          _hover: {
-            color: colorLoading,
-          },
-        }}
-        onFocusCapture={ onFocusCapture }
-        { ...rest }
-      >
-        <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 }/>
-        { isLoading && <Spinner size="sm"/> }
-        { !isLoading && (onlyIcon ? null : score) }
-      </Button>
+    <Tooltip content={ label } disableOnMobile>
+      <div>
+        <PopoverTrigger>
+          <Button
+            color={ isLoading ? colorLoading : scoreColor }
+            size="sm"
+            variant="dropdown"
+            aria-label="SolidityScan score"
+            fontWeight={ 500 }
+            px="6px"
+            flexShrink={ 0 }
+            columnGap={ 1 }
+            disabled={ isLoading }
+            _hover={{ color: 'link.primary.hover' }}
+            _expanded={{ color: 'link.primary.hover' }}
+            _disabled={{
+              opacity: 1,
+              _hover: { color: colorLoading },
+            }}
+            onFocusCapture={ onFocusCapture }
+            { ...rest }
+          >
+            <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 }/>
+            { isLoading && <Spinner size="sm"/> }
+            { !isLoading && (onlyIcon ? null : score) }
+          </Button>
+        </PopoverTrigger>
+      </div>
     </Tooltip>
   );
 };

ui/showcases/Button.tsx

@@ -2,9 +2,12 @@ import React from 'react';
 
 import { Button } from 'toolkit/chakra/button';
 import { Checkbox } from 'toolkit/chakra/checkbox';
+import { IconButton } from 'toolkit/chakra/icon-button';
 import { Link } from 'toolkit/chakra/link';
 import { PopoverContent, PopoverRoot, PopoverTrigger, PopoverBody } from 'toolkit/chakra/popover';
+import { Tooltip } from 'toolkit/chakra/tooltip';
 import { BACKGROUND_DEFAULT } from 'ui/home/HeroBanner';
+import IconSvg from 'ui/shared/IconSvg';
 
 import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
 
@@ -95,6 +98,24 @@ const ButtonShowcase = () => {
               </PopoverContent>
             </PopoverRoot>
             <Button variant="dropdown" disabled>Disabled</Button>
+
+            <PopoverRoot>
+              <Tooltip content="Tooltip content">
+                <div>
+                  <PopoverTrigger>
+                    <IconButton variant="dropdown" size="md" px={ 2 }>
+                      <IconSvg name="explorer" boxSize={ 5 }/>
+                      With tooltip
+                    </IconButton>
+                  </PopoverTrigger>
+                </div>
+              </Tooltip>
+              <PopoverContent>
+                <PopoverBody>
+                  Popover content
+                </PopoverBody>
+              </PopoverContent>
+            </PopoverRoot>
           </Sample>
 
           <Sample label="variant: header">