Merge pull request #704 from blockscout/copy-tooltip-fix

copy to clipboard tooltip fix

ui/pages/Deposits.tsx

@@ -35,8 +35,8 @@ const Deposits = () => {
         <Skeleton
           w={{ base: '100%', lg: '320px' }}
           h="24px"
-          mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
-          mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
+          mb={{ base: 7, lg: isPaginationVisible ? 0 : 7 }}
+          mt={{ base: 1, lg: isPaginationVisible ? 0 : 7 }}
         />
       );
     }
@@ -46,7 +46,7 @@ const Deposits = () => {
     }
 
     return (
-      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight="32px">
+      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
         A total of { countersQuery.data.toLocaleString('en') } deposits found
       </Text>
     );

ui/pages/Withdrawals.tsx

@@ -46,7 +46,7 @@ const Withdrawals = () => {
     }
 
     return (
-      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight="32px">
+      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
         A total of { countersQuery.data.toLocaleString('en') } withdrawals found
       </Text>
     );

ui/shared/CopyToClipboard.tsx

@@ -4,10 +4,10 @@ import React, { useEffect, useState } from 'react';
 import CopyIcon from 'icons/copy.svg';
 
 const CopyToClipboard = ({ text, className }: {text: string; className?: string}) => {
-  const { hasCopied, onCopy } = useClipboard(text, 3000);
+  const { hasCopied, onCopy } = useClipboard(text, 1000);
   const [ copied, setCopied ] = useState(false);
   // have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
-  const { isOpen, onOpen, onToggle, onClose } = useDisclosure();
+  const { isOpen, onOpen, onClose } = useDisclosure();
 
   useEffect(() => {
     if (hasCopied) {
@@ -17,13 +17,8 @@ const CopyToClipboard = ({ text, className }: {text: string; className?: string}
     }
   }, [ hasCopied ]);
 
-  const handleClick = React.useCallback(() => {
-    onToggle();
-    onCopy();
-  }, [ onCopy, onToggle ]);
-
   return (
-    <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ isOpen }>
+    <Tooltip label={ copied ? 'Copied' : 'Copy to clipboard' } isOpen={ isOpen || copied }>
       <IconButton
         aria-label="copy"
         icon={ <CopyIcon/> }
@@ -32,7 +27,7 @@ const CopyToClipboard = ({ text, className }: {text: string; className?: string}
         variant="simple"
         display="inline-block"
         flexShrink={ 0 }
-        onClick={ handleClick }
+        onClick={ onCopy }
         className={ className }
         onMouseEnter={ onOpen }
         onMouseLeave={ onClose }