OP Superchain: local views for chains in the cluster

configs/app/apis.ts

@@ -113,6 +113,7 @@ const multichainApi = (() => {
     return Object.freeze({
       endpoint: apiHost,
       socketEndpoint: `wss://${ url.host }`,
+      basePath: stripTrailingSlash(getEnvValue('NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_BASE_PATH') || ''),
     });
   } catch (error) {
     return;

configs/envs/.env.optimism_superchain

@@ -19,6 +19,7 @@ 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
 
 # TODO @tom2drum remove this
@@ -30,10 +31,10 @@ NEXT_PUBLIC_FOOTER_LINKS=https://raw.githubusercontent.com/blockscout/frontend-c
 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-mainnet-light.svg
-NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism-mainnet-dark.svg
-NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
-NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism.svg
+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
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism-superchain.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/optimism-superchain-dark.svg
 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
@@ -43,4 +44,6 @@ NEXT_PUBLIC_HIDE_INDEXING_ALERT_BLOCKS=true
 NEXT_PUBLIC_HIDE_INDEXING_ALERT_INT_TXS=true
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=false
 NEXT_PUBLIC_IS_TESTNET=true
-NEXT_PUBLIC_USE_NEXT_JS_PROXY=false
+NEXT_PUBLIC_USE_NEXT_JS_PROXY=true
+NEXT_PUBLIC_HAS_USER_OPS=true
+NEXT_PUBLIC_ADVANCED_FILTER_ENABLED=false

configs/envs/.env.pw

@@ -52,6 +52,7 @@ 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_RE_CAPTCHA_APP_SITE_KEY=xxx

deploy/tools/multichain-config-generator/index.ts

@@ -6,13 +6,19 @@ import { Worker } from 'node:worker_threads';
 const currentFilePath = fileURLToPath(import.meta.url);
 const currentDir = dirname(currentFilePath);
 
-const EXPLORER_URLS = [
-  'https://optimism-interop-alpha-0.blockscout.com',
-  'https://optimism-interop-alpha-1.blockscout.com',
-];
-
-function getSlug(url: string) {
-  return new URL(url).hostname.replace('.blockscout.com', '').replace('.k8s-dev', '');
+// const EXPLORER_URLS = [
+//   'https://optimism.blockscout.com',
+//   'https://base.blockscout.com',
+//   'https://arbitrum.blockscout.com',
+//   'https://unichain.blockscout.com',
+//   'https://explorer.redstone.xyz',
+//   'https://matchscan.io'
+//   // 'https://optimism-interop-alpha-0.blockscout.com',
+//   // 'https://optimism-interop-alpha-1.blockscout.com',
+// ];
+
+function getSlug(chainName: string) {
+  return chainName.toLowerCase().replace(/ /g, '-').replace(/[^a-z0-9-]/g, '');
 }
 
 async function computeChainConfig(url: string): Promise<unknown> {
@@ -41,6 +47,22 @@ async function computeChainConfig(url: string): Promise<unknown> {
   });
 }
 
+async function getExplorerUrls() {
+  try {
+    const basePath = (process.env.NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_BASE_PATH ?? '') + '/chains';
+    const url = new URL(basePath, process.env.NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST);
+
+    const response = await fetch(url.toString());
+    const data = await response.json();
+
+    console.log(`💡 Found ${ data.items.length } chains in cluster.`);
+
+    return data.items.map((item: { explorer_url: string }) => item.explorer_url);
+  } catch (error) {
+    return [];
+  }
+}
+
 async function run() {
   try {
     if (!process.env.NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST) {
@@ -49,12 +71,20 @@ async function run() {
     }
 
     console.log('🌀 Generating multichain config...');
-    const configs = await Promise.all(EXPLORER_URLS.map(computeChainConfig));
+
+    const explorerUrls = await getExplorerUrls();
+
+    if (!explorerUrls.length) {
+      throw new Error('No chains found in the cluster.');
+    }
+
+    const configs = await Promise.all(explorerUrls.map(computeChainConfig));
 
     const config = {
       chains: configs.map((config, index) => {
+        const chainName = (config as { chain: { name: string } })?.chain?.name ?? `Chain ${ index + 1 }`;
         return {
-          slug: getSlug(EXPLORER_URLS[index]),
+          slug: getSlug(chainName),
           config,
         };
       }),

deploy/tools/sitemap-generator/next-sitemap.config.js

@@ -172,6 +172,10 @@ module.exports = {
     };
   },
   additionalPaths: async(config) => {
+    if(process.env.NEXT_PUBLIC_OP_SUPERCHAIN_ENABLED === 'true'){
+      return;
+    }
+
     const addresses = fetchResource(
       `${ apiUrl }/addresses`,
       (data) => data.items.map(({ hash }) => `/address/${ hash }`),

lib/api/resources.ts

@@ -10,7 +10,7 @@ import { GENERAL_API_RESOURCES } from './services/general';
 import type { GeneralApiResourceName, GeneralApiResourcePayload, GeneralApiPaginationFilters, GeneralApiPaginationSorting } from './services/general';
 import type { MetadataApiResourceName, MetadataApiResourcePayload } from './services/metadata';
 import { METADATA_API_RESOURCES } from './services/metadata';
-import type { MultichainApiResourceName, MultichainApiResourcePayload } from './services/multichain';
+import type { MultichainApiPaginationFilters, MultichainApiResourceName, MultichainApiResourcePayload } from './services/multichain';
 import { MULTICHAIN_API_RESOURCES } from './services/multichain';
 import type { RewardsApiResourceName, RewardsApiResourcePayload } from './services/rewards';
 import { REWARDS_API_RESOURCES } from './services/rewards';
@@ -91,6 +91,7 @@ export type PaginationFilters<R extends ResourceName> =
 R extends BensApiResourceName ? BensApiPaginationFilters<R> :
 R extends GeneralApiResourceName ? GeneralApiPaginationFilters<R> :
 R extends ContractInfoApiResourceName ? ContractInfoApiPaginationFilters<R> :
+R extends MultichainApiResourceName ? MultichainApiPaginationFilters<R> :
 R extends TacOperationLifecycleApiResourceName ? TacOperationLifecycleApiPaginationFilters<R> :
 never;
 /* eslint-enable @stylistic/indent */

lib/api/services/multichain.ts

@@ -3,15 +3,28 @@ import type * as multichain from '@blockscout/multichain-aggregator-types';
 
 export const MULTICHAIN_API_RESOURCES = {
   interop_messages: {
-    path: '/api/v1/interop/messages',
+    path: '/messages',
+    filterFields: [ 'address' as const ],
     paginated: true,
   },
+  interop_messages_count: {
+    path: '/messages/count',
+    filterFields: [ 'address' as const ],
+  },
 } satisfies Record<string, ApiResource>;
 
 export type MultichainApiResourceName = `multichain:${ keyof typeof MULTICHAIN_API_RESOURCES }`;
 
 /* eslint-disable @stylistic/indent */
 export type MultichainApiResourcePayload<R extends MultichainApiResourceName> =
 R extends 'multichain:interop_messages' ? multichain.ListInteropMessagesResponse :
+R extends 'multichain:interop_messages_count' ? multichain.CountInteropMessagesResponse :
+never;
+/* eslint-enable @stylistic/indent */
+
+/* eslint-disable @stylistic/indent */
+export type MultichainApiPaginationFilters<R extends MultichainApiResourceName> =
+R extends 'multichain:interop_messages' ? Partial<multichain.ListInteropMessagesRequest> :
+R extends 'multichain:interop_messages_count' ? Partial<multichain.CountInteropMessagesRequest> :
 never;
 /* eslint-enable @stylistic/indent */

lib/api/useApiFetch.tsx

@@ -41,7 +41,7 @@ export default function useApiFetch() {
     const url = buildUrl(resourceName, pathParams, queryParams, undefined, chain);
     const withBody = isBodyAllowed(fetchParams?.method);
     const headers = pickBy({
-      'x-endpoint': api.endpoint && apiName !== 'general' && isNeedProxy() ? api.endpoint : undefined,
+      'x-endpoint': isNeedProxy() ? api.endpoint : undefined,
       Authorization: [ 'admin', 'contractInfo' ].includes(apiName) ? apiToken : undefined,
       'x-csrf-token': withBody && csrfToken ? csrfToken : undefined,
       ...resource.headers,

lib/contexts/app.tsx

@@ -1,7 +1,7 @@
 import React, { createContext, useContext } from 'react';
 
 import type { Route } from 'nextjs-routes';
-import type { Props as PageProps } from 'nextjs/getServerSideProps';
+import type { Props as PageProps } from 'nextjs/getServerSideProps/handlers';
 
 type Props = {
   children: React.ReactNode;

lib/contexts/multichain.tsx

@@ -6,29 +6,38 @@ import type { ChainConfig } from 'types/multichain';
 import multichainConfig from 'configs/multichain';
 import getQueryParamString from 'lib/router/getQueryParamString';
 
+export type ContextLevel = 'page' | 'tab';
+
 interface MultichainProviderProps {
   children: React.ReactNode;
   chainSlug?: string;
+  level?: ContextLevel;
 }
 
 export interface TMultichainContext {
   chain: ChainConfig;
+  level?: ContextLevel;
 }
 
 export const MultichainContext = React.createContext<TMultichainContext | null>(null);
 
-export function MultichainProvider({ children, chainSlug: chainSlugProp }: MultichainProviderProps) {
+export function MultichainProvider({ children, chainSlug: chainSlugProp, level: levelProp }: MultichainProviderProps) {
   const router = useRouter();
   const chainSlugQueryParam = router.pathname.includes('chain-slug') ? getQueryParamString(router.query['chain-slug']) : undefined;
 
   const [ chainSlug, setChainSlug ] = React.useState<string | undefined>(chainSlugProp ?? chainSlugQueryParam);
+  const [ level, setLevel ] = React.useState<ContextLevel | undefined>(levelProp);
 
   React.useEffect(() => {
     if (chainSlugProp) {
       setChainSlug(chainSlugProp);
     }
   }, [ chainSlugProp ]);
 
+  React.useEffect(() => {
+    setLevel(levelProp);
+  }, [ levelProp ]);
+
   const chain = React.useMemo(() => {
     const config = multichainConfig();
     if (!config) {
@@ -49,8 +58,9 @@ export function MultichainProvider({ children, chainSlug: chainSlugProp }: Multi
 
     return {
       chain,
+      level,
     };
-  }, [ chain ]);
+  }, [ chain, level ]);
 
   return (
     <MultichainContext.Provider value={ value }>

lib/hooks/useNavItems.tsx

@@ -36,13 +36,13 @@ export default function useNavItems(): ReturnType {
       text: 'Blocks',
       nextRoute: { pathname: '/blocks' as const },
       icon: 'block',
-      isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]',
+      isActive: pathname === '/blocks' || pathname === '/block/[height_or_hash]' || pathname === '/chain/[chain-slug]/block/[height_or_hash]',
     };
     const txs: NavItem | null = {
       text: 'Transactions',
       nextRoute: { pathname: '/txs' as const },
       icon: 'transactions',
-      isActive: pathname === '/txs' || pathname === '/tx/[hash]',
+      isActive: pathname === '/txs' || pathname === '/tx/[hash]' || pathname === '/chain/[chain-slug]/tx/[hash]',
     };
     const operations: NavItem | null = config.features.tac.isEnabled ? {
       text: 'Operations',
@@ -60,7 +60,7 @@ export default function useNavItems(): ReturnType {
       text: 'User operations',
       nextRoute: { pathname: '/ops' as const },
       icon: 'user_op',
-      isActive: pathname === '/ops' || pathname === '/op/[hash]',
+      isActive: pathname === '/ops' || pathname === '/op/[hash]' || pathname === '/chain/[chain-slug]/op/[hash]',
     } : null;
 
     const verifiedContracts: NavItem | null =
@@ -245,7 +245,11 @@ export default function useNavItems(): ReturnType {
     } : null;
 
     const otherNavItems: Array<NavItem> | Array<Array<NavItem>> = [
-      {
+      config.features.opSuperchain.isEnabled ? {
+        text: 'Verify contract',
+        // TODO @tom2drum adjust URL to Vera
+        url: 'https://vera.blockscout.com',
+      } : {
         text: 'Verify contract',
         nextRoute: { pathname: '/contract-verification' as const },
         isActive: pathname.startsWith('/contract-verification'),

lib/metadata/getPageOgType.ts

@@ -62,12 +62,20 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/pools': 'Root page',
   '/pools/[hash]': 'Regular page',
   '/interop-messages': 'Root page',
+  '/operations': 'Root page',
+  '/operation/[id]': 'Regular page',
+
+  // multichain routes
   '/chain/[chain-slug]/accounts/label/[slug]': 'Root page',
-  '/chain/[chain-slug]/address/[hash]': 'Regular page',
+  '/chain/[chain-slug]/advanced-filter': 'Regular page',
   '/chain/[chain-slug]/block/[height_or_hash]': 'Regular page',
+  '/chain/[chain-slug]/block/countdown': 'Regular page',
+  '/chain/[chain-slug]/block/countdown/[height]': 'Regular page',
+  '/chain/[chain-slug]/csv-export': 'Regular page',
+  '/chain/[chain-slug]/op/[hash]': 'Regular page',
+  '/chain/[chain-slug]/token/[hash]': 'Regular page',
+  '/chain/[chain-slug]/token/[hash]/instance/[id]': 'Regular page',
   '/chain/[chain-slug]/tx/[hash]': 'Regular page',
-  '/operations': 'Root page',
-  '/operation/[id]': 'Regular page',
 
   // service routes, added only to make typescript happy
   '/login': 'Regular page',

lib/metadata/templates/description.ts

@@ -65,12 +65,20 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/pools': DEFAULT_TEMPLATE,
   '/pools/[hash]': DEFAULT_TEMPLATE,
   '/interop-messages': DEFAULT_TEMPLATE,
+  '/operations': DEFAULT_TEMPLATE,
+  '/operation/[id]': DEFAULT_TEMPLATE,
+
+  // multichain routes
   '/chain/[chain-slug]/accounts/label/[slug]': DEFAULT_TEMPLATE,
-  '/chain/[chain-slug]/address/[hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain-slug]/advanced-filter': DEFAULT_TEMPLATE,
   '/chain/[chain-slug]/block/[height_or_hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain-slug]/block/countdown': DEFAULT_TEMPLATE,
+  '/chain/[chain-slug]/block/countdown/[height]': DEFAULT_TEMPLATE,
+  '/chain/[chain-slug]/csv-export': DEFAULT_TEMPLATE,
+  '/chain/[chain-slug]/op/[hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain-slug]/token/[hash]': DEFAULT_TEMPLATE,
+  '/chain/[chain-slug]/token/[hash]/instance/[id]': DEFAULT_TEMPLATE,
   '/chain/[chain-slug]/tx/[hash]': DEFAULT_TEMPLATE,
-  '/operations': DEFAULT_TEMPLATE,
-  '/operation/[id]': DEFAULT_TEMPLATE,
 
   // service routes, added only to make typescript happy
   '/login': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -62,12 +62,20 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/pools': '%network_name% DEX pools',
   '/pools/[hash]': '%network_name% pool details',
   '/interop-messages': '%network_name% interop messages',
+  '/operations': '%network_name% operations',
+  '/operation/[id]': '%network_name% operation %id%',
+
+  // multichain routes
   '/chain/[chain-slug]/accounts/label/[slug]': '%network_name% addresses search by label',
-  '/chain/[chain-slug]/address/[hash]': '%network_name% address details for %hash%',
+  '/chain/[chain-slug]/advanced-filter': '%network_name% advanced filter',
   '/chain/[chain-slug]/block/[height_or_hash]': '%network_name% block %height_or_hash% details',
+  '/chain/[chain-slug]/block/countdown': '%network_name% block countdown index',
+  '/chain/[chain-slug]/block/countdown/[height]': '%network_name% block %height% countdown',
+  '/chain/[chain-slug]/csv-export': '%network_name% export data to CSV',
+  '/chain/[chain-slug]/op/[hash]': '%network_name% user operation %hash% details',
+  '/chain/[chain-slug]/token/[hash]': '%network_name% token details',
+  '/chain/[chain-slug]/token/[hash]/instance/[id]': '%network_name% token NFT instance',
   '/chain/[chain-slug]/tx/[hash]': '%network_name% transaction %hash% details',
-  '/operations': '%network_name% operations',
-  '/operation/[id]': '%network_name% operation %id%',
 
   // service routes, added only to make typescript happy
   '/login': '%network_name% login',

lib/mixpanel/getPageType.ts

@@ -60,12 +60,20 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/pools': 'DEX pools',
   '/pools/[hash]': 'Pool details',
   '/interop-messages': 'Interop messages',
+  '/operations': 'Operations',
+  '/operation/[id]': 'Operation details',
+
+  // multichain routes
   '/chain/[chain-slug]/accounts/label/[slug]': 'Chain addresses search by label',
-  '/chain/[chain-slug]/address/[hash]': 'Chain address details',
+  '/chain/[chain-slug]/advanced-filter': 'Chain advanced filter',
   '/chain/[chain-slug]/block/[height_or_hash]': 'Chain block details',
+  '/chain/[chain-slug]/block/countdown': 'Chain block countdown index',
+  '/chain/[chain-slug]/block/countdown/[height]': 'Chain block countdown',
+  '/chain/[chain-slug]/csv-export': 'Chain export data to CSV',
+  '/chain/[chain-slug]/op/[hash]': 'Chain user operation details',
+  '/chain/[chain-slug]/token/[hash]': 'Chain token details',
+  '/chain/[chain-slug]/token/[hash]/instance/[id]': 'Chain token NFT instance',
   '/chain/[chain-slug]/tx/[hash]': 'Chain transaction details',
-  '/operations': 'Operations',
-  '/operation/[id]': 'Operation details',
 
   // service routes, added only to make typescript happy
   '/login': 'Login',

lib/multichain/getChainDataForList.ts

@@ -0,0 +1,6 @@
+import type { TMultichainContext } from 'lib/contexts/multichain';
+
+export function getChainDataForList(multichainContext: TMultichainContext | null) {
+  // for now we only show chain icon in the list with chain selector (not in the entire local pages)
+  return multichainContext?.chain && multichainContext.level !== 'page' ? multichainContext.chain : undefined;
+}