Merge pull request #818 from blockscout/update-navi

update navigation

.env.template

@@ -32,6 +32,7 @@ NEXT_PUBLIC_FOOTER_TELEGRAM_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_TELEGRAM_L
 NEXT_PUBLIC_FOOTER_STAKING_LINK=__PLACEHOLDER_FOR_NEXT_PUBLIC_FOOTER_STAKING_LINK__
 NEXT_PUBLIC_FEATURED_NETWORKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_FEATURED_NETWORKS__
 NEXT_PUBLIC_NETWORK_EXPLORERS=__PLACEHOLDER_FOR_NEXT_PUBLIC_NETWORK_EXPLORERS__
+NEXT_PUBLIC_OTHER_LINKS=__PLACEHOLDER_FOR_NEXT_PUBLIC_OTHER_LINKS__
 NEXT_PUBLIC_MARKETPLACE_CONFIG_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_CONFIG_URL__
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=__PLACEHOLDER_FOR_NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM__
 NEXT_PUBLIC_LOGOUT_URL=__PLACEHOLDER_FOR_NEXT_PUBLIC_LOGOUT_URL__

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
+import type { NavItemExternal } from 'types/client/navigation-items';
 import type { WalletType } from 'types/client/wallets';
 import type { NetworkExplorer } from 'types/networks';
 import type { ChainIndicatorId } from 'ui/home/indicators/types';
@@ -11,6 +12,7 @@ const parseEnvJson = <DataType>(env: string | undefined): DataType | null => {
     return null;
   }
 };
+
 const stripTrailingSlash = (str: string) => str[str.length - 1] === '/' ? str.slice(0, -1) : str;
 const getWeb3DefaultWallet = (): WalletType => {
   const envValue = getEnvValue(process.env.NEXT_PUBLIC_WEB3_DEFAULT_WALLET);
@@ -100,6 +102,7 @@ const config = Object.freeze({
     telegram: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK),
     staking: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK),
   },
+  otherLinks: parseEnvJson<Array<NavItemExternal>>(getEnvValue(process.env.NEXT_PUBLIC_OTHER_LINKS)) || [],
   featuredNetworks: getEnvValue(process.env.NEXT_PUBLIC_FEATURED_NETWORKS),
   blockScoutVersion: getEnvValue(process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION),
   isAccountSupported: getEnvValue(process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED) === 'true',

docs/ENVS.md

@@ -29,6 +29,7 @@ The app instance could be customized by passing following variables to NodeJS en
 | Variable | Type| Description | Is required  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | NEXT_PUBLIC_FEATURED_NETWORKS | `string` | URL of configuration file (`.json` format only) which contains list of featured networks that will be shown in the network menu. See [below](#featured-network-configuration-properties) list of available properties for particular network | - | - | `https://example.com/featured_networks_config.json` |
+| NEXT_PUBLIC_OTHER_LINKS | `Array<{url: string; text: string}>` | List of links for the "Other" navigation menu | - | - | `[{'url':'https://blockscout.com','text':'Blockscout'}]` |
 | NEXT_PUBLIC_BLOCKSCOUT_VERSION | `string` | Current running version of Blockscout (used to display link to release in the footer) | - | - | `v.5.1.0-beta`
 | NEXT_PUBLIC_FOOTER_GITHUB_LINK | `string` | Link to Github in the footer | - | - | `https://github.com/blockscout/blockscout` |
 | NEXT_PUBLIC_FOOTER_TWITTER_LINK | `string` | Link to Twitter in the footer | - | - | `https://www.twitter.com/blockscoutcom` |

lib/hooks/useNavItems.tsx

 import { useRouter } from 'next/router';
-import type { Route } from 'nextjs-routes';
 import React from 'react';
 
+import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation-items';
+
 import appConfig from 'configs/app/config';
 import abiIcon from 'icons/ABI.svg';
 import apiKeysIcon from 'icons/API.svg';
@@ -27,28 +28,6 @@ import verifiedIcon from 'icons/verified.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 import { rightLineArrow } from 'lib/html-entities';
 
-type NavItemCommon = {
-  text: string;
-  icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
-}
-
-type NavItemInternal = NavItemCommon & {
-  nextRoute: Route;
-  isActive?: boolean;
-  isNewUi?: boolean;
-}
-
-type NavItemExternal = NavItemCommon & {
-  url: string;
-}
-
-export type NavItem = NavItemInternal | NavItemExternal
-
-export type NavGroupItem = NavItemCommon & {
-  isActive?: boolean;
-  subItems: Array<NavItem> | Array<Array<NavItem>>;
-}
-
 interface ReturnType {
   mainNavItems: Array<NavItem | NavGroupItem>;
   accountNavItems: Array<NavItem>;
@@ -135,7 +114,7 @@ export default function useNavItems(): ReturnType {
       ].filter(Boolean);
     }
 
-    const otherNavItems: Array<NavItem> = [
+    const apiNavItems: Array<NavItem> = [
       hasAPIDocs ? {
         text: 'REST API',
         nextRoute: { pathname: '/api-docs' as const },
@@ -185,14 +164,16 @@ export default function useNavItems(): ReturnType {
         isNewUi: true,
       } : null,
       { text: 'Charts & stats', nextRoute: { pathname: '/stats' as const }, icon: statsIcon, isActive: pathname === '/stats', isNewUi: true },
-      // there should be custom site sections like Stats, Faucet, More, etc but never an 'other'
-      // examples https://explorer-edgenet.polygon.technology/ and https://explorer.celo.org/
-      // at this stage custom menu items is under development, we will implement it later
-      otherNavItems.length > 0 ? {
+      {
+        text: 'API',
+        icon: apiDocsIcon,
+        isActive: apiNavItems.some(item => isInternalItem(item) && item.isActive),
+        subItems: apiNavItems,
+      },
+      appConfig.otherLinks.length > 0 ? {
         text: 'Other',
         icon: gearIcon,
-        isActive: otherNavItems.some(item => isInternalItem(item) && item.isActive),
-        subItems: otherNavItems,
+        subItems: appConfig.otherLinks,
       } : null,
     ].filter(Boolean) as Array<NavItem | NavGroupItem>;
 

types/client/navigation-items.ts

+import type { Route } from 'nextjs-routes';
+
+type NavItemCommon = {
+  text: string;
+  icon?: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+
+export type NavItemInternal = NavItemCommon & {
+  nextRoute: Route;
+  isActive?: boolean;
+  isNewUi?: boolean;
+}
+
+export type NavItemExternal = NavItemCommon & {
+  url: string;
+}
+
+export type NavItem = NavItemInternal | NavItemExternal
+
+export type NavGroupItem = NavItemCommon & {
+  isActive?: boolean;
+  subItems: Array<NavItem> | Array<Array<NavItem>>;
+}

ui/snippets/navigation/NavLink.tsx

@@ -3,8 +3,9 @@ import NextLink from 'next/link';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
+import type { NavItem } from 'types/client/navigation-items';
+
 import useIsMobile from 'lib/hooks/useIsMobile';
-import type { NavItem } from 'lib/hooks/useNavItems';
 import { isInternalItem } from 'lib/hooks/useNavItems';
 
 import useColors from './useColors';
@@ -57,7 +58,7 @@ const NavLink = ({ item, isCollapsed, px, className }: Props) => {
         color={ isInternalItem(item) && item.isActive ? colors.text.active : colors.text.hover }
       >
         <HStack spacing={ 3 } overflow="hidden">
-          <Icon as={ item.icon } boxSize="30px"/>
+          { item.icon && <Icon as={ item.icon } boxSize="30px"/> }
           <Text { ...styleProps.textProps }>
             { item.text }
           </Text>

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -12,8 +12,9 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import type { NavGroupItem } from 'types/client/navigation-items';
+
 import chevronIcon from 'icons/arrows/east-mini.svg';
-import type { NavGroupItem } from 'lib/hooks/useNavItems';
 
 import NavLink from './NavLink';
 import useNavLinkStyleProps from './useNavLinkStyleProps';

ui/snippets/navigation/NavLinkGroupMobile.tsx

@@ -7,8 +7,9 @@ import {
 } from '@chakra-ui/react';
 import React from 'react';
 
+import type { NavGroupItem } from 'types/client/navigation-items';
+
 import chevronIcon from 'icons/arrows/east-mini.svg';
-import type { NavGroupItem } from 'lib/hooks/useNavItems';
 
 import useNavLinkStyleProps from './useNavLinkStyleProps';