add menu item and fix url

configs/envs/.env.poa_core

@@ -7,7 +7,6 @@ NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cup']
 NEXT_PUBLIC_HOMEPAGE_PLATE_GRADIENT=radial-gradient(at 12% 37%, hsla(324,73%,67%,1) 0px, transparent 50%), radial-gradient(at 62% 14%, hsla(256,87%,73%,1) 0px, transparent 50%), radial-gradient(at 84% 80%, hsla(128,75%,73%,1) 0px, transparent 50%), radial-gradient(at 57% 46%, hsla(285,63%,72%,1) 0px, transparent 50%), radial-gradient(at 37% 30%, hsla(174,70%,61%,1) 0px, transparent 50%), radial-gradient(at 15% 86%, hsla(350,65%,70%,1) 0px, transparent 50%), radial-gradient(at 67% 57%, hsla(14,95%,76%,1) 0px, transparent 50%)
 #NEXT_PUBLIC_NETWORK_LOGO=https://placekitten.com/300/60
 #NEXT_PUBLIC_NETWORK_SMALL_LOGO=https://placekitten.com/300/300
-NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
 
 # network config
 NEXT_PUBLIC_NETWORK_NAME=POA

lib/hooks/useNavItems.tsx

@@ -7,8 +7,8 @@ import abiIcon from 'icons/ABI.svg';
 import apiKeysIcon from 'icons/API.svg';
 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 gearIcon from 'icons/gear.svg';
 import privateTagIcon from 'icons/privattags.svg';
 import profileIcon from 'icons/profile.svg';
 import publicTagIcon from 'icons/publictags.svg';
@@ -44,6 +44,7 @@ export function isGroupItem(item: NavItem | NavGroupItem): item is NavGroupItem
 
 export default function useNavItems(): ReturnType {
   const isMarketplaceFilled = appConfig.marketplaceAppList.length > 0 && appConfig.network.rpcUrl;
+  const hasAPIDocs = appConfig.apiDoc.specUrl;
 
   const router = useRouter();
   const pathname = router.pathname;
@@ -57,6 +58,17 @@ export default function useNavItems(): ReturnType {
       // { text: 'Verified contracts', nextRoute: { pathname: '/verified_contracts' as const }, icon: verifiedIcon, isActive: pathname === '/verified_contracts', isNewUi: false },
     ];
 
+    const otherNavItems: Array<NavItem> = [
+      hasAPIDocs ? {
+        text: 'API documentation',
+        nextRoute: { pathname: '/api-docs' as const },
+        // FIXME: need icon for this item
+        icon: topAccountsIcon,
+        isActive: pathname === '/api-docs',
+        isNewUi: true,
+      } : null,
+    ].filter(notEmpty);
+
     const mainNavItems = [
       {
         text: 'Blockchain',
@@ -72,7 +84,8 @@ export default function useNavItems(): ReturnType {
       // 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
-      // { text: 'Other', url: link('other'), icon: gearIcon, isActive: pathname === 'other' },
+      otherNavItems.length > 0 ?
+        { text: 'Other', icon: gearIcon, isActive: otherNavItems.some(item => item.isActive), subItems: otherNavItems } : null,
     ].filter(notEmpty);
 
     const accountNavItems = [
@@ -109,5 +122,5 @@ export default function useNavItems(): ReturnType {
       text: 'My profile', nextRoute: { pathname: '/auth/profile' as const }, icon: profileIcon, isActive: pathname === '/auth/profile', isNewUi: true };
 
     return { mainNavItems, accountNavItems, profileItem };
-  }, [ isMarketplaceFilled, pathname ]);
+  }, [ hasAPIDocs, isMarketplaceFilled, pathname ]);
 }

ui/SwaggerUI.tsx

@@ -12,6 +12,8 @@ import appConfig from 'configs/app/config';
 
 import 'swagger-ui-react/swagger-ui.css';
 
+const DEFAULT_SERVER = 'blockscout.com/poa/core';
+
 const NeverShowInfoPlugin = () => {
   return {
     components: {
@@ -47,7 +49,17 @@ const SwaggerUI = () => {
 
   return (
     <Box sx={ swaggerStyle }>
-      <SwaggerUIReact url={ appConfig.apiDoc.specUrl } plugins={ [ NeverShowInfoPlugin ] }/>
+      <SwaggerUIReact
+        url={ appConfig.apiDoc.specUrl }
+        plugins={ [ NeverShowInfoPlugin ] }
+        // eslint-disable-next-line react/jsx-no-bind
+        requestInterceptor={ (req) => {
+          if (!req.loadSpec) {
+            req.url = req.url.replace(DEFAULT_SERVER, appConfig.api.host);
+          }
+          return req;
+        } }
+      />
     </Box>
   );
 };