OP Superchain: local views for chains in the cluster (#2864)

* update styles for chain widgets on home page

* update latest txs styles and slug creation algorithm

* list of local txs

* list of local blocks

* local view for address internal tx tab

* local view for address coin history

* local view for address logs

* local view for address token transfers

* address details, kind of

* [wip] local view for address contract tab

* user ops views

* chain popover

* csv-export page

* advanced filter page

* block countdown pages

* fixes for contract tab

* refactor address txs and transfers tabs

* refactor getServerSideProps

* internal txs page

* tokens and token transfers pages

* simple tag for address page and details info placeholders

* add chain icon to the local lists

* show creator in contract tab

* OP Superchain: local views for chains in the cluster

Fixes #2827

* highlight current chain in the title of local entities

* tokens nfts tab for address

* allow entity icon to be an image

* adjust cross-chain txs table and add placeholder to home page

* cross-chain txs for address

* fetch multichain config from microservice

* fix skeleton in token transfers table

* tests, pt.1

* wtf with gh

* verified contracts page

* change chain info in block and token page header

* fix some tests

* update styles for token icon with chain logo in header

* fix links and address internal txs tab

* update screenshots

* fix margins for tx info button and chain icon in tx tables

* add some tests

* fix screenshots

Author: tom2drum

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 }`),

icons/pie_chart.svg

@@ -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/resources.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/services/multichain.ts

@@ -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/api/useApiFetch.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;