OP Superchain explorer: aggregated views (#3040)

* refactor widgets on home page

* coming soon placeholder component

* top accounts page

* contract data

* address ERC-20 tokens list

* chain filter for address ERC-20 tokens

* token select for address detailed view

* address details fields

* tokens table

* stats widgets on home page

* chain indicators graph on the home page

* quick search

* search results all tab

* tabs and chain select on search results page

* search results mobile view

* add contract info to search and address details

* add text filter for tokens and search improvements

* load all results inside tab on search results page

* token balance info

* add support for domains in the full search

* Multichain explorer

Resolves #2989

* add envs validator for multichain

* add some tests

* fix search bar on search results page on mobile

* home stats fixes

* fix ts

* optimize amount of queries on address page

* add more contract info on address page

* add enter key hint to search input

* fix tests

* fix test

* update bg.primary css-variable on color theme change

* sitemap for multichain

* txs page: render first tab if blob tab is not available on the chain

* filter out in active chains from chain select on address page and user ops page

* add chain icon to advanced filter table

* fix tooltip on entity with shield

* fix ts

* show contract implementations

* fixes

* add chain icon to all lists

* refactor zetachain chains config type

* use chain id as primary option instead of chain slug

* refactor chain config type for multichain and essential dapps

* refactor chain icon and chain select

* rename chain-slug in chain_slug

* change default radius of chain icon and update screenshots for multichain tests

* change conditions for "isContract" and "isVerified"

* test fixes

* make shield optional for external chain entities

* add chain icon to approvals lists

* add stats page for multichain

* add chain postfix to chart .png and .csv assets name

* fix tests

* sync verified contracts language filter and fix loading state in the search results page

* fix sol2uml diagram and csv export

* regcred from helmfile for review

* link fixes

* fix state for unknown address

* fix incorrect chain in the context during spa transition to the same route on different chain

* add links to stats widgets

* add mixpanel to L2 demo values

* show message of on-demand contract verification

* fix screenshots

---------

Co-authored-by: Nick Zenchik <[email protected]>

Author: tom2drum

configs/app/apis.ts

@@ -19,6 +19,10 @@ export interface ApiPropsFull extends ApiPropsBase {
 
 const generalApi = (() => {
   const apiHost = getEnvValue('NEXT_PUBLIC_API_HOST');
+  if (!apiHost) {
+    return;
+  }
+
   const apiSchema = getEnvValue('NEXT_PUBLIC_API_PROTOCOL') || 'https';
   const apiPort = getEnvValue('NEXT_PUBLIC_API_PORT');
   const apiEndpoint = [
@@ -101,9 +105,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 +118,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 = (() => {
@@ -197,7 +212,7 @@ const zetachainApi = (() => {
 })();
 
 export type Apis = {
-  general: ApiPropsFull;
+  general: ApiPropsFull | undefined;
 } & Partial<Record<Exclude<ApiName, 'general'>, ApiPropsBase>>;
 
 const apis: Apis = Object.freeze({
@@ -207,7 +222,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/app/features/stats.ts

@@ -1,11 +1,12 @@
 import type { Feature } from './types';
 
 import apis from '../apis';
+import opSuperchain from './opSuperchain';
 
 const title = 'Blockchain statistics';
 
 const config: Feature<{}> = (() => {
-  if (apis.stats) {
+  if (apis.stats || opSuperchain.isEnabled) {
     return Object.freeze({
       title,
       isEnabled: true,

configs/envs/.env.optimism_superchain

@@ -8,24 +8,16 @@ 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_HOMEPAGE_CHARTS=['daily_txs', 'coin_price', 'market_cap', 'secondary_coin_price']
@@ -38,7 +30,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']

configs/essential-dapps-chains/index.ts

@@ -1,11 +1,11 @@
-import type { MultichainConfig } from 'types/multichain';
+import type { EssentialDappsChainConfig } from 'types/client/marketplace';
 
 import config from 'configs/app';
 import { isBrowser } from 'toolkit/utils/isBrowser';
 
 const marketplaceFeature = config.features.marketplace;
 
-const essentialDappsChains: () => MultichainConfig | undefined = () => {
+const essentialDappsChains: () => { chains: Array<EssentialDappsChainConfig> } | undefined = () => {
   if (!marketplaceFeature.isEnabled || !marketplaceFeature.essentialDapps) {
     return;
   }

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) {