copy to clipboard tooltip fix

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 }