Merge pull request #1805 from blockscout/fe-1784

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,25 +105,27 @@ const AddressEnsDomains = ({ addressHash, mainDomainName }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Button
-          size="sm"
-          variant="outline"
-          colorScheme="gray"
-          onClick={ onToggle }
-          aria-label="Address domains"
-          fontWeight={ 500 }
-          px={ 2 }
-          h="32px"
-          flexShrink={ 0 }
-        >
-          <IconSvg name="ENS_slim" boxSize={ 5 }/>
-          <Show above="xl">
-            <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
-          </Show>
-          <Hide above="xl">
-            <chakra.span ml={ 1 }>{ totalRecords }</chakra.span>
-          </Hide>
-        </Button>
+        <PopoverTriggerTooltip label="List of names resolved or owned by this address">
+          <Button
+            size="sm"
+            variant="outline"
+            colorScheme="gray"
+            onClick={ onToggle }
+            aria-label="Address domains"
+            fontWeight={ 500 }
+            px={ 2 }
+            h="32px"
+            flexShrink={ 0 }
+          >
+            <IconSvg name="ENS_slim" boxSize={ 5 }/>
+            <Show above="xl">
+              <chakra.span ml={ 1 }>{ totalRecords } Domain{ data.items.length > 1 ? 's' : '' }</chakra.span>
+            </Show>
+            <Hide above="xl">
+              <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,26 +56,27 @@ const NetworkExplorers = ({ className, type, pathParam }: Props) => {
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
-        <Button
-          className={ className }
-          size="sm"
-          variant="outline"
-          colorScheme="gray"
-          onClick={ onToggle }
-          aria-label="Verify in other explorers"
-          fontWeight={ 500 }
-          px={ 2 }
-          h="32px"
-          flexShrink={ 0 }
-        >
-          <IconSvg name="explorer" boxSize={ 5 }/>
-          <Show above="xl">
-            <chakra.span ml={ 1 }>{ explorersLinks.length } Explorer{ explorersLinks.length > 1 ? 's' : '' }</chakra.span>
-          </Show>
-          <Hide above="xl">
-            <chakra.span ml={ 1 }>{ explorersLinks.length }</chakra.span>
-          </Hide>
-        </Button>
+        <PopoverTriggerTooltip label="Verify with other explorers" className={ className }>
+          <Button
+            size="sm"
+            variant="outline"
+            colorScheme="gray"
+            onClick={ onToggle }
+            aria-label="Verify in other explorers"
+            fontWeight={ 500 }
+            px={ 2 }
+            h="32px"
+            flexShrink={ 0 }
+          >
+            <IconSvg name="explorer" boxSize={ 5 }/>
+            <Show above="xl">
+              <chakra.span ml={ 1 }>{ explorersLinks.length } Explorer{ explorersLinks.length > 1 ? 's' : '' }</chakra.span>
+            </Show>
+            <Hide above="xl">
+              <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>
   );
 };