eslint rule for envs

.eslintrc.js

@@ -4,6 +4,7 @@ const RESTRICTED_MODULES = {
     { name: '@chakra-ui/icons', message: 'Using @chakra-ui/icons is prohibited. Please use regular svg-icon instead (see examples in "icons/" folder)' },
   ],
 };
+
 module.exports = {
   env: {
     es6: true,
@@ -202,6 +203,12 @@ module.exports = {
     ],
 
     'no-restricted-imports': [ 'error', RESTRICTED_MODULES ],
+    'no-restricted-properties': [ 2, {
+      object: 'process',
+      property: 'env',
+      // FIXME: restrict the rule only NEXT_PUBLIC variables
+      message: 'Please use configs/app/config.ts to import any NEXT_PUBLIC environment variables. For other properties please disable this rule for a while.',
+    } ],
 
     'react/jsx-key': 'error',
     'react/jsx-no-bind': [ 'error', {
@@ -275,5 +282,12 @@ module.exports = {
         '@typescript-eslint/no-var-requires': 'off',
       },
     },
+    {
+      files: [ 'configs/**/*.js', 'configs/**/*.ts' ],
+      rules: {
+        // for configs allow to consume env variables from process.env directly
+        'no-restricted-properties': [ 0 ],
+      },
+    },
   ],
 };

configs/app/config.ts

+/* eslint-disable no-restricted-properties */
 const env = process.env.VERCEL_ENV || process.env.NODE_ENV;
 const isDev = env === 'development';
 
@@ -16,6 +17,14 @@ const config = Object.freeze({
     nativeTokenAddress: process.env.NEXT_PUBLIC_NETWORK_TOKEN_ADDRESS,
     basePath: '/' + [ process.env.NEXT_PUBLIC_NETWORK_TYPE, process.env.NEXT_PUBLIC_NETWORK_SUBTYPE ].filter(Boolean).join('/'),
   },
+  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,
+  },
+  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',
   protocol: process.env.NEXT_PUBLIC_APP_PROTOCOL,
   host: process.env.NEXT_PUBLIC_APP_HOST,

lib/csp/getCspPolicy.ts

@@ -14,6 +14,8 @@ const KEY_WORDS = {
 };
 
 const MAIN_DOMAINS = [ `*.${ appConfig.host }`, appConfig.host ];
+// eslint-disable-next-line no-restricted-properties
+const REPORT_URI = process.env.SENTRY_CSP_REPORT_URI;
 
 function getNetworksExternalAssets() {
   const icons = featuredNetworks
@@ -100,9 +102,9 @@ function makePolicyMap() {
       KEY_WORDS.NONE,
     ],
 
-    ...(process.env.SENTRY_CSP_REPORT_URI ? {
+    ...(REPORT_URI ? {
       'report-uri': [
-        process.env.SENTRY_CSP_REPORT_URI,
+        REPORT_URI,
       ],
     } : {}),
 

lib/link/routes.ts

@@ -3,6 +3,8 @@ export interface Route {
   crossNetworkNavigation?: boolean; // route will not change when switching networks
 }
 
+import appConfig from 'configs/app/config';
+
 export type RouteName = keyof typeof ROUTES;
 
 const BASE_PATH = '/[network_type]/[network_sub_type]';
@@ -132,6 +134,6 @@ function checkRoutes(route: Record<string, Route>) {
   return route;
 }
 
-if (process.env.NODE_ENV === 'development') {
+if (appConfig.isDev) {
   checkRoutes(ROUTES);
 }

lib/networks/featuredNetworks.ts

+import appConfig from 'configs/app/config';
+
 import type { FeaturedNetwork } from 'types/networks';
 
 import arbitrumIcon from 'icons/networks/icons/arbitrum.svg';
@@ -89,11 +91,9 @@ const ICONS: Record<string, React.FunctionComponent<React.SVGAttributes<SVGEleme
 //   },
 // ]);
 
-const CONFIG_VALUE = process.env.NEXT_PUBLIC_FEATURED_NETWORKS?.replaceAll('\'', '"');
-
 function parseNetworkConfig() {
   try {
-    return JSON.parse(CONFIG_VALUE || '[]');
+    return JSON.parse(appConfig.featuredNetworks || '[]');
   } catch (error) {
     return [];
   }

ui/snippets/navigation/NavFooter.tsx

 import { Box, VStack, Text, Stack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
+import appConfig from 'configs/app/config';
 import React from 'react';
 
 import ghIcon from 'icons/social/git.svg';
@@ -8,14 +9,13 @@ import twIcon from 'icons/social/tweet.svg';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 const SOCIAL_LINKS = [
-  { link: process.env.NEXT_PUBLIC_FOOTER_GITHUB_LINK, icon: ghIcon, label: 'Github link' },
-  { link: process.env.NEXT_PUBLIC_FOOTER_TWITTER_LINK, icon: twIcon, label: 'Twitter link' },
-  { link: process.env.NEXT_PUBLIC_FOOTER_TELEGRAM_LINK, icon: tgIcon, label: 'Telegram link' },
-  { link: process.env.NEXT_PUBLIC_FOOTER_STAKING_LINK, icon: statsIcon, label: 'Staking analytic link' },
+  { link: appConfig.footerLinks.github, icon: ghIcon, label: 'Github link' },
+  { link: appConfig.footerLinks.twitter, icon: twIcon, label: 'Twitter link' },
+  { link: appConfig.footerLinks.telegram, icon: tgIcon, label: 'Telegram link' },
+  { link: appConfig.footerLinks.staking, icon: statsIcon, label: 'Staking analytic link' },
 ].filter(({ link }) => link !== undefined);
 
-const BLOCKSCOUT_VERSION = process.env.NEXT_PUBLIC_BLOCKSCOUT_VERSION;
-const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ BLOCKSCOUT_VERSION }`;
+const VERSION_URL = `https://github.com/blockscout/blockscout/tree/${ appConfig.blockScoutVersion }`;
 
 interface Props {
   isCollapsed?: boolean;
@@ -60,7 +60,7 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
         <Text variant="secondary" mb={ 8 }>
             Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
         </Text>
-        <Text variant="secondary">Version: <Link href={ VERSION_URL } target="_blank">{ BLOCKSCOUT_VERSION }</Link></Text>
+        <Text variant="secondary">Version: <Link href={ VERSION_URL } target="_blank">{ appConfig.blockScoutVersion }</Link></Text>
       </Box>
     </VStack>
   );