improve nav item and add red dot

configs/envs/.env.eth_sepolia

@@ -40,7 +40,7 @@ NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
 NEXT_PUBLIC_METASUITES_ENABLED=true
 NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG={'name': 'zerion', 'dapp_id': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}
 NEXT_PUBLIC_NAME_SERVICE_API_HOST=https://bens.services.blockscout.com
-NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps']
+NEXT_PUBLIC_NAVIGATION_HIGHLIGHTED_ROUTES=['/apps','/account/rewards']
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH

lib/hooks/useNavItems.tsx

+import { useColorModeValue } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
@@ -6,6 +7,7 @@ import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/naviga
 import config from 'configs/app';
 import { useRewardsContext } from 'lib/contexts/rewards';
 import { rightLineArrow } from 'lib/html-entities';
+import IconSvg from 'ui/shared/IconSvg';
 import UserAvatar from 'ui/shared/UserAvatar';
 
 interface ReturnType {
@@ -28,8 +30,11 @@ export default function useNavItems(): ReturnType {
   const {
     openLoginModal: openRewardsLoginModal,
     balance: rewardsBalance,
+    dailyReward,
     apiToken: rewardsApiToken,
   } = useRewardsContext();
+  const themeBgColor = useColorModeValue('white', 'black');
+  const activeItemBgColor = useColorModeValue('blue.50', 'gray.800');
 
   return React.useMemo(() => {
     let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
@@ -273,10 +278,31 @@ export default function useNavItems(): ReturnType {
     const accountNavItems: ReturnType['accountNavItems'] = [
       config.features.rewards.isEnabled ? {
         text: rewardsBalance?.total ? `${ rewardsBalance?.total } Merits` : 'Merits',
-        nextRoute: rewardsApiToken ? { pathname: '/account/rewards' as const } : undefined,
+        nextRoute: { pathname: '/account/rewards' as const },
         onClick: rewardsApiToken ? undefined : openRewardsLoginModal,
-        icon: 'merits',
-        isActive: Boolean(rewardsApiToken) && pathname === '/account/rewards',
+        iconComponent: () => (
+          <IconSvg
+            name="merits"
+            boxSize="30px"
+            flexShrink={ 0 }
+            position="relative"
+            _before={{
+              display: dailyReward?.available ? 'block' : 'none',
+              content: '""',
+              position: 'absolute',
+              top: '2px',
+              right: '1px',
+              width: '10px',
+              height: '10px',
+              boxSizing: 'border-box',
+              borderRadius: '50%',
+              backgroundColor: 'red.500',
+              border: '2px solid',
+              borderColor: pathname === '/account/rewards' ? activeItemBgColor : themeBgColor,
+            }}
+          />
+        ),
+        isActive: pathname === '/account/rewards',
       } : null,
       {
         text: 'Watch list',
@@ -318,5 +344,5 @@ export default function useNavItems(): ReturnType {
     };
 
     return { mainNavItems, accountNavItems, profileItem };
-  }, [ pathname, openRewardsLoginModal, rewardsBalance, rewardsApiToken ]);
+  }, [ pathname, openRewardsLoginModal, rewardsBalance, dailyReward, rewardsApiToken, activeItemBgColor, themeBgColor ]);
 }

types/client/navigation.ts

@@ -15,7 +15,7 @@ type NavItemCommon = {
 } & NavIconOrComponent;
 
 export type NavItemInternal = NavItemCommon & {
-  nextRoute?: Route;
+  nextRoute: Route;
   isActive?: boolean;
   onClick?: () => void;
 }

ui/snippets/navigation/vertical/NavLink.tsx

@@ -35,8 +35,8 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
   const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive && !disableActiveState });
   const isXLScreen = useBreakpointValue({ base: false, xl: true });
   let href;
-  if (isInternalLink) {
-    href = item.nextRoute ? route(item.nextRoute) : undefined;
+  if (isInternalLink && !item.onClick) {
+    href = route(item.nextRoute);
   } else if ('url' in item) {
     href = item.url;
   }
@@ -87,7 +87,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
 
   return (
     <Box as="li" listStyleType="none" w="100%" className={ className }>
-      { isInternalLink && item.nextRoute ? (
+      { isInternalLink && !item.onClick ? (
         <NextLink href={ item.nextRoute } passHref legacyBehavior>
           { content }
         </NextLink>