new route trees

next.config.js

@@ -7,4 +7,13 @@ module.exports = withReactSvg({
   webpack(config) {
     return config;
   },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/xdai/mainnet',
+        permanent: true,
+      },
+    ];
+  },
 });

pages/[network_name]/[network_type]/index.tsx

+import { Center } from '@chakra-ui/react';
+import type { NextPage } from 'next';
+import { useRouter } from 'next/router';
+import React from 'react';
+
+import Page from 'ui/shared/Page/Page';
+
+const Home: NextPage = () => {
+  const router = useRouter();
+
+  return (
+    <Page>
+      <Center h="100%">
+        home page for { router.query.network_name } { router.query.network_type } network
+      </Center>
+    </Page>
+  );
+};
+
+export default Home;

pages/index.tsx

-import { Center } from '@chakra-ui/react';
 import type { NextPage } from 'next';
-import React from 'react';
-
-import Page from 'ui/shared/Page/Page';
 
 const Home: NextPage = () => {
-  return (
-    <Page>
-      <Center h="100%">
-        Home Page
-      </Center>
-    </Page>
-  );
+  return null;
 };
 
 export default Home;

ui/navigation/NavLink.tsx

 import { Link, Icon, Text, HStack, Tooltip } from '@chakra-ui/react';
 import NextLink from 'next/link';
-import { useRouter } from 'next/router';
 import React from 'react';
 
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
@@ -9,15 +8,13 @@ import useColors from './useColors';
 
 interface Props {
   isCollapsed: boolean;
+  isActive: boolean;
   pathname: string;
   text: string;
   icon: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
 }
 
-const NavLink = ({ text, pathname, icon, isCollapsed }: Props) => {
-  const router = useRouter();
-  const isActive = router.pathname === pathname;
-
+const NavLink = ({ text, pathname, icon, isCollapsed, isActive }: Props) => {
   const colors = useColors();
 
   return (

ui/navigation/Navigation.tsx

 import { ChevronLeftIcon } from '@chakra-ui/icons';
 import { Flex, Icon, Box, VStack, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import abiIcon from 'icons/ABI.svg';
@@ -20,23 +21,26 @@ import NavFooter from './NavFooter';
 import NavLink from './NavLink';
 import NetworkMenu from './networkMenu/NetworkMenu';
 
-const mainNavItems = [
-  { text: 'Blocks', pathname: '/blocks', icon: blocksIcon },
-  { text: 'Transactions', pathname: '/transactions', icon: transactionsIcon },
-  { text: 'Tokens', pathname: '/tokens', icon: tokensIcon },
-  { text: 'Apps', pathname: '/apps', icon: appsIcon },
-  { text: 'Other', pathname: '/other', icon: gearIcon },
-];
+const Navigation = () => {
+  const router = useRouter();
+  const basePathName = `/${ router.query.network_name }/${ router.query.network_type }`;
 
-const accountNavItems = [
-  { text: 'Watchlist', pathname: '/watchlist', icon: watchlistIcon },
-  { text: 'Private tags', pathname: '/private-tags', icon: privateTagIcon },
-  { text: 'Public tags', pathname: '/public-tags', icon: publicTagIcon },
-  { text: 'API keys', pathname: '/api-keys', icon: apiKeysIcon },
-  { text: 'Custom ABI', pathname: '/custom-abi', icon: abiIcon },
-];
+  const mainNavItems = [
+    { text: 'Blocks', pathname: basePathName + '/blocks', icon: blocksIcon },
+    { text: 'Transactions', pathname: basePathName + '/transactions', icon: transactionsIcon },
+    { text: 'Tokens', pathname: basePathName + '/tokens', icon: tokensIcon },
+    { text: 'Apps', pathname: basePathName + '/apps', icon: appsIcon },
+    { text: 'Other', pathname: basePathName + '/other', icon: gearIcon },
+  ];
+
+  const accountNavItems = [
+    { text: 'Watchlist', pathname: basePathName + '/watchlist', icon: watchlistIcon },
+    { text: 'Private tags', pathname: basePathName + '/private-tags', icon: privateTagIcon },
+    { text: 'Public tags', pathname: basePathName + '/public-tags', icon: publicTagIcon },
+    { text: 'API keys', pathname: basePathName + '/api-keys', icon: apiKeysIcon },
+    { text: 'Custom ABI', pathname: basePathName + '/custom-abi', icon: abiIcon },
+  ];
 
-const Navigation = () => {
   const [ isCollapsed, setCollapsedState ] = React.useState(cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED) === 'true');
 
   const handleTogglerClick = React.useCallback(() => {
@@ -86,12 +90,12 @@ const Navigation = () => {
       </Box>
       <Box as="nav" mt={ 14 }>
         <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
-          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
+          { mainNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath === item.pathname }/>) }
         </VStack>
       </Box>
       <Box as="nav" mt={ 12 }>
         <VStack as="ul" spacing="2" alignItems="flex-start" overflow="hidden">
-          { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed }/>) }
+          { accountNavItems.map((item) => <NavLink key={ item.text } { ...item } isCollapsed={ isCollapsed } isActive={ router.asPath === item.pathname }/>) }
         </VStack>
       </Box>
       <NavFooter isCollapsed={ isCollapsed }/>

ui/navigation/networkMenu/NetworkMenuLink.tsx

@@ -8,15 +8,17 @@ import checkIcon from 'icons/check.svg';
 
 import useColors from '../useColors';
 
-type Props = NetworkLink;
+interface Props extends NetworkLink {
+  isActive: boolean;
+}
 
-const NetworkMenuLink = ({ name, url, icon, iconColor }: Props) => {
-  const isActive = name === 'Gnosis Chain';
+const NetworkMenuLink = ({ name, pathname, icon, iconColor, isActive, isNewUi }: Props) => {
   const colors = useColors();
+  const href = isNewUi ? pathname : 'https://blockscout.com' + pathname;
 
   return (
     <Box as="li" listStyleType="none">
-      <NextLink href={ url } passHref>
+      <NextLink href={ href } passHref>
         <Flex
           as="a"
           px={ 4 }

ui/navigation/networkMenu/NetworkMenuPopup.tsx

 import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack, useColorModeValue } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { NetworkLink } from './types';
@@ -19,26 +20,29 @@ type PopupTab = 'mainnets' | 'testnets' | 'other';
 const TABS: Array<PopupTab> = [ 'mainnets', 'testnets', 'other' ];
 
 const NetworkMenuPopup = () => {
+  const router = useRouter();
   const gnosisChainIconColor = useColorModeValue('black', 'white');
   const poaChainIconColor = useColorModeValue('gray.100', 'gray.100');
 
+  const basePathName = `/${ router.query.network_name }/${ router.query.network_type }`;
+
   const LINKS: Record<PopupTab, Array<NetworkLink>> = {
     mainnets: [
-      { name: 'Gnosis Chain', url: '/xdai/mainnet', icon: gnosisIcon, iconColor: gnosisChainIconColor },
-      { name: 'Optimism on Gnosis Chain', url: '/xdai/optimism', icon: gnosisIcon, iconColor: gnosisChainIconColor },
-      { name: 'Arbitrum on xDai', url: '/xdai/aox', icon: arbitrumIcon },
-      { name: 'Ethereum', url: '/eth/mainnet', icon: ethereumIcon },
-      { name: 'Ethereum Classic', url: '/etc/mainnet', icon: ethereumClassicIcon },
-      { name: 'POA', url: '/poa/core', icon: poaIcon, iconColor: poaChainIconColor },
-      { name: 'RSK', url: '/rsk/mainnet', icon: rskIcon },
+      { name: 'Gnosis Chain', pathname: '/xdai/mainnet', icon: gnosisIcon, iconColor: gnosisChainIconColor, isNewUi: true },
+      { name: 'Optimism on Gnosis Chain', pathname: '/xdai/optimism', icon: gnosisIcon, iconColor: gnosisChainIconColor },
+      { name: 'Arbitrum on xDai', pathname: '/xdai/aox', icon: arbitrumIcon },
+      { name: 'Ethereum', pathname: '/eth/mainnet', icon: ethereumIcon },
+      { name: 'Ethereum Classic', pathname: '/etc/mainnet', icon: ethereumClassicIcon },
+      { name: 'POA', pathname: '/poa/core', icon: poaIcon, iconColor: poaChainIconColor },
+      { name: 'RSK', pathname: '/rsk/mainnet', icon: rskIcon },
     ],
     testnets: [
-      { name: 'Gnosis Chain Testnet', url: '/xdai/testnet', icon: arbitrumIcon },
-      { name: 'POA Sokol', url: '/poa/sokol', icon: poaSokolIcon },
+      { name: 'Gnosis Chain Testnet', pathname: '/xdai/testnet', icon: arbitrumIcon },
+      { name: 'POA Sokol', pathname: '/poa/sokol', icon: poaSokolIcon },
     ],
     other: [
-      { name: 'ARTIS Σ1', url: '/artis/sigma1', icon: artisIcon },
-      { name: 'LUKSO L14', url: '/lukso/l14', icon: poaIcon, iconColor: poaChainIconColor },
+      { name: 'ARTIS Σ1', pathname: '/artis/sigma1', icon: artisIcon },
+      { name: 'LUKSO L14', pathname: '/lukso/l14', icon: poaIcon, iconColor: poaChainIconColor },
     ],
   };
 
@@ -54,7 +58,7 @@ const NetworkMenuPopup = () => {
             { TABS.map((tab) => (
               <TabPanel key={ tab } p={ 0 }>
                 <VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 4 }>
-                  { LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link }/>) }
+                  { LINKS[tab].map((link) => <NetworkMenuLink key={ link.name } { ...link } isActive={ basePathName === link.pathname }/>) }
                 </VStack>
               </TabPanel>
             )) }

ui/navigation/networkMenu/types.ts

 import type { FunctionComponent, SVGAttributes } from 'react';
 
 export interface NetworkLink {
-  url: string;
+  pathname: string;
   name: string;
   icon: FunctionComponent<SVGAttributes<SVGElement>>;
   iconColor?: string;
+  isNewUi?: boolean;
 }