display rewards nav item without account

lib/hooks/useNavItems.tsx

@@ -12,6 +12,7 @@ interface ReturnType {
   mainNavItems: Array<NavItem | NavGroupItem>;
   accountNavItems: Array<NavItem>;
   profileItem: NavItem;
+  rewardsNavItem: NavItem | null;
 }
 
 export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem {
@@ -272,13 +273,6 @@ export default function useNavItems(): ReturnType {
     ].filter(Boolean);
 
     const accountNavItems: ReturnType['accountNavItems'] = [
-      config.features.rewards.isEnabled ? {
-        text: rewardsBalance?.total ? `${ rewardsBalance?.total } Merits` : 'Merits',
-        nextRoute: { pathname: '/account/rewards' as const },
-        onClick: rewardsApiToken ? undefined : openRewardsLoginModal,
-        icon: dailyReward?.available ? 'merits_with_dot' : 'merits',
-        isActive: pathname === '/account/rewards',
-      } : null,
       {
         text: 'Watch list',
         nextRoute: { pathname: '/account/watchlist' as const },
@@ -318,6 +312,14 @@ export default function useNavItems(): ReturnType {
       isActive: pathname === '/auth/profile',
     };
 
-    return { mainNavItems, accountNavItems, profileItem };
+    const rewardsNavItem = config.features.rewards.isEnabled ? {
+      text: rewardsBalance?.total ? `${ rewardsBalance?.total } Merits` : 'Merits',
+      nextRoute: { pathname: '/account/rewards' as const },
+      onClick: rewardsApiToken ? undefined : openRewardsLoginModal,
+      icon: dailyReward?.available ? 'merits_with_dot' : 'merits',
+      isActive: pathname === '/account/rewards',
+    } : null;
+
+    return { mainNavItems, accountNavItems, profileItem, rewardsNavItem };
   }, [ pathname, openRewardsLoginModal, rewardsBalance, dailyReward, rewardsApiToken ]);
 }

ui/snippets/navigation/mobile/NavigationMobile.tsx

@@ -17,7 +17,7 @@ interface Props {
 }
 
 const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
-  const { mainNavItems, accountNavItems } = useNavItems();
+  const { mainNavItems, accountNavItems, rewardsNavItem } = useNavItems();
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
 
@@ -73,7 +73,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
             }) }
           </VStack>
         </Box>
-        { hasAccount && (
+        { (hasAccount || rewardsNavItem) && (
           <Box
             as="nav"
             mt={ 3 }
@@ -82,7 +82,8 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
             borderColor="divider"
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
-              { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
+              { rewardsNavItem && <NavLink item={ rewardsNavItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/> }
+              { hasAccount && accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
             </VStack>
           </Box>
         ) }

ui/snippets/navigation/vertical/NavigationDesktop.tsx

@@ -28,7 +28,7 @@ const NavigationDesktop = () => {
     isNavBarCollapsed = false;
   }
 
-  const { mainNavItems, accountNavItems } = useNavItems();
+  const { mainNavItems, accountNavItems, rewardsNavItem } = useNavItems();
 
   const hasAccount = useHasAccount();
 
@@ -97,10 +97,11 @@ const NavigationDesktop = () => {
           }) }
         </VStack>
       </Box>
-      { hasAccount && (
+      { (hasAccount || rewardsNavItem) && (
         <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 3 } pt={ 3 }>
           <VStack as="ul" spacing="1" alignItems="flex-start">
-            { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
+            { rewardsNavItem && <NavLink item={ rewardsNavItem } isCollapsed={ isCollapsed }/> }
+            { hasAccount && accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
           </VStack>
         </Box>
       ) }