add copy link button

icons/share.svg

+<svg viewBox="0 0 15 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.502 11.242a2.491 2.491 0 0 0-1.802.77L4.919 8.758c.112-.42.112-.863 0-1.284L10.7 4.222a2.492 2.492 0 1 0-.614-1.088L4.303 6.386a2.5 2.5 0 1 0 0 3.461l5.781 3.253a2.5 2.5 0 1 0 2.417-1.858Z" fill="currentColor"/>
+</svg>

public/icons/name.d.ts

@@ -116,6 +116,7 @@
 	| "score/score-not-ok"
 	| "score/score-ok"
 	| "search"
+	| "share"
 	| "social/canny"
 	| "social/coingecko"
 	| "social/coinmarketcap"

ui/marketplace/MarketplaceAppCard.tsx

-import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, chakra, Flex } from '@chakra-ui/react';
+import { IconButton, Image, Link, LinkBox, Skeleton, useColorModeValue, chakra, Flex, Tooltip, useClipboard, useDisclosure } from '@chakra-ui/react';
 import type { MouseEvent } from 'react';
-import React, { useCallback } from 'react';
+import React, { useCallback, useState, useEffect } 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 AppSecurityReport from './AppSecurityReport';
 import FavoriteIcon from './FavoriteIcon';
@@ -56,6 +58,20 @@ 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);
@@ -168,7 +184,7 @@ const MarketplaceAppCard = ({
             >
               More info
             </Link>
-            <Flex alignItems="center" gap={ 3 }>
+            <Flex alignItems="center">
               <Rating
                 appId={ id }
                 rating={ rating }
@@ -188,7 +204,22 @@ const MarketplaceAppCard = ({
                 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>
             </Flex>
           </Flex>
         ) }

ui/marketplace/MarketplaceList.tsx

@@ -45,10 +45,7 @@ const MarketplaceList = ({
   return apps.length > 0 ? (
     <>
       <Grid
-        templateColumns={{
-          md: 'repeat(auto-fill, minmax(230px, 1fr))',
-          lg: 'repeat(auto-fill, minmax(260px, 1fr))',
-        }}
+        templateColumns={{ md: 'repeat(auto-fill, minmax(270px, 1fr))' }}
         autoRows="1fr"
         gap={{ base: '16px', md: '24px' }}
         marginTop={{ base: 0, lg: 3 }}