networks refactoring

data/networks.ts

+import type { Network } from 'types/networks';
+
+import arbitrumIcon from 'icons/networks/arbitrum.svg';
+import artisIcon from 'icons/networks/artis.svg';
+import ethereumClassicIcon from 'icons/networks/ethereum-classic.svg';
+import ethereumIcon from 'icons/networks/ethereum.svg';
+import gnosisIcon from 'icons/networks/gnosis.svg';
+import optimismIcon from 'icons/networks/optimism.svg';
+import poaSokolIcon from 'icons/networks/poa-sokol.svg';
+import poaIcon from 'icons/networks/poa.svg';
+import rskIcon from 'icons/networks/rsk.svg';
+
+export const NETWORKS: Array<Network> = [
+  {
+    name: 'Gnosis Chain',
+    type: 'xdai',
+    subType: 'mainnet',
+    icon: gnosisIcon,
+    group: 'mainnets',
+    isAccountSupported: true,
+    isNewUiSupported: true,
+  },
+  {
+    name: 'Optimism on Gnosis Chain',
+    type: 'xdai',
+    subType: 'optimism',
+    icon: optimismIcon,
+    group: 'mainnets',
+  },
+  {
+    name: 'Arbitrum on xDai',
+    type: 'xdai',
+    subType: 'aox',
+    icon: arbitrumIcon,
+    group: 'mainnets',
+  },
+  {
+    name: 'Ethereum',
+    type: 'eth',
+    subType: 'mainnet',
+    icon: ethereumIcon,
+    group: 'mainnets',
+  },
+  {
+    name: 'Ethereum Classic',
+    type: 'etc',
+    subType: 'mainnet',
+    icon: ethereumClassicIcon,
+    group: 'mainnets',
+  },
+  {
+    name: 'POA',
+    type: 'poa',
+    subType: 'core',
+    icon: poaIcon,
+    group: 'mainnets',
+  },
+  {
+    name: 'RSK',
+    type: 'rsk',
+    subType: 'mainnet',
+    icon: rskIcon,
+    group: 'mainnets',
+  },
+  {
+    name: 'Gnosis Chain Testnet',
+    type: 'xdai',
+    subType: 'testnet',
+    icon: arbitrumIcon,
+    group: 'testnets',
+    isAccountSupported: true,
+    isNewUiSupported: true,
+  },
+  {
+    name: 'POA Sokol',
+    type: 'poa',
+    subType: 'sokol',
+    icon: poaSokolIcon,
+    group: 'testnets',
+  },
+  {
+    name: 'ARTIS Σ1',
+    type: 'artis',
+    subType: 'sigma1',
+    icon: artisIcon,
+    group: 'other',
+  },
+  {
+    name: 'LUKSO L14',
+    type: 'lukso',
+    subType: 'l14',
+    group: 'other',
+  },
+];

lib/hooks/useBasePath.tsx

@@ -2,5 +2,5 @@ import { useRouter } from 'next/router';
 
 export default function useBasePath() {
   const router = useRouter();
-  return `/${ router.query.network_name }/${ router.query.network_type }`;
+  return `/${ router.query.network_type }/${ router.query.network_sub_type }`;
 }

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

@@ -11,7 +11,7 @@ const Home: NextPage = () => {
   return (
     <Page>
       <Center h="100%">
-        home page for { router.query.network_name } { router.query.network_type } network
+        home page for { router.query.network_type } { router.query.network_sub_type } network
       </Center>
     </Page>
   );

types/networks.ts

+import type { FunctionComponent, SVGAttributes } from 'react';
+
+export type NetworkGroup = 'mainnets' | 'testnets' | 'other';
+
+export interface Network {
+  name: string;
+  // basePath = /<type>/<subType>, e.g. /xdai/mainnet
+  type: string;
+  subType: string;
+  group: 'mainnets' | 'testnets' | 'other';
+  icon?: FunctionComponent<SVGAttributes<SVGElement>>;
+  isAccountSupported?: boolean;
+  isNewUiSupported?: boolean;
+}

ui/navigation/networkMenu/NetworkMenuLink.tsx

@@ -2,21 +2,24 @@ import { Box, Flex, Icon, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
-import type { NetworkLink } from './types';
+import type { Network } from 'types/networks';
 
 import checkIcon from 'icons/check.svg';
 import placeholderIcon from 'icons/networks/placeholder.svg';
 
 import useColors from './useColors';
 
-interface Props extends NetworkLink {
+interface Props extends Network {
   isActive: boolean;
+  routeName: string;
 }
 
-const NetworkMenuLink = ({ name, pathname, icon, isActive }: Props) => {
+const NetworkMenuLink = ({ name, type, subType, icon, isActive, routeName }: Props) => {
+  const pathName = `/${ type }/${ subType }` + (routeName || '');
+
   // will fix later after we agree on CI/CD workflow
   // const href = isNewUi ? pathname : 'https://blockscout.com' + pathname;
-  const href = pathname;
+  const href = pathName;
   const hasIcon = Boolean(icon);
   const colors = useColors({ hasIcon });
 

ui/navigation/networkMenu/NetworkMenuPopup.tsx

 import { PopoverContent, PopoverBody, Text, Tabs, TabList, TabPanels, TabPanel, Tab, VStack } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { NetworkLink } from './types';
+import type { NetworkGroup } from 'types/networks';
 
-import arbitrumIcon from 'icons/networks/arbitrum.svg';
-import artisIcon from 'icons/networks/artis.svg';
-import ethereumClassicIcon from 'icons/networks/ethereum-classic.svg';
-import ethereumIcon from 'icons/networks/ethereum.svg';
-import gnosisIcon from 'icons/networks/gnosis.svg';
-import optimismIcon from 'icons/networks/optimism.svg';
-import poaSokolIcon from 'icons/networks/poa-sokol.svg';
-import poaIcon from 'icons/networks/poa.svg';
-import rskIcon from 'icons/networks/rsk.svg';
-import useBasePath from 'lib/hooks/useBasePath';
+import { NETWORKS } from 'data/networks';
 
 import NetworkMenuLink from './NetworkMenuLink';
 
-type PopupTab = 'mainnets' | 'testnets' | 'other';
-
-const TABS: Array<PopupTab> = [ 'mainnets', 'testnets', 'other' ];
+const TABS: Array<NetworkGroup> = [ 'mainnets', 'testnets', 'other' ];
 
 const NetworkMenuPopup = () => {
-  const basePath = useBasePath();
-
-  const LINKS: Record<PopupTab, Array<NetworkLink>> = {
-    mainnets: [
-      { name: 'Gnosis Chain', pathname: '/xdai/mainnet', icon: gnosisIcon, isNewUi: true },
-      { name: 'Optimism on Gnosis Chain', pathname: '/xdai/optimism', icon: optimismIcon },
-      { 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 },
-      { name: 'RSK', pathname: '/rsk/mainnet', icon: rskIcon },
-    ],
-    testnets: [
-      { name: 'Gnosis Chain Testnet', pathname: '/xdai/testnet', icon: arbitrumIcon },
-      { name: 'POA Sokol', pathname: '/poa/sokol', icon: poaSokolIcon },
-    ],
-    other: [
-      { name: 'ARTIS Σ1', pathname: '/artis/sigma1', icon: artisIcon },
-      { name: 'LUKSO L14', pathname: '/lukso/l14' },
-    ],
-  };
+  const router = useRouter();
+  const routeName = router.pathname.replace('/[network_type]/[network_sub_type]', '');
 
   return (
     <PopoverContent w="382px">
@@ -55,7 +26,16 @@ 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 } isActive={ basePath === link.pathname }/>) }
+                  { NETWORKS
+                    .filter((network) => network.group === tab)
+                    .map((network) => (
+                      <NetworkMenuLink
+                        key={ network.name }
+                        { ...network }
+                        isActive={ router.query.network_type === network.type && router.query.network_sub_type === network.subType }
+                        routeName={ routeName }
+                      />
+                    )) }
                 </VStack>
               </TabPanel>
             )) }

ui/navigation/networkMenu/types.ts

@@ -4,6 +4,5 @@ export interface NetworkLink {
   pathname: string;
   name: string;
   icon?: FunctionComponent<SVGAttributes<SVGElement>>;
-  iconColor?: string;
   isNewUi?: boolean;
 }