Move layer numbering to the ENV (#3278)

* Rollups: move layer numbering to the ENV

Resolves #2554

* fix review comments

Author: tom2drum

configs/app/features/rollup.ts

@@ -32,6 +32,7 @@ const title = 'Rollup (L2) chain';
 const config: Feature<{
   type: RollupType;
   stageIndex: string | undefined;
+  layerNumber: number;
   homepage: { showLatestBlocks: boolean };
   outputRootsEnabled: boolean;
   interopEnabled: boolean;
@@ -50,6 +51,7 @@ const config: Feature<{
       isEnabled: true,
       type,
       stageIndex: getEnvValue('NEXT_PUBLIC_ROLLUP_STAGE_INDEX'),
+      layerNumber: Number(getEnvValue('NEXT_PUBLIC_ROLLUP_LAYER_NUMBER') || 2),
       L2WithdrawalUrl: type === 'optimistic' ? L2WithdrawalUrl : undefined,
       outputRootsEnabled: type === 'optimistic' && getEnvValue('NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED') === 'true',
       interopEnabled: type === 'optimistic' && getEnvValue('NEXT_PUBLIC_INTEROP_ENABLED') === 'true',

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

@@ -169,4 +169,17 @@ export const rollupSchema = yup
           value => value === undefined,
         ),
       }),
+      NEXT_PUBLIC_ROLLUP_LAYER_NUMBER: yup.number()
+        .positive()
+        .integer()
+        .min(2)
+        .when('NEXT_PUBLIC_ROLLUP_TYPE', {
+          is: (value: string) => Boolean(value),
+          then: (schema) => schema,
+          otherwise: (schema) => schema.test(
+            'not-exist',
+            'NEXT_PUBLIC_ROLLUP_LAYER_NUMBER can only be used with NEXT_PUBLIC_ROLLUP_TYPE',
+            value => value === undefined,
+          ),
+        }),
   });

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

@@ -6,4 +6,5 @@ NEXT_PUBLIC_ROLLUP_HOMEPAGE_SHOW_LATEST_BLOCKS=true
 NEXT_PUBLIC_ROLLUP_OUTPUT_ROOTS_ENABLED=false
 NEXT_PUBLIC_ROLLUP_PARENT_CHAIN={'baseUrl':'https://explorer.duckchain.io'}
 NEXT_PUBLIC_INTEROP_ENABLED=true
-NEXT_PUBLIC_ROLLUP_STAGE_INDEX=1
+NEXT_PUBLIC_ROLLUP_STAGE_INDEX=1
+NEXT_PUBLIC_ROLLUP_LAYER_NUMBER=5

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

@@ -3,6 +3,7 @@ import { writeFileSync } from 'node:fs';
 import { dirname, resolve as resolvePath } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import dedent from 'dedent';
+import { layerLabels } from 'lib/rollups/utils';
 
 const currentFilePath = fileURLToPath(import.meta.url);
 const currentDir = dirname(currentFilePath);
@@ -25,6 +26,8 @@ function run() {
 
         const rollupFeature = config.features.rollup;
         const parentChainUrl = rollupFeature.isEnabled ? rollupFeature.parentChain.baseUrl : undefined;
+        const currentToParentLayerLabel = layerLabels.current + '→' + layerLabels.parent;
+        const parentToCurrentLayerLabel = layerLabels.parent + '→' + layerLabels.current;
 
         const validatorsFeature = config.features.validators;
 
@@ -111,19 +114,19 @@ function run() {
             curl --request GET --url '${ generalApiUrl }/api/v2/blocks/arbitrum-batch/{batch_number}'
             \`\`\`
                             
-            ### Get L1→L2 messages
+            ### Get ${ parentToCurrentLayerLabel } messages
                             
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/arbitrum/messages/to-rollup'
             \`\`\`
                             
-            ### Get L2→L1 messages
+            ### Get ${ currentToParentLayerLabel } messages
                             
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/arbitrum/messages/from-rollup'
             \`\`\`
                             
-            ### L2→L1 messages by transaction:
+            ### ${ currentToParentLayerLabel } messages by transaction:
                             
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/arbitrum/messages/withdrawals/{transactions_hash}'
@@ -155,13 +158,13 @@ function run() {
             curl --request GET --url '${ generalApiUrl }/api/v2/optimism/games'
             \`\`\`
                 
-            ### Get L1→L2 messages
+            ### Get ${ parentToCurrentLayerLabel } messages
                 
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/optimism/deposits'
             \`\`\`
                 
-            ### Get L2→L1 messages
+            ### Get ${ currentToParentLayerLabel } messages
                 
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/optimism/withdrawals'
@@ -299,27 +302,27 @@ function run() {
             curl --request GET --url '${ generalApiUrl }/api/v2/blocks/scroll-batch/{batch_number}'
             \`\`\`
                 
-            ### Deposits (L1→L2)
+            ### Deposits (${ parentToCurrentLayerLabel })
                 
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/scroll/deposits'
             \`\`\`
                 
-            ### Withdrawals (L2→L1)
+            ### Withdrawals (${ currentToParentLayerLabel })
                 
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/scroll/withdrawals'
             \`\`\`
         ` : undefined;
 
         const SHIBARIUM_CHAIN_TEMPLATE = rollupFeature.isEnabled && rollupFeature.type === 'shibarium' ? `
-            ### Deposits (L1→L2)
+            ### Deposits (${ parentToCurrentLayerLabel })
                 
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/shibarium/deposits'
             \`\`\`
                 
-            ### Withdrawals (L2→L1)
+            ### Withdrawals (${ currentToParentLayerLabel })
                 
             \`\`\`bash
             curl --request GET --url '${ generalApiUrl }/api/v2/shibarium/withdrawals'

docs/ENVS.md

@@ -529,8 +529,9 @@ Ads are enabled by default on all self-hosted instances. If you would like to di
 | Variable | Type| Description | Compulsoriness  | Default value | Example value | Version |
 | --- | --- | --- | --- | --- | --- | --- |
 | 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. **DEPRECATED** _Use `NEXT_PUBLIC_ROLLUP_PARENT_CHAIN` instead_ | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
-| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for L2 -> L1 withdrawals (Optimistic stack only) | - | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_L1_BASE_URL | `string` | Blockscout base URL for parent network. **DEPRECATED** _Use `NEXT_PUBLIC_ROLLUP_PARENT_CHAIN` instead_ | Required | - | `'http://eth-goerli.blockscout.com'` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_L2_WITHDRAWAL_URL | `string` | URL for rollup to parent chain withdrawals (Optimistic stack only) | - | - | `https://app.optimism.io/bridge/withdraw` | v1.24.0+ |
+| NEXT_PUBLIC_ROLLUP_LAYER_NUMBER | `number` | Layer number of the rollup | - | `2` | `3` | upcoming |
 | NEXT_PUBLIC_ROLLUP_STAGE_INDEX | `1 \| 2` | Reflects the maturity and decentralization level of the chain based on [L2BEAT's framework](https://medium.com/l2beat/introducing-stages-a-framework-to-evaluate-rollups-maturity-d290bb22befe). The label will be added to the sidebar according to the provided stage index. Not applicable for testnets. | - | - | `1` | v2.1.0+ |
 | NEXT_PUBLIC_FAULT_PROOF_ENABLED | `boolean` | Set to `true` for chains with fault proof system enabled (Optimistic stack only) | - | - | `true` | v1.31.0+ |
 | NEXT_PUBLIC_HAS_MUD_FRAMEWORK | `boolean` | Set to `true` for instances that use MUD framework (Optimistic stack only) | - | - | `true` | v1.33.0+ |
@@ -546,7 +547,7 @@ Ads are enabled by default on all self-hosted instances. If you would like to di
 | Variable | Type| Description | Compulsoriness  | Default value | Example value |
 | --- | --- | --- | --- | --- | --- |
 | id | `number` | Chain id, see [https://chainlist.org](https://chainlist.org) for the reference. | - | - | `42` |
-| name | `string` | Displayed name of the chain. Set to customize L1 transaction status labels in the UI (e.g., "Sent to <chain-name>"). Currently, this setting is applicable only for Arbitrum-based chains. | - | - | `DuckChain` |
+| name | `string` | Displayed name of the chain. Set to customize parent chain transaction status labels in the UI (e.g., "Sent to <chain-name>"). Currently, this setting is applicable only for Arbitrum-based chains. | - | - | `DuckChain` |
 | baseUrl | `string` | Base url of the chain explorer. | Required | - | `https://explorer.duckchain.io` |
 | rpcUrls | `Array<string>` | Chain public RPC server urls, see [https://chainlist.org](https://chainlist.org) for the reference. | - | - | `['https://rpc.duckchain.io']` |
 | currency | `{ name: string; symbol: string; decimals: number; }` | Chain currency config. | - | - | `{ name: Quack, symbol: QUA, decimals: 18 }` |

lib/hooks/useNavItems.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { NavItemInternal, NavItem, NavGroupItem } from 'types/client/navigation';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { rightLineArrow } from 'toolkit/utils/htmlEntities';
 
 const marketplaceFeature = config.features.marketplace;
@@ -98,13 +99,13 @@ export default function useNavItems(): ReturnType {
       isActive: pathname === '/validators' || pathname === '/validators/[id]',
     } : null;
     const rollupDeposits = {
-      text: `Deposits (L1${ rightLineArrow }L2)`,
+      text: `Deposits (${ layerLabels.parent }${ rightLineArrow }${ layerLabels.current })`,
       nextRoute: { pathname: '/deposits' as const },
       icon: 'navigation/deposits',
       isActive: pathname === '/deposits',
     };
     const rollupWithdrawals = {
-      text: `Withdrawals (L2${ rightLineArrow }L1)`,
+      text: `Withdrawals (${ layerLabels.current }${ rightLineArrow }${ layerLabels.parent })`,
       nextRoute: { pathname: '/withdrawals' as const },
       icon: 'navigation/withdrawals',
       isActive: pathname === '/withdrawals',

lib/metadata/templates/title.ts

@@ -3,6 +3,7 @@ import { getFeaturePayload } from 'configs/app/features/types';
 import type { Route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 
 const dappEntityName = (getFeaturePayload(config.features.marketplace)?.titles.entity_name ?? '').toLowerCase();
 
@@ -43,15 +44,15 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/account/verified-addresses': '%network_name% - my verified addresses',
   '/public-tags/submit': '%network_name% - public tag requests',
   '/withdrawals': '%network_name% withdrawals - track on %network_name% explorer',
-  '/txn-withdrawals': '%network_name% L2 to L1 message relayer',
+  '/txn-withdrawals': `${ layerLabels.current } to ${ layerLabels.parent } message relayer`,
   '/visualize/sol2uml': '%network_name% Solidity UML diagram',
   '/csv-export': '%network_name% export data to CSV',
   '/deposits': '%network_name% deposits - track on %network_name% explorer',
   '/output-roots': '%network_name% output roots',
   '/dispute-games': '%network_name% dispute games',
   '/batches': '%network_name% txn batches',
-  '/batches/[number]': '%network_name% L2 txn batch %number%',
-  '/batches/celestia/[height]/[commitment]': '%network_name% L2 txn batch %height% %commitment%',
+  '/batches/[number]': `%network_name% ${ layerLabels.current } txn batch %number%`,
+  '/batches/celestia/[height]/[commitment]': `%network_name% ${ layerLabels.current } txn batch %height% %commitment%`,
   '/blobs/[hash]': '%network_name% blob %hash% details',
   '/ops': 'User operations on %network_name% - %network_name% explorer',
   '/op/[hash]': '%network_name% user operation %hash%',

lib/rollups/utils.ts

@@ -0,0 +1,37 @@
+import type { ZKEVM_L2_TX_STATUSES } from 'types/api/transaction';
+import type { ZKEVM_L2_TX_BATCH_STATUSES } from 'types/api/zkEvmL2';
+import type { ZKSYNC_L2_TX_BATCH_STATUSES } from 'types/api/zkSyncL2';
+
+import config from 'configs/app';
+
+const feature = config.features.rollup;
+
+export const layerLabels = feature.isEnabled ? {
+  current: `L${ feature.layerNumber }`,
+  parent: `L${ feature.layerNumber - 1 }`,
+} : {
+  current: 'L2',
+  parent: 'L1',
+};
+
+export const formatZkEvmTxStatus = (status: typeof ZKEVM_L2_TX_STATUSES[number]) => {
+  switch (status) {
+    case 'L1 Confirmed':
+      return `${ layerLabels.parent } Confirmed`;
+    default:
+      return status;
+  }
+};
+
+export const formatZkEvmL2TxnBatchStatus = (status: typeof ZKEVM_L2_TX_BATCH_STATUSES[number]) => {
+  switch (status) {
+    case 'L1 Sequence Confirmed':
+      return `${ layerLabels.parent } Sequence Confirmed`;
+    default:
+      return status;
+  }
+};
+
+export const formatZkSyncL2TxnBatchStatus = (status: typeof ZKSYNC_L2_TX_BATCH_STATUSES[number]) => {
+  return status.replace('L2', layerLabels.current).replace('L1', layerLabels.parent);
+};

ui/block/BlockDetails.tsx

@@ -13,6 +13,7 @@ import getBlockReward from 'lib/block/getBlockReward';
 import { useMultichainContext } from 'lib/contexts/multichain';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import * as arbitrum from 'lib/rollups/arbitrum';
+import { formatZkSyncL2TxnBatchStatus, layerLabels } from 'lib/rollups/utils';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
 import { Link } from 'toolkit/chakra/link';
@@ -46,6 +47,8 @@ import BlockDetailsBlobInfo from './details/BlockDetailsBlobInfo';
 import BlockDetailsZilliqaQuorumCertificate from './details/BlockDetailsZilliqaQuorumCertificate';
 import type { BlockQuery } from './useBlockQuery';
 
+const zkSyncVerificationSteps = ZKSYNC_L2_TX_BATCH_STATUSES.map(formatZkSyncL2TxnBatchStatus);
+
 interface Props {
   query: BlockQuery;
 }
@@ -174,10 +177,10 @@ const BlockDetails = ({ query }: Props) => {
       { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
         <>
           <DetailedInfo.ItemLabel
-            hint="The most recent L1 block height as of this L2 block"
+            hint={ `The most recent ${ layerLabels.parent } block height as of this ${ layerLabels.current } block` }
             isLoading={ isPlaceholderData }
           >
-            L1 block height
+            { layerLabels.parent } block height
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             <BlockEntityL1 isLoading={ isPlaceholderData } number={ data.arbitrum.l1_block_number }/>
@@ -305,8 +308,13 @@ const BlockDetails = ({ query }: Props) => {
             Status
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
-            { rollupFeature.type === 'zkSync' && data.zksync &&
-              <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/> }
+            { rollupFeature.type === 'zkSync' && data.zksync && (
+              <VerificationSteps
+                steps={ zkSyncVerificationSteps }
+                currentStep={ formatZkSyncL2TxnBatchStatus(data.zksync.status) }
+                isLoading={ isPlaceholderData }
+              />
+            ) }
             { rollupFeature.type === 'arbitrum' && data.arbitrum && (
               <VerificationSteps
                 steps={ arbitrum.verificationSteps }
@@ -344,7 +352,7 @@ const BlockDetails = ({ query }: Props) => {
           { data.arbitrum?.commitment_transaction.hash && (
             <>
               <DetailedInfo.ItemLabel
-                hint="L1 transaction containing this batch commitment"
+                hint={ `${ layerLabels.parent } transaction containing this batch commitment` }
                 isLoading={ isPlaceholderData }
               >
                 Commitment tx
@@ -358,7 +366,7 @@ const BlockDetails = ({ query }: Props) => {
           { data.arbitrum?.confirmation_transaction.hash && (
             <>
               <DetailedInfo.ItemLabel
-                hint="L1 transaction containing confirmation of this batch"
+                hint={ `${ layerLabels.parent } transaction containing confirmation of this batch` }
                 isLoading={ isPlaceholderData }
               >
                 Confirmation tx
@@ -684,7 +692,7 @@ const BlockDetails = ({ query }: Props) => {
         { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.arbitrum.send_count && (
           <>
             <DetailedInfo.ItemLabel
-              hint="The cumulative number of L2 to L1 transactions as of this block"
+              hint={ `The cumulative number of ${ layerLabels.current } to ${ layerLabels.parent } transactions as of this block` }
               isLoading={ isPlaceholderData }
             >
               Send count
@@ -694,7 +702,7 @@ const BlockDetails = ({ query }: Props) => {
             </DetailedInfo.ItemValue>
 
             <DetailedInfo.ItemLabel
-              hint="The root of the Merkle accumulator representing all L2 to L1 transactions as of this block"
+              hint={ `The root of the Merkle accumulator representing all ${ layerLabels.current } to ${ layerLabels.parent } transactions as of this block` }
               isLoading={ isPlaceholderData }
             >
               Send root
@@ -704,7 +712,7 @@ const BlockDetails = ({ query }: Props) => {
             </DetailedInfo.ItemValue>
 
             <DetailedInfo.ItemLabel
-              hint="The number of delayed L1 to L2 messages read as of this block"
+              hint={ `The number of delayed ${ layerLabels.parent } to ${ layerLabels.current } messages read as of this block` }
               isLoading={ isPlaceholderData }
             >
               Delayed messages

ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
@@ -24,7 +25,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block No</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } block No</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntityL1
           number={ item.l1_block_number }
@@ -33,7 +34,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } txn hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <TxEntity
           isLoading={ isLoading }
@@ -51,7 +52,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } txn hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <TxEntityL1
           isLoading={ isLoading }
@@ -61,7 +62,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn origin</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } txn origin</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <AddressEntityL1
           address={{ hash: item.l1_transaction_origin, name: '', is_contract: false, is_verified: false, ens_domain_name: null, implementations: null }}