Add cross-chain transaction tracking and visualization

.github/workflows/deploy-review-l2.yml

@@ -24,6 +24,7 @@ on:
             - immutable
             - mega_eth
             - neon_devnet
+            - numine
             - optimism
             - optimism_sepolia
             - optimism_superchain

.github/workflows/deploy-review.yml

@@ -26,6 +26,7 @@ on:
             - mega_eth
             - mekong
             - neon_devnet
+            - numine
             - optimism
             - optimism_sepolia
             - optimism_superchain

.vscode/tasks.json

@@ -355,6 +355,7 @@
               "mega_eth",
               "mekong",
               "neon_devnet",
+              "numine",
               "optimism",
               "optimism_interop_0",
               "optimism_sepolia",

configs/app/apis.ts

@@ -83,6 +83,17 @@ const contractInfoApi = (() => {
   });
 })();
 
+const interchainIndexerApi = (() => {
+  const apiHost = getEnvValue('NEXT_PUBLIC_INTERCHAIN_INDEXER_API_HOST');
+  if (!apiHost) {
+    return;
+  }
+
+  return Object.freeze({
+    endpoint: apiHost,
+  });
+})();
+
 const metadataApi = (() => {
   const apiHost = getEnvValue('NEXT_PUBLIC_METADATA_SERVICE_API_HOST');
   if (!apiHost) {
@@ -221,6 +232,7 @@ const apis: Apis = Object.freeze({
   bens: bensApi,
   clusters: clustersApi,
   contractInfo: contractInfoApi,
+  interchainIndexer: interchainIndexerApi,
   metadata: metadataApi,
   multichainAggregator: multichainAggregatorApi,
   multichainStats: multichainStatsApi,

configs/app/features/crossChainTxs.ts

@@ -0,0 +1,22 @@
+import type { Feature } from './types';
+
+import apis from '../apis';
+import { getEnvValue } from '../utils';
+
+const title = 'Cross-chain transactions';
+
+const config: Feature<{}> = (() => {
+  if (getEnvValue('NEXT_PUBLIC_CROSS_CHAIN_TXS_ENABLED') === 'true' && apis.interchainIndexer) {
+    return Object.freeze({
+      title,
+      isEnabled: true,
+    });
+  }
+
+  return Object.freeze({
+    title,
+    isEnabled: false,
+  });
+})();
+
+export default config;

configs/app/features/index.ts

@@ -10,6 +10,7 @@ export { default as beaconChain } from './beaconChain';
 export { default as bridgedTokens } from './bridgedTokens';
 export { default as blockchainInteraction } from './blockchainInteraction';
 export { default as celo } from './celo';
+export { default as crossChainTxs } from './crossChainTxs';
 export { default as csvExport } from './csvExport';
 export { default as dataAvailability } from './dataAvailability';
 export { default as deFiDropdown } from './deFiDropdown';

configs/envs/.env.numine

@@ -0,0 +1,40 @@
+# Set of ENVs for Numine network explorer
+# https://numine.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=numine"
+
+# Local ENVs
+NEXT_PUBLIC_APP_PROTOCOL=http
+NEXT_PUBLIC_APP_HOST=localhost
+NEXT_PUBLIC_APP_PORT=3000
+NEXT_PUBLIC_APP_ENV=development
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
+
+NEXT_PUBLIC_CROSS_CHAIN_TXS_ENABLED=true
+NEXT_PUBLIC_INTERCHAIN_INDEXER_API_HOST=https://interchain-indexer.k8s-dev.blockscout.com
+
+# Instance ENVs
+NEXT_PUBLIC_AD_BANNER_ENABLE_SPECIFY=true
+NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS=['talentprotocol','drops','blockscoutbadges','gitpoap','efp','etherscore','webacy','humanpassport','trustblock','smartmuv','humanode']
+NEXT_PUBLIC_ADDRESS_3RD_PARTY_WIDGETS_CONFIG_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/widgets/config.json
+NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=numine.blockscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.com
+NEXT_PUBLIC_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/sherblockHolmesBadge
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_MIXPANEL_CONFIG_OVERRIDES={"record_sessions_percent": 0.5,"record_heatmap_data": true}
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=NUMINE
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=NUMINE
+NEXT_PUBLIC_NETWORK_ID=8021
+NEXT_PUBLIC_NETWORK_NAME=Numine
+NEXT_PUBLIC_NETWORK_RPC_URL=https://subnets.avax.network/numi/mainnet/rpc
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_PUZZLE_GAME_BADGE_CLAIM_LINK=https://badges.blockscout.com/mint/capyPuzzleBadge
+NEXT_PUBLIC_STATS_API_BASE_PATH=/stats-service
+NEXT_PUBLIC_STATS_API_HOST=https://numine.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VIEWS_TOKEN_SCAM_TOGGLE_ENABLED=true
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com

configs/envs/.env.pw

@@ -53,8 +53,9 @@ 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_INTERCHAIN_INDEXER_API_HOST=http://localhost:3014
+NEXT_PUBLIC_MULTICHAIN_CLUSTER=test
 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/schema.ts

@@ -164,6 +164,7 @@ const schema = yup
   .concat(featuresSchemas.apiDocsSchema)
   .concat(featuresSchemas.beaconChainSchema)
   .concat(featuresSchemas.bridgedTokensSchema)
+  .concat(featuresSchemas.crossChainTxsSchema)
   .concat(featuresSchemas.defiDropdownSchema)
   .concat(featuresSchemas.highlightsConfigSchema)
   .concat(featuresSchemas.marketplaceSchema)

deploy/tools/envs-validator/schemas/features/crossChainTxs.ts

@@ -0,0 +1,19 @@
+import * as yup from 'yup';
+import { urlTest } from '../../utils';
+
+export const crossChainTxsSchema = yup
+  .object()
+  .shape({
+    NEXT_PUBLIC_CROSS_CHAIN_TXS_ENABLED: yup.boolean(),
+    NEXT_PUBLIC_INTERCHAIN_INDEXER_API_HOST: yup
+      .string()
+      .when('NEXT_PUBLIC_CROSS_CHAIN_TXS_ENABLED', {
+        is: (value: boolean) => value,
+        then: (schema) => schema.test(urlTest),
+        otherwise: (schema) => schema.test(
+          'not-exist',
+          'NEXT_PUBLIC_INTERCHAIN_INDEXER_API_HOST can only be used with NEXT_PUBLIC_CROSS_CHAIN_TXS_ENABLED',
+          value => value === undefined,
+        ),
+      }),
+  });

deploy/tools/envs-validator/schemas/features/index.ts

@@ -3,6 +3,7 @@ export * from './ads';
 export * from './apiDocs';
 export * from './beaconChain';
 export * from './bridgedToken';
+export * from './crossChainTxs';
 export * from './defiDropdown';
 export * from './highlights';
 export * from './marketplace';

deploy/tools/envs-validator/test/.env.cross_chain_txs

@@ -0,0 +1,2 @@
+NEXT_PUBLIC_CROSS_CHAIN_TXS_ENABLED=true
+NEXT_PUBLIC_INTERCHAIN_INDEXER_API_HOST=https://api.example.com

deploy/tools/envs-validator/test/assets/configs/cross_chain_txs_config.json

@@ -0,0 +1,18 @@
+[
+    {
+        "id": "8021",
+        "name": "Numine",
+        "explorer_url": "https://example.com/blockchain/numine",
+        "route_templates": {
+            "tx": "/transaction/{hash}",
+            "address": "/wallet/{hash}",
+            "token": "/address/{hash}"
+        }
+      },
+      {
+        "id": "43114",
+        "name": "C-Chain",
+        "logo": "https://example.com/logo.svg",
+        "explorer_url": "https://example.com/blockchain/c"
+      }
+]

docs/ENVS.md

@@ -1070,6 +1070,18 @@ This feature enables the application to act as an explorer of multiple blockchai
 | NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST | `string` | Multichain aggregator API service host | Required | - | `https://multichain-aggregator.k8s-dev.blockscout.com` | v2.5.0+ |
 | NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST | `string` | Multichain statistics API service host | Required | - | `http://multichain-search-stats.k8s-dev.blockscout.com` | v2.5.0+ |
 
+ 
+
+### Cross-chain transactions
+
+This feature enables cross-chain transaction tracking and visualization, allowing users to view transactions that span multiple blockchains. It provides detailed information about cross-chain operations and links to related transactions on different chains.
+
+| Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
+| --- | --- | --- | --- | --- | --- | --- |
+| NEXT_PUBLIC_CROSS_CHAIN_TXS_ENABLED | `boolean` | The flag that enables the feature | Required | - | `true` | upcoming |
+| NEXT_PUBLIC_INTERCHAIN_INDEXER_API_HOST | `string` | Interchain indexer API service host used to fetch cross-chain transaction data and metadata | Required | - | `https://interchain-indexer.k8s-dev.blockscout.com` | upcoming |
+
+
  
 
 ### Badge claim link

lib/api/resources.ts

@@ -10,6 +10,12 @@ import { CONTRACT_INFO_API_RESOURCES } from './services/contractInfo';
 import type { ContractInfoApiPaginationFilters, ContractInfoApiResourceName, ContractInfoApiResourcePayload } from './services/contractInfo';
 import { GENERAL_API_RESOURCES } from './services/general';
 import type { GeneralApiResourceName, GeneralApiResourcePayload, GeneralApiPaginationFilters, GeneralApiPaginationSorting } from './services/general';
+import type {
+  InterchainIndexerApiPaginationFilters,
+  InterchainIndexerApiResourceName,
+  InterchainIndexerApiResourcePayload,
+} from './services/interchainIndexer';
+import { INTERCHAIN_INDEXER_API_RESOURCES } from './services/interchainIndexer';
 import type { MetadataApiResourceName, MetadataApiResourcePayload } from './services/metadata';
 import { METADATA_API_RESOURCES } from './services/metadata';
 import type {
@@ -43,6 +49,7 @@ export const RESOURCES = {
   clusters: CLUSTERS_API_RESOURCES,
   contractInfo: CONTRACT_INFO_API_RESOURCES,
   general: GENERAL_API_RESOURCES,
+  interchainIndexer: INTERCHAIN_INDEXER_API_RESOURCES,
   metadata: METADATA_API_RESOURCES,
   multichainAggregator: MULTICHAIN_AGGREGATOR_API_RESOURCES,
   multichainStats: MULTICHAIN_STATS_API_RESOURCES,
@@ -79,6 +86,7 @@ R extends BensApiResourceName ? BensApiResourcePayload<R> :
 R extends ClustersApiResourceName ? ClustersApiResourcePayload<R> :
 R extends ContractInfoApiResourceName ? ContractInfoApiResourcePayload<R> :
 R extends GeneralApiResourceName ? GeneralApiResourcePayload<R> :
+R extends InterchainIndexerApiResourceName ? InterchainIndexerApiResourcePayload<R> :
 R extends MetadataApiResourceName ? MetadataApiResourcePayload<R> :
 R extends MultichainAggregatorApiResourceName ? MultichainAggregatorApiResourcePayload<R> :
 R extends MultichainStatsApiResourceName ? MultichainStatsApiResourcePayload<R> :
@@ -118,6 +126,7 @@ R extends BensApiResourceName ? BensApiPaginationFilters<R> :
 R extends ClustersApiResourceName ? ClustersApiPaginationFilters :
 R extends GeneralApiResourceName ? GeneralApiPaginationFilters<R> :
 R extends ContractInfoApiResourceName ? ContractInfoApiPaginationFilters<R> :
+R extends InterchainIndexerApiResourceName ? InterchainIndexerApiPaginationFilters<R> :
 R extends MultichainAggregatorApiResourceName ? MultichainAggregatorApiPaginationFilters<R> :
 R extends TacOperationLifecycleApiResourceName ? TacOperationLifecycleApiPaginationFilters<R> :
 R extends ZetaChainApiResourceName ? ZetaChainApiPaginationFilters<R> :

lib/api/services/interchainIndexer.ts

@@ -0,0 +1,71 @@
+import type { ApiResource } from '../types';
+import type * as interchainIndexer from '@blockscout/interchain-indexer-types';
+import type { CrossChainMessageFilters, CrossChainTransferFilters } from 'types/api/interchainIndexer';
+
+export const INTERCHAIN_INDEXER_API_RESOURCES = {
+  messages: {
+    path: '/api/v1/interchain/messages',
+    filterFields: [ 'q' as const ],
+    paginated: true,
+  },
+  message: {
+    path: '/api/v1/interchain/messages/:id',
+    pathParams: [ 'id' as const ],
+  },
+  tx_messages: {
+    path: '/api/v1/interchain/messages\\:byTx/:hash',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'q' as const ],
+    paginated: true,
+  },
+  address_messages: {
+    path: '/api/v1/interchain/messages\\:byAddress/:hash',
+    pathParams: [ 'hash' as const ],
+    paginated: true,
+  },
+  transfers: {
+    path: '/api/v1/interchain/transfers',
+    filterFields: [ 'q' as const ],
+    paginated: true,
+  },
+  tx_transfers: {
+    path: '/api/v1/interchain/transfers\\:byTx/:hash',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'q' as const ],
+    paginated: true,
+  },
+  address_transfers: {
+    path: '/api/v1/interchain/transfers\\:byAddress/:hash',
+    pathParams: [ 'hash' as const ],
+    paginated: true,
+  },
+  stats_daily: {
+    path: '/api/v1/stats/daily',
+  },
+  stats_common: {
+    path: '/api/v1/stats/common',
+  },
+} satisfies Record<string, ApiResource>;
+
+export type InterchainIndexerApiResourceName = `interchainIndexer:${ keyof typeof INTERCHAIN_INDEXER_API_RESOURCES }`;
+
+/* eslint-disable @stylistic/indent */
+export type InterchainIndexerApiResourcePayload<R extends InterchainIndexerApiResourceName> =
+R extends 'interchainIndexer:messages' ? interchainIndexer.GetMessagesResponse :
+R extends 'interchainIndexer:message' ? interchainIndexer.InterchainMessage :
+R extends 'interchainIndexer:tx_messages' ? interchainIndexer.GetMessagesResponse :
+R extends 'interchainIndexer:address_messages' ? interchainIndexer.GetMessagesResponse :
+R extends 'interchainIndexer:transfers' ? interchainIndexer.GetTransfersResponse :
+R extends 'interchainIndexer:tx_transfers' ? interchainIndexer.GetTransfersResponse :
+R extends 'interchainIndexer:address_transfers' ? interchainIndexer.GetTransfersResponse :
+R extends 'interchainIndexer:stats_daily' ? interchainIndexer.GetDailyStatisticsResponse :
+R extends 'interchainIndexer:stats_common' ? interchainIndexer.GetCommonStatisticsResponse :
+never;
+/* eslint-enable @stylistic/indent */
+
+/* eslint-disable @stylistic/indent */
+export type InterchainIndexerApiPaginationFilters<R extends InterchainIndexerApiResourceName> =
+R extends 'interchainIndexer:messages' ? CrossChainMessageFilters :
+R extends 'interchainIndexer:transfers' ? CrossChainTransferFilters :
+never;
+/* eslint-enable @stylistic/indent */

lib/api/types.ts

@@ -1,5 +1,5 @@
 export type ApiName =
-'general' | 'admin' | 'bens' | 'contractInfo' | 'clusters' | 'external' |
+'general' | 'admin' | 'bens' | 'contractInfo' | 'clusters' | 'external' | 'interchainIndexer' |
 'metadata' | 'multichainAggregator' | 'multichainStats' | 'rewards' | 'stats' | 'tac' |
 'userOps' | 'visualize' | 'zetachain';
 

lib/metadata/getPageOgType.ts

@@ -69,6 +69,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/operations': 'Root page',
   '/operation/[id]': 'Regular page',
   '/cc/tx/[hash]': 'Regular page',
+  '/cross-chain-tx/[id]': 'Regular page',
 
   // multichain routes
   '/chain/[chain_slug]/accounts/label/[slug]': 'Root page',

lib/metadata/templates/description.ts

@@ -72,6 +72,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/operations': DEFAULT_TEMPLATE,
   '/operation/[id]': DEFAULT_TEMPLATE,
   '/cc/tx/[hash]': DEFAULT_TEMPLATE,
+  '/cross-chain-tx/[id]': DEFAULT_TEMPLATE,
 
   // multichain routes
   '/chain/[chain_slug]/accounts/label/[slug]': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -73,6 +73,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/operations': '%network_name% operations',
   '/operation/[id]': '%network_name% operation %id%',
   '/cc/tx/[hash]': '%network_name% cross-chain transaction %hash% details',
+  '/cross-chain-tx/[id]': '%network_name% cross-chain transaction %id% details',
 
   // multichain routes
   '/chain/[chain_slug]/accounts/label/[slug]': '%network_name% addresses search by label',

lib/mixpanel/getPageType.ts

@@ -67,6 +67,7 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/operations': 'Operations',
   '/operation/[id]': 'Operation details',
   '/cc/tx/[hash]': 'Cross-chain transaction details',
+  '/cross-chain-tx/[id]': 'Cross-chain transaction details',
 
   // multichain routes
   '/chain/[chain_slug]/accounts/label/[slug]': 'Chain addresses search by label',

mocks/crossChain/config.ts

@@ -0,0 +1,27 @@
+import type { ExternalChain } from 'types/externalChains';
+
+export const config: Array<ExternalChain> = [
+  {
+    id: '43114',
+    name: 'C-Chain',
+    logo: 'https://c-chain.com/logo.svg',
+    explorer_url: 'https://c-chain.com/explorer',
+    route_templates: {
+      tx: '/transaction/{hash}',
+      address: '/wallet/{hash}',
+      token: '/address/{hash}',
+    },
+  },
+  {
+    id: '8021',
+    name: 'Numine',
+    logo: 'https://numine.com/logo.svg',
+    explorer_url: 'https://numine.com',
+  },
+  {
+    id: '4444',
+    name: 'Duck chain',
+    logo: undefined,
+    explorer_url: 'https://duck.com',
+  },
+];