Merge pull request #663 from blockscout/api-nav

api links in navigation

icons/RPC.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" d="M22.857 19.714a3.033 3.033 0 0 0-1.571.448l-2.428-2.436a4.714 4.714 0 0 0 0-5.452l2.428-2.436c.473.29 1.016.445 1.571.448a3.143 3.143 0 1 0-3.143-3.143c.003.555.158 1.098.448 1.571l-2.436 2.428a4.714 4.714 0 0 0-5.452 0L9.838 8.714c.29-.473.445-1.016.448-1.571a3.143 3.143 0 1 0-3.143 3.143 3.033 3.033 0 0 0 1.571-.448l2.428 2.436a4.714 4.714 0 0 0 0 5.452l-2.428 2.436a3.033 3.033 0 0 0-1.571-.448 3.142 3.142 0 1 0 3.143 3.143 3.033 3.033 0 0 0-.448-1.571l2.436-2.428a4.714 4.714 0 0 0 5.452 0l2.436 2.428a3.033 3.033 0 0 0-.448 1.571 3.142 3.142 0 1 0 3.143-3.143Zm0-14.143a1.572 1.572 0 1 1 0 3.144 1.572 1.572 0 0 1 0-3.144ZM5.571 7.143a1.571 1.571 0 1 1 3.143 0 1.571 1.571 0 0 1-3.143 0Zm1.572 17.286a1.571 1.571 0 1 1 0-3.143 1.571 1.571 0 0 1 0 3.143ZM15 18.143a3.143 3.143 0 1 1 0-6.287 3.143 3.143 0 0 1 0 6.287Zm7.857 6.286a1.571 1.571 0 1 1 0-3.143 1.571 1.571 0 0 1 0 3.143Z"/>
+</svg>

icons/graphQL.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <path fill="currentColor" d="m17.613 5.751 5.082 2.85a2.255 2.255 0 0 1 3.123-.077c.153.14.282.301.389.477.606 1.028.238 2.339-.82 2.928-.18.1-.372.175-.575.223v5.699c1.18.273 1.91 1.423 1.627 2.569-.05.204-.13.4-.239.581-.61 1.023-1.958 1.374-3.014.782a2.18 2.18 0 0 1-.542-.429l-5.052 2.832c.383 1.124-.245 2.335-1.402 2.706a2.275 2.275 0 0 1-.69.108c-1.216.001-2.203-.955-2.204-2.136 0-.205.03-.41.09-.609l-5.083-2.847a2.252 2.252 0 0 1-3.117.07 2.098 2.098 0 0 1-.072-3.026 2.224 2.224 0 0 1 1.075-.603l.001-5.699c-1.184-.276-1.913-1.433-1.628-2.584.048-.198.127-.389.23-.566.61-1.024 1.96-1.374 3.015-.782.183.101.35.228.495.377l5.086-2.85c-.347-1.133.32-2.322 1.484-2.657.203-.059.416-.088.628-.088 1.216-.001 2.203.954 2.204 2.134.001.209-.03.418-.091.617Zm-.53.877a.799.799 0 0 1-.06.058l6.654 11.19c.027-.009.058-.016.084-.023v-5.707c-1.179-.283-1.897-1.442-1.604-2.588.006-.024.012-.049.02-.072l-5.095-2.858Zm-3.106.059-.062-.06L8.82 9.479c.337 1.135-.337 2.318-1.505 2.645l-.078.021v5.708l.086.023 6.655-11.19-.002.001Zm2.138.507a2.285 2.285 0 0 1-1.228 0L8.234 18.383c.302.283.517.645.618 1.041h13.297c.1-.398.317-.761.622-1.044L16.115 7.194Zm1.016 16.227 5.06-2.838a1.715 1.715 0 0 1-.04-.142H8.85l-.022.083 5.087 2.852c.4-.404.962-.653 1.586-.653.646 0 1.226.269 1.63.698Z"/>
+</svg>

icons/restAPI.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 30 30">
+  <g fill-rule="evenodd" clip-path="url(#restAPI_svg__a)" clip-rule="evenodd">
+    <path fill="currentColor" d="M23 4.3H7A2.7 2.7 0 0 0 4.3 7v16A2.7 2.7 0 0 0 7 25.7h16a2.7 2.7 0 0 0 2.7-2.7V7A2.7 2.7 0 0 0 23 4.3ZM7 3a4 4 0 0 0-4 4v16a4 4 0 0 0 4 4h16a4 4 0 0 0 4-4V7a4 4 0 0 0-4-4H7Z"/>
+    <path fill="currentColor" d="M14.911 11a1 1 0 0 0-1 1v7.111a1 1 0 1 0 2 0v-1.667h1.667a2.778 2.778 0 0 0 2.777-2.777v-.89A2.778 2.778 0 0 0 17.578 11H14.91Zm2.667 4.444H15.91V13h1.667a.777.777 0 0 1 .777.778v.889a.777.777 0 0 1-.777.777Zm-10.778 1v-2.222a3.222 3.222 0 0 1 6.444 0v4.889a1 1 0 1 1-2 0v-1.667H8.8v1.667a1 1 0 1 1-2 0v-2.667Zm2-1h2.444v-1.222a1.222 1.222 0 1 0-2.444 0v1.222ZM22.022 11a1 1 0 0 1 1 1v7.111a1 1 0 1 1-2 0V12a1 1 0 0 1 1-1Z"/>
+    <path d="M15.711 17.444c0-.11.09-.2.2-.2h1.667a2.577 2.577 0 0 0 2.578-2.577v-.89a2.577 2.577 0 0 0-2.578-2.577H14.91a.8.8 0 0 0-.8.8v7.111a.8.8 0 0 0 1.6 0v-1.667Zm.2-1.8a.2.2 0 0 1-.2-.2V13c0-.11.09-.2.2-.2h1.667a.978.978 0 0 1 .977.978v.889a.978.978 0 0 1-.977.977H15.91Zm-4.667 1.6c.11 0 .2.09.2.2v1.667a.8.8 0 0 0 1.6 0v-4.889a3.022 3.022 0 0 0-6.044 0v4.89a.8.8 0 0 0 1.6 0v-1.668c0-.11.09-.2.2-.2h2.444Zm-2.444-1.6a.2.2 0 0 1-.2-.2v-1.222a1.422 1.422 0 1 1 2.844 0v1.222a.2.2 0 0 1-.2.2H8.8Zm7.111 3.467a1 1 0 1 1-2 0V12a1 1 0 0 1 1-1h2.667a2.778 2.778 0 0 1 2.777 2.778v.889a2.778 2.778 0 0 1-2.777 2.777H15.91v1.667Zm1.667-3.667a.777.777 0 0 0 .777-.777v-.89a.778.778 0 0 0-.777-.777H15.91v2.444h1.667ZM8.8 19.111a1 1 0 1 1-2 0v-4.889a3.222 3.222 0 0 1 6.444 0v4.89a1 1 0 1 1-2 0v-1.668H8.8v1.667Zm2.444-4.889a1.222 1.222 0 1 0-2.444 0v1.222h2.444v-1.222ZM22.822 12a.8.8 0 0 0-1.6 0v7.111a.8.8 0 0 0 1.6 0V12Zm.2 0a1 1 0 1 0-2 0v7.111a1 1 0 1 0 2 0V12Z"/>
+  </g>
+  <defs>
+    <clipPath id="restAPI_svg__a">
+      <path d="M3 3h24v24H3z"/>
+    </clipPath>
+  </defs>
+</svg>

lib/hooks/useNavItems.tsx

@@ -10,10 +10,13 @@ import appsIcon from 'icons/apps.svg';
 import blocksIcon from 'icons/block.svg';
 import gearIcon from 'icons/gear.svg';
 import globeIcon from 'icons/globe-b.svg';
+import graphQLIcon from 'icons/graphQL.svg';
 // import outputRootsIcon from 'icons/output_roots.svg';
 import privateTagIcon from 'icons/privattags.svg';
 import profileIcon from 'icons/profile.svg';
 import publicTagIcon from 'icons/publictags.svg';
+import apiDocsIcon from 'icons/restAPI.svg';
+import rpcIcon from 'icons/RPC.svg';
 import statsIcon from 'icons/stats.svg';
 import tokensIcon from 'icons/token.svg';
 import topAccountsIcon from 'icons/top-accounts.svg';
@@ -24,15 +27,25 @@ import verifiedIcon from 'icons/verified.svg';
 import watchlistIcon from 'icons/watchlist.svg';
 // import { rightLineArrow } from 'lib/html-entities';
 
-export interface NavItem {
+type NavItemCommon = {
   text: string;
-  nextRoute: Route;
   icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+}
+
+type NavItemInternal = NavItemCommon & {
+  nextRoute: Route;
   isActive?: boolean;
   isNewUi?: boolean;
 }
 
-export interface NavGroupItem extends Omit<NavItem, 'nextRoute'> {
+type NavItemExternal = NavItemCommon & {
+  url: string;
+}
+
+export type NavItem = NavItemInternal | NavItemExternal
+
+export type NavGroupItem = NavItemCommon & {
+  isActive?: boolean;
   subItems: Array<NavItem> | Array<Array<NavItem>>;
 }
 
@@ -46,6 +59,10 @@ export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem
   return 'subItems' in item;
 }
 
+export function isInternalItem(item: NavItem): item is NavItemInternal {
+  return 'nextRoute' in item;
+}
+
 export default function useNavItems(): ReturnType {
   const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0 && appConfig.network.rpcUrl;
   const hasAPIDocs = appConfig.apiDoc.specUrl;
@@ -56,10 +73,26 @@ export default function useNavItems(): ReturnType {
   return React.useMemo(() => {
     let blockchainNavItems: Array<NavItem> | Array<Array<NavItem>> = [];
 
-    const topAccounts =
-      { text: 'Top accounts', nextRoute: { pathname: '/accounts' as const }, icon: topAccountsIcon, isActive: pathname === '/accounts', isNewUi: true };
-    const blocks = { text: 'Blocks', nextRoute: { pathname: '/blocks' as const }, icon: blocksIcon, isActive: pathname.startsWith('/block'), isNewUi: true };
-    const txs = { text: 'Transactions', nextRoute: { pathname: '/txs' as const }, icon: transactionsIcon, isActive: pathname.startsWith('/tx'), isNewUi: true };
+    const topAccounts = {
+      text: 'Top accounts',
+      nextRoute: { pathname: '/accounts' as const },
+      icon: topAccountsIcon,
+      isActive: pathname === '/accounts',
+      isNewUi: true,
+    };
+    const blocks = {
+      text: 'Blocks',
+      nextRoute: { pathname: '/blocks' as const },
+      icon: blocksIcon, isActive: pathname.startsWith('/block'),
+      isNewUi: true,
+    };
+    const txs = {
+      text: 'Transactions',
+      nextRoute: { pathname: '/txs' as const },
+      icon: transactionsIcon,
+      isActive: pathname.startsWith('/tx'),
+      isNewUi: true,
+    };
     const verifiedContracts =
     // eslint-disable-next-line max-len
      { text: 'Verified contracts', nextRoute: { pathname: '/verified-contracts' as const }, icon: verifiedIcon, isActive: false, isNewUi: false };
@@ -96,35 +129,64 @@ export default function useNavItems(): ReturnType {
 
     const otherNavItems: Array<NavItem> = [
       hasAPIDocs ? {
-        text: 'API documentation',
+        text: 'REST API',
         nextRoute: { pathname: '/api-docs' as const },
-        // FIXME: need icon for this item
-        icon: topAccountsIcon,
+        icon: apiDocsIcon,
         isActive: pathname === '/api-docs',
         isNewUi: true,
       } : null,
-      // FIXME: need icon for this item
-      { text: 'GraphQL', nextRoute: { pathname: '/graphiql' as const }, icon: topAccountsIcon, isActive: false, isNewUi: false },
+      {
+        text: 'GraphQL',
+        nextRoute: { pathname: '/graphiql' as const },
+        icon: graphQLIcon,
+        isActive: pathname === '/graphiql',
+        isNewUi: false,
+      },
+      {
+        text: 'RPC API',
+        icon: rpcIcon,
+        url: 'https://docs.blockscout.com/for-users/api/rpc-endpoints',
+      },
+      {
+        text: 'Eth RPC API',
+        icon: rpcIcon,
+        url: ' https://docs.blockscout.com/for-users/api/eth-rpc',
+      },
     ].filter(Boolean);
 
     const mainNavItems = [
       {
         text: 'Blockchain',
         icon: globeIcon,
-        isActive: blockchainNavItems.flat().some(item => item.isActive),
+        isActive: blockchainNavItems.flat().some(item => isInternalItem(item) && item.isActive),
         isNewUi: true,
         subItems: blockchainNavItems,
       },
-      { text: 'Tokens', nextRoute: { pathname: '/tokens' as const }, icon: tokensIcon, isActive: pathname.startsWith('/token'), isNewUi: true },
-      isMarketplaceFilled ?
-        { text: 'Apps', nextRoute: { pathname: '/apps' as const }, icon: appsIcon, isActive: pathname.startsWith('/app'), isNewUi: true } : null,
+      {
+        text: 'Tokens',
+        nextRoute: { pathname: '/tokens' as const },
+        icon: tokensIcon,
+        isActive: pathname.startsWith('/token'),
+        isNewUi: true,
+      },
+      isMarketplaceFilled ? {
+        text: 'Apps',
+        nextRoute: { pathname: '/apps' as const },
+        icon: appsIcon,
+        isActive: pathname.startsWith('/app'),
+        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: 'Other', icon: gearIcon, isActive: otherNavItems.some(item => item.isActive), subItems: otherNavItems } : null,
-    ].filter(Boolean);
+      otherNavItems.length > 0 ? {
+        text: 'Other',
+        icon: gearIcon,
+        isActive: otherNavItems.some(item => isInternalItem(item) && item.isActive),
+        subItems: otherNavItems,
+      } : null,
+    ].filter(Boolean) as Array<NavItem | NavGroupItem>;
 
     const accountNavItems = [
       {
@@ -144,9 +206,15 @@ export default function useNavItems(): ReturnType {
       {
         text: 'Public tags',
         nextRoute: { pathname: '/account/public_tags_request' as const },
-        icon: publicTagIcon, isActive: pathname === '/account/public_tags_request', isNewUi: true,
+        icon: publicTagIcon, isActive: pathname === '/account/public_tags_request',
+        isNewUi: true,
+      },
+      {
+        text: 'API keys',
+        nextRoute: { pathname: '/account/api_key' as const },
+        icon: apiKeysIcon, isActive: pathname === '/account/api_key',
+        isNewUi: true,
       },
-      { text: 'API keys', nextRoute: { pathname: '/account/api_key' as const }, icon: apiKeysIcon, isActive: pathname === '/account/api_key', isNewUi: true },
       {
         text: 'Custom ABI',
         nextRoute: { pathname: '/account/custom_abi' as const },
@@ -157,7 +225,12 @@ export default function useNavItems(): ReturnType {
     ];
 
     const profileItem = {
-      text: 'My profile', nextRoute: { pathname: '/auth/profile' as const }, icon: profileIcon, isActive: pathname === '/auth/profile', isNewUi: true };
+      text: 'My profile',
+      nextRoute: { pathname: '/auth/profile' as const },
+      icon: profileIcon,
+      isActive: pathname === '/auth/profile',
+      isNewUi: true,
+    };
 
     return { mainNavItems, accountNavItems, profileItem };
   }, [ hasAPIDocs, isMarketplaceFilled, pathname ]);

ui/snippets/navigation/NavLink.tsx

@@ -4,47 +4,57 @@ import { route } from 'nextjs-routes';
 import React from 'react';
 
 import type { NavItem } from 'lib/hooks/useNavItems';
+import { isInternalItem } from 'lib/hooks/useNavItems';
 
 import useColors from './useColors';
 import useNavLinkStyleProps from './useNavLinkStyleProps';
 
-type Props = NavItem & {
+type Props = {
+  item: NavItem;
   isCollapsed?: boolean;
   px?: string | number;
   className?: string;
 }
 
-const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi, className }: Props) => {
+const NavLink = ({ item, isCollapsed, px, className }: Props) => {
   const colors = useColors();
   const isExpanded = isCollapsed === false;
 
-  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive });
+  const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalItem(item) && item.isActive });
 
   const isXLScreen = useBreakpointValue({ base: false, xl: true });
 
+  let href: string| undefined;
+
+  if (isInternalItem(item)) {
+    href = !item.isNewUi ? route(item.nextRoute) : undefined;
+  } else {
+    href = item.url;
+  }
+
   const content = (
     <Link
-      { ...(isNewUi ? {} : { href: route(nextRoute) }) }
+      href={ href }
       { ...styleProps.itemProps }
       w={{ base: '100%', lg: isExpanded ? '100%' : '60px', xl: isCollapsed ? '60px' : '100%' }}
       display="flex"
       px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
-      aria-label={ `${ text } link` }
+      aria-label={ `${ item.text } link` }
       whiteSpace="nowrap"
     >
       <Tooltip
-        label={ text }
+        label={ item.text }
         hasArrow={ false }
         isDisabled={ isCollapsed === false || (isCollapsed === undefined && isXLScreen) }
         placement="right"
         variant="nav"
         gutter={ 20 }
-        color={ isActive ? colors.text.active : colors.text.hover }
+        color={ isInternalItem(item) && item.isActive ? colors.text.active : colors.text.hover }
       >
         <HStack spacing={ 3 } overflow="hidden">
-          <Icon as={ icon } boxSize="30px"/>
+          <Icon as={ item.icon } boxSize="30px"/>
           <Text { ...styleProps.textProps }>
-            { text }
+            { item.text }
           </Text>
         </HStack>
       </Tooltip>
@@ -55,8 +65,8 @@ const NavLink = ({ text, nextRoute, icon, isCollapsed, isActive, px, isNewUi, cl
     <Box as="li" listStyleType="none" w="100%" className={ className }>
       { /* why not NextLink in all cases? since prev UI and new one are hosting in the same domain and global routing is managed by nginx */ }
       { /* we have to hard reload page on every transition between urls from different part of the app */ }
-      { isNewUi ? (
-        <NextLink href={ nextRoute } passHref>
+      { isInternalItem(item) && item.isNewUi ? (
+        <NextLink href={ item.nextRoute } passHref>
           { content }
         </NextLink>
       ) : content }

ui/snippets/navigation/NavLinkGroupDesktop.tsx

@@ -82,10 +82,10 @@ const NavLinkGroupDesktop = ({ text, subItems, icon, isCollapsed, isActive }: Pr
                     borderColor: 'divider',
                   }}
                 >
-                  { item.map(subItem => <NavLink key={ subItem.text } { ...subItem } isCollapsed={ false }/>) }
+                  { item.map(subItem => <NavLink key={ subItem.text } item={ subItem } isCollapsed={ false }/>) }
                 </Box>
               ) :
-                <NavLink key={ item.text } { ...item } isCollapsed={ false }/>,
+                <NavLink key={ item.text } item={ item } isCollapsed={ false }/>,
               ) }
             </VStack>
           </PopoverBody>

ui/snippets/navigation/NavigationDesktop.tsx

@@ -85,7 +85,7 @@ const NavigationDesktop = () => {
             if (isGroupItem(item)) {
               return <NavLinkGroupDesktop key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;
             } else {
-              return <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>;
+              return <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>;
             }
           }) }
         </VStack>
@@ -93,7 +93,7 @@ const NavigationDesktop = () => {
       { hasAccount && (
         <Box as="nav" borderTopWidth="1px" borderColor="divider" w="100%" mt={ 6 } pt={ 6 }>
           <VStack as="ul" spacing="1" alignItems="flex-start">
-            { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
+            { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isCollapsed={ isCollapsed }/>) }
           </VStack>
         </Box>
       ) }

ui/snippets/navigation/NavigationMobile.tsx

@@ -55,7 +55,7 @@ const NavigationMobile = () => {
               if (isGroupItem(item)) {
                 return <NavLinkGroupMobile key={ item.text } { ...item } onClick={ onGroupItemOpen(index) }/>;
               } else {
-                return <NavLink key={ item.text } { ...item }/>;
+                return <NavLink key={ item.text } item={ item }/>;
               }
             }) }
           </VStack>
@@ -70,7 +70,7 @@ const NavigationMobile = () => {
             style={{ x: mainX }}
           >
             <VStack as="ul" spacing="1" alignItems="flex-start">
-              { accountNavItems.map((item) => <NavLink key={ item.text } { ...item }/>) }
+              { accountNavItems.map((item) => <NavLink key={ item.text } item={ item }/>) }
             </VStack>
           </Box>
         ) }
@@ -105,10 +105,10 @@ const NavigationMobile = () => {
                       borderColor: 'divider',
                     }}
                   >
-                    { item.map(subItem => <NavLink key={ subItem.text } { ...subItem }/>) }
+                    { item.map(subItem => <NavLink key={ subItem.text } item={ subItem }/>) }
                   </Box>
                 ) :
-                  <NavLink key={ item.text } { ...item } mb={ 1 }/>,
+                  <NavLink key={ item.text } item={ item } mb={ 1 }/>,
               ) }
             </Box>
           </Box>

ui/snippets/profileMenu/ProfileMenuContent.tsx

@@ -33,10 +33,10 @@ const ProfileMenuContent = ({ name, nickname, email }: Props) => {
       >
         { email }
       </Text>
-      <NavLink { ...profileItem } isActive={ undefined } px="0px" isCollapsed={ false }/>
+      <NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false }/>
       <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
         <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
-          { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isActive={ undefined } isCollapsed={ false } px="0px"/>) }
+          { accountNavItems.map((item) => <NavLink key={ item.text } item={ item } isActive={ undefined } isCollapsed={ false } px="0px"/>) }
         </VStack>
       </Box>
       <Box mt={ 2 } pt={ 3 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>