OP rollup: Batch view and DA fields (#2210)

* tx batches view adjustments * blocks and txs tabs of batch page * batch details * add batch info to block details view * display batch blob data in EIP-4844 and calldata container * display batch blob data in celestia container * tests * add optimism_celestia preset * review fixes * update screenshots
blockscout · Sep 11, 2024 · cad3cad · cad3cad
1 parent 758ca37
commit cad3cad
Show file tree

Hide file tree

Showing 38 changed files with 967 additions and 107 deletions.
diff --git a/.github/workflows/deploy-review-l2.yml b/.github/workflows/deploy-review-l2.yml
@@ -20,6 +20,7 @@ on:
             - eth_sepolia
             - eth_goerli
             - optimism
+            - optimism_celestia
             - optimism_sepolia
             - polygon
             - rootstock

diff --git a/.github/workflows/deploy-review.yml b/.github/workflows/deploy-review.yml
@@ -20,6 +20,7 @@ on:
             - eth_sepolia
             - eth_goerli
             - optimism
+            - optimism_celestia
             - optimism_sepolia
             - polygon
             - rootstock

diff --git a/.vscode/tasks.json b/.vscode/tasks.json
@@ -368,6 +368,7 @@
               "eth_goerli",
               "eth_sepolia",
               "optimism",
+              "optimism_celestia",
               "optimism_sepolia",
               "polygon",
               "rootstock_testnet",

diff --git a/configs/app/features/rollup.ts b/configs/app/features/rollup.ts
@@ -2,6 +2,8 @@ import type { Feature } from './types';
 import type { RollupType } from 'types/client/rollup';
 import { ROLLUP_TYPES } from 'types/client/rollup';
 
+import stripTrailingSlash from 'lib/stripTrailingSlash';
+
 import { getEnvValue } from '../utils';
 
 const type = (() => {
@@ -21,7 +23,7 @@ const config: Feature<{ type: RollupType; L1BaseUrl: string; L2WithdrawalUrl?: s
       title,
       isEnabled: true,
       type,
-      L1BaseUrl,
+      L1BaseUrl: stripTrailingSlash(L1BaseUrl),
       L2WithdrawalUrl,
     });
   }

diff --git a/configs/envs/.env.optimism_celestia b/configs/envs/.env.optimism_celestia
@@ -0,0 +1,46 @@
+# Set of ENVs for OP Celestia Raspberry network explorer
+# https://opcelestia-raspberry.gelatoscout.com
+# This is an auto-generated file. To update all values, run "yarn preset:sync --name=optimism_celestia"
+
+# 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
+
+# Instance ENVs
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_DESKTOP={'id':'721628','width':'728','height':'90'}
+NEXT_PUBLIC_AD_ADBUTLER_CONFIG_MOBILE={'id':'721627','width':'300','height':'100'}
+NEXT_PUBLIC_AD_BANNER_PROVIDER=adbutler
+NEXT_PUBLIC_AD_TEXT_PROVIDER=none
+NEXT_PUBLIC_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=opcelestia-raspberry.gelatoscout.com
+NEXT_PUBLIC_API_SPEC_URL=https://raw.githubusercontent.com/blockscout/blockscout-api-v2-swagger/main/swagger.yaml
+NEXT_PUBLIC_CONTRACT_CODE_IDES=[{'title':'Remix IDE','url':'https://remix.ethereum.org/?address={hash}&blockscout={domain}','icon_url':'https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/ide-icons/remix.png'}]
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/opcelestia-raspberry.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0x0f5b54de81848d8d8baa02c69030037218a2b4df622d64a2a429e11721606656
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND=rgba(255, 0, 0, 1)
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_MARKETPLACE_ENABLED=false
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=ETH
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/optimism.svg
+NEXT_PUBLIC_NETWORK_ID=123420111
+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_NAME=OP Celestia Raspberry
+NEXT_PUBLIC_NETWORK_RPC_URL=https://rpc.opcelestia-raspberry.gelato.digital
+NEXT_PUBLIC_NETWORK_SHORT_NAME=opcelestia-raspberry
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/
+NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL=https://bridge.gelato.network/bridge/opcelestia-raspberry
+NEXT_PUBLIC_ROLLUP_TYPE=optimistic
+NEXT_PUBLIC_STATS_API_HOST=https://stats-opcelestia-raspberry.k8s.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_WEB3_WALLETS=none
diff --git a/icons/brands/celenium.svg b/icons/brands/celenium.svg
diff --git a/lib/api/resources.ts b/lib/api/resources.ts
@@ -86,6 +86,9 @@ import type {
   OptimisticL2TxnBatchesResponse,
   OptimisticL2WithdrawalsResponse,
   OptimisticL2DisputeGamesResponse,
+  OptimismL2TxnBatch,
+  OptimismL2BatchTxs,
+  OptimismL2BatchBlocks,
 } from 'types/api/optimisticL2';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search';
@@ -679,12 +682,29 @@ export const RESOURCES = {
   },
 
   optimistic_l2_txn_batches: {
-    path: '/api/v2/optimism/txn-batches',
+    path: '/api/v2/optimism/batches',
     filterFields: [],
   },
 
   optimistic_l2_txn_batches_count: {
-    path: '/api/v2/optimism/txn-batches/count',
+    path: '/api/v2/optimism/batches/count',
+  },
+
+  optimistic_l2_txn_batch: {
+    path: '/api/v2/optimism/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  optimistic_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/optimism-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  optimistic_l2_txn_batch_blocks: {
+    path: '/api/v2/blocks/optimism-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
   },
 
   optimistic_l2_dispute_games: {
@@ -968,7 +988,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_reward
 'token_instance_transfers' | 'token_instance_holders' |
 'verified_contracts' |
 'optimistic_l2_output_roots' | 'optimistic_l2_withdrawals' | 'optimistic_l2_txn_batches' | 'optimistic_l2_deposits' |
-'optimistic_l2_dispute_games' |
+'optimistic_l2_dispute_games' | 'optimistic_l2_txn_batch_txs' | 'optimistic_l2_txn_batch_blocks' |
 'mud_worlds'| 'address_mud_tables' | 'address_mud_records' |
 'shibarium_deposits' | 'shibarium_withdrawals' |
 'arbitrum_l2_messages' | 'arbitrum_l2_txn_batches' | 'arbitrum_l2_txn_batch_txs' | 'arbitrum_l2_txn_batch_blocks' |
@@ -1073,11 +1093,14 @@ Q extends 'optimistic_l2_output_roots' ? OptimisticL2OutputRootsResponse :
 Q extends 'optimistic_l2_withdrawals' ? OptimisticL2WithdrawalsResponse :
 Q extends 'optimistic_l2_deposits' ? OptimisticL2DepositsResponse :
 Q extends 'optimistic_l2_txn_batches' ? OptimisticL2TxnBatchesResponse :
+Q extends 'optimistic_l2_txn_batches_count' ? number :
+Q extends 'optimistic_l2_txn_batch' ? OptimismL2TxnBatch :
+Q extends 'optimistic_l2_txn_batch_txs' ? OptimismL2BatchTxs :
+Q extends 'optimistic_l2_txn_batch_blocks' ? OptimismL2BatchBlocks :
 Q extends 'optimistic_l2_dispute_games' ? OptimisticL2DisputeGamesResponse :
 Q extends 'optimistic_l2_output_roots_count' ? number :
 Q extends 'optimistic_l2_withdrawals_count' ? number :
 Q extends 'optimistic_l2_deposits_count' ? number :
-Q extends 'optimistic_l2_txn_batches_count' ? number :
 Q extends 'optimistic_l2_dispute_games_count' ? number :
 never;
 // !!! IMPORTANT !!!

diff --git a/mocks/l2txnBatches/txnBatches.ts b/mocks/l2txnBatches/txnBatches.ts
@@ -1,33 +1,104 @@
-export const txnBatchesData = {
+import type {
+  OptimismL2TxnBatchTypeCallData,
+  OptimismL2TxnBatchTypeCelestia,
+  OptimismL2TxnBatchTypeEip4844,
+  OptimisticL2TxnBatchesResponse,
+} from 'types/api/optimisticL2';
+
+export const txnBatchesData: OptimisticL2TxnBatchesResponse = {
   items: [
     {
+      batch_data_container: 'in_blob4844',
+      internal_id: 260998,
+      l1_timestamp: '2022-11-10T11:29:11.000000Z',
       l1_tx_hashes: [
-        '0x5bc94d02b65743dfaa9e10a2d6e175aff2a05cce2128c8eaf848bd84ab9325c5',
-        '0x92a51bc623111dbb91f243e3452e60fab6f090710357f9d9b75ac8a0f67dfd9d',
+        '0x9553351f6bd1577f4e782738c087be08697fb11f3b91745138d71ba166d62c3b',
       ],
-      l1_timestamp: '2023-02-24T10:16:12.000000Z',
-      l2_block_number: 5902836,
-      tx_count: 0,
+      l2_block_end: 124882074,
+      l2_block_start: 124881833,
+      tx_count: 4011,
     },
     {
+      batch_data_container: 'in_calldata',
+      internal_id: 260997,
+      l1_timestamp: '2022-11-03T11:20:59.000000Z',
       l1_tx_hashes: [
-        '0xc45f846ee28ce9ba116ce2d378d3dd00b55d324b833b3ecd4241c919c572c4aa',
+        '0x80f5fba70d5685bc2b70df836942e892b24afa7bba289a2fac0ca8f4d554cc72',
       ],
-      l1_timestamp: '2023-02-24T10:16:00.000000Z',
-      l2_block_number: 5902835,
-      tx_count: 0,
+      l2_block_end: 124881832,
+      l2_block_start: 124881613,
+      tx_count: 4206,
     },
     {
+      internal_id: 260996,
+      l1_timestamp: '2024-09-03T11:14:23.000000Z',
       l1_tx_hashes: [
-        '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
+        '0x39f4c46cae57bae936acb9159e367794f41f021ed3788adb80ad93830edb5f22',
       ],
-      l1_timestamp: '2023-02-24T10:16:00.000000Z',
-      l2_block_number: 5902834,
-      tx_count: 0,
+      l2_block_end: 124881612,
+      l2_block_start: 124881380,
+      tx_count: 4490,
     },
   ],
   next_page_params: {
-    block_number: 5902834,
+    id: 5902834,
     items_count: 50,
   },
 };
+
+export const txnBatchTypeCallData: OptimismL2TxnBatchTypeCallData = {
+  batch_data_container: 'in_calldata',
+  internal_id: 309123,
+  l1_timestamp: '2022-08-10T10:30:24.000000Z',
+  l1_tx_hashes: [
+    '0x478c45f182631ae6f7249d40f31fdac36f41d88caa2e373fba35340a7345ca67',
+  ],
+  l2_block_end: 10146784,
+  l2_block_start: 10145379,
+  tx_count: 1608,
+};
+
+export const txnBatchTypeCelestia: OptimismL2TxnBatchTypeCelestia = {
+  batch_data_container: 'in_celestia',
+  blobs: [
+    {
+      commitment: '0x39c18c21c6b127d58809b8d3b5931472421f9b51532959442f53038f10b78f2a',
+      height: 2584868,
+      l1_timestamp: '2024-08-28T16:51:12.000000Z',
+      l1_transaction_hash: '0x2bb0b96a8ba0f063a243ac3dee0b2f2d87edb2ba9ef44bfcbc8ed191af1c4c24',
+      namespace: '0x00000000000000000000000000000000000000000008e5f679bf7116cb',
+    },
+  ],
+  internal_id: 309667,
+  l1_timestamp: '2022-08-28T16:51:12.000000Z',
+  l1_tx_hashes: [
+    '0x2bb0b96a8ba0f063a243ac3dee0b2f2d87edb2ba9ef44bfcbc8ed191af1c4c24',
+  ],
+  l2_block_end: 10935879,
+  l2_block_start: 10934514,
+  tx_count: 1574,
+};
+
+export const txnBatchTypeEip4844: OptimismL2TxnBatchTypeEip4844 = {
+  batch_data_container: 'in_blob4844',
+  blobs: [
+    {
+      hash: '0x012a4f0c6db6bce9d3d357b2bf847764320bcb0107ab318f3a532f637bc60dfe',
+      l1_timestamp: '2022-08-23T03:59:12.000000Z',
+      l1_transaction_hash: '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+    },
+    {
+      hash: '0x01d1097cce23229931afbc2fd1cf0d707da26df7b39cef1c542276ae718de4f6',
+      l1_timestamp: '2022-08-23T03:59:12.000000Z',
+      l1_transaction_hash: '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+    },
+  ],
+  internal_id: 2538459,
+  l1_timestamp: '2022-08-23T03:59:12.000000Z',
+  l1_tx_hashes: [
+    '0x3870f136497e5501dc20d0974daf379c8636c958794d59a9c90d4f8a9f0ed20a',
+  ],
+  l2_block_end: 16291502,
+  l2_block_start: 16291373,
+  tx_count: 704,
+};
diff --git a/nextjs/getServerSideProps.ts b/nextjs/getServerSideProps.ts
@@ -112,7 +112,7 @@ export const optimisticRollup: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-const BATCH_ROLLUP_TYPES: Array<RollupType> = [ 'zkEvm', 'zkSync', 'arbitrum' ];
+const BATCH_ROLLUP_TYPES: Array<RollupType> = [ 'zkEvm', 'zkSync', 'arbitrum', 'optimistic' ];
 export const batch: GetServerSideProps<Props> = async(context) => {
   if (!(rollupFeature.isEnabled && BATCH_ROLLUP_TYPES.includes(rollupFeature.type))) {
     return {

diff --git a/pages/batches/[number].tsx b/pages/batches/[number].tsx
@@ -17,6 +17,8 @@ const Batch = dynamic(() => {
   switch (rollupFeature.type) {
     case 'arbitrum':
       return import('ui/pages/ArbitrumL2TxnBatch');
+    case 'optimistic':
+      return import('ui/pages/OptimisticL2TxnBatch');
     case 'zkEvm':
       return import('ui/pages/ZkEvmL2TxnBatch');
     case 'zkSync':

diff --git a/public/icons/name.d.ts b/public/icons/name.d.ts
@@ -24,6 +24,7 @@
 	| "block_slim"
 	| "block"
 	| "brands/blockscout"
+	| "brands/celenium"
 	| "brands/safe"
 	| "brands/solidity_scan"
 	| "burger"

diff --git a/stubs/L2.ts b/stubs/L2.ts
@@ -1,4 +1,5 @@
 import type {
+  OptimismL2TxnBatch,
   OptimisticL2DepositsItem,
   OptimisticL2DisputeGamesItem,
   OptimisticL2OutputRootsItem,
@@ -30,14 +31,29 @@ export const L2_WITHDRAWAL_ITEM: OptimisticL2WithdrawalsItem = {
 };
 
 export const L2_TXN_BATCHES_ITEM: OptimisticL2TxnBatchesItem = {
+  internal_id: 260991,
+  batch_data_container: 'in_blob4844',
   l1_timestamp: '2023-06-01T14:46:48.000000Z',
   l1_tx_hashes: [
     TX_HASH,
   ],
-  l2_block_number: 5218590,
+  l2_block_start: 5218590,
+  l2_block_end: 5218777,
   tx_count: 9,
 };
 
+export const L2_TXN_BATCH: OptimismL2TxnBatch = {
+  ...L2_TXN_BATCHES_ITEM,
+  batch_data_container: 'in_blob4844',
+  blobs: [
+    {
+      hash: '0x01fb41e1ae9f827e13abb0ee94be2ee574a23ac31426cea630ddd18af854bc85',
+      l1_timestamp: '2024-09-03T13:26:23.000000Z',
+      l1_transaction_hash: '0xd25ee571f1701690615099b208a9431d8611d0130dc342bead6d9edc291f04b9',
+    },
+  ],
+};
+
 export const L2_OUTPUT_ROOTS_ITEM: OptimisticL2OutputRootsItem = {
   l1_block_number: 9103684,
   l1_timestamp: '2023-06-01T15:26:12.000000Z',

diff --git a/tools/preset-sync/index.ts b/tools/preset-sync/index.ts
@@ -11,6 +11,7 @@ const PRESETS = {
   eth_sepolia: 'https://eth-sepolia.blockscout.com',
   gnosis: 'https://gnosis.blockscout.com',
   optimism: 'https://optimism.blockscout.com',
+  optimism_celestia: 'https://opcelestia-raspberry.gelatoscout.com',
   optimism_sepolia: 'https://optimism-sepolia.blockscout.com',
   polygon: 'https://polygon.blockscout.com',
   rootstock_testnet: 'https://rootstock-testnet.blockscout.com',

diff --git a/types/api/block.ts b/types/api/block.ts
@@ -3,6 +3,7 @@ import type { Reward } from 'types/api/reward';
 import type { Transaction } from 'types/api/transaction';
 
 import type { ArbitrumBatchStatus, ArbitrumL2TxData } from './arbitrumL2';
+import type { OptimisticL2BatchDataContainer, OptimisticL2BlobTypeEip4844, OptimisticL2BlobTypeCelestia } from './optimisticL2';
 import type { TokenInfo } from './token';
 import type { TokenTransfer } from './tokenTransfer';
 import type { ZkSyncBatchesItem } from './zkSyncL2';
@@ -59,6 +60,7 @@ export interface Block {
     'batch_number': number | null;
   };
   arbitrum?: ArbitrumBlockData;
+  optimism?: OptimismBlockData;
   // CELO FIELDS
   celo?: {
     epoch_number: number;
@@ -78,6 +80,14 @@ type ArbitrumBlockData = {
   'status': ArbitrumBatchStatus;
 }
 
+export interface OptimismBlockData {
+  batch_data_container: OptimisticL2BatchDataContainer;
+  internal_id: number;
+  blobs: Array<OptimisticL2BlobTypeEip4844> | Array<OptimisticL2BlobTypeCelestia> | null;
+  l1_timestamp: string;
+  l1_tx_hashes: Array<string>;
+}
+
 export interface BlocksResponse {
   items: Array<Block>;
   next_page_params: {