refine app config

configs/app/config.ts

 /* eslint-disable no-restricted-properties */
+import type { FeaturedNetwork, NetworkExplorer } from 'types/networks';
+
+const getEnvValue = (env: string | undefined) => env?.replaceAll('\'', '"');
+const parseEnvJson = <DataType>(env: string | undefined): DataType | null => {
+  try {
+    return JSON.parse(env || 'null');
+  } catch (error) {
+    return null;
+  }
+};
+
 const env = process.env.VERCEL_ENV || process.env.NODE_ENV;
 const isDev = env === 'development';
+
+const appPort = getEnvValue(process.env.NEXT_PUBLIC_APP_PORT);
+const appSchema = getEnvValue(process.env.NEXT_PUBLIC_APP_PROTOCOL);
+const appHost = getEnvValue(process.env.NEXT_PUBLIC_APP_HOST);
 const baseUrl = [
-  process.env.NEXT_PUBLIC_APP_PROTOCOL?.replaceAll('\'', '"') || 'https',
+  appSchema || 'https',
   '://',
-  process.env.NEXT_PUBLIC_VERCEL_URL || process.env.NEXT_PUBLIC_APP_HOST,
-  process.env.NEXT_PUBLIC_APP_PORT?.replaceAll('\'', '"') ? ':' + process.env.NEXT_PUBLIC_APP_PORT : '',
-].join('');
+  process.env.NEXT_PUBLIC_VERCEL_URL || appHost,
+  appPort && ':' + appPort,
+].filter(Boolean).join('');
+
+const networkType = getEnvValue(process.env.NEXT_PUBLIC_NETWORK_TYPE);
+const networkSubType = getEnvValue(process.env.NEXT_PUBLIC_NETWORK_SUBTYPE);
 
 const DEFAULT_CURRENCY_DECIMALS = 18;
 
@@ -14,40 +32,40 @@ const config = Object.freeze({
   env,
   isDev,
   network: {
-    type: process.env.NEXT_PUBLIC_NETWORK_TYPE,
-    subtype: process.env.NEXT_PUBLIC_NETWORK_SUBTYPE,
-    logo: process.env.NEXT_PUBLIC_NETWORK_LOGO,
-    name: process.env.NEXT_PUBLIC_NETWORK_NAME,
-    id: process.env.NEXT_PUBLIC_NETWORK_ID,
-    shortName: process.env.NEXT_PUBLIC_NETWORK_SHORT_NAME,
+    type: networkType,
+    subtype: networkSubType,
+    logo: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_LOGO),
+    name: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_NAME),
+    id: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_ID),
+    shortName: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_SHORT_NAME),
     currency: {
-      name: process.env.NEXT_PUBLIC_NETWORK_CURRENCY_NAME,
-      symbol: process.env.NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL,
-      decimals: Number(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS) || DEFAULT_CURRENCY_DECIMALS,
+      name: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_NAME),
+      symbol: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL),
+      decimals: Number(getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS)) || DEFAULT_CURRENCY_DECIMALS,
     },
-    assetsPathname: process.env.NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME,
-    nativeTokenAddress: process.env.NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS,
-    basePath: '/' + [ process.env.NEXT_PUBLIC_NETWORK_TYPE, process.env.NEXT_PUBLIC_NETWORK_SUBTYPE ].filter(Boolean).join('/'),
-    explorers: process.env.NEXT_PUBLIC_NETWORK_EXPLORERS?.replaceAll('\'', '"'),
+    assetsPathname: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_ASSETS_PATHNAME),
+    nativeTokenAddress: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS),
+    basePath: '/' + [ networkType, networkSubType ].filter(Boolean).join('/'),
+    explorers: parseEnvJson<Array<NetworkExplorer>>(getEnvValue(process.env.NEXT_PUBLIC_NETWORK_EXPLORERS)) || [],
     verificationType: process.env.NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE || 'mining',
   },
   footerLinks: {
-    github: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK,
-    twitter: process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK,
-    telegram: process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK,
-    staking: process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK,
+    github: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK),
+    twitter: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK),
+    telegram: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK),
+    staking: getEnvValue(process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK),
   },
-  featuredNetworks: process.env.NEXT_PUBLIC_FEATURED_NETWORKS?.replaceAll('\'', '"'),
-  blockScoutVersion: process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION,
-  isAccountSupported: process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED?.replaceAll('\'', '"') === 'true',
-  marketplaceSubmitForm: process.env.NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM,
-  protocol: process.env.NEXT_PUBLIC_APP_PROTOCOL,
-  host: process.env.NEXT_PUBLIC_APP_HOST,
-  port: process.env.NEXT_PUBLIC_APP_PORT,
+  featuredNetworks: parseEnvJson<Array<FeaturedNetwork>>(getEnvValue(process.env.NEXT_PUBLIC_FEATURED_NETWORKS)) || [],
+  blockScoutVersion: getEnvValue(process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION),
+  isAccountSupported: getEnvValue(process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED) === 'true',
+  marketplaceSubmitForm: getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM),
+  protocol: appSchema,
+  host: appHost,
+  port: appPort,
   baseUrl,
   api: {
-    endpoint: process.env.NEXT_PUBLIC_API_ENDPOINT || 'https://blockscout.com',
-    basePath: process.env.NEXT_PUBLIC_API_BASE_PATH || '',
+    endpoint: getEnvValue(process.env.NEXT_PUBLIC_API_ENDPOINT) || 'https://blockscout.com',
+    basePath: getEnvValue(process.env.NEXT_PUBLIC_API_BASE_PATH) || '',
   },
 });
 

lib/networks/featuredNetworks.ts

@@ -90,17 +90,8 @@ const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGEleme
 //   },
 // ]).replaceAll('"', '\'');
 
-function parseNetworkConfig() {
-  try {
-    return JSON.parse(appConfig.featuredNetworks || '[]');
-  } catch (error) {
-    return [];
-  }
-}
-
 const featuredNetworks: Array<FeaturedNetwork> = (() => {
-  const networksFromConfig: Array<FeaturedNetwork> = parseNetworkConfig();
-  return networksFromConfig.map((network) => ({
+  return appConfig.featuredNetworks.map((network) => ({
     ...network,
     icon: network.icon || ICONS[network.basePath],
   }));

lib/networks/networkExplorers.ts

@@ -16,20 +16,11 @@ import appConfig from 'configs/app/config';
 //   },
 // ]).replaceAll('"', '\'');
 
-function parseNetworkExplorers() {
-  try {
-    return JSON.parse(appConfig.network.explorers || '[]');
-  } catch (error) {
-    return [];
-  }
-}
-
 const stripTrailingSlash = (str: string) => str.at(-1) === '/' ? str.slice(0, -1) : str;
 const addLeadingSlash = (str: string) => str.at(0) === '/' ? str : '/' + str;
 
 const networkExplorers: Array<NetworkExplorer> = (() => {
-  const explorers: Array<NetworkExplorer> = parseNetworkExplorers();
-  return explorers.map((explorer) => ({
+  return appConfig.network.explorers.map((explorer) => ({
     ...explorer,
     baseUrl: stripTrailingSlash(explorer.baseUrl),
     paths: _mapValues(explorer.paths, _compose(stripTrailingSlash, addLeadingSlash)),