show rewards when logged in

lib/hooks/useNavItems.tsx

@@ -12,7 +12,6 @@ interface ReturnType {
   mainNavItems: Array<NavItem | NavGroupItem>;
   accountNavItems: Array<NavItem>;
   profileItem: NavItem;
-  rewardsNavItem: NavItem | null;
 }
 
 export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem {
@@ -273,6 +272,13 @@ 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 },
@@ -312,14 +318,6 @@ export default function useNavItems(): ReturnType {
       isActive: pathname === '/auth/profile',
     };
 
-    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 };
+    return { mainNavItems, accountNavItems, profileItem };
   }, [ 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, rewardsNavItem } = useNavItems();
+  const { mainNavItems, accountNavItems } = useNavItems();
 
   const [ openedGroupIndex, setOpenedGroupIndex ] = React.useState(-1);
 
@@ -73,7 +73,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
             }) }
           </VStack>
         </Box>
-        { (hasAccount || rewardsNavItem) && (
+        { hasAccount && (
           <Box
             as="nav"
             mt={ 3 }
@@ -82,8 +82,7 @@ const NavigationMobile = ({ onNavLinkClick, isMarketplaceAppPage }: Props) => {
             borderColor="divider"
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
-              { rewardsNavItem && <NavLink item={ rewardsNavItem } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/> }
-              { hasAccount && accountNavItems.map((item) => <NavLink key={ item.text } item={ item } onClick={ onNavLinkClick } isCollapsed={ isCollapsed }/>) }
+              { 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, rewardsNavItem } = useNavItems();
+  const { mainNavItems, accountNavItems } = useNavItems();
 
   const hasAccount = useHasAccount();
 
@@ -97,11 +97,10 @@ const NavigationDesktop = () => {
           }) }
         </VStack>
       </Box>
-      { (hasAccount || rewardsNavItem) && (
+      { hasAccount && (
         <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 3 } pt={ 3 }>
           <VStack as="ul" spacing="1" alignItems="flex-start">
-            { rewardsNavItem && <NavLink item={ rewardsNavItem } isCollapsed={ isCollapsed }/> }
-            { hasAccount && accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
+            { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
           </VStack>
         </Box>
       ) }