fix types

lib/hooks/useNavItems.tsx

@@ -42,6 +42,13 @@ interface ReturnType {
   profileItem: NavItem;
 }
 
+export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem {
+  if ((item as NavGroupItem).subItems) {
+    return true;
+  }
+  return false;
+}
+
 export default function useNavItems(): ReturnType {
   const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0;
 
@@ -49,7 +56,7 @@ export default function useNavItems(): ReturnType {
   const pathname = router.pathname;
 
   return React.useMemo(() => {
-    const blockchainNavItems = [
+    const blockchainNavItems: Array<NavItem> = [
       { text: 'Top accounts', nextRoute: { pathname: '/accounts' as const }, icon: topAccountsIcon, isActive: pathname === '/accounts', isNewUi: true },
       { text: 'Blocks', nextRoute: { pathname: '/blocks' as const }, icon: blocksIcon, isActive: pathname.startsWith('/block'), isNewUi: true },
       { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true },

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -13,25 +13,14 @@ import {
 import React from 'react';
 
 import chevronIcon from 'icons/arrows/east-mini.svg';
+import type { NavGroupItem } from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import NavLink from './NavLink';
 import useColors from './useColors';
 
-type NavigationLink = {
-  text: string;
-  url: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  isNewUi: boolean;
-  isActive: boolean;
-}
-
-interface Props {
+type Props = NavGroupItem & {
   isCollapsed?: boolean;
-  isActive?: boolean;
-  subItems: Array<NavigationLink>;
-  text: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 }
 
 const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Props) => {

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -8,24 +8,13 @@ import {
 import React from 'react';
 
 import chevronIcon from 'icons/arrows/east-mini.svg';
+import type { NavGroupItem } from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import useColors from './useColors';
 
-type NavigationLink = {
-  text: string;
-  url: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-  isNewUi: boolean;
-  isActive: boolean;
-}
-
-interface Props {
+type Props = NavGroupItem & {
   isCollapsed?: boolean;
-  isActive?: boolean;
-  subItems: Array<NavigationLink>;
-  text: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   onClick: () => void;
 }
 

ui/snippets/navigation/NavigationDesktop.tsx

@@ -5,7 +5,7 @@ import appConfig from 'configs/app/config';
 import chevronIcon from 'icons/arrows/east-mini.svg';
 import { useAppContext } from 'lib/appContext';
 import * as cookies from 'lib/cookies';
-import useNavItems from 'lib/hooks/useNavItems';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
@@ -80,7 +80,7 @@ const NavigationDesktop = () => {
       <Box as="nav" mt={ 8 }>
         <VStack as="ul" spacing="1" alignItems="flex-start">
           { mainNavItems.map((item) => {
-            if (item.subItems) {
+            if (isGroupItem(item)) {
               return <NavLinkGroupDesktop key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;
             } else {
               return <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;

ui/snippets/navigation/NavigationMobile.tsx

@@ -5,7 +5,7 @@ import React, { useCallback } from 'react';
 import appConfig from 'configs/app/config';
 import chevronIcon from 'icons/arrows/east-mini.svg';
 import * as cookies from 'lib/cookies';
-import useNavItems from 'lib/hooks/useNavItems';
+import useNavItems, { isGroupItem } from 'lib/hooks/useNavItems';
 import NavFooter from 'ui/snippets/navigation/NavFooter';
 import NavLink from 'ui/snippets/navigation/NavLink';
 
@@ -35,6 +35,8 @@ const NavigationMobile = () => {
 
   const iconColor = useColorModeValue('blue.600', 'blue.300');
 
+  const openedItem = mainNavItems[openedGroupIndex];
+
   return (
     <>
       <Box position="relative">
@@ -50,7 +52,7 @@ const NavigationMobile = () => {
             alignItems="flex-start"
           >
             { mainNavItems.map((item, index) => {
-              if (item.subItems) {
+              if (isGroupItem(item)) {
                 return <NavLinkGroupMobile key={ item.text } { ...item } onClick={ onGroupItemOpen(index) }/>;
               } else {
                 return <NavLink key={ item.text } { ...item }/>;
@@ -88,7 +90,7 @@ const NavigationMobile = () => {
                 <Icon as={ chevronIcon } boxSize={ 6 } mr={ 2 } color={ iconColor }/>
                 <Text variant="secondary" fontSize="sm">{ mainNavItems[openedGroupIndex].text }</Text>
               </Flex>
-              { mainNavItems[openedGroupIndex].subItems?.map((item) => <NavLink key={ item.text } { ...item }/>) }
+              { isGroupItem(openedItem) && openedItem.subItems?.map((item) => <NavLink key={ item.text } { ...item }/>) }
             </VStack>
           </Box>
         ) }