Add rating count

deploy/values/review/values.yaml.gotmpl

@@ -88,3 +88,4 @@ frontend:
     FAVICON_GENERATOR_API_KEY: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_FAVICON_GENERATOR_API_KEY
     NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY: ref+vault://deployment-values/blockscout/dev/review?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_GROWTH_BOOK_CLIENT_KEY
     NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN: ref+vault://deployment-values/blockscout/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN
+    NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY: ref+vault://deployment-values/blockscout/dev/common?token_env=VAULT_TOKEN&address=https://vault.k8s.blockscout.com#/NEXT_PUBLIC_MARKETPLACE_RATING_AIRTABLE_API_KEY

mocks/apps/ratings.ts

@@ -6,6 +6,7 @@ export const ratings = {
       fields: {
         appId: apps[0].id,
         rating: 4.3,
+        count: 15,
       },
     },
   ],

public/icons/name.d.ts

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

types/client/marketplace.ts

@@ -29,6 +29,7 @@ export type MarketplaceAppOverview = MarketplaceAppPreview & MarketplaceAppSocia
 export type AppRating = {
   recordId: string;
   value: number | undefined;
+  count?: number;
 }
 
 export type MarketplaceAppWithSecurityReport = MarketplaceAppOverview & {

ui/marketplace/MarketplaceAppCard.tsx

@@ -1,10 +1,12 @@
-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 }}

ui/marketplace/Rating/Rating.tsx

@@ -51,13 +51,15 @@ const Rating = ({
         <>
           <Stars filledIndex={ (rating?.value || 0) - 1 }/>
           <Text fontSize="md" ml={ 2 }>{ rating?.value }</Text>
+          { rating?.count && <Text variant="secondary" fontSize="md" ml={ 1 }>({ rating?.count })</Text> }
         </>
       ) }
       <Box ref={ popoverRef }>
         <Popover isOpen={ isOpen } placement="bottom" isLazy>
           <PopoverTrigger>
             <TriggerButton
               rating={ rating?.value }
+              count={ rating?.count }
               fullView={ fullView }
               isActive={ isOpen }
               onClick={ onToggle }

ui/marketplace/Rating/TriggerButton.tsx

@@ -1,4 +1,4 @@
-import { Button, chakra, useColorModeValue, Tooltip, useDisclosure } from '@chakra-ui/react';
+import { Button, chakra, useColorModeValue, Tooltip, useDisclosure, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -7,6 +7,7 @@ import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
   rating?: number;
+  count?: number;
   fullView?: boolean;
   isActive: boolean;
   onClick: () => void;
@@ -24,7 +25,7 @@ const getTooltipText = (canRate: boolean | undefined) => {
 };
 
 const TriggerButton = (
-  { rating, fullView, isActive, onClick, canRate }: Props,
+  { rating, count, fullView, isActive, onClick, canRate }: Props,
   ref: React.ForwardedRef<HTMLButtonElement>,
 ) => {
   const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
@@ -75,8 +76,9 @@ const TriggerButton = (
           />
         ) }
         { (rating && !fullView) ? (
-          <chakra.span color={ textColor } transition="inherit">
+          <chakra.span color={ textColor } transition="inherit" display="inline-flex">
             { rating }
+            <Text variant="secondary" ml={ 1 }>({ count })</Text>
           </chakra.span>
         ) : (
           'Rate it!'

ui/marketplace/Rating/useRatings.tsx

@@ -28,11 +28,12 @@ export type RateFunction = (
 
 function formatRatings(data: Airtable.Records<Airtable.FieldSet>) {
   return data.reduce((acc: Record<string, AppRating>, record) => {
-    const fields = record.fields as { appId: string | Array<string>; rating: number | undefined };
+    const fields = record.fields as { appId: string | Array<string>; rating: number | undefined; count?: number };
     const appId = Array.isArray(fields.appId) ? fields.appId[0] : fields.appId;
     acc[appId] = {
       recordId: record.id,
       value: fields.rating,
+      count: fields.count,
     };
     return acc;
   }, {});
@@ -63,7 +64,7 @@ export default function useRatings() {
       return;
     }
     try {
-      const data = await airtable('apps_ratings').select({ fields: [ 'appId', 'rating' ] }).all();
+      const data = await airtable('apps_ratings').select({ fields: [ 'appId', 'rating', 'count' ] }).all();
       const ratings = formatRatings(data);
       setRatings(ratings);
     } catch (error) {

ui/pages/Marketplace.pw.tsx

@@ -22,7 +22,7 @@ test.beforeEach(async({ mockConfigResponse, mockEnvs, mockAssetResponse, page })
   await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', MARKETPLACE_CONFIG_URL, JSON.stringify(appsMock));
   await mockConfigResponse('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL', MARKETPLACE_SECURITY_REPORTS_URL, JSON.stringify(securityReportsMock));
   await Promise.all(appsMock.map(app => mockAssetResponse(app.logo, './playwright/mocks/image_s.jpg')));
-  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating', (route) => route.fulfill({
+  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(ratingsMock),
   }));

ui/pages/MarketplaceApp.pw.tsx

@@ -35,7 +35,7 @@ const testFn: Parameters<typeof test>[1] = async({ render, mockConfigResponse, m
     Method: 'eth_chainId',
     ReturnType: numberToHex(Number(config.chain.id)),
   });
-  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating', (route) => route.fulfill({
+  await page.route('https://api.airtable.com/v0/test/apps_ratings?fields%5B%5D=appId&fields%5B%5D=rating&fields%5B%5D=count', (route) => route.fulfill({
     status: 200,
     body: JSON.stringify(ratingsMock),
   }));