update blockscout frontend

.gitignore

@@ -25,6 +25,7 @@
 .DS_Store
 *.pem
 .tools
+grafana
 
 # debug
 npm-debug.log*

.vscode/tasks.json

@@ -338,15 +338,19 @@
             "options": [
               "main",
               "main.L2",
-              "poa_core",
-              "eth_goerli",
-              "sepolia",
+              "localhost",
+              "base",
+              "gnosis",
               "eth",
-              "rootstock",
+              "eth_goerli",
+              "eth_sepolia",
+              "optimism",
+              "optimism_sepolia",
               "polygon",
+              "rootstock",
+              "stability",
               "zkevm",
-              "gnosis",
-              "localhost",
+              "zksync",
             ],
             "default": "main"
         },

Dockerfile

@@ -3,7 +3,8 @@
 # *****************************
 FROM node:20.11.0-alpine AS deps
 # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
-RUN apk add --no-cache libc6-compat
+RUN apk add --no-cache libc6-compat python3 make g++
+RUN ln -sf /usr/bin/python3 /usr/bin/python
 
 ### APP
 # Install dependencies
@@ -118,6 +119,11 @@ RUN ["chmod", "-R", "777", "./public"]
 COPY --from=builder /app/.env.registry .
 COPY --from=builder /app/.env .
 
+# Copy ENVs presets
+ARG ENVS_PRESET
+ENV ENVS_PRESET=$ENVS_PRESET
+COPY ./configs/envs ./configs/envs
+
 # Automatically leverage output traces to reduce image size
 # https://nextjs.org/docs/advanced-features/output-file-tracing
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./

RELEASE_NOTES.md

@@ -0,0 +1,33 @@
+## 🚀 New Features
+-  Description of the new feature 1.
+-  Description of the new feature 2.
+
+## 🐛 Bug Fixes
+-  Description of the bug fix 1.
+-  Description of the bug fix 2.
+
+## ⚡ Performance Improvements
+-  Description of the performance improvement 1.
+-  Description of the performance improvement 2.
+
+## 📦 Dependencies updates
+-  Updated dependency: PackageName 1 to version x.x.x.
+-  Updated dependency: PackageName 2 to version x.x.x.
+
+## ✨ Other Changes
+- Another minor change 1.
+- Another minor change 2.
+
+## 🚨 Changes in ENV variables
+-  Added new environment variable: ENV_VARIABLE_NAME with value.
+-  Updated existing environment variable: ENV_VARIABLE_NAME to new value.
+
+**Full list of the ENV variables**: [v1.2.3](https://github.com/blockscout/frontend/blob/v1.2.3/docs/ENVS.md)
+
+## 🦄 New Contributors
+- @contributor1 made their first contribution in https://github.com/blockscout/frontend/pull/1
+- @contributor2 made their first contribution in https://github.com/blockscout/frontend/pull/2
+
+---
+
+**Full Changelog**: https://github.com/blockscout/frontend/compare/v1.2.2...v1.2.3

configs/app/chain.ts

@@ -12,8 +12,8 @@ const chain = Object.freeze({
     symbol: getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL'),
     decimals: Number(getEnvValue('NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS')) || DEFAULT_CURRENCY_DECIMALS,
   },
-  governanceToken: {
-    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_GOVERNANCE_TOKEN_SYMBOL'),
+  secondaryCoin: {
+    symbol: getEnvValue('NEXT_PUBLIC_NETWORK_SECONDARY_COIN_SYMBOL'),
   },
   rpcUrl: getEnvValue('NEXT_PUBLIC_NETWORK_RPC_URL'),
   isTestnet: getEnvValue('NEXT_PUBLIC_IS_TESTNET') === 'true',

configs/app/features/addressMetadata.ts

@@ -0,0 +1,27 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const apiHost = getEnvValue('NEXT_PUBLIC_METADATA_SERVICE_API_HOST');
+
+const title = 'Address metadata';
+
+const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() => {
+  if (apiHost) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+      api: {
+        endpoint: apiHost,
+        basePath: '',
+      },
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/adsBanner.ts

@@ -1,7 +1,7 @@
 import type { Feature } from './types';
 import type { AdButlerConfig } from 'types/client/adButlerConfig';
 import { SUPPORTED_AD_BANNER_PROVIDERS } from 'types/client/adProviders';
-import type { AdBannerProviders } from 'types/client/adProviders';
+import type { AdBannerProviders, AdBannerAdditionalProviders } from 'types/client/adProviders';
 
 import { getEnvValue, parseEnvJson } from '../utils';
 
@@ -11,6 +11,8 @@ const provider: AdBannerProviders = (() => {
   return envValue && SUPPORTED_AD_BANNER_PROVIDERS.includes(envValue) ? envValue : 'slise';
 })();
 
+const additionalProvider = getEnvValue('NEXT_PUBLIC_AD_BANNER_ADDITIONAL_PROVIDER') as AdBannerAdditionalProviders;
+
 const title = 'Banner ads';
 
 type AdsBannerFeaturePayload = {
@@ -23,6 +25,15 @@ type AdsBannerFeaturePayload = {
       mobile: AdButlerConfig;
     };
   };
+} | {
+  provider: Exclude<AdBannerProviders, 'adbutler' | 'none'>;
+  additionalProvider: 'adbutler';
+  adButler: {
+    config: {
+      desktop: AdButlerConfig;
+      mobile: AdButlerConfig;
+    };
+  };
 }
 
 const config: Feature<AdsBannerFeaturePayload> = (() => {
@@ -44,6 +55,24 @@ const config: Feature<AdsBannerFeaturePayload> = (() => {
       });
     }
   } else if (provider !== 'none') {
+
+    if (additionalProvider === 'adbutler') {
+      const desktopConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP'));
+      const mobileConfig = parseEnvJson<AdButlerConfig>(getEnvValue('NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE'));
+
+      return Object.freeze({
+        title,
+        isEnabled: true,
+        provider,
+        additionalProvider,
+        adButler: {
+          config: {
+            desktop: desktopConfig,
+            mobile: mobileConfig,
+          },
+        },
+      });
+    }
     return Object.freeze({
       title,
       isEnabled: true,

configs/app/features/dataAvailability.ts

@@ -0,0 +1,21 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'Data availability';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_DATA_AVAILABILITY_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/index.ts

@@ -1,16 +1,19 @@
 export { default as account } from './account';
 export { default as addressVerification } from './addressVerification';
+export { default as addressMetadata } from './addressMetadata';
 export { default as adsBanner } from './adsBanner';
 export { default as adsText } from './adsText';
 export { default as beaconChain } from './beaconChain';
 export { default as bridgedTokens } from './bridgedTokens';
 export { default as blockchainInteraction } from './blockchainInteraction';
 export { default as csvExport } from './csvExport';
+export { default as dataAvailability } from './dataAvailability';
 export { default as gasTracker } from './gasTracker';
 export { default as googleAnalytics } from './googleAnalytics';
 export { default as graphqlApiDocs } from './graphqlApiDocs';
 export { default as growthBook } from './growthBook';
 export { default as marketplace } from './marketplace';
+export { default as metasuites } from './metasuites';
 export { default as mixpanel } from './mixpanel';
 export { default as nameService } from './nameService';
 export { default as restApiDocs } from './restApiDocs';

configs/app/features/marketplace.ts

@@ -10,35 +10,53 @@ const submitFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM');
 const suggestIdeasFormUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM');
 const categoriesUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL');
 const adminServiceApiHost = getEnvValue('NEXT_PUBLIC_ADMIN_SERVICE_API_HOST');
+const securityReportsUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_SECURITY_REPORTS_URL');
+const featuredApp = getEnvValue('NEXT_PUBLIC_MARKETPLACE_FEATURED_APP');
+const bannerContentUrl = getExternalAssetFilePath('NEXT_PUBLIC_MARKETPLACE_BANNER_CONTENT_URL');
+const bannerLinkUrl = getEnvValue('NEXT_PUBLIC_MARKETPLACE_BANNER_LINK_URL');
 
 const title = 'Marketplace';
 
 const config: Feature<(
   { configUrl: string } |
   { api: { endpoint: string; basePath: string } }
-) & { submitFormUrl: string; categoriesUrl: string | undefined; suggestIdeasFormUrl: string | undefined }
-> = (() => {
+) & {
+  submitFormUrl: string;
+  categoriesUrl: string | undefined;
+  suggestIdeasFormUrl: string | undefined;
+  securityReportsUrl: string | undefined;
+  featuredApp: string | undefined;
+  banner: { contentUrl: string; linkUrl: string } | undefined;
+}> = (() => {
   if (enabled === 'true' && chain.rpcUrl && submitFormUrl) {
+    const props = {
+      submitFormUrl,
+      categoriesUrl,
+      suggestIdeasFormUrl,
+      securityReportsUrl,
+      featuredApp,
+      banner: bannerContentUrl && bannerLinkUrl ? {
+        contentUrl: bannerContentUrl,
+        linkUrl: bannerLinkUrl,
+      } : undefined,
+    };
+
     if (configUrl) {
       return Object.freeze({
         title,
         isEnabled: true,
         configUrl,
-        submitFormUrl,
-        categoriesUrl,
-        suggestIdeasFormUrl,
+        ...props,
       });
     } else if (adminServiceApiHost) {
       return Object.freeze({
         title,
         isEnabled: true,
-        submitFormUrl,
-        categoriesUrl,
-        suggestIdeasFormUrl,
         api: {
           endpoint: adminServiceApiHost,
           basePath: '',
         },
+        ...props,
       });
     }
   }

configs/app/features/metasuites.ts

@@ -0,0 +1,21 @@
+import type { Feature } from './types';
+
+import { getEnvValue } from '../utils';
+
+const title = 'MetaSuites extension';
+
+const config: Feature<{ isEnabled: true }> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_METASUITES_ENABLED') === 'true') {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/safe.ts

@@ -1,35 +1,14 @@
 import type { Feature } from './types';
 
-import chain from '../chain';
-
-// https://docs.safe.global/safe-core-api/available-services
-const SAFE_API_MAP: Record<string, string> = {
-  '42161': 'https://safe-transaction-arbitrum.safe.global',
-  '1313161554': 'https://safe-transaction-aurora.safe.global',
-  '43114': 'https://safe-transaction-avalanche.safe.global',
-  '8453': 'https://safe-transaction-base.safe.global',
-  '84531': 'https://safe-transaction-base-testnet.safe.global',
-  '56': 'https://safe-transaction-bsc.safe.global',
-  '42220': 'https://safe-transaction-celo.safe.global',
-  '1': 'https://safe-transaction-mainnet.safe.global',
-  '100': 'https://safe-transaction-gnosis-chain.safe.global',
-  '5': 'https://safe-transaction-goerli.safe.global',
-  '10': 'https://safe-transaction-optimism.safe.global',
-  '137': 'https://safe-transaction-polygon.safe.global',
-};
+import { getEnvValue } from '../utils';
 
 function getApiUrl(): string | undefined {
-  if (!chain.id) {
-    return;
-  }
-
-  const apiHost = SAFE_API_MAP[chain.id];
-
-  if (!apiHost) {
+  try {
+    const envValue = getEnvValue('NEXT_PUBLIC_SAFE_TX_SERVICE_URL');
+    return new URL('/api/v1/safes', envValue).toString();
+  } catch (error) {
     return;
   }
-
-  return `${ apiHost }/api/v1/safes/`;
 }
 
 const title = 'Safe address tags';

configs/app/features/sol2uml.ts

@@ -1,5 +1,7 @@
 import type { Feature } from './types';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const apiEndpoint = getEnvValue('NEXT_PUBLIC_VISUALIZE_API_HOST');
@@ -13,7 +15,7 @@ const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() =>
       isEnabled: true,
       api: {
         endpoint: apiEndpoint,
-        basePath: '',
+        basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_VISUALIZE_API_BASE_PATH') || ''),
       },
     });
   }

configs/app/features/stats.ts

@@ -1,5 +1,7 @@
 import type { Feature } from './types';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const apiEndpoint = getEnvValue('NEXT_PUBLIC_STATS_API_HOST');
@@ -13,7 +15,7 @@ const config: Feature<{ api: { endpoint: string; basePath: string } }> = (() =>
       isEnabled: true,
       api: {
         endpoint: apiEndpoint,
-        basePath: '',
+        basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_STATS_API_BASE_PATH') || ''),
       },
     });
   }