disable menu item

lib/hooks/useNavItems.tsx

@@ -28,6 +28,7 @@ export default function useNavItems(): ReturnType {
     balancesQuery: rewardsBalancesQuery,
     dailyRewardQuery,
     apiToken: rewardsApiToken,
+    isInitialized: isRewardsInitialized,
   } = useRewardsContext();
 
   return React.useMemo(() => {
@@ -273,9 +274,10 @@ export default function useNavItems(): ReturnType {
       config.features.rewards.isEnabled ? {
         text: rewardsBalancesQuery.data?.total ? `${ rewardsBalancesQuery.data?.total } Merits` : 'Merits',
         nextRoute: { pathname: '/account/rewards' as const },
-        onClick: rewardsApiToken ? undefined : openRewardsLoginModal,
+        onClick: (isRewardsInitialized && !rewardsApiToken) ? openRewardsLoginModal : undefined,
         icon: dailyRewardQuery.data?.available ? 'merits_with_dot' : 'merits',
         isActive: pathname === '/account/rewards',
+        isDisabled: !isRewardsInitialized,
       } : null,
       {
         text: 'Watch list',
@@ -310,5 +312,5 @@ export default function useNavItems(): ReturnType {
     ].filter(Boolean);
 
     return { mainNavItems, accountNavItems };
-  }, [ pathname, openRewardsLoginModal, rewardsBalancesQuery, dailyRewardQuery, rewardsApiToken ]);
+  }, [ pathname, openRewardsLoginModal, rewardsBalancesQuery, dailyRewardQuery, rewardsApiToken, isRewardsInitialized ]);
 }

types/client/navigation.ts

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

ui/snippets/navigation/vertical/NavLink.tsx

@@ -42,10 +42,11 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
   }
 
   const isHighlighted = checkRouteHighlight(item);
+  const isDisabled = isInternalLink && item.isDisabled;
 
   const content = (
     <Link
-      href={ href }
+      href={ isDisabled ? undefined : href }
       target={ isInternalLink ? '_self' : '_blank' }
       { ...styleProps.itemProps }
       w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
@@ -58,7 +59,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
       onClick={ isInternalLink && item.onClick ? item.onClick : onClick }
       _hover={{
         [`& *:not(.${ LIGHTNING_LABEL_CLASS_NAME }, .${ LIGHTNING_LABEL_CLASS_NAME } *)`]: {
-          color: 'link_hovered',
+          color: isDisabled ? 'inherit' : 'link_hovered',
         },
       }}
     >
@@ -88,7 +89,7 @@ const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState
 
   return (
     <Box as="li" listStyleType="none" w="100%" className={ className }>
-      { isInternalLink && !item.onClick ? (
+      { isInternalLink && !item.onClick && !isDisabled ? (
         <NextLink href={ item.nextRoute } passHref legacyBehavior>
           { content }
         </NextLink>