reuse CopyToClipboard component

ui/marketplace/MarketplaceAppCard.tsx

-import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, chakra, Flex, Tooltip, useClipboard, useDisclosure } from '@chakra-ui/react';
+import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, chakra, Flex } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback } from 'react';
 
 import type { MarketplaceAppWithSecurityReport, ContractListTypes, AppRating } from 'types/client/marketplace';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import isBrowser from 'lib/isBrowser';
-import IconSvg from 'ui/shared/IconSvg';
+import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 import AppSecurityReport from './AppSecurityReport';
 import FavoriteIcon from './FavoriteIcon';
@@ -58,20 +58,6 @@ const MarketplaceAppCard = ({
   const isMobile = useIsMobile();
   const categoriesLabel = categories.join(', ');
 
-  const linkToApp = isBrowser() ? window.location.origin + `/apps/${ id }` : '';
-  const { hasCopied, onCopy } = useClipboard(linkToApp, 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, onClose } = useDisclosure();
-
-  useEffect(() => {
-    if (hasCopied) {
-      setCopied(true);
-    } else {
-      setCopied(false);
-    }
-  }, [ hasCopied ]);
-
   const handleInfoClick = useCallback((event: MouseEvent) => {
     event.preventDefault();
     onInfoClick(id);
@@ -199,27 +185,25 @@ const MarketplaceAppCard = ({
                 aria-label="Mark as favorite"
                 title="Mark as favorite"
                 variant="ghost"
-                colorScheme="gray"
                 w={{ base: 6, md: '30px' }}
                 h={{ base: 6, md: '30px' }}
                 onClick={ handleFavoriteClick }
                 icon={ <FavoriteIcon isFavorite={ isFavorite }/> }
                 ml={ 2 }
               />
-              <Tooltip label={ copied ? 'Copied' : 'Copy link to clipboard' } isOpen={ isOpen || copied }>
-                <IconButton
-                  aria-label="Copy link"
-                  variant="ghost"
-                  colorScheme="gray"
-                  w={{ base: 6, md: '30px' }}
-                  h={{ base: 6, md: '30px' }}
-                  onClick={ onCopy }
-                  onMouseEnter={ onOpen }
-                  onMouseLeave={ onClose }
-                  icon={ <IconSvg name="share" boxSize={ 4 } color="gray.400"/> }
-                  ml={{ base: 1, md: 0 }}
-                />
-              </Tooltip>
+              <CopyToClipboard
+                text={ isBrowser() ? window.location.origin + `/apps/${ id }` : '' }
+                icon="share"
+                size={ 4 }
+                variant="ghost"
+                w={{ base: 6, md: '30px' }}
+                h={{ base: 6, md: '30px' }}
+                color="gray.400"
+                _hover={{ color: 'gray.400' }}
+                ml={{ base: 1, md: 0 }}
+                display="inline-flex"
+                borderRadius="base"
+              />
             </Flex>
           </Flex>
         ) }

ui/shared/CopyToClipboard.tsx

 import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton, useColorModeValue } from '@chakra-ui/react';
 import React, { useEffect, useState } from 'react';
 
+import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
 export interface Props {
@@ -10,14 +11,17 @@ export interface Props {
   onClick?: (event: React.MouseEvent) => void;
   size?: number;
   type?: 'link';
+  icon?: IconName;
+  variant?: 'simple';
 }
 
-const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type }: Props) => {
+const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type, icon, variant }: Props) => {
   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, onClose } = useDisclosure();
   const iconColor = useColorModeValue('gray.400', 'gray.500');
+  const iconName = icon || (type === 'link' ? 'link' : 'copy');
 
   useEffect(() => {
     if (hasCopied) {
@@ -40,10 +44,10 @@ const CopyToClipboard = ({ text, className, isLoading, onClick, size = 5, type }
     <Tooltip label={ copied ? 'Copied' : `Copy${ type === 'link' ? ' link ' : ' ' }to clipboard` } isOpen={ isOpen || copied }>
       <IconButton
         aria-label="copy"
-        icon={ <IconSvg name={ type === 'link' ? 'link' : 'copy' } boxSize={ size }/> }
+        icon={ <IconSvg name={ iconName } boxSize={ size }/> }
         boxSize={ size }
         color={ iconColor }
-        variant="simple"
+        variant={ variant }
         display="inline-block"
         flexShrink={ 0 }
         onClick={ handleClick }