zkEVM deposits and withdrawals (#1833)

* deposits page

* withdrawals page

* tests

* rename optimism routes

* [skip ci] fix presets

configs/envs/.env.optimism

@@ -19,8 +19,6 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.optimism.io
 
 # api configuration
 NEXT_PUBLIC_API_HOST=optimism.blockscout.com
-NEXT_PUBLIC_API_PORT=80
-NEXT_PUBLIC_API_PROTOCOL=http
 NEXT_PUBLIC_API_BASE_PATH=/
 
 # ui config

configs/envs/.env.zkevm

@@ -18,8 +18,6 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://zkevm-rpc.com
 
 # api configuration
 NEXT_PUBLIC_API_HOST=zkevm.blockscout.com
-NEXT_PUBLIC_API_PORT=80
-NEXT_PUBLIC_API_PROTOCOL=http
 NEXT_PUBLIC_API_BASE_PATH=/
 
 # ui config
@@ -47,4 +45,4 @@ NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.co
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 # rollup
 NEXT_PUBLIC_ROLLUP_TYPE=zkEvm
-NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://polygon.blockscout.com
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth.blockscout.com

configs/envs/.env.zksync

@@ -18,8 +18,6 @@ NEXT_PUBLIC_NETWORK_RPC_URL=https://mainnet.era.zksync.io
 
 # api configuration
 NEXT_PUBLIC_API_HOST=zksync.blockscout.com
-NEXT_PUBLIC_API_PORT=80
-NEXT_PUBLIC_API_PROTOCOL=http
 NEXT_PUBLIC_API_BASE_PATH=/
 
 # ui config

deploy/scripts/entrypoint.sh

@@ -21,6 +21,7 @@ export_envs_from_preset() {
     "NEXT_PUBLIC_APP_HOST"
     "NEXT_PUBLIC_APP_PORT"
     "NEXT_PUBLIC_APP_ENV"
+    "NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL"
   )
 
   while IFS='=' read -r name value; do

lib/api/resources.ts

@@ -98,7 +98,14 @@ import type { ValidatorsCountersResponse, ValidatorsFilters, ValidatorsResponse,
 import type { VerifiedContractsSorting } from 'types/api/verifiedContracts';
 import type { VisualizedContract } from 'types/api/visualization';
 import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
-import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2TxnBatchesResponse, ZkEvmL2TxnBatchTxs } from 'types/api/zkEvmL2';
+import type {
+  ZkEvmL2DepositsResponse,
+  ZkEvmL2TxnBatch,
+  ZkEvmL2TxnBatchesItem,
+  ZkEvmL2TxnBatchesResponse,
+  ZkEvmL2TxnBatchTxs,
+  ZkEvmL2WithdrawalsResponse,
+} from 'types/api/zkEvmL2';
 import type { ZkSyncBatch, ZkSyncBatchesResponse, ZkSyncBatchTxs } from 'types/api/zkSyncL2';
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 import type { ArrayElement } from 'types/utils';
@@ -600,43 +607,61 @@ export const RESOURCES = {
   },
 
   // optimistic L2
-  l2_deposits: {
+  optimistic_l2_deposits: {
     path: '/api/v2/optimism/deposits',
     filterFields: [],
   },
 
-  l2_deposits_count: {
+  optimistic_l2_deposits_count: {
     path: '/api/v2/optimism/deposits/count',
   },
 
-  l2_withdrawals: {
+  optimistic_l2_withdrawals: {
     path: '/api/v2/optimism/withdrawals',
     filterFields: [],
   },
 
-  l2_withdrawals_count: {
+  optimistic_l2_withdrawals_count: {
     path: '/api/v2/optimism/withdrawals/count',
   },
 
-  l2_output_roots: {
+  optimistic_l2_output_roots: {
     path: '/api/v2/optimism/output-roots',
     filterFields: [],
   },
 
-  l2_output_roots_count: {
+  optimistic_l2_output_roots_count: {
     path: '/api/v2/optimism/output-roots/count',
   },
 
-  l2_txn_batches: {
+  optimistic_l2_txn_batches: {
     path: '/api/v2/optimism/txn-batches',
     filterFields: [],
   },
 
-  l2_txn_batches_count: {
+  optimistic_l2_txn_batches_count: {
     path: '/api/v2/optimism/txn-batches/count',
   },
 
   // zkEvm L2
+  zkevm_l2_deposits: {
+    path: '/api/v2/zkevm/deposits',
+    filterFields: [],
+  },
+
+  zkevm_l2_deposits_count: {
+    path: '/api/v2/zkevm/deposits/count',
+  },
+
+  zkevm_l2_withdrawals: {
+    path: '/api/v2/zkevm/withdrawals',
+    filterFields: [],
+  },
+
+  zkevm_l2_withdrawals_count: {
+    path: '/api/v2/zkevm/withdrawals/count',
+  },
+
   zkevm_l2_txn_batches: {
     path: '/api/v2/zkevm/batches',
     filterFields: [],
@@ -814,9 +839,9 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
 'token_transfers' | 'token_holders' | 'token_inventory' | 'tokens' | 'tokens_bridged' |
 'token_instance_transfers' | 'token_instance_holders' |
 'verified_contracts' |
-'l2_output_roots' | 'l2_withdrawals' | 'l2_txn_batches' | 'l2_deposits' |
+'optimistic_l2_output_roots' | 'optimistic_l2_withdrawals' | 'optimistic_l2_txn_batches' | 'optimistic_l2_deposits' |
 'shibarium_deposits' | 'shibarium_withdrawals' |
-'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
+'zkevm_l2_deposits' | 'zkevm_l2_withdrawals' | 'zkevm_l2_txn_batches' | 'zkevm_l2_txn_batch_txs' |
 'zksync_l2_txn_batches' | 'zksync_l2_txn_batch_txs' |
 'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
 'watchlist' | 'private_tags_address' | 'private_tags_tx' |
@@ -914,18 +939,14 @@ Q extends 'visualize_sol2uml' ? VisualizedContract :
 Q extends 'contract_verification_config' ? SmartContractVerificationConfig :
 Q extends 'withdrawals' ? WithdrawalsResponse :
 Q extends 'withdrawals_counters' ? WithdrawalsCounters :
-Q extends 'l2_output_roots' ? OptimisticL2OutputRootsResponse :
-Q extends 'l2_withdrawals' ? OptimisticL2WithdrawalsResponse :
-Q extends 'l2_deposits' ? OptimisticL2DepositsResponse :
-Q extends 'l2_txn_batches' ? OptimisticL2TxnBatchesResponse :
-Q extends 'l2_output_roots_count' ? number :
-Q extends 'l2_withdrawals_count' ? number :
-Q extends 'l2_deposits_count' ? number :
-Q extends 'l2_txn_batches_count' ? number :
-Q extends 'zkevm_l2_txn_batches' ? ZkEvmL2TxnBatchesResponse :
-Q extends 'zkevm_l2_txn_batches_count' ? number :
-Q extends 'zkevm_l2_txn_batch' ? ZkEvmL2TxnBatch :
-Q extends 'zkevm_l2_txn_batch_txs' ? ZkEvmL2TxnBatchTxs :
+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_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 'config_backend_version' ? BackendVersionConfig :
 never;
 // !!! IMPORTANT !!!
@@ -943,6 +964,14 @@ Q extends 'shibarium_withdrawals' ? ShibariumWithdrawalsResponse :
 Q extends 'shibarium_deposits' ? ShibariumDepositsResponse :
 Q extends 'shibarium_withdrawals_count' ? number :
 Q extends 'shibarium_deposits_count' ? number :
+Q extends 'zkevm_l2_deposits' ? ZkEvmL2DepositsResponse :
+Q extends 'zkevm_l2_deposits_count' ? number :
+Q extends 'zkevm_l2_withdrawals' ? ZkEvmL2WithdrawalsResponse :
+Q extends 'zkevm_l2_withdrawals_count' ? number :
+Q extends 'zkevm_l2_txn_batches' ? ZkEvmL2TxnBatchesResponse :
+Q extends 'zkevm_l2_txn_batches_count' ? number :
+Q extends 'zkevm_l2_txn_batch' ? ZkEvmL2TxnBatch :
+Q extends 'zkevm_l2_txn_batch_txs' ? ZkEvmL2TxnBatchTxs :
 Q extends 'zksync_l2_txn_batches' ? ZkSyncBatchesResponse :
 Q extends 'zksync_l2_txn_batches_count' ? number :
 Q extends 'zksync_l2_txn_batch' ? ZkSyncBatch :

lib/hooks/useNavItems.tsx

@@ -72,45 +72,45 @@ export default function useNavItems(): ReturnType {
       icon: 'validator',
       isActive: pathname === '/validators',
     } : null;
+    const rollupDeposits = {
+      text: `Deposits (L1${ rightLineArrow }L2)`,
+      nextRoute: { pathname: '/deposits' as const },
+      icon: 'arrows/south-east',
+      isActive: pathname === '/deposits',
+    };
+    const rollupWithdrawals = {
+      text: `Withdrawals (L2${ rightLineArrow }L1)`,
+      nextRoute: { pathname: '/withdrawals' as const },
+      icon: 'arrows/north-east',
+      isActive: pathname === '/withdrawals',
+    };
+    const rollupTxnBatches = {
+      text: 'Txn batches',
+      nextRoute: { pathname: '/batches' as const },
+      icon: 'txn_batches',
+      isActive: pathname === '/batches',
+    };
+    const rollupOutputRoots = {
+      text: 'Output roots',
+      nextRoute: { pathname: '/output-roots' as const },
+      icon: 'output_roots',
+      isActive: pathname === '/output-roots',
+    };
 
     const rollupFeature = config.features.rollup;
 
-    if (rollupFeature.isEnabled && rollupFeature.type === 'zkEvm') {
+    if (rollupFeature.isEnabled && (rollupFeature.type === 'optimistic' || rollupFeature.type === 'zkEvm')) {
       blockchainNavItems = [
         [
           txs,
-          userOps,
-          blocks,
-          {
-            text: 'Txn batches',
-            nextRoute: { pathname: '/batches' as const },
-            icon: 'txn_batches',
-            isActive: pathname === '/batches' || pathname === '/batches/[number]',
-          },
-        ].filter(Boolean),
-        [
-          topAccounts,
-          validators,
-          verifiedContracts,
-          ensLookup,
-        ].filter(Boolean),
-      ];
-    } else if (rollupFeature.isEnabled && rollupFeature.type === 'optimistic') {
-      blockchainNavItems = [
-        [
-          txs,
-          // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/deposits' },
-          // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/withdrawals' },
+          rollupDeposits,
+          rollupWithdrawals,
         ],
         [
           blocks,
-          // eslint-disable-next-line max-len
-          { text: 'Txn batches', nextRoute: { pathname: '/batches' as const }, icon: 'txn_batches', isActive: pathname === '/batches' },
-          // eslint-disable-next-line max-len
-          { text: 'Output roots', nextRoute: { pathname: '/output-roots' as const }, icon: 'output_roots', isActive: pathname === '/output-roots' },
-        ],
+          rollupTxnBatches,
+          rollupFeature.type === 'optimistic' ? rollupOutputRoots : undefined,
+        ].filter(Boolean),
         [
           userOps,
           topAccounts,
@@ -123,10 +123,8 @@ export default function useNavItems(): ReturnType {
       blockchainNavItems = [
         [
           txs,
-          // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/deposits' },
-          // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/withdrawals' },
+          rollupDeposits,
+          rollupWithdrawals,
         ],
         [
           blocks,
@@ -142,12 +140,7 @@ export default function useNavItems(): ReturnType {
           txs,
           userOps,
           blocks,
-          {
-            text: 'Txn batches',
-            nextRoute: { pathname: '/batches' as const },
-            icon: 'txn_batches',
-            isActive: pathname === '/batches' || pathname === '/batches/[number]',
-          },
+          rollupTxnBatches,
         ].filter(Boolean),
         [
           topAccounts,

mocks/zkEvm/deposits.ts

@@ -0,0 +1,28 @@
+import type { ZkEvmL2DepositsResponse } from 'types/api/zkEvmL2';
+
+export const baseResponse: ZkEvmL2DepositsResponse = {
+  items: [
+    {
+      block_number: 19681943,
+      index: 182177,
+      l1_transaction_hash: '0x29074452f976064aca1ca5c6e7c82d890c10454280693e6eca0257ae000c8e85',
+      l2_transaction_hash: null,
+      symbol: 'DAI',
+      timestamp: '2022-04-18T11:08:11.000000Z',
+      value: '0.003',
+    },
+    {
+      block_number: 19681894,
+      index: 182176,
+      l1_transaction_hash: '0x0b7d58c0a6b4695ba28d99df928591fb931c812c0aab6d0093ff5040d2f9bc5e',
+      l2_transaction_hash: '0x210d9f70f411de1079e32a98473b04345a5ea6ff2340a8511ebc2df641274436',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T10:58:23.000000Z',
+      value: '0.0046651390188845',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 1,
+  },
+};

mocks/zkEvm/txnBatches.ts

@@ -0,0 +1,40 @@
+import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2';
+
+export const txnBatchData: ZkEvmL2TxnBatch = {
+  acc_input_hash: '0x4bf88aabe33713b7817266d7860912c58272d808da7397cdc627ca53b296fad3',
+  global_exit_root: '0xad3228b676f7d3cd4284a5443f17f1962b36e491b30a40b2405849e597ba5fb5',
+  number: 5,
+  sequence_tx_hash: '0x7ae010e9758441b302db10282807358af460f38c49c618d26a897592f64977f7',
+  state_root: '0x183b4a38a4a6027947ceb93b323cc94c548c8c05cf605d73ca88351d77cae1a3',
+  status: 'Finalized',
+  timestamp: '2023-10-20T10:08:18.000000Z',
+  transactions: [
+    '0xb5d432c270057c223b973f3b5f00dbad32823d9ef26f3e8d97c819c7c573453a',
+  ],
+  verify_tx_hash: '0x6f7eeaa0eb966e63d127bba6bf8f9046d303c2a1185b542f0b5083f682a0e87f',
+};
+
+export const txnBatchesData: ZkEvmL2TxnBatchesResponse = {
+  items: [
+    {
+      timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'Finalized',
+      verify_tx_hash: '0x48139721f792d3a68c3781b4cf50e66e8fc7dbb38adff778e09066ea5be9adb8',
+      sequence_tx_hash: '0x6aa081e8e33a085e4ec7124fcd8a5f7d36aac0828f176e80d4b70e313a11695b',
+      number: 5218590,
+      tx_count: 9,
+    },
+    {
+      timestamp: '2023-06-01T14:46:48.000000Z',
+      status: 'Unfinalized',
+      verify_tx_hash: null,
+      sequence_tx_hash: null,
+      number: 5218591,
+      tx_count: 9,
+    },
+  ],
+  next_page_params: {
+    number: 5902834,
+    items_count: 50,
+  },
+};

mocks/zkEvm/withdrawals.ts

@@ -0,0 +1,28 @@
+import type { ZkEvmL2WithdrawalsResponse } from 'types/api/zkEvmL2';
+
+export const baseResponse: ZkEvmL2WithdrawalsResponse = {
+  items: [
+    {
+      block_number: 11722417,
+      index: 47040,
+      l1_transaction_hash: null,
+      l2_transaction_hash: '0x68c378e412e51553524545ef1d3f00f69496fb37827c0b3b7e0870d245970408',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T09:20:37.000000Z',
+      value: '0.025',
+    },
+    {
+      block_number: 11722480,
+      index: 47041,
+      l1_transaction_hash: '0xbf76feb85b8b8f24dacb17f962dd359f82efc512928d7b11ffca92fb812ad6a5',
+      l2_transaction_hash: '0xfe3c168ac1751b8399f1e819f1d83ee4cf764128bc604d454abee29114dabf49',
+      symbol: 'ETH',
+      timestamp: '2022-04-18T09:23:45.000000Z',
+      value: '4',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    index: 1,
+  },
+};