add tooltip

ui/marketplace/MarketplaceAppCard.tsx

@@ -177,6 +177,7 @@ const MarketplaceAppCard = ({
                 rate={ rateApp }
                 isSending={ isSendingRating }
                 isLoading={ isRatingLoading }
+                canRate={ Math.random() > 0.5 }
               />
               <IconButton
                 aria-label="Mark as favorite"

ui/marketplace/MarketplaceAppModal.tsx

@@ -172,6 +172,7 @@ const MarketplaceAppModal = ({
               isSending={ isSendingRating }
               isLoading={ isRatingLoading }
               fullView
+              canRate={ Math.random() > 0.5 }
             />
           </Box>
 

ui/marketplace/Rating/Rating.tsx

@@ -14,9 +14,13 @@ type Props = {
   isSending?: boolean;
   isLoading?: boolean;
   fullView?: boolean;
+  canRate: boolean;
 };
 
-const Rating = ({ appId, rating, recordId, isRatedByUser, rate, isSending, isLoading, fullView }: Props) => {
+const Rating = ({
+  appId, rating, recordId, isRatedByUser, rate,
+  isSending, isLoading, fullView, canRate,
+}: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
 
   return (
@@ -34,6 +38,7 @@ const Rating = ({ appId, rating, recordId, isRatedByUser, rate, isSending, isLoa
             fullView={ fullView }
             isActive={ isOpen }
             onClick={ onToggle }
+            canRate={ canRate }
           />
         </PopoverTrigger>
         <PopoverContent w="274px">

ui/marketplace/Rating/TriggerButton.tsx

-import { Button, chakra, useColorModeValue } from '@chakra-ui/react';
+import { Button, chakra, useColorModeValue, Tooltip } from '@chakra-ui/react';
 import React from 'react';
+import { useAccount } from 'wagmi';
 
+import usePreventFocusAfterModalClosing from 'lib/hooks/usePreventFocusAfterModalClosing';
 import IconSvg from 'ui/shared/IconSvg';
 
 type Props = {
@@ -8,24 +10,46 @@ type Props = {
   fullView?: boolean;
   isActive: boolean;
   onClick: () => void;
+  canRate: boolean;
 };
 
-const TriggerButton = ({ rating, fullView, isActive, onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const getTooltipText = (isWalletConnected: boolean, canRate: boolean) => {
+  if (!isWalletConnected) {
+    return <>You need a connected wallet to leave your rating.<br/>Link your wallet to Blockscout first</>;
+  }
+  if (!canRate) {
+    return <>New wallet users are not eligible to leave ratings.<br/>Please connect a different wallet</>;
+  }
+  return <>Ratings are derived from reviews by trusted users.<br/>Click here to rate!</>;
+};
+
+const TriggerButton = (
+  { rating, fullView, isActive, onClick, canRate }: Props,
+  ref: React.ForwardedRef<HTMLButtonElement>,
+) => {
   const textColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
+  const onFocusCapture = usePreventFocusAfterModalClosing();
+  const { address } = useAccount();
 
   return (
+    <Tooltip
+      label={ getTooltipText(Boolean(address), canRate) }
+      openDelay={ 100 }
+      textAlign="center"
+    >
       <Button
         ref={ ref }
         size="xs"
         variant="outline"
         border={ 0 }
         p={ 0 }
-      onClick={ onClick }
+        onClick={ canRate && Boolean(address) ? onClick : undefined }
         fontSize={ fullView ? 'md' : 'sm' }
         fontWeight={ fullView ? '400' : '500' }
         lineHeight="21px"
         ml={ fullView ? 3 : 0 }
         isActive={ isActive }
+        onFocusCapture={ onFocusCapture }
       >
         { !fullView && (
           <IconSvg
@@ -41,6 +65,7 @@ const TriggerButton = ({ rating, fullView, isActive, onClick }: Props, ref: Reac
           'Rate it!'
         ) }
       </Button>
+    </Tooltip>
   );
 };