Add tips to score, explorers, domains

ui/address/ensDomains/AddressEnsDomains.tsx

-import { Box, Button, chakra, Flex, Grid, Hide, Popover, PopoverBody, PopoverContent, PopoverTrigger, Show, Skeleton, useDisclosure } from '@chakra-ui/react';
+import {
+  Box,
+  Button,
+  Flex,
+  Grid,
+  Hide,
+  Popover,
+  PopoverBody,
+  PopoverContent,
+  PopoverTrigger,
+  Show,
+  Skeleton,
+  useDisclosure,
+  chakra,
+} from '@chakra-ui/react';
 import _clamp from 'lodash/clamp';
 import React from 'react';
 
@@ -12,6 +26,7 @@ import dayjs from 'lib/date/dayjs';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/LinkInternal';
+import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
 
 interface Props {
   addressHash: string;
@@ -90,6 +105,7 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
+        <PopoverTriggerTooltip label="List of names resolved or owned by this address">
           <Button
             size="sm"
             variant="outline"
@@ -109,6 +125,7 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
               <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
             </Hide>
           </Button>
+        </PopoverTriggerTooltip>
       </PopoverTrigger>
       <PopoverContent w={{ base: '100vw', lg: '500px' }}>
         <PopoverBody px={ 6 } py={ 5 } fontSize="sm" display="flex" flexDir="column" rowGap={ 5 } alignItems="flex-start">

ui/shared/NetworkExplorers.tsx

@@ -20,6 +20,7 @@ import config from 'configs/app';
 import stripTrailingSlash from 'lib/stripTrailingSlash';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkExternal from 'ui/shared/LinkExternal';
+import PopoverTriggerTooltip from 'ui/shared/PopoverTriggerTooltip';
 
 interface Props {
   className?: string;
@@ -55,8 +56,8 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
+        <PopoverTriggerTooltip label="Verify with other explorers" className={ className }>
           <Button
-          className={ className }
             size="sm"
             variant="outline"
             colorScheme="gray"
@@ -75,6 +76,7 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
               <chakra.span ml={ 1 }>{ explorersLinks.length }</chakra.span>
             </Hide>
           </Button>
+        </PopoverTriggerTooltip>
       </PopoverTrigger>
       <PopoverContent w="auto">
         <PopoverBody >

ui/shared/PopoverTriggerTooltip.tsx

+import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+
+type Props = {
+  label: string;
+  isLoading?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+const PopoverTriggerTooltip = ({ label, isLoading, className, children }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
+  const isMobile = useIsMobile();
+  return (
+    // tooltip need to be wrapped in div for proper popover positioning
+    <Skeleton isLoaded={ !isLoading } borderRadius="base" ref={ ref } className={ className }>
+      <Tooltip
+        label={ label }
+        isDisabled={ isMobile }
+        // need a delay to avoid flickering when closing the popover
+        openDelay={ 100 }
+      >
+        { children }
+      </Tooltip>
+    </Skeleton>
+  );
+};
+
+export default chakra(React.forwardRef(PopoverTriggerTooltip));

ui/shared/solidityscanReport/SolidityscanReportButton.tsx

-import { Button, Skeleton } from '@chakra-ui/react';
+import { Button } from '@chakra-ui/react';
 import React from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
 
+import PopoverTriggerTooltip from '../PopoverTriggerTooltip';
 import useScoreLevelAndColor from './useScoreLevelAndColor';
 
 interface Props {
@@ -21,10 +22,9 @@ const SolidityscanReportButton = (
   const { scoreColor } = useScoreLevelAndColor(score);
 
   return (
-    <Skeleton isLoaded={ !isLoading } borderRadius="base">
+    <PopoverTriggerTooltip label="Security score" isLoading={ isLoading } className={ className }>
       <Button
         ref={ ref }
-        className={ className }
         color={ scoreColor }
         size="sm"
         variant="outline"
@@ -39,7 +39,7 @@ const SolidityscanReportButton = (
         <IconSvg name={ score < 80 ? 'score/score-not-ok' : 'score/score-ok' } boxSize={ 5 } mr={ onlyIcon ? 0 : 1 }/>
         { onlyIcon ? null : score }
       </Button>
-    </Skeleton>
+    </PopoverTriggerTooltip>
   );
 };