refactoring

lib/csp/getCspPolicy.js

-const getSupportedNetworks = require('../networks/getSupportedNetworks');
+const parseNetworkConfig = require('../networks/parseNetworkConfig');
 
 const KEY_WORDS = {
   BLOB: 'blob:',
@@ -16,7 +16,7 @@ const MAIN_DOMAINS = [ '*.blockscout.com', 'blockscout.com' ];
 const isDev = process.env.NODE_ENV === 'development';
 
 function getNetworksExternalAssets() {
-  const icons = getSupportedNetworks()
+  const icons = parseNetworkConfig()
     .filter(({ icon }) => typeof icon === 'string')
     .map(({ icon }) => new URL(icon));
 

lib/networks.ts → lib/networks/availableNetworks.ts

@@ -9,7 +9,8 @@ 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 getSupportedNetworks from 'lib/networks/getSupportedNetworks';
+
+import parseNetworkConfig from './parseNetworkConfig';
 
 // will change later when we agree how to host network icons
 const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGElement>>> = {
@@ -25,11 +26,13 @@ const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGEleme
   'artis/sigma1': artisIcon,
 };
 
-export const NETWORKS: Array<Network> = (() => {
-  const networksFromConfig: Array<Network> = getSupportedNetworks();
+const NETWORKS: Array<Network> = (() => {
+  const networksFromConfig: Array<Network> = parseNetworkConfig();
   return networksFromConfig.map((network) => ({ ...network, icon: network.icon || ICONS[`${ network.type }/${ network.subType }`] }));
 })();
 
+export default NETWORKS;
+
 // for easy env creation
 // const FOR_CONFIG = [
 //   {
@@ -102,13 +105,3 @@ export const NETWORKS: Array<Network> = (() => {
 //     group: 'other',
 //   },
 // ];
-
-export const ACCOUNT_ROUTES = [ '/watchlist', '/tag_address', '/tag_transaction', '/public_tags_request', '/api_key', '/custom_abi' ];
-
-export function isAccountRoute(route: string) {
-  return ACCOUNT_ROUTES.includes(route);
-}
-
-export function getAvailablePaths() {
-  return NETWORKS.map(({ type, subType }) => ({ params: { network_type: type, network_sub_type: subType } }));
-}

lib/networks/getAvailablePaths.ts

+import NETWORKS from './availableNetworks';
+
+export default function getAvailablePaths() {
+  return NETWORKS.map(({ type, subType }) => ({ params: { network_type: type, network_sub_type: subType } }));
+}

lib/networks/isAccountRoute.ts

+export const ACCOUNT_ROUTES = [ '/watchlist', '/tag_address', '/tag_transaction', '/public_tags_request', '/api_key', '/custom_abi' ];
+
+export default function isAccountRoute(route: string) {
+  return ACCOUNT_ROUTES.includes(route);
+}

lib/networks/getSupportedNetworks.js → lib/networks/parseNetworkConfig.js

-function getSupportedNetworks() {
+// should be CommonJS module since it used for next.config.js
+function parseNetworkConfig() {
   try {
     return JSON.parse(process.env.NEXT_PUBLIC_SUPPORTED_NETWORKS || '[]');
   } catch (error) {
@@ -6,4 +7,4 @@ function getSupportedNetworks() {
   }
 }
 
-module.exports = getSupportedNetworks;
+module.exports = parseNetworkConfig;

pages/[network_type]/[network_sub_type]/account/api_key.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import ApiKeys from 'ui/pages/ApiKeys';
 
 const ApiKeysPage: NextPage = () => {

pages/[network_type]/[network_sub_type]/account/custom_abi.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import CustomAbi from 'ui/pages/CustomAbi';
 
 const CustomAbiPage: NextPage = () => {

pages/[network_type]/[network_sub_type]/account/public_tags_request.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import PublicTags from 'ui/pages/PublicTags';
 
 const PublicTagsPage: NextPage = () => {

pages/[network_type]/[network_sub_type]/account/tag_address.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import PrivateTags from 'ui/pages/PrivateTags';
 
 const AddressTagsPage: NextPage = () => {

pages/[network_type]/[network_sub_type]/account/tag_transaction.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import PrivateTags from 'ui/pages/PrivateTags';
 
 const TransactionTagsPage: NextPage = () => {

pages/[network_type]/[network_sub_type]/account/watchlist.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import WatchList from 'ui/pages/Watchlist';
 
 const WatchListPage: NextPage = () => {

pages/[network_type]/[network_sub_type]/auth/profile.tsx

@@ -2,7 +2,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import Head from 'next/head';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import MyProfile from 'ui/pages/MyProfile';
 
 const MyProfilePage: NextPage = () => {

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

@@ -3,7 +3,7 @@ import type { NextPage, GetStaticPaths } from 'next';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { getAvailablePaths } from 'lib/networks';
+import getAvailablePaths from 'lib/networks/getAvailablePaths';
 import Page from 'ui/shared/Page/Page';
 
 const Home: NextPage = () => {

ui/blocks/networkMenu/NetworkMenuContentDesktop.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { NetworkGroup } from 'types/networks';
 
-import { NETWORKS } from 'lib/networks';
+import NETWORKS from 'lib/networks/availableNetworks';
 
 import NetworkMenuLink from './NetworkMenuLink';
 

ui/blocks/networkMenu/NetworkMenuContentMobile.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 
 import type { NetworkGroup } from 'types/networks';
 
-import { NETWORKS } from 'lib/networks';
+import NETWORKS from 'lib/networks/availableNetworks';
 
 import NetworkMenuLink from './NetworkMenuLink';
 

ui/blocks/networkMenu/NetworkMenuLink.tsx

@@ -6,7 +6,7 @@ import type { Network } from 'types/networks';
 
 import checkIcon from 'icons/check.svg';
 import placeholderIcon from 'icons/networks/placeholder.svg';
-import { isAccountRoute } from 'lib/networks';
+import isAccountRoute from 'lib/networks/isAccountRoute';
 
 import useColors from './useColors';