Multichain explorer v2 (#3259)

* Support redirect to a correct view from search

* show domains on address page

* migrate to new API version to display address domains

* another api update

* new design for chain widget on home page + tests

* chain widget styles for mobile devices

* ecosystems page

* update types

* add ecosystems to navigation

* address portfolio: pt.1

* portfolio tokens list

* filter portfolio by chain

* skip redirect when navigating to search result by clicking on "show all results" link

* net worth block design

* add filter input to chain select and fix tokens table

* calculate address portfolio

* adjust card logic

* support custom token types in multichain explorer

* handle case when new worth is 0

* add text filter to tokens list

* fixes

* demo envs

* portfolio tests

* ecosystems test

* change signature for getTokenTypes function

* fix adding token to the wallet from the list

* lazy load all address domains

* show contract creator and implementations info

* fix tests

* add poor reputation tokens toggle

* tweaks

* dim celo native tokens

* disable env validator

* fix tests

* remove tokens with 0 usd value from top tokens

* fixes

* preserve selected chain when switching tabs on address page

* add hints to stats widgets on home page

* update envs for demo

* fix portfolio cards and home page

* update styles for contract creator and implementations

* fix select issues

* add chains from cluster to network menu

* hide csv export link on empty logs page

* update screenshots

* rollback select fix

* update cut length calculation for portfolio cards

* fix chain select

* update screenshots

* fix tests

* more fixes

* add sorting to ecosystems table

* fix test

* fixes

* fix loading state in ecosystems page

* review fixes

* fix tests

Author: tom2drum

.vscode/tasks.json

@@ -357,7 +357,6 @@
               "neon_devnet",
               "numine",
               "optimism",
-              "optimism_interop_0",
               "optimism_sepolia",
               "optimism_superchain",
               "polygon",

configs/envs/.env.optimism_interop_0

@@ -8,32 +8,26 @@ NEXT_PUBLIC_APP_HOST=localhost
 NEXT_PUBLIC_APP_PORT=3000
 NEXT_PUBLIC_APP_ENV=development
 
-NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=https://multichain-aggregator.k8s-dev.blockscout.com
-NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=http://multichain-search-stats.k8s-dev.blockscout.com
 NEXT_PUBLIC_MULTICHAIN_ENABLED=true
-NEXT_PUBLIC_MULTICHAIN_CLUSTER=interop
+# NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=https://multichain-aggregator.k8s-dev.blockscout.com
+# NEXT_PUBLIC_MULTICHAIN_CLUSTER=interop
+# NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=http://multichain-search-stats.k8s-dev.blockscout.com
+NEXT_PUBLIC_MULTICHAIN_AGGREGATOR_API_HOST=https://multichain-aggregator.services.blockscout.com
+NEXT_PUBLIC_MULTICHAIN_CLUSTER=multichain
+NEXT_PUBLIC_MULTICHAIN_STATS_API_HOST=https://multichain-stats.k8s-prod-3.blockscout.com
 
-SKIP_ENVS_VALIDATION=false
+SKIP_ENVS_VALIDATION=true
+NEXT_PUBLIC_MULTICHAIN_BALANCE_PROVIDER_CONFIG=[{'name': 'zerion', 'url_template': 'https://app.zerion.io/{address}/overview?utm_source=blockscout&utm_medium=address', 'logo': 'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/marketplace-logos/zerion.svg'}]
 
 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']
-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
-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
+NEXT_PUBLIC_NETWORK_NAME=Blockscout
 NEXT_PUBLIC_GAS_TRACKER_ENABLED=false
 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_IS_TESTNET=false
 NEXT_PUBLIC_USE_NEXT_JS_PROXY=true
 NEXT_PUBLIC_HAS_USER_OPS=true
 NEXT_PUBLIC_ADVANCED_FILTER_ENABLED=false

configs/envs/.env.optimism_superchain

@@ -11,6 +11,11 @@ const outputFile = resolvePath(outputDir, 'llms.txt');
 
 function run() {
     try {
+        if(config.features.opSuperchain.isEnabled){
+            console.log('⏭️ Skipping llms.txt generation for multichain explorer');
+            return;
+        }
+
         console.log('🌀 Generating llms.txt...');
 
         const chainName = config.chain.name ?? '';

deploy/tools/llms-txt-generator/index.ts

@@ -1,6 +1,6 @@
 import type { ApiResource } from '../types';
 import type * as multichain from '@blockscout/multichain-aggregator-types';
-import type { AddressTokensResponse, TokensResponse } from 'types/client/multichain-aggregator';
+import type { AddressTokensFilter, AddressTokensResponse, TokensResponse } from 'types/client/multichain-aggregator';
 
 export const MULTICHAIN_AGGREGATOR_API_RESOURCES = {
   address: {
@@ -11,17 +11,33 @@ export const MULTICHAIN_AGGREGATOR_API_RESOURCES = {
     path: '/addresses/:hash/tokens',
     pathParams: [ 'hash' as const ],
     paginated: true,
-    filterFields: [ 'chain_id' as const, 'type' as const ],
+    filterFields: [ 'chain_id' as const, 'type' as const, 'query' as const ],
+  },
+  address_domains: {
+    path: '/addresses/:hash/domains',
+    pathParams: [ 'hash' as const ],
+    paginated: true,
+  },
+  address_portfolio: {
+    path: '/addresses/:hash/portfolio',
+    pathParams: [ 'hash' as const ],
+    filterFields: [ 'chain_id' as const, 'query' as const ],
   },
   tokens: {
     path: '/tokens',
     filterFields: [ 'chain_id' as const, 'type' as const, 'query' as const ],
     paginated: true,
   },
+  domain_protocols: {
+    path: '/domain-protocols',
+  },
   quick_search: {
     path: '/search\\:quick',
     filterFields: [ 'q' as const ],
   },
+  search_check_redirect: {
+    path: '/search\\:check-redirect',
+  },
   search_addresses: {
     path: '/search/addresses',
     filterFields: [ 'q' as const, 'chain_id' as const ],
@@ -57,6 +73,9 @@ export const MULTICHAIN_AGGREGATOR_API_RESOURCES = {
     filterFields: [ 'q' as const, 'chain_id' as const ],
     paginated: true,
   },
+  chain_metrics: {
+    path: '/chain-metrics',
+  },
 } satisfies Record<string, ApiResource>;
 
 export type MultichainAggregatorApiResourceName = `multichainAggregator:${ keyof typeof MULTICHAIN_AGGREGATOR_API_RESOURCES }`;
@@ -65,21 +84,26 @@ export type MultichainAggregatorApiResourceName = `multichainAggregator:${ keyof
 export type MultichainAggregatorApiResourcePayload<R extends MultichainAggregatorApiResourceName> =
 R extends 'multichainAggregator:address' ? multichain.GetAddressResponse :
 R extends 'multichainAggregator:address_tokens' ? AddressTokensResponse :
+R extends 'multichainAggregator:address_portfolio' ? multichain.GetAddressPortfolioResponse :
+R extends 'multichainAggregator:address_domains' ? multichain.LookupAddressDomainsResponse :
 R extends 'multichainAggregator:tokens' ? TokensResponse :
+R extends 'multichainAggregator:domain_protocols' ? multichain.ListDomainProtocolsResponse :
 R extends 'multichainAggregator:quick_search' ? multichain.ClusterQuickSearchResponse :
+R extends 'multichainAggregator:search_check_redirect' ? multichain.CheckRedirectResponse :
 R extends 'multichainAggregator:search_addresses' ? multichain.SearchAddressesResponse :
 R extends 'multichainAggregator:search_blocks' ? multichain.SearchBlocksResponse :
 R extends 'multichainAggregator:search_block_numbers' ? multichain.SearchBlockNumbersResponse :
 R extends 'multichainAggregator:search_transactions' ? multichain.SearchTransactionsResponse :
 R extends 'multichainAggregator:search_tokens' ? multichain.SearchTokensResponse :
 R extends 'multichainAggregator:search_nfts' ? multichain.SearchNftsResponse :
 R extends 'multichainAggregator:search_domains' ? multichain.SearchDomainsResponse :
+R extends 'multichainAggregator:chain_metrics' ? multichain.ListChainMetricsResponse :
 never;
 /* eslint-enable @stylistic/indent */
 
 /* eslint-disable @stylistic/indent */
 export type MultichainAggregatorApiPaginationFilters<R extends MultichainAggregatorApiResourceName> =
-R extends 'multichainAggregator:address_tokens' ? Partial<multichain.ListAddressTokensRequest> :
+R extends 'multichainAggregator:address_tokens' ? AddressTokensFilter :
 R extends 'multichainAggregator:tokens' ? Partial<multichain.ListClusterTokensRequest> :
 never;
 /* eslint-enable @stylistic/indent */

icons/navigation/ecosystems.svg

@@ -25,6 +25,7 @@ export enum NAMES {
   HIDE_ADD_TO_WALLET_BUTTON = 'hide_add_to_wallet_button',
   UUID = 'uuid',
   SHOW_SCAM_TOKENS = 'show_scam_tokens',
+  SHOW_POOR_REPUTATION_TOKENS = 'show_poor_reputation_tokens',
   APP_PROFILE = 'app_profile',
   TABLE_VIEW_ON_MOBILE = 'table_view_on_mobile',
 }

lib/api/services/multichainAggregator.ts

@@ -271,6 +271,12 @@ export default function useNavItems(): ReturnType {
           icon: 'navigation/chain_stats',
           isActive: pathname.startsWith('/stats'),
         },
+        config.features.opSuperchain.isEnabled && {
+          text: 'Ecosystems',
+          nextRoute: { pathname: '/ecosystems' as const },
+          icon: 'navigation/ecosystems',
+          isActive: pathname.startsWith('/ecosystems'),
+        },
         megaEthFeature.isEnabled && megaEthFeature.socketUrl.metrics && {
           text: 'Uptime',
           nextRoute: { pathname: '/uptime' as const },

lib/cookies.ts

@@ -83,6 +83,7 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/chain/[chain_slug]/token/[hash]/instance/[id]': 'Regular page',
   '/chain/[chain_slug]/tx/[hash]': 'Regular page',
   '/chain/[chain_slug]/visualize/sol2uml': 'Regular page',
+  '/ecosystems': 'Root page',
 
   // service routes, added only to make typescript happy
   '/login': 'Regular page',

lib/hooks/useNavItems.tsx

@@ -86,6 +86,7 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/chain/[chain_slug]/token/[hash]/instance/[id]': DEFAULT_TEMPLATE,
   '/chain/[chain_slug]/tx/[hash]': DEFAULT_TEMPLATE,
   '/chain/[chain_slug]/visualize/sol2uml': DEFAULT_TEMPLATE,
+  '/ecosystems': DEFAULT_TEMPLATE,
 
   // service routes, added only to make typescript happy
   '/login': DEFAULT_TEMPLATE,