OP Superchain explorer: aggregated views

configs/app/apis.ts

@@ -101,9 +101,10 @@ const rewardsApi = (() => {
   });
 })();
 
-const multichainApi = (() => {
+const multichainAggregatorApi = (() => {
   const apiHost = getEnvValue('NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST');
-  if (!apiHost) {
+  const cluster = getEnvValue('NEXT_PUBLIC_MULTICHAIN_CLUSTER');
+  if (!apiHost || !cluster) {
     return;
   }
 
@@ -113,12 +114,22 @@ const multichainApi = (() => {
     return Object.freeze({
       endpoint: apiHost,
       socketEndpoint: `wss://${ url.host }`,
-      basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_BASE_PATH') || ''),
+      basePath: `/api/v1/clusters/${ cluster }`,
     });
   } catch (error) {
     return;
   }
+})();
 
+const multichainStatsApi = (() => {
+  const apiHost = getEnvValue('NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST');
+  if (!apiHost) {
+    return;
+  }
+
+  return Object.freeze({
+    endpoint: apiHost,
+  });
 })();
 
 const statsApi = (() => {
@@ -207,7 +218,8 @@ const apis: Apis = Object.freeze({
   clusters: clustersApi,
   contractInfo: contractInfoApi,
   metadata: metadataApi,
-  multichain: multichainApi,
+  multichainAggregator: multichainAggregatorApi,
+  multichainStats: multichainStatsApi,
   rewards: rewardsApi,
   stats: statsApi,
   tac: tacApi,

configs/app/features/opSuperchain.ts

@@ -3,15 +3,22 @@ import type { Feature } from './types';
 import apis from '../apis';
 import { getEnvValue } from '../utils';
 
-const isEnabled = getEnvValue('NEXT_PUBLIC_OP_SUPERCHAIN_ENABLED') === 'true';
+const isEnabled = getEnvValue('NEXT_PUBLIC_MULTICHAIN_ENABLED') === 'true';
+const cluster = getEnvValue('NEXT_PUBLIC_MULTICHAIN_CLUSTER');
 
+// The feature was initially implemented for OP Superchain interop cluster
+// but later the project was abandoned by Optimism team.
+// Now it serves mainly for demo purposes of multichain explorer possible functionalities.
+// So for now I have kept all naming in the code as it was initially done
+// and later it could be changed when specific multichain cluster will be implemented.
 const title = 'OP Superchain interop explorer';
 
-const config: Feature<{ }> = (() => {
-  if (apis.multichain && isEnabled) {
+const config: Feature<{ cluster: string }> = (() => {
+  if (apis.multichainAggregator && apis.multichainStats && isEnabled && cluster) {
     return Object.freeze({
       title,
       isEnabled: true,
+      cluster,
     });
   }
 

configs/envs/.env.optimism_superchain

@@ -8,28 +8,18 @@ NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 
-# Instance ENVs
-# TODO @tom2drum make these envs optional for multichain (adjust docs)
-NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
-NEXT_PUBLIC_API_BASE_PATH=/
-NEXT_PUBLIC_API_HOST=localhost
-NEXT_PUBLIC_API_PORT=3001
-NEXT_PUBLIC_API_PROTOCOL=http
-NEXT_PUBLIC_NETWORK_ID=10
-
-# TODO @tom2drum New ENVs (add to docs)
 NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=https://multichain-aggregator.k8s-dev.blockscout.com
-NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_BASE_PATH=/api/v1/clusters/interop
-NEXT_PUBLIC_OP_SUPERCHAIN_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=http://multichain-search-stats.k8s-dev.blockscout.com
+NEXT_PUBLIC_MULTICHAIN_ENABLED=true
+NEXT_PUBLIC_MULTICHAIN_CLUSTER=interop
 
-# TODO @tom2drum remove this
-SKIP_ENVS_VALIDATION=true
+SKIP_ENVS_VALIDATION=false
 
-NEXT_PUBLIC_API_SPEC_URL=none
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs','coin_price','market_cap']
+NEXT_PUBLIC_HOMEPAGE_STATS=['total_txs','wallet_addresses']
+NEXT_PUBLIC_API_DOCS_TABS=[]
 NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/optimism-mainnet.json
 NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/footer-links/optimism.json
-NEXT_PUBLIC_GRAPHIQL_TRANSACTION=none
-NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap', 'secondary_coin_price']
 NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['linear-gradient(90deg, rgb(232, 52, 53) 0%, rgb(139, 28, 232) 100%)'],'text_color':['rgb(255, 255, 255)']}
 NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism-superchain.svg
 NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism-superchain.svg
@@ -39,7 +29,6 @@ NEXT_PUBLIC_NETWORK_NAME=OP Superchain
 NEXT_PUBLIC_NETWORK_SHORT_NAME=OP Superchain
 NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/optimism-mainnet.png
 NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
-NEXT_PUBLIC_NAVIGATION_HIDDEN_LINKS=['eth_rpc_api','rpc_api']
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=false

configs/envs/.env.pw

@@ -49,10 +49,12 @@ NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=http://localhost:3006
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=http://localhost:3007
 NEXT_PUBLIC_NAME_SERVICE_API_HOST=http://localhost:3008
 NEXT_PUBLIC_REWARDS_SERVICE_API_HOST=http://localhost:3009
-NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=http://localhost:3010
 NEXT_PUBLIC_TAC_OPERATION_LIFECYCLE_API_HOST=http://localhost:3100
 NEXT_PUBLIC_USER_OPS_INDEXER_API_HOST=http://localhost:3110
 NEXT_PUBLIC_ZETACHAIN_SERVICE_API_HOST=http://localhost:3111
+NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=http://localhost:3012
+NEXT_PUBLIC_MULTICHAIN_CLUSTER=test
+NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=http://localhost:3013
 NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=xxx
 NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID=xxx
 NEXT_PUBLIC_VIEWS_ADDRESS_FORMAT=['base16','bech32']

deploy/tools/envs-validator/index.ts

@@ -5,6 +5,7 @@ import type { ValidationError } from 'yup';
 
 import { buildExternalAssetFilePath } from '../../../configs/app/utils';
 import schema from './schema';
+import schemaMultichain from './schema_multichain';
 
 const silent = process.argv.includes('--silent');
 
@@ -51,7 +52,12 @@ async function validateEnvs(appEnvs: Record<string, string>) {
       }
     }
 
-    await schema.validate(appEnvs, { stripUnknown: false, abortEarly: false });
+    if (appEnvs.NEXT_PUBLIC_MULTICHAIN_ENABLED === 'true') {
+      await schemaMultichain.validate(appEnvs, { stripUnknown: false, abortEarly: false });
+    } else {
+      await schema.validate(appEnvs, { stripUnknown: false, abortEarly: false });
+    }
+
     !silent && console.log('👍 All good!');
   } catch (_error) {
     if (typeof _error === 'object' && _error !== null && 'errors' in _error) {