Scroll views (#2418)

* Scroll views

* review fix

* fix tests

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

@@ -25,6 +25,7 @@ on:
             - optimism_sepolia
             - polygon
             - rootstock
+            - scroll_sepolia
             - shibarium
             - stability
             - zkevm 

.github/workflows/deploy-review.yml

@@ -26,6 +26,7 @@ on:
             - polygon
             - rootstock
             - shibarium
+            - scroll_sepolia
             - stability
             - zkevm
             - zilliqa_prototestnet

configs/envs/.env.scroll_sepolia

@@ -0,0 +1,41 @@
+# Set of ENVs for Scroll Sepolia Testnet network explorer
+# https://scroll-sepolia.blockscout.com
+# This is an auto-generated file. To update all values, run "yarn dev:preset:sync --name=scroll_sepolia"
+
+# 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_API_BASE_PATH=/
+NEXT_PUBLIC_API_HOST=scroll-sepolia.blockscout.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/scroll-testnet.json
+NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xa0d22caf6217a488b1e97b646c5ed88e8a3020a607bcd1f3fe8d4c430bb19ad5
+NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
+NEXT_PUBLIC_HOMEPAGE_HERO_BANNER_CONFIG={'background':['rgba(255, 238, 218, 1)'],'text_color':['rgba(25, 6, 2, 1)']}
+NEXT_PUBLIC_IS_TESTNET=true
+NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
+NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
+NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
+NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/scroll.svg
+NEXT_PUBLIC_NETWORK_ICON_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/scroll-dark.svg
+NEXT_PUBLIC_NETWORK_ID=534351
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/scroll.svg
+NEXT_PUBLIC_NETWORK_LOGO_DARK=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/scroll-dark.svg
+NEXT_PUBLIC_NETWORK_NAME=Scroll Sepolia Testnet
+NEXT_PUBLIC_NETWORK_RPC_URL=https://sepolia-rpc.scroll.io
+NEXT_PUBLIC_NETWORK_SHORT_NAME=Scroll Sepolia Testnet
+NEXT_PUBLIC_OG_ENHANCED_DATA_ENABLED=true
+NEXT_PUBLIC_OG_IMAGE_URL=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/og-images/scroll-testnet.png
+NEXT_PUBLIC_RE_CAPTCHA_APP_SITE_KEY=6Ld0iT8aAAAAAJdju0CmAwGjW7JTDvIw-Q5pwt5T
+NEXT_PUBLIC_STATS_API_HOST=https://stats-scroll-sepolia.k8s-prod-2.blockscout.com
+NEXT_PUBLIC_TRANSACTION_INTERPRETATION_PROVIDER=blockscout
+NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com
+NEXT_PUBLIC_ROLLUP_TYPE=scroll
+NEXT_PUBLIC_ROLLUP_L1_BASE_URL=https://eth-sepolia.blockscout.com/

docs/ENVS.md

@@ -436,7 +436,7 @@ This feature is **enabled by default** with the `coinzilla` ads provider. To swi
 
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
-| NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'arbitrum' \| 'shibarium' \| 'zkEvm' \| 'zkSync' ` | Rollup chain type | Required | - | `'optimistic'` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_TYPE | `'optimistic' \| 'arbitrum' \| 'shibarium' \| 'zkEvm' \| 'zkSync' \| 'scroll'` | Rollup chain type | Required | - | `'optimistic'` | v1.24.0+ |
 | NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for L1 network | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
 | NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | Required for `optimistic` rollups | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
 | NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |

lib/api/resources.ts

@@ -105,6 +105,13 @@ import type {
   RewardsUserDailyClaimResponse,
   RewardsUserReferralsResponse,
 } from 'types/api/rewards';
+import type {
+  ScrollL2BatchesResponse,
+  ScrollL2TxnBatch,
+  ScrollL2TxnBatchTxs,
+  ScrollL2TxnBatchBlocks,
+  ScrollL2MessagesResponse,
+} from 'types/api/scrollL2';
 import type { SearchRedirectResult, SearchResult, SearchResultFilters, SearchResultItem } from 'types/api/search';
 import type { ShibariumWithdrawalsResponse, ShibariumDepositsResponse } from 'types/api/shibarium';
 import type { HomeStats } from 'types/api/stats';
@@ -983,6 +990,51 @@ export const RESOURCES = {
     path: '/api/v2/shibarium/withdrawals/count',
   },
 
+  // SCROLL L2
+  scroll_l2_deposits: {
+    path: '/api/v2/scroll/deposits',
+    filterFields: [],
+  },
+
+  scroll_l2_deposits_count: {
+    path: '/api/v2/scroll/deposits/count',
+  },
+
+  scroll_l2_withdrawals: {
+    path: '/api/v2/scroll/withdrawals',
+    filterFields: [],
+  },
+
+  scroll_l2_withdrawals_count: {
+    path: '/api/v2/scroll/withdrawals/count',
+  },
+
+  scroll_l2_txn_batches: {
+    path: '/api/v2/scroll/batches',
+    filterFields: [],
+  },
+
+  scroll_l2_txn_batches_count: {
+    path: '/api/v2/scroll/batches/count',
+  },
+
+  scroll_l2_txn_batch: {
+    path: '/api/v2/scroll/batches/:number',
+    pathParams: [ 'number' as const ],
+  },
+
+  scroll_l2_txn_batch_txs: {
+    path: '/api/v2/transactions/scroll-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
+  scroll_l2_txn_batch_blocks: {
+    path: '/api/v2/blocks/scroll-batch/:number',
+    pathParams: [ 'number' as const ],
+    filterFields: [],
+  },
+
   // NOVES-FI
   noves_transaction: {
     path: '/api/v2/proxy/noves-fi/transactions/:hash',
@@ -1130,7 +1182,8 @@ export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_reward
 'withdrawals' | 'address_withdrawals' | 'block_withdrawals' |
 'watchlist' | 'private_tags_address' | 'private_tags_tx' |
 'domains_lookup' | 'addresses_lookup' | 'user_ops' | 'validators_stability' | 'validators_blackfort' | 'noves_address_history' |
-'token_transfers_all';
+'token_transfers_all' | 'scroll_l2_txn_batches' | 'scroll_l2_txn_batch_txs' | 'scroll_l2_txn_batch_blocks' |
+'scroll_l2_deposits' | 'scroll_l2_withdrawals';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -1278,6 +1331,8 @@ Q extends 'zksync_l2_txn_batches' ? ZkSyncBatchesResponse :
 Q extends 'zksync_l2_txn_batches_count' ? number :
 Q extends 'zksync_l2_txn_batch' ? ZkSyncBatch :
 Q extends 'zksync_l2_txn_batch_txs' ? ZkSyncBatchTxs :
+Q extends 'scroll_l2_txn_batch_txs' ? ScrollL2TxnBatchTxs :
+Q extends 'scroll_l2_txn_batch_blocks' ? ScrollL2TxnBatchBlocks :
 Q extends 'contract_security_audits' ? SmartContractSecurityAudits :
 Q extends 'addresses_lookup' ? bens.LookupAddressResponse :
 Q extends 'address_domain' ? bens.GetAddressResponse :
@@ -1313,6 +1368,13 @@ Q extends 'rewards_user_daily_claim' ? RewardsUserDailyClaimResponse :
 Q extends 'rewards_user_referrals' ? RewardsUserReferralsResponse :
 Q extends 'token_transfers_all' ? TokenTransferResponse :
 Q extends 'address_xstar_score' ? AddressXStarResponse :
+Q extends 'scroll_l2_txn_batches' ? ScrollL2BatchesResponse :
+Q extends 'scroll_l2_txn_batches_count' ? number :
+Q extends 'scroll_l2_txn_batch' ? ScrollL2TxnBatch :
+Q extends 'scroll_l2_deposits' ? ScrollL2MessagesResponse :
+Q extends 'scroll_l2_deposits_count' ? number :
+Q extends 'scroll_l2_withdrawals' ? ScrollL2MessagesResponse :
+Q extends 'scroll_l2_withdrawals_count' ? number :
 never;
 /* eslint-enable @stylistic/indent */
 

lib/hooks/useNavItems.tsx

@@ -109,7 +109,12 @@ export default function useNavItems(): ReturnType {
 
     const rollupFeature = config.features.rollup;
 
-    if (rollupFeature.isEnabled && (rollupFeature.type === 'optimistic' || rollupFeature.type === 'arbitrum' || rollupFeature.type === 'zkEvm')) {
+    if (rollupFeature.isEnabled && (
+      rollupFeature.type === 'optimistic' ||
+      rollupFeature.type === 'arbitrum' ||
+      rollupFeature.type === 'zkEvm' ||
+      rollupFeature.type === 'scroll'
+    )) {
       blockchainNavItems = [
         [
           txs,

mocks/scroll/messages.ts

@@ -0,0 +1,26 @@
+import type { ScrollL2MessagesResponse } from 'types/api/scrollL2';
+
+export const baseResponse: ScrollL2MessagesResponse = {
+  items: [
+    {
+      id: 930795,
+      origination_transaction_block_number: 20639178,
+      origination_transaction_hash: '0x70380f2c6ecd53aa6e0608e6c9d770acaa29c0508869ec296bae3e09678ea9f4',
+      origination_timestamp: '2024-08-30T05:03:23.000000Z',
+      completion_transaction_hash: null,
+      value: '5084131319054877748',
+    },
+    {
+      id: 930748,
+      origination_transaction_block_number: 20638104,
+      origination_transaction_hash: '0x7e7b4d5ff0b7a6af5e52f4aa2ad9eca3c0c5664368cbb781e04b5b13c6109b2b',
+      origination_timestamp: '2024-08-30T01:26:35.000000Z',
+      completion_transaction_hash: '0x426b16ea3a42228f6d754ae55c348986122cdb1e4331b6fd454975776f513ea1',
+      value: '0',
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    id: 1,
+  },
+};

mocks/scroll/txnBatches.ts

@@ -0,0 +1,50 @@
+import type { ScrollL2BatchesResponse } from 'types/api/scrollL2';
+
+export const batchData = {
+  number: 66928,
+  commitment_transaction: {
+    block_number: 19114878,
+    hash: '0x57552c0dbcf56383ee2efdf8fd6be143b355135fc300361924582c308877b8b7',
+    timestamp: '2024-01-29T21:31:35.000000Z',
+  },
+  confirmation_transaction: {
+    block_number: null,
+    hash: null,
+    timestamp: null,
+  },
+  data_availability: {
+    batch_data_container: 'in_blob4844' as const,
+  },
+  start_block: 456000,
+  end_block: 789000,
+  transaction_count: 654,
+};
+
+export const baseResponse: ScrollL2BatchesResponse = {
+  items: [
+    batchData,
+    {
+      number: 66879,
+      commitment_transaction: {
+        block_number: 19114386,
+        hash: '0x0d33245814b9e61c8f0ed6fd3fb7464f34be33d2c3aee69629d65e8995d77edc',
+        timestamp: '2024-01-29T19:52:35.000000Z',
+      },
+      confirmation_transaction: {
+        block_number: 19114558,
+        hash: '0x6f9a19d503947ec91d6e9d5c2129913a7def86fd0f87061c06e5994cf857bee0',
+        timestamp: '2024-01-29T20:27:11.000000Z',
+      },
+      data_availability: {
+        batch_data_container: 'in_calldata',
+      },
+      start_block: 456000,
+      end_block: 789000,
+      transaction_count: 962,
+    },
+  ],
+  next_page_params: {
+    items_count: 50,
+    number: 1,
+  },
+};

nextjs/getServerSideProps.ts

@@ -67,7 +67,7 @@ export const verifiedAddresses: GetServerSideProps<Props> = async(context) => {
   return account(context);
 };
 
-const DEPOSITS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum' ];
+const DEPOSITS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum', 'scroll' ];
 export const deposits: GetServerSideProps<Props> = async(context) => {
   if (!(rollupFeature.isEnabled && DEPOSITS_ROLLUP_TYPES.includes(rollupFeature.type))) {
     return {
@@ -78,7 +78,7 @@ export const deposits: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-const WITHDRAWALS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum' ];
+const WITHDRAWALS_ROLLUP_TYPES: Array<RollupType> = [ 'optimistic', 'shibarium', 'zkEvm', 'arbitrum', 'scroll' ];
 export const withdrawals: GetServerSideProps<Props> = async(context) => {
   if (
     !config.features.beaconChain.isEnabled &&
@@ -112,7 +112,7 @@ export const outputRoots: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-const BATCH_ROLLUP_TYPES: Array<RollupType> = [ 'zkEvm', 'zkSync', 'arbitrum', 'optimistic' ];
+const BATCH_ROLLUP_TYPES: Array<RollupType> = [ 'zkEvm', 'zkSync', 'arbitrum', 'optimistic', 'scroll' ];
 export const batch: GetServerSideProps<Props> = async(context) => {
   if (!(rollupFeature.isEnabled && BATCH_ROLLUP_TYPES.includes(rollupFeature.type))) {
     return {

pages/batches/[number].tsx

@@ -23,6 +23,8 @@ const Batch = dynamic(() => {
       return import('ui/pages/ZkEvmL2TxnBatch');
     case 'zkSync':
       return import('ui/pages/ZkSyncL2TxnBatch');
+    case 'scroll':
+      return import('ui/pages/ScrollL2TxnBatch');
   }
   throw new Error('Txn batches feature is not enabled.');
 }, { ssr: false });

pages/batches/index.tsx

@@ -21,6 +21,8 @@ const Batches = dynamic(() => {
       return import('ui/pages/OptimisticL2TxnBatches');
     case 'arbitrum':
       return import('ui/pages/ArbitrumL2TxnBatches');
+    case 'scroll':
+      return import('ui/pages/ScrollL2TxnBatches');
   }
   throw new Error('Txn batches feature is not enabled.');
 }, { ssr: false });

pages/deposits/index.tsx

@@ -24,6 +24,10 @@ const Deposits = dynamic(() => {
     return import('ui/pages/ZkEvmL2Deposits');
   }
 
+  if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
+    return import('ui/pages/ScrollL2Deposits');
+  }
+
   throw new Error('Deposits feature is not enabled.');
 }, { ssr: false });
 

pages/withdrawals/index.tsx

@@ -25,6 +25,10 @@ const Withdrawals = dynamic(() => {
     return import('ui/pages/ZkEvmL2Withdrawals');
   }
 
+  if (rollupFeature.isEnabled && rollupFeature.type === 'scroll') {
+    return import('ui/pages/ScrollL2Withdrawals');
+  }
+
   if (beaconChainFeature.isEnabled) {
     return import('ui/pages/BeaconChainWithdrawals');
   }

playwright/fixtures/mockEnvs.ts

@@ -40,6 +40,10 @@ export const ENVS_MAP: Record<string, Array<[string, string]>> = {
     [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
     [ 'NEXT_PUBLIC_VIEWS_CONTRACT_EXTRA_VERIFICATION_METHODS', 'none' ],
   ],
+  scrollRollup: [
+    [ 'NEXT_PUBLIC_ROLLUP_TYPE', 'scroll' ],
+    [ 'NEXT_PUBLIC_ROLLUP_L1_BASE_URL', 'https://localhost:3101' ],
+  ],
   bridgedTokens: [
     [ 'NEXT_PUBLIC_BRIDGED_TOKENS_CHAINS', '[{"id":"1","title":"Ethereum","short_title":"ETH","base_url":"https://eth.blockscout.com/token/"},{"id":"56","title":"Binance Smart Chain","short_title":"BSC","base_url":"https://bscscan.com/token/"},{"id":"99","title":"POA","short_title":"POA","base_url":"https://blockscout.com/poa/core/token/"}]' ],
     [ 'NEXT_PUBLIC_BRIDGED_TOKENS_BRIDGES', '[{"type":"omni","title":"OmniBridge","short_title":"OMNI"},{"type":"amb","title":"Arbitrary Message Bridge","short_title":"AMB"}]' ],

stubs/scrollL2.ts

@@ -0,0 +1,32 @@
+import type { ScrollL2MessageItem, ScrollL2TxnBatch } from 'types/api/scrollL2';
+
+import { TX_HASH } from './tx';
+
+export const SCROLL_L2_TXN_BATCH: ScrollL2TxnBatch = {
+  commitment_transaction: {
+    block_number: 4053979,
+    hash: '0xd04d626495ef69abd37ae3ea585ed03319a3d3b50cf10874f7f36741c7b45a18',
+    timestamp: '2023-08-09T08:09:12.000000Z',
+  },
+  confirmation_transaction: {
+    block_number: null,
+    hash: null,
+    timestamp: null,
+  },
+  end_block: 1711,
+  number: 273,
+  start_block: 1697,
+  transaction_count: 15,
+  data_availability: {
+    batch_data_container: 'in_blob4844',
+  },
+};
+
+export const SCROLL_L2_MESSAGE_ITEM: ScrollL2MessageItem = {
+  id: 930795,
+  origination_transaction_block_number: 20639178,
+  origination_transaction_hash: TX_HASH,
+  origination_timestamp: '2024-08-30T05:03:23.000000Z',
+  completion_transaction_hash: 'TX_HASH',
+  value: '5084131319054877748',
+};

tools/preset-sync/index.ts

@@ -18,6 +18,7 @@ const PRESETS = {
   optimism_sepolia: 'https://optimism-sepolia.blockscout.com',
   polygon: 'https://polygon.blockscout.com',
   rootstock_testnet: 'https://rootstock-testnet.blockscout.com',
+  scroll_sepolia: 'https://scroll-sepolia.blockscout.com',
   shibarium: 'https://www.shibariumscan.io',
   stability_testnet: 'https://stability-testnet.blockscout.com',
   zkevm: 'https://zkevm.blockscout.com',