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,39 +10,62 @@ 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 (
-    <Button
-      ref={ ref }
-      size="xs"
-      variant="outline"
-      border={ 0 }
-      p={ 0 }
-      onClick={ onClick }
-      fontSize={ fullView ? 'md' : 'sm' }
-      fontWeight={ fullView ? '400' : '500' }
-      lineHeight="21px"
-      ml={ fullView ? 3 : 0 }
-      isActive={ isActive }
+    <Tooltip
+      label={ getTooltipText(Boolean(address), canRate) }
+      openDelay={ 100 }
+      textAlign="center"
     >
-      { !fullView && (
-        <IconSvg
-          name={ rating ? 'star_filled' : 'star_outline' }
-          color={ rating ? 'yellow.400' : 'gray.400' }
-          boxSize={ 5 }
-          mr={ 1 }
-        />
-      ) }
-      { (rating && !fullView) ? (
-        <chakra.span color={ textColor } transition="inherit">{ rating }</chakra.span>
-      ) : (
-        'Rate it!'
-      ) }
-    </Button>
+      <Button
+        ref={ ref }
+        size="xs"
+        variant="outline"
+        border={ 0 }
+        p={ 0 }
+        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
+            name={ rating ? 'star_filled' : 'star_outline' }
+            color={ rating ? 'yellow.400' : 'gray.400' }
+            boxSize={ 5 }
+            mr={ 1 }
+          />
+        ) }
+        { (rating && !fullView) ? (
+          <chakra.span color={ textColor } transition="inherit">{ rating }</chakra.span>
+        ) : (
+          'Rate it!'
+        ) }
+      </Button>
+    </Tooltip>
   );
 };