Merits dashboard minor changes (#2637)

move hint, remove label

ui/pages/RewardsDashboard.tsx

@@ -67,20 +67,19 @@ const RewardsDashboard = () => {
             description="Claim your daily Merits and any Merits received from referrals."
             direction="column-reverse"
             contentAfter={ <DailyRewardClaimButton/> }
+            hint={ (
+              <>
+                Total number of Merits earned from all activities.{ ' ' }
+                <LinkExternal href="https://docs.blockscout.com/using-blockscout/merits">
+                  More info on Merits
+                </LinkExternal>
+              </>
+            ) }
           >
             <RewardsDashboardCardValue
-              label="Total balance"
               value={ balancesQuery.data?.total || 'N/A' }
               isLoading={ balancesQuery.isPending }
               withIcon
-              hint={ (
-                <>
-                  Total number of Merits earned from all activities.{ ' ' }
-                  <LinkExternal href="https://docs.blockscout.com/using-blockscout/merits">
-                    More info on Merits
-                  </LinkExternal>
-                </>
-              ) }
             />
           </RewardsDashboardCard>
           <RewardsDashboardCard
@@ -89,7 +88,6 @@ const RewardsDashboard = () => {
             direction="column-reverse"
           >
             <RewardsDashboardCardValue
-              label="Referrals"
               value={ referralsQuery.data?.referrals ?
                 `${ referralsQuery.data?.referrals } user${ Number(referralsQuery.data?.referrals) === 1 ? '' : 's' }` :
                 'N/A'
@@ -111,28 +109,27 @@ const RewardsDashboard = () => {
                 </LinkExternal>
               </>
             ) }
+            hint={ (
+              <>
+                See the{ ' ' }
+                <LinkExternal
+                  href="https://docs.blockscout.com/using-blockscout/merits/streak-rewards"
+                  isExternal
+                >
+                  docs
+                </LinkExternal>{ ' ' }
+                to learn how your streak number affects daily rewards
+              </>
+            ) }
             direction="column-reverse"
           >
             <RewardsDashboardCardValue
-              label="Streak"
               value={
                 dailyRewardQuery.data?.streak ?
                   `${ dailyRewardQuery.data?.streak } day${ Number(dailyRewardQuery.data?.streak) === 1 ? '' : 's' }` :
                   'N/A'
               }
               isLoading={ dailyRewardQuery.isPending }
-              hint={ (
-                <>
-                  See the{ ' ' }
-                  <LinkExternal
-                    href="https://docs.blockscout.com/using-blockscout/merits/streak-rewards"
-                    isExternal
-                  >
-                    docs
-                  </LinkExternal>{ ' ' }
-                  to learn how your streak number affects daily rewards
-                </>
-              ) }
             />
           </RewardsDashboardCard>
         </Flex>

ui/rewards/dashboard/RewardsDashboardCard.tsx

 import { Flex, Text, useColorModeValue, Tag } from '@chakra-ui/react';
 import React from 'react';
 
+import HintPopover from 'ui/shared/HintPopover';
+
 type Props = {
-  title?: string;
+  title: string;
   description: string | React.ReactNode;
+  hint?: string | React.ReactNode;
   availableSoon?: boolean;
   blurFilter?: boolean;
   contentAfter?: React.ReactNode;
@@ -13,7 +16,7 @@ type Props = {
 };
 
 const RewardsDashboardCard = ({
-  title, description, availableSoon, contentAfter,
+  title, description, hint, availableSoon, contentAfter,
   direction = 'column', children, blurFilter,
 }: Props) => {
   return (
@@ -34,12 +37,19 @@ const RewardsDashboardCard = ({
         p={{ base: 1.5, md: 3 }}
         w={{ base: 'full', md: direction === 'row' ? '340px' : 'full' }}
       >
-        { title && (
-          <Flex alignItems="center" gap={ 2 }>
-            <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="500">{ title }</Text>
-            { availableSoon && <Tag colorScheme="blue">Available soon</Tag> }
-          </Flex>
-        ) }
+        <Flex alignItems="center" gap={ 2 }>
+          <Text fontSize={{ base: 'md', md: 'lg' }} fontWeight="500">{ title }</Text>
+          { hint && (
+            <HintPopover
+              label={ hint }
+              popoverContentProps={{
+                maxW: { base: 'calc(100vw - 8px)', lg: '210px' },
+              }}
+              popoverBodyProps={{ textAlign: 'center' }}
+            />
+          ) }
+          { availableSoon && <Tag colorScheme="blue">Available soon</Tag> }
+        </Flex>
         <Text as="div" fontSize="sm">
           { description }
         </Text>

ui/rewards/dashboard/RewardsDashboardCardValue.tsx

@@ -7,7 +7,7 @@ import HintPopover from 'ui/shared/HintPopover';
 import MeritsIcon from '../MeritsIcon';
 
 type Props = {
-  label: string;
+  label?: string;
   value: number | string | undefined;
   withIcon?: boolean;
   hint?: string | React.ReactNode;
@@ -16,18 +16,20 @@ type Props = {
 
 const RewardsDashboardCard = ({ label, value, withIcon, hint, isLoading }: Props) => (
   <Flex key={ label } flexDirection="column" alignItems="center" gap={ 2 }>
-    <Flex alignItems="center" gap={ 1 }>
-      { hint && (
-        <HintPopover
-          label={ hint }
-          popoverContentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '210px' } }}
-          popoverBodyProps={{ textAlign: 'center' }}
-        />
-      ) }
-      <Text fontSize="xs" fontWeight="500" variant="secondary">
-        { label }
-      </Text>
-    </Flex>
+    { label && (
+      <Flex alignItems="center" gap={ 1 }>
+        { hint && (
+          <HintPopover
+            label={ hint }
+            popoverContentProps={{ maxW: { base: 'calc(100vw - 8px)', lg: '210px' } }}
+            popoverBodyProps={{ textAlign: 'center' }}
+          />
+        ) }
+        <Text fontSize="xs" fontWeight="500" variant="secondary">
+          { label }
+        </Text>
+      </Flex>
+    ) }
     <Skeleton
       isLoaded={ !isLoading }
       display="flex"