workaround for ENV replacement script (#1212)

* base implementation of client script with envs values

* better ENVs setup for pw tests

* fix tests

.gitignore

@@ -13,6 +13,7 @@
 /.next/
 /out/
 /public/assets/
+/public/envs.js
 
 # production
 /build

Dockerfile

@@ -47,9 +47,9 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
-# Generate .env.production with ENVs placeholders and save build args into .env file
-COPY --chmod=+x ./deploy/scripts/make_envs_template.sh ./
-RUN ./make_envs_template.sh ./docs/ENVS.md
+# Generate .env.registry with ENVs list and save build args into .env file
+COPY --chmod=+x ./deploy/scripts/collect_envs.sh ./
+RUN ./collect_envs.sh ./docs/ENVS.md
 
 # Next.js collects completely anonymous telemetry data about general usage.
 # Learn more here: https://nextjs.org/telemetry
@@ -98,8 +98,9 @@ COPY --from=builder /app/deploy/tools/feature-reporter/index.js ./feature-report
 # Copy scripts
 ## Entripoint
 COPY --chmod=+x ./deploy/scripts/entrypoint.sh .
-## ENV replacer
-COPY --chmod=+x ./deploy/scripts/replace_envs.sh .
+## ENV validator and client script maker
+COPY --chmod=+x ./deploy/scripts/validate_envs.sh .
+COPY --chmod=+x ./deploy/scripts/make_envs_script.sh .
 ## Assets downloader
 COPY --chmod=+x ./deploy/scripts/download_assets.sh .
 ## Favicon generator
@@ -109,7 +110,7 @@ RUN ["chmod", "-R", "777", "./deploy/tools/favicon-generator"]
 RUN ["chmod", "-R", "777", "./public"]
 
 # Copy ENVs files
-COPY --from=builder /app/.env.production .
+COPY --from=builder /app/.env.registry .
 COPY --from=builder /app/.env .
 
 # Automatically leverage output traces to reduce image size

configs/app/api.ts

@@ -2,17 +2,17 @@ import stripTrailingSlash from 'lib/stripTrailingSlash';
 
 import { getEnvValue } from './utils';
 
-const apiHost = getEnvValue(process.env.NEXT_PUBLIC_API_HOST);
-const apiSchema = getEnvValue(process.env.NEXT_PUBLIC_API_PROTOCOL) || 'https';
-const apiPort = getEnvValue(process.env.NEXT_PUBLIC_API_PORT);
+const apiHost = getEnvValue('NEXT_PUBLIC_API_HOST');
+const apiSchema = getEnvValue('NEXT_PUBLIC_API_PROTOCOL') || 'https';
+const apiPort = getEnvValue('NEXT_PUBLIC_API_PORT');
 const apiEndpoint = [
   apiSchema || 'https',
   '://',
   apiHost,
   apiPort && ':' + apiPort,
 ].filter(Boolean).join('');
 
-const socketSchema = getEnvValue(process.env.NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL) || 'wss';
+const socketSchema = getEnvValue('NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL') || 'wss';
 const socketEndpoint = [
   socketSchema,
   '://',
@@ -24,7 +24,7 @@ const api = Object.freeze({
   host: apiHost,
   endpoint: apiEndpoint,
   socket: socketEndpoint,
-  basePath: stripTrailingSlash(getEnvValue(process.env.NEXT_PUBLIC_API_BASE_PATH) || ''),
+  basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_API_BASE_PATH') || ''),
 });
 
 export default api;

configs/app/app.ts

@@ -1,8 +1,8 @@
 import { getEnvValue } from './utils';
 
-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 appPort = getEnvValue('NEXT_PUBLIC_APP_PORT');
+const appSchema = getEnvValue('NEXT_PUBLIC_APP_PROTOCOL');
+const appHost = getEnvValue('NEXT_PUBLIC_APP_HOST');
 const baseUrl = [
   appSchema || 'https',
   '://',
@@ -17,7 +17,7 @@ const app = Object.freeze({
   host: appHost,
   port: appPort,
   baseUrl,
-  useProxy: getEnvValue(process.env.NEXT_PUBLIC_USE_NEXT_JS_PROXY) === 'true',
+  useProxy: getEnvValue('NEXT_PUBLIC_USE_NEXT_JS_PROXY') === 'true',
 });
 
 export default app;

configs/app/chain.ts

@@ -3,20 +3,20 @@ import { getEnvValue } from './utils';
 const DEFAULT_CURRENCY_DECIMALS = 18;
 
 const chain = Object.freeze({
-  id: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_ID),
-  name: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_NAME),
-  shortName: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_SHORT_NAME),
+  id: getEnvValue('NEXT_PUBLIC_NETWORK_ID'),
+  name: getEnvValue('NEXT_PUBLIC_NETWORK_NAME'),
+  shortName: getEnvValue('NEXT_PUBLIC_NETWORK_SHORT_NAME'),
   currency: {
-    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,
+    name: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_NAME'),
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL'),
+    decimals: Number(getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS')) || DEFAULT_CURRENCY_DECIMALS,
   },
   governanceToken: {
-    symbol: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL),
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL'),
   },
-  rpcUrl: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_RPC_URL),
-  isTestnet: getEnvValue(process.env.NEXT_PUBLIC_IS_TESTNET) === 'true',
-  verificationType: getEnvValue(process.env.NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE) || 'mining',
+  rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'),
+  isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true',
+  verificationType: getEnvValue('NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE') || 'mining',
 });
 
 export default chain;

configs/app/features/account.ts

@@ -5,12 +5,12 @@ import stripTrailingSlash from 'lib/stripTrailingSlash';
 import app from '../app';
 import { getEnvValue } from '../utils';
 
-const authUrl = stripTrailingSlash(getEnvValue(process.env.NEXT_PUBLIC_AUTH_URL) || app.baseUrl);
+const authUrl = stripTrailingSlash(getEnvValue('NEXT_PUBLIC_AUTH_URL') || app.baseUrl);
 
 const logoutUrl = (() => {
   try {
-    const envUrl = getEnvValue(process.env.NEXT_PUBLIC_LOGOUT_URL);
-    const auth0ClientId = getEnvValue(process.env.NEXT_PUBLIC_AUTH0_CLIENT_ID);
+    const envUrl = getEnvValue('NEXT_PUBLIC_LOGOUT_URL');
+    const auth0ClientId = getEnvValue('NEXT_PUBLIC_AUTH0_CLIENT_ID');
     const returnUrl = authUrl + '/auth/logout';
 
     if (!envUrl || !auth0ClientId) {
@@ -31,7 +31,7 @@ const title = 'My account';
 
 const config: Feature<{ authUrl: string; logoutUrl: string }> = (() => {
   if (
-    getEnvValue(process.env.NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED) === 'true' &&
+    getEnvValue('NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED') === 'true' &&
     authUrl &&
     logoutUrl
   ) {

configs/app/features/addressVerification.ts

@@ -4,7 +4,7 @@ import { getEnvValue } from '../utils';
 import account from './account';
 import verifiedTokens from './verifiedTokens';
 
-const adminServiceApiHost = getEnvValue(process.env.NEXT_PUBLIC_ADMIN_SERVICE_API_HOST);
+const adminServiceApiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
 
 const title = 'Address verification in "My account"';
 

configs/app/features/adsBanner.ts

@@ -6,7 +6,7 @@ import type { AdBannerProviders } from 'types/client/adProviders';
 import { getEnvValue, parseEnvJson } from '../utils';
 
 const provider: AdBannerProviders = (() => {
-  const envValue = getEnvValue(process.env.NEXT_PUBLIC_AD_BANNER_PROVIDER) as AdBannerProviders;
+  const envValue = getEnvValue('NEXT_PUBLIC_AD_BANNER_PROVIDER') as AdBannerProviders;
 
   return envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'slise';
 })();
@@ -27,8 +27,8 @@ type AdsBannerFeaturePayload = {
 
 const config: Feature<AdsBannerFeaturePayload> = (() => {
   if (provider === 'adbutler') {
-    const desktopConfig = parseEnvJson<AdButlerConfig>(getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP));
-    const mobileConfig = parseEnvJson<AdButlerConfig>(getEnvValue(process.env.NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE));
+    const desktopConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP'));
+    const mobileConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE'));
 
     if (desktopConfig && mobileConfig) {
       return Object.freeze({

configs/app/features/adsText.ts

@@ -5,7 +5,7 @@ import type { AdTextProviders } from 'types/client/adProviders';
 import { getEnvValue } from '../utils';
 
 const provider: AdTextProviders = (() => {
-  const envValue = getEnvValue(process.env.NEXT_PUBLIC_AD_TEXT_PROVIDER) as AdTextProviders;
+  const envValue = getEnvValue('NEXT_PUBLIC_AD_TEXT_PROVIDER') as AdTextProviders;
   return envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'coinzilla';
 })();
 

configs/app/features/beaconChain.ts

@@ -5,14 +5,14 @@ import { getEnvValue } from '../utils';
 const title = 'Beacon chain';
 
 const config: Feature<{ currency: { symbol: string } }> = (() => {
-  if (getEnvValue(process.env.NEXT_PUBLIC_HAS_BEACON_CHAIN) === 'true') {
+  if (getEnvValue('NEXT_PUBLIC_HAS_BEACON_CHAIN') === 'true') {
     return Object.freeze({
       title,
       isEnabled: true,
       currency: {
         symbol:
-          getEnvValue(process.env.NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL) ||
-          getEnvValue(process.env.NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL) ||
+          getEnvValue('NEXT_PUBLIC_BEACON_CHAIN_CURRENCY_SYMBOL') ||
+          getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL') ||
           '', // maybe we need some other default value here
       },
     });

configs/app/features/blockchainInteraction.ts

@@ -3,7 +3,7 @@ import type { Feature } from './types';
 import chain from '../chain';
 import { getEnvValue } from '../utils';
 
-const walletConnectProjectId = getEnvValue(process.env.NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID);
+const walletConnectProjectId = getEnvValue('NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID');
 
 const title = 'Blockchain interaction (writing to contract, etc.)';
 

configs/app/features/googleAnalytics.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const propertyId = getEnvValue(process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID);
+const propertyId = getEnvValue('NEXT_PUBLIC_GOOGLE_ANALYTICS_PROPERTY_ID');
 
 const title = 'Google analytics';
 

configs/app/features/graphqlApiDocs.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const defaultTxHash = getEnvValue(process.env.NEXT_PUBLIC_GRAPHIQL_TRANSACTION);
+const defaultTxHash = getEnvValue('NEXT_PUBLIC_GRAPHIQL_TRANSACTION');
 
 const title = 'GraphQL API documentation';
 

configs/app/features/marketplace.ts

@@ -4,8 +4,8 @@ import chain from '../chain';
 import { getEnvValue, getExternalAssetFilePath } from '../utils';
 
 // config file will be downloaded at run-time and saved in the public folder
-const configUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL', process.env.NEXT_PUBLIC_MARKETPLACE_CONFIG_URL);
-const submitFormUrl = getEnvValue(process.env.NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM);
+const configUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CONFIG_URL');
+const submitFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM');
 
 const title = 'Marketplace';
 

configs/app/features/mixpanel.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const projectToken = getEnvValue(process.env.NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN);
+const projectToken = getEnvValue('NEXT_PUBLIC_MIXPANEL_PROJECT_TOKEN');
 
 const title = 'Mixpanel analytics';
 

configs/app/features/restApiDocs.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const specUrl = getEnvValue(process.env.NEXT_PUBLIC_API_SPEC_URL) || `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml`;
+const specUrl = getEnvValue('NEXT_PUBLIC_API_SPEC_URL') || `https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml`;
 
 const title = 'REST API documentation';
 

configs/app/features/rollup.ts

@@ -5,11 +5,11 @@ import { getEnvValue } from '../utils';
 const title = 'Rollup (L2) chain';
 
 const config: Feature<{ L1BaseUrl: string; withdrawalUrl: string }> = (() => {
-  const L1BaseUrl = getEnvValue(process.env.NEXT_PUBLIC_L1_BASE_URL);
-  const withdrawalUrl = getEnvValue(process.env.NEXT_PUBLIC_L2_WITHDRAWAL_URL);
+  const L1BaseUrl = getEnvValue('NEXT_PUBLIC_L1_BASE_URL');
+  const withdrawalUrl = getEnvValue('NEXT_PUBLIC_L2_WITHDRAWAL_URL');
 
   if (
-    getEnvValue(process.env.NEXT_PUBLIC_IS_L2_NETWORK) === 'true' &&
+    getEnvValue('NEXT_PUBLIC_IS_L2_NETWORK') === 'true' &&
     L1BaseUrl &&
     withdrawalUrl
   ) {

configs/app/features/sentry.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const dsn = getEnvValue(process.env.NEXT_PUBLIC_SENTRY_DSN);
+const dsn = getEnvValue('NEXT_PUBLIC_SENTRY_DSN');
 
 const title = 'Sentry error monitoring';
 
@@ -12,9 +12,9 @@ const config: Feature<{ dsn: string; environment: string | undefined; cspReportU
       title,
       isEnabled: true,
       dsn,
-      environment: getEnvValue(process.env.NEXT_PUBLIC_APP_ENV) || getEnvValue(process.env.NODE_ENV),
-      cspReportUrl: getEnvValue(process.env.SENTRY_CSP_REPORT_URI),
-      instance: getEnvValue(process.env.NEXT_PUBLIC_APP_INSTANCE),
+      environment: getEnvValue('NEXT_PUBLIC_APP_ENV') || getEnvValue('NODE_ENV'),
+      cspReportUrl: getEnvValue('SENTRY_CSP_REPORT_URI'),
+      instance: getEnvValue('NEXT_PUBLIC_APP_INSTANCE'),
     });
   }
 

configs/app/features/sol2uml.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const apiEndpoint = getEnvValue(process.env.NEXT_PUBLIC_VISUALIZE_API_HOST);
+const apiEndpoint = getEnvValue('NEXT_PUBLIC_VISUALIZE_API_HOST');
 
 const title = 'Solidity to UML diagrams';
 

configs/app/features/stats.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const apiEndpoint = getEnvValue(process.env.NEXT_PUBLIC_STATS_API_HOST);
+const apiEndpoint = getEnvValue('NEXT_PUBLIC_STATS_API_HOST');
 
 const title = 'Blockchain statistics';
 

configs/app/features/verifiedTokens.ts

@@ -2,7 +2,7 @@ import type { Feature } from './types';
 
 import { getEnvValue } from '../utils';
 
-const contractInfoApiHost = getEnvValue(process.env.NEXT_PUBLIC_CONTRACT_INFO_API_HOST);
+const contractInfoApiHost = getEnvValue('NEXT_PUBLIC_CONTRACT_INFO_API_HOST');
 
 const title = 'Verified tokens info';
 

configs/app/features/web3Wallet.ts

@@ -5,7 +5,7 @@ import type { WalletType } from 'types/client/wallets';
 import { getEnvValue, parseEnvJson } from '../utils';
 
 const wallets = ((): Array<WalletType> | undefined => {
-  const envValue = getEnvValue(process.env.NEXT_PUBLIC_WEB3_WALLETS);
+  const envValue = getEnvValue('NEXT_PUBLIC_WEB3_WALLETS');
   if (envValue === 'none') {
     return;
   }
@@ -28,7 +28,7 @@ const config: Feature<{ wallets: Array<WalletType>; addToken: { isDisabled: bool
       isEnabled: true,
       wallets,
       addToken: {
-        isDisabled: getEnvValue(process.env.NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET) === 'true',
+        isDisabled: getEnvValue('NEXT_PUBLIC_WEB3_DISABLE_ADD_TOKEN_TO_WALLET') === 'true',
       },
       addNetwork: {},
     });

configs/app/meta.ts

@@ -4,10 +4,10 @@ import { getEnvValue, getExternalAssetFilePath } from './utils';
 const defaultImageUrl = app.baseUrl + '/static/og_placeholder.png';
 
 const meta = Object.freeze({
-  promoteBlockscoutInTitle: getEnvValue(process.env.NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE) || 'true',
+  promoteBlockscoutInTitle: getEnvValue('NEXT_PUBLIC_PROMOTE_BLOCKSCOUT_IN_TITLE') || 'true',
   og: {
-    description: getEnvValue(process.env.NEXT_PUBLIC_OG_DESCRIPTION) || '',
-    imageUrl: getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL', process.env.NEXT_PUBLIC_OG_IMAGE_URL) || defaultImageUrl,
+    description: getEnvValue('NEXT_PUBLIC_OG_DESCRIPTION') || '',
+    imageUrl: getExternalAssetFilePath('NEXT_PUBLIC_OG_IMAGE_URL') || defaultImageUrl,
   },
 });
 

configs/app/services.ts

@@ -2,6 +2,6 @@ import { getEnvValue } from './utils';
 
 export default Object.freeze({
   reCaptcha: {
-    siteKey: getEnvValue(process.env.NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY),
+    siteKey: getEnvValue('NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY'),
   },
 });