Move layer numbering to the ENV (#3278)

* Rollups: move layer numbering to the ENV

Resolves #2554

* fix review comments

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,13 +302,13 @@ 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'
@@ -313,13 +316,13 @@ function run() {
         ` : 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 }}

ui/deposits/optimisticL2/OptimisticDepositsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -20,14 +21,14 @@ const OptimisticDepositsTable = ({ items, top, isLoading }: Props) => {
       <TableRoot tableLayout="auto" minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader>L1 block No</TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } block No</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
             <TableColumnHeader>
               Timestamp
               <TimeFormatToggle/>
             </TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
-            <TableColumnHeader>L1 txn origin</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn origin</TableColumnHeader>
             <TableColumnHeader isNumeric>Gas limit</TableColumnHeader>
           </TableRow>
         </TableHeaderSticky>

ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -24,7 +25,7 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } block</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntityL1
           number={ item.origination_transaction_block_number }
@@ -40,7 +41,7 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
         </Skeleton>
       </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 }
@@ -59,7 +60,7 @@ const ScrollL2DepositsListItem = ({ 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>
         { item.completion_transaction_hash ? (
           <TxEntity

ui/deposits/scrollL2/ScrollL2DepositsTable.tsx

@@ -4,6 +4,7 @@ import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -21,14 +22,14 @@ const ScrollL2DepositsTable = ({ items, top, isLoading }: Props) => {
       <TableRoot tableLayout="auto" minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader>L1 block</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } block</TableColumnHeader>
             <TableColumnHeader>Index</TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
             <TableColumnHeader>
               Timestamp
               <TimeFormatToggle/>
             </TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
             <TableColumnHeader isNumeric>Value { config.chain.currency.symbol }</TableColumnHeader>
           </TableRow>
         </TableHeaderSticky>

ui/deposits/shibarium/DepositsListItem.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ShibariumDepositsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -22,7 +23,7 @@ const DepositsListItem = ({ 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 }
@@ -32,7 +33,7 @@ const DepositsListItem = ({ 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 }
@@ -43,7 +44,7 @@ const DepositsListItem = ({ 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 }

ui/deposits/shibarium/DepositsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ShibariumDepositsItem } from 'types/api/shibarium';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -20,9 +21,9 @@ const DepositsTable = ({ items, top, isLoading }: Props) => {
       <TableRoot tableLayout="auto" minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader>L1 block No</TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } block No</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
             <TableColumnHeader>User</TableColumnHeader>
             <TableColumnHeader>
               Timestamp

ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -25,7 +26,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } block</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntityL1
           number={ item.block_number }
@@ -42,7 +43,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
         </Skeleton>
       </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 }
@@ -62,7 +63,7 @@ const ZkEvmL2DepositsListItem = ({ 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>
         { item.l2_transaction_hash ? (
           <TxEntity

ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -20,14 +21,14 @@ const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
       <TableRoot tableLayout="auto" minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader>L1 block</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } block</TableColumnHeader>
             <TableColumnHeader>Index</TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
             <TableColumnHeader>
               Timestamp
               <TimeFormatToggle/>
             </TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
             <TableColumnHeader isNumeric>Value</TableColumnHeader>
             <TableColumnHeader>Token</TableColumnHeader>
           </TableRow>

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
@@ -40,7 +41,7 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
         </Skeleton>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } block #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntityL2
           isLoading={ isLoading }

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -21,7 +22,7 @@ const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>Index</TableColumnHeader>
           <TableColumnHeader>Game type</TableColumnHeader>
           <TableColumnHeader>Address</TableColumnHeader>
-          <TableColumnHeader>L2 block #</TableColumnHeader>
+          <TableColumnHeader>{ layerLabels.current } block #</TableColumnHeader>
           <TableColumnHeader>
             Timestamp
             <TimeFormatToggle/>

ui/home/Stats.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 
 import config from 'configs/app';
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { HOMEPAGE_STATS, HOMEPAGE_STATS_MICROSERVICE } from 'stubs/stats';
 import GasInfoTooltip from 'ui/shared/gas/GasInfoTooltip';
 import GasPrice from 'ui/shared/gas/GasPrice';
@@ -168,7 +169,7 @@ const Stats = () => {
       apiData?.last_output_root_size && {
         id: 'latest_l1_state_batch' as const,
         icon: 'txn_batches' as const,
-        label: 'Latest L1 state batch',
+        label: `Latest ${ layerLabels.parent } state batch`,
         value: apiData?.last_output_root_size,
         href: { pathname: '/batches' as const },
         isLoading,

ui/home/Transactions.tsx

@@ -2,6 +2,7 @@ import { HStack } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { SocketProvider } from 'lib/socket/context';
 import { Heading } from 'toolkit/chakra/heading';
 import AdaptiveTabs from 'toolkit/components/AdaptiveTabs/AdaptiveTabs';
@@ -39,9 +40,9 @@ const Transactions = () => {
       },
       { id: 'txn', title: zetachainFeature.isEnabled ? 'ZetaChain EVM' : 'Latest txn', component: <LatestTxs/> },
       rollupFeature.isEnabled && rollupFeature.type === 'optimistic' &&
-        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestOptimisticDeposits/> },
+        { id: 'deposits', title: `Deposits (${ layerLabels.parent }→${ layerLabels.current } txn)`, component: <LatestOptimisticDeposits/> },
       rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' &&
-        { id: 'deposits', title: 'Deposits (L1→L2 txn)', component: <LatestArbitrumDeposits/> },
+        { id: 'deposits', title: `Deposits (${ layerLabels.parent }→${ layerLabels.current } txn)`, component: <LatestArbitrumDeposits/> },
       isAuth && { id: 'watchlist', title: 'Watch list', component: <LatestWatchlistTxs/> },
     ].filter(Boolean);
     return (

ui/home/latestDeposits/LatestDeposits.tsx

@@ -9,6 +9,7 @@ import React from 'react';
 import { route } from 'nextjs-routes';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import { layerLabels } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
@@ -96,11 +97,11 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
           </Flex>
           <Grid gridTemplateColumns="56px auto">
             <Skeleton loading={ isLoading } my="5px" w="fit-content">
-              L1 txn
+              { layerLabels.parent } txn
             </Skeleton>
             { l1TxLink }
             <Skeleton loading={ isLoading } my="3px" w="fit-content">
-              L2 txn
+              { layerLabels.current } txn
             </Skeleton>
             { l2TxLink }
           </Grid>
@@ -112,7 +113,7 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
       <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
         { l1BlockLink }
         <Skeleton loading={ isLoading } w="fit-content" h="fit-content" my="5px">
-          L1 txn
+          { layerLabels.parent } txn
         </Skeleton>
         { l1TxLink }
         { item.timestamp ? (
@@ -127,7 +128,7 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
           />
         ) : <GridItem/> }
         <Skeleton loading={ isLoading } w="fit-content" h="fit-content" my="2px">
-          L2 txn
+          { layerLabels.current } txn
         </Skeleton>
         { l2TxLink }
       </Grid>

ui/home/latestDeposits/LatestDepositsItem.tsx

@@ -6,6 +6,7 @@ import {
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -68,11 +69,11 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
           </Flex>
           <Grid gridTemplateColumns="56px auto">
             <Skeleton loading={ isLoading } my="5px" w="fit-content">
-              L1 txn
+              { layerLabels.parent } txn
             </Skeleton>
             { l1TxLink }
             <Skeleton loading={ isLoading } my="3px" w="fit-content">
-              L2 txn
+              { layerLabels.current } txn
             </Skeleton>
             { l2TxLink }
           </Grid>
@@ -84,7 +85,7 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
       <Grid width="100%" columnGap={ 4 } rowGap={ 2 } templateColumns="max-content max-content auto" w="100%">
         { l1BlockLink }
         <Skeleton loading={ isLoading } w="fit-content" h="fit-content" my="5px">
-          L1 txn
+          { layerLabels.parent } txn
         </Skeleton>
         { l1TxLink }
         <TimeWithTooltip
@@ -97,7 +98,7 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
           my="2px"
         />
         <Skeleton loading={ isLoading } w="fit-content" h="fit-content" my="2px">
-          L2 txn
+          { layerLabels.current } txn
         </Skeleton>
         { l2TxLink }
       </Grid>

ui/messages/ArbitrumL2Messages.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { ARBITRUM_MESSAGES_ITEM } from 'stubs/arbitrumL2';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -85,8 +86,8 @@ const ArbitrumL2Messages = ({ direction }: Props) => {
     <>
       <PageTitle
         title={ direction === 'from-rollup' ?
-          `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` :
-          `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` }
+          `Withdrawals (${ layerLabels.current }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.parent })` :
+          `Deposits (${ layerLabels.parent }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.current })` }
         withTextAd
       />
       <DataListDisplay

ui/messages/ArbitrumL2MessagesListItem.tsx

@@ -6,6 +6,7 @@ import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -35,7 +36,7 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
 
       { direction === 'to-rollup' && (
         <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } block</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             { item.origination_transaction_block_number ? (
               <BlockEntityL1
@@ -69,7 +70,7 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
         </Skeleton>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } transaction</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         { l2TxHash ? (
           <TxEntity
@@ -104,7 +105,7 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
           <ArbitrumL2MessageStatus status={ item.status } isLoading={ isLoading }/> }
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } transaction</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         { l1TxHash ? (
           <TxEntityL1

ui/messages/ArbitrumL2MessagesTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -20,16 +21,16 @@ const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) =>
     <TableRoot tableLayout="auto" minW="950px">
       <TableHeaderSticky top={ top }>
         <TableRow>
-          { direction === 'to-rollup' && <TableColumnHeader>L1 block</TableColumnHeader> }
+          { direction === 'to-rollup' && <TableColumnHeader>{ layerLabels.parent } block</TableColumnHeader> }
           { direction === 'from-rollup' && <TableColumnHeader>From</TableColumnHeader> }
           <TableColumnHeader>Message #</TableColumnHeader>
-          <TableColumnHeader>L2 transaction</TableColumnHeader>
+          <TableColumnHeader>{ layerLabels.current } transaction</TableColumnHeader>
           <TableColumnHeader>
             Timestamp
             <TimeFormatToggle/>
           </TableColumnHeader>
           <TableColumnHeader>Status</TableColumnHeader>
-          <TableColumnHeader>L1 transaction</TableColumnHeader>
+          <TableColumnHeader>{ layerLabels.parent } transaction</TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>
       <TableBody>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
@@ -24,7 +25,7 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 output index</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } output index</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value fontWeight={ 600 } color="text.primary">
         <Skeleton loading={ isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
       </ListItemMobileGrid.Value>
@@ -38,7 +39,7 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block #</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } block #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntityL2
           isLoading={ isLoading }
@@ -47,7 +48,7 @@ const OptimisticL2OutputRootsListItem = ({ 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 py="3px">
         <TxEntityL1
           isLoading={ isLoading }

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -18,13 +19,13 @@ const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
     <TableRoot minW="900px">
       <TableHeaderSticky top={ top }>
         <TableRow>
-          <TableColumnHeader width="160px">L2 output index</TableColumnHeader>
+          <TableColumnHeader width="160px">{ layerLabels.current } output index</TableColumnHeader>
           <TableColumnHeader width="20%">
             Timestamp
             <TimeFormatToggle/>
           </TableColumnHeader>
-          <TableColumnHeader width="20%">L2 block #</TableColumnHeader>
-          <TableColumnHeader width="30%">L1 txn hash</TableColumnHeader>
+          <TableColumnHeader width="20%">{ layerLabels.current } block #</TableColumnHeader>
+          <TableColumnHeader width="30%">{ layerLabels.parent } txn hash</TableColumnHeader>
           <TableColumnHeader width="30%">Output root</TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>

ui/pages/ArbitrumL2TxnWithdrawals.tsx

@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { ARBITRUM_L2_TXN_WITHDRAWALS_ITEM } from 'stubs/arbitrumL2';
 import { FilterInput } from 'toolkit/components/filters/FilterInput';
@@ -75,7 +76,9 @@ const ArbitrumL2TxnWithdrawals = () => {
   return (
     <>
       <PageTitle title="Transaction withdrawals" withTextAd/>
-      <Text>L2 to L1 message relayer: search for your L2 transaction to execute a manual withdrawal.</Text>
+      <Text>
+        { layerLabels.current } to { layerLabels.parent } message relayer: search for your { layerLabels.current } transaction to execute a manual withdrawal.
+      </Text>
       <chakra.form onSubmit={ handleSubmit } noValidate>
         <FilterInput
           name="tx_hash"

ui/pages/OptimisticL2Deposits.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { L2_DEPOSIT_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -71,7 +72,7 @@ const OptimisticL2Deposits = () => {
 
   return (
     <>
-      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <PageTitle title={ `Deposits (${ layerLabels.parent }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.current })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items?.length }

ui/pages/OptimisticL2OutputRoots.tsx

@@ -2,6 +2,7 @@ import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -60,7 +61,7 @@ const OptimisticL2OutputRoots = () => {
 
     return (
       <Skeleton loading={ countersQuery.isPlaceholderData || isPlaceholderData } display="flex" flexWrap="wrap">
-        L2 output index
+        { layerLabels.current } output index
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[0].l2_output_index } </Text>to
         <Text fontWeight={ 600 } whiteSpace="pre"> #{ data.items[data.items.length - 1].l2_output_index } </Text>
         (total of { countersQuery.data?.toLocaleString() } roots)

ui/pages/OptimisticL2Withdrawals.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -73,7 +74,7 @@ const OptimisticL2Withdrawals = () => {
 
   return (
     <>
-      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <PageTitle title={ `Withdrawals (${ layerLabels.current }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.parent })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items?.length }

ui/pages/ScrollL2Deposits.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { SCROLL_L2_MESSAGE_ITEM } from 'stubs/scrollL2';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -68,7 +69,7 @@ const ScrollL2Deposits = () => {
 
   return (
     <>
-      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <PageTitle title={ `Deposits (${ layerLabels.parent }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.current })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items?.length }

ui/pages/ScrollL2Withdrawals.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { SCROLL_L2_MESSAGE_ITEM } from 'stubs/scrollL2';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -68,7 +69,7 @@ const ScrollL2Withdrawals = () => {
 
   return (
     <>
-      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <PageTitle title={ `Withdrawals (${ layerLabels.current }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.parent })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items?.length }

ui/pages/ShibariumDeposits.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { SHIBARIUM_DEPOSIT_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -73,7 +74,7 @@ const ShibariumDeposits = () => {
 
   return (
     <>
-      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <PageTitle title={ `Deposits (${ layerLabels.parent }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.current })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items.length }

ui/pages/ShibariumWithdrawals.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { SHIBARIUM_WITHDRAWAL_ITEM } from 'stubs/shibarium';
 import { generateListStub } from 'stubs/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -70,7 +71,7 @@ const ShibariumWithdrawals = () => {
 
   return (
     <>
-      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <PageTitle title={ `Withdrawals (${ layerLabels.current }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.parent })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items.length }

ui/pages/ZkEvmL2Deposits.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_DEPOSITS_ITEM } from 'stubs/zkEvmL2';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -68,7 +69,7 @@ const ZkEvmL2Deposits = () => {
 
   return (
     <>
-      <PageTitle title={ `Deposits (L1${ nbsp }${ rightLineArrow }${ nbsp }L2)` } withTextAd/>
+      <PageTitle title={ `Deposits (${ layerLabels.parent }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.current })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items.length }

ui/pages/ZkEvmL2Withdrawals.tsx

@@ -2,6 +2,7 @@ import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
+import { layerLabels } from 'lib/rollups/utils';
 import { generateListStub } from 'stubs/utils';
 import { ZKEVM_WITHDRAWALS_ITEM } from 'stubs/zkEvmL2';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -68,7 +69,7 @@ const ZkEvmL2Withdrawals = () => {
 
   return (
     <>
-      <PageTitle title={ `Withdrawals (L2${ nbsp }${ rightLineArrow }${ nbsp }L1)` } withTextAd/>
+      <PageTitle title={ `Withdrawals (${ layerLabels.current }${ nbsp }${ rightLineArrow }${ nbsp }${ layerLabels.parent })` } withTextAd/>
       <DataListDisplay
         isError={ isError }
         itemsNum={ data?.items.length }

ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 
+import { layerLabels } from 'lib/rollups/utils';
+
 import type { StatusTagType } from './StatusTag';
 import StatusTag from './StatusTag';
 
@@ -12,18 +14,26 @@ export interface Props {
 
 const ZkEvmL2TxnBatchStatus = ({ status, isLoading }: Props) => {
   let type: StatusTagType;
+  let text: string;
 
   switch (status) {
-    case 'L1 Sequence Confirmed':
-    case 'Finalized':
+    case 'L1 Sequence Confirmed': {
       type = 'ok';
+      text = `${ layerLabels.parent } sequence confirmed`;
       break;
-    default:
+    }
+    case 'Finalized': {
+      type = 'ok';
+      text = status;
+      break;
+    }
+    default: {
       type = 'pending';
-      break;
+      text = status;
+    }
   }
 
-  return <StatusTag type={ type } text={ status } loading={ isLoading }/>;
+  return <StatusTag type={ type } text={ text } loading={ isLoading }/>;
 };
 
 export default ZkEvmL2TxnBatchStatus;

ui/shared/statusTag/ZkSyncL2TxnBatchStatus.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 
 import type { ZkSyncBatchStatus } from 'types/api/zkSyncL2';
 
+import { layerLabels } from 'lib/rollups/utils';
+
 import type { StatusTagType } from './StatusTag';
 import StatusTag from './StatusTag';
 
@@ -22,7 +24,9 @@ const ZkSyncL2TxnBatchStatus = ({ status, isLoading }: Props) => {
       break;
   }
 
-  return <StatusTag type={ type } text={ status } loading={ isLoading }/>;
+  const text = status.replace('L1', layerLabels.parent).replace('L2', layerLabels.current);
+
+  return <StatusTag type={ type } text={ text } loading={ isLoading }/>;
 };
 
 export default ZkSyncL2TxnBatchStatus;

ui/tx/details/TxDetailsInterop.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { InteropTransactionInfo } from 'types/api/transaction';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
 import InteropMessageDestinationTx from 'ui/interopMessages/InteropMessageDestinationTx';
 import InteropMessageSourceTx from 'ui/interopMessages/InteropMessageSourceTx';
@@ -86,7 +87,7 @@ const TxDetailsInterop = ({ data, isLoading }: Props) => {
     return (
       <>
         <DetailedInfo.ItemLabel
-          hint="The originating transaction that initiated the cross-L2 message on the source chain"
+          hint={ `The originating transaction that initiated the cross-${ layerLabels.current } message on the source chain` }
           isLoading={ isLoading }
         >
           Interop source tx
@@ -105,7 +106,7 @@ const TxDetailsInterop = ({ data, isLoading }: Props) => {
     return (
       <>
         <DetailedInfo.ItemLabel
-          hint="The transaction that relays the cross-L2 message to its destination chain"
+          hint={ `The transaction that relays the cross-${ layerLabels.current } message to its destination chain` }
           isLoading={ isLoading }
         >
           Interop relay tx

ui/tx/details/TxDetailsWithdrawalStatusArbitrum.tsx

@@ -5,6 +5,7 @@ import type { ArbitrumTransactionMessageStatus, Transaction } from 'types/api/tr
 
 import { route } from 'nextjs-routes';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -85,7 +86,7 @@ const TxDetailsWithdrawalStatusArbitrum = ({ data }: Props) => {
       <DetailedInfo.ItemLabel
         hint="The hash of the transaction that originated the message from the base layer"
       >
-        Originating L1 txn hash
+        Originating { layerLabels.parent } txn hash
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
         { data.arbitrum.message_related_info.associated_l1_transaction_hash ?

ui/tx/details/TxInfo.tsx

@@ -23,6 +23,7 @@ import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import * as arbitrum from 'lib/rollups/arbitrum';
+import { formatZkEvmTxStatus, formatZkSyncL2TxnBatchStatus, layerLabels } from 'lib/rollups/utils';
 import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
 import { currencyUnits } from 'lib/units';
 import { Badge } from 'toolkit/chakra/badge';
@@ -202,7 +203,7 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
         {
           rollupFeature.isEnabled &&
           (rollupFeature.type === 'zkEvm' || rollupFeature.type === 'zkSync' || rollupFeature.type === 'arbitrum' || rollupFeature.type === 'scroll') ?
-            'L2 status and method' :
+            `${ layerLabels.current } status and method` :
             'Status and method'
         }
       </DetailedInfo.ItemLabel>
@@ -249,13 +250,17 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
       { data.zkevm_status && !config.UI.views.tx.hiddenFields?.L1_status && (
         <>
           <DetailedInfo.ItemLabel
-            hint="Status of the transaction confirmation path to L1"
+            hint={ `Status of the transaction confirmation path to ${ layerLabels.parent }` }
             isLoading={ isLoading }
           >
             Confirmation status
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
-            <VerificationSteps currentStep={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isLoading }/>
+            <VerificationSteps
+              currentStep={ formatZkEvmTxStatus(data.zkevm_status) }
+              steps={ ZKEVM_L2_TX_STATUSES.map(formatZkEvmTxStatus) }
+              isLoading={ isLoading }
+            />
           </DetailedInfo.ItemValue>
         </>
       ) }
@@ -263,10 +268,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
       { data.arbitrum?.status && !config.UI.views.tx.hiddenFields?.L1_status && (
         <>
           <DetailedInfo.ItemLabel
-            hint="Status of the transaction confirmation path to L1"
+            hint={ `Status of the transaction confirmation path to ${ layerLabels.parent }` }
             isLoading={ isLoading }
           >
-            L1 status
+            { layerLabels.parent } status
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             <VerificationSteps
@@ -298,10 +303,14 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
             hint="Status is the short interpretation of the batch lifecycle"
             isLoading={ isLoading }
           >
-            L1 status
+            { layerLabels.parent } status
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
-            <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isLoading }/>
+            <VerificationSteps
+              steps={ ZKSYNC_L2_TX_BATCH_STATUSES.map(formatZkSyncL2TxnBatchStatus) }
+              currentStep={ formatZkSyncL2TxnBatchStatus(data.zksync.status) }
+              isLoading={ isLoading }
+            />
           </DetailedInfo.ItemValue>
         </>
       ) }
@@ -544,7 +553,7 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
           { data.arbitrum?.commitment_transaction.hash && (
             <>
               <DetailedInfo.ItemLabel
-                hint="L1 transaction containing this batch commitment"
+                hint={ `${ layerLabels.parent } transaction containing this batch commitment` }
                 isLoading={ isLoading }
               >
                 Commitment tx
@@ -558,7 +567,7 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
           { 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={ isLoading }
               >
                 Confirmation tx
@@ -644,7 +653,7 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
       { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && (
         <>
           <DetailedInfo.ItemLabel
-            hint="Fee paid to the poster for L1 resources"
+            hint={ `Fee paid to the poster for ${ layerLabels.parent } resources` }
             isLoading={ isLoading }
           >
             Poster fee
@@ -656,7 +665,7 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
           />
 
           <DetailedInfo.ItemLabel
-            hint="Fee paid to the network for L2 resources"
+            hint={ `Fee paid to the network for ${ layerLabels.current } resources` }
             isLoading={ isLoading }
           >
             Network fee
@@ -678,10 +687,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
       { rollupFeature.isEnabled && rollupFeature.type === 'arbitrum' && data.arbitrum && data.gas_used && (
         <>
           <DetailedInfo.ItemLabel
-            hint="L2 gas set aside for L1 data charges"
+            hint={ `${ layerLabels.current } gas set aside for ${ layerLabels.parent } data charges` }
             isLoading={ isLoading }
           >
-            Gas used for L1
+            Gas used for { layerLabels.parent }
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             <Skeleton loading={ isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l1 || 0).toFormat() }</Skeleton>
@@ -694,10 +703,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
           </DetailedInfo.ItemValue>
 
           <DetailedInfo.ItemLabel
-            hint="L2 gas spent on L2 resources"
+            hint={ `${ layerLabels.current } gas spent on ${ layerLabels.current } resources` }
             isLoading={ isLoading }
           >
-            Gas used for L2
+            Gas used for { layerLabels.current }
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             <Skeleton loading={ isLoading }>{ BigNumber(data.arbitrum.gas_used_for_l2 || 0).toFormat() }</Skeleton>
@@ -714,10 +723,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
       { data.scroll?.l1_gas_used !== undefined && (
         <>
           <DetailedInfo.ItemLabel
-            hint="Total gas used on L1"
+            hint={ `Total gas used on ${ layerLabels.parent }` }
             isLoading={ isLoading }
           >
-            L1 Gas used
+            { layerLabels.parent } Gas used
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             <Skeleton loading={ isLoading }>{ BigNumber(data.scroll?.l1_gas_used || 0).toFormat() }</Skeleton>
@@ -782,10 +791,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
           { data.l1_gas_used && (
             <>
               <DetailedInfo.ItemLabel
-                hint="L1 gas used by transaction"
+                hint={ `${ layerLabels.parent } gas used by transaction` }
                 isLoading={ isLoading }
               >
-                L1 gas used by txn
+                { layerLabels.parent } gas used by txn
               </DetailedInfo.ItemLabel>
               <DetailedInfo.ItemValue>
                 <Text>{ BigNumber(data.l1_gas_used).toFormat() }</Text>
@@ -796,10 +805,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
           { data.l1_gas_price && (
             <>
               <DetailedInfo.ItemLabel
-                hint="L1 gas price"
+                hint={ `${ layerLabels.parent } gas price` }
                 isLoading={ isLoading }
               >
-                L1 gas price
+                { layerLabels.parent } gas price
               </DetailedInfo.ItemLabel>
               <GasPriceValue
                 amount={ data.l1_gas_price }
@@ -813,10 +822,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
             <>
               <DetailedInfo.ItemLabel
                 // eslint-disable-next-line max-len
-                hint={ `L1 Data Fee which is used to cover the L1 "security" cost from the batch submission mechanism. In combination with L2 execution fee, L1 fee makes the total amount of fees that a transaction pays.` }
+                hint={ `${ layerLabels.parent } Data Fee which is used to cover the ${ layerLabels.parent } "security" cost from the batch submission mechanism. In combination with ${ layerLabels.current } execution fee, ${ layerLabels.parent } fee makes the total amount of fees that a transaction pays.` }
                 isLoading={ isLoading }
               >
-                L1 fee
+                { layerLabels.parent } fee
               </DetailedInfo.ItemLabel>
               <DetailedInfoNativeCoinValue
                 amount={ data.l1_fee }
@@ -831,10 +840,10 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, noTxActions }: P
           { data.l1_fee_scalar && (
             <>
               <DetailedInfo.ItemLabel
-                hint="A Dynamic overhead (fee scalar) premium, which serves as a buffer in case L1 prices rapidly increase."
+                hint={ `A Dynamic overhead (fee scalar) premium, which serves as a buffer in case ${ layerLabels.parent } prices rapidly increase.` }
                 isLoading={ isLoading }
               >
-                L1 fee scalar
+                { layerLabels.parent } fee scalar
               </DetailedInfo.ItemLabel>
               <DetailedInfo.ItemValue>
                 <Text>{ data.l1_fee_scalar }</Text>

ui/tx/details/TxInfoScrollFees.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import DetailedInfoNativeCoinValue from 'ui/shared/DetailedInfo/DetailedInfoNativeCoinValue';
@@ -21,10 +22,10 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
         <>
           <DetailedInfo.ItemLabel
 
-            hint="L1 fee that pays for rollup costs"
+            hint={ `${ layerLabels.parent } fee that pays for rollup costs` }
             isLoading={ isLoading }
           >
-            L1 data fee
+            { layerLabels.parent } data fee
           </DetailedInfo.ItemLabel>
           <DetailedInfoNativeCoinValue
             amount={ data.scroll?.l1_fee }
@@ -37,7 +38,7 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
       { data.scroll?.l2_fee !== undefined && (
         <>
           <DetailedInfo.ItemLabel
-            hint="L2 execution fee"
+            hint={ `${ layerLabels.current } execution fee` }
             isLoading={ isLoading }
           >
             Execution fee
@@ -56,7 +57,7 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
             hint="Commitment scalar"
             isLoading={ isLoading }
           >
-            L1 commit scalar
+            { layerLabels.parent } commit scalar
           </DetailedInfo.ItemLabel>
           <DetailedInfoNativeCoinValue
             amount={ String(data.scroll?.l1_fee_commit_scalar) }
@@ -72,7 +73,7 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
             hint="Additional gas overhead of a data commitment transaction"
             isLoading={ isLoading }
           >
-            L1 Fee Overhead
+            { layerLabels.parent } Fee Overhead
           </DetailedInfo.ItemLabel>
           <DetailedInfoNativeCoinValue
             amount={ String(data.scroll?.l1_fee_overhead) }
@@ -84,10 +85,10 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
       { (data.scroll?.l1_base_fee !== undefined || data.scroll?.l1_fee_scalar !== undefined) && (
         <>
           <DetailedInfo.ItemLabel
-            hint="L1 gas fees"
+            hint={ `${ layerLabels.parent } gas fees` }
             isLoading={ isLoading }
           >
-            L1 gas fees
+            { layerLabels.parent } gas fees
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             { data.scroll?.l1_base_fee !== undefined && (
@@ -121,10 +122,10 @@ export const TxInfoScrollFees = ({ data, isLoading }: Props) => {
       { (data.scroll?.l1_blob_base_fee !== undefined || data.scroll?.l1_fee_blob_scalar !== undefined) && (
         <>
           <DetailedInfo.ItemLabel
-            hint="L1 blob fees"
+            hint={ `${ layerLabels.parent } blob fees` }
             isLoading={ isLoading }
           >
-            L1 blob fees
+            { layerLabels.parent } blob fees
           </DetailedInfo.ItemLabel>
           <DetailedInfo.ItemValue>
             { data.scroll?.l1_blob_base_fee !== undefined && (

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx

@@ -9,6 +9,7 @@ import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import { layerLabels } from 'lib/rollups/utils';
 import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -66,7 +67,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
     >
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+        hint={ `Batch number indicates the length of batches produced by grouping ${ layerLabels.current } blocks to be proven on ${ layerLabels.parent }` }
       >
         Txn batch number
       </DetailedInfo.ItemLabel>
@@ -86,7 +87,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Date and time at which batch is submitted to L1"
+        hint={ `Date and time at which batch is submitted to ${ layerLabels.parent }` }
       >
         Timestamp
       </DetailedInfo.ItemLabel>
@@ -111,7 +112,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Number of L2 blocks in this batch"
+        hint={ `Number of ${ layerLabels.current } blocks in this batch` }
       >
         Blocks
       </DetailedInfo.ItemLabel>
@@ -123,9 +124,9 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Hash of L1 transaction in which transactions was committed"
+        hint={ `Hash of ${ layerLabels.parent } transaction in which transactions was committed` }
       >
-        L1 transaction hash
+        { layerLabels.parent } transaction hash
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
         <TxEntityL1
@@ -138,9 +139,9 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Heigh of L1 block which includes L1 transactions"
+        hint={ `Height of ${ layerLabels.parent } block which includes ${ layerLabels.parent } transactions` }
       >
-        L1 block
+        { layerLabels.parent } block
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
         <BlockEntityL1

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx

@@ -5,6 +5,7 @@ import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
@@ -36,12 +37,12 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 status</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } status</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <ArbitrumL2TxnBatchStatus status={ item.commitment_transaction.status } isLoading={ isLoading }/>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } block</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntityL1
           number={ item.commitment_transaction.block_number }
@@ -58,7 +59,7 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         </>
       ) }
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 transaction</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } transaction</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <TxEntityL1
           hash={ item.commitment_transaction.hash }

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -19,10 +20,10 @@ const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
       <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader>Batch #</TableColumnHeader>
-          <TableColumnHeader>L1 status</TableColumnHeader>
-          <TableColumnHeader>L1 block</TableColumnHeader>
+          <TableColumnHeader>{ layerLabels.parent } status</TableColumnHeader>
+          <TableColumnHeader>{ layerLabels.parent } block</TableColumnHeader>
           <TableColumnHeader>Block count</TableColumnHeader>
-          <TableColumnHeader>L1 transaction</TableColumnHeader>
+          <TableColumnHeader>{ layerLabels.parent } transaction</TableColumnHeader>
           <TableColumnHeader>
             Timestamp
             <TimeFormatToggle/>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCallData.tsx

@@ -1,6 +1,7 @@
 import { GridItem } from '@chakra-ui/react';
 import React from 'react';
 
+import { layerLabels } from 'lib/rollups/utils';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 
@@ -19,7 +20,7 @@ const OptimisticL2TxnBatchBlobCallData = ({ l1TxHashes, l1Timestamp, isLoading }
       <GridItem overflow="hidden">
         <DetailedInfoTimestamp timestamp={ l1Timestamp } isLoading={ isLoading } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
       </GridItem>
-      <GridItem fontWeight={ 600 }>L1 txn hash{ l1TxHashes.length > 1 ? 'es' : '' }</GridItem>
+      <GridItem fontWeight={ 600 }>{ layerLabels.parent } txn hash{ l1TxHashes.length > 1 ? 'es' : '' }</GridItem>
       <GridItem overflow="hidden" display="flex" flexDir="column" rowGap={ 2 }>
         { l1TxHashes.map((hash) => <TxEntityL1 key={ hash } hash={ hash } noIcon/>) }
       </GridItem>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobCelestia.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { OptimisticL2BlobTypeCelestia } from 'types/api/optimisticL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import CeleniumLink from 'ui/shared/batch/CeleniumLink';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
@@ -38,7 +39,7 @@ const OptimisticL2TxnBatchBlobCelestia = ({ blobs, isLoading }: Props) => {
             <GridItem overflow="hidden" colSpan={ 2 }>
               <DetailedInfoTimestamp timestamp={ blob.l1_timestamp } isLoading={ isLoading } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
             </GridItem>
-            <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
+            <GridItem fontWeight={ 600 }>{ layerLabels.parent } txn hash</GridItem>
             <GridItem overflow="hidden" colSpan={ 2 }>
               <TxEntityL1 hash={ blob.l1_transaction_hash } noIcon/>
             </GridItem>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEigenda.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { OptimisticL2BlobTypeEigenda } from 'types/api/optimisticL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -32,7 +33,7 @@ const OptimisticL2TxnBatchBlobEigenda = ({ blobs, isLoading }: Props) => {
             <GridItem overflow="hidden">
               <DetailedInfoTimestamp timestamp={ blob.l1_timestamp } isLoading={ isLoading } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
             </GridItem>
-            <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
+            <GridItem fontWeight={ 600 }>{ layerLabels.parent } txn hash</GridItem>
             <GridItem overflow="hidden">
               <TxEntityL1 hash={ blob.l1_transaction_hash } noIcon/>
             </GridItem>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchBlobEip4844.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import type { OptimisticL2BlobTypeEip4844 } from 'types/api/optimisticL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import BlobEntityL1 from 'ui/shared/entities/blob/BlobEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
@@ -28,7 +29,7 @@ const OptimisticL2TxnBatchBlobEip4844 = ({ blobs, isLoading }: Props) => {
             <GridItem overflow="hidden">
               <DetailedInfoTimestamp timestamp={ blob.l1_timestamp } isLoading={ isLoading } flexWrap={{ base: 'wrap', lg: 'nowrap' }}/>
             </GridItem>
-            <GridItem fontWeight={ 600 }>L1 txn hash</GridItem>
+            <GridItem fontWeight={ 600 }>{ layerLabels.parent } txn hash</GridItem>
             <GridItem overflow="hidden">
               <TxEntityL1 hash={ blob.l1_transaction_hash } noIcon/>
             </GridItem>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchDetails.tsx

@@ -8,6 +8,7 @@ import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import { layerLabels } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
@@ -62,7 +63,7 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
     >
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Batch ID indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+        hint={ `Batch ID indicates the length of batches produced by grouping ${ layerLabels.current } blocks to be proven on ${ layerLabels.parent }` }
       >
         Batch ID
       </DetailedInfo.ItemLabel>
@@ -82,7 +83,7 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Date and time at which batch is submitted to L1"
+        hint={ `Date and time at which batch is submitted to ${ layerLabels.parent }` }
       >
         Timestamp
       </DetailedInfo.ItemLabel>
@@ -110,7 +111,7 @@ const OptimisticL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Number of L2 blocks in this batch"
+        hint={ `Number of ${ layerLabels.current } blocks in this batch` }
       >
         Blocks
       </DetailedInfo.ItemLabel>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx

@@ -5,6 +5,7 @@ import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
@@ -49,14 +50,14 @@ const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
         />
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn count</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } txn count</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Skeleton loading={ isLoading } minW="40px">
           { item.l1_transaction_hashes.length }
         </Skeleton>
       </ListItemMobileGrid.Value>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 blocks</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } blocks</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <Link
           href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'blocks' } }) }

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -24,8 +25,8 @@ const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
             Timestamp
             <TimeFormatToggle/>
           </TableColumnHeader>
-          <TableColumnHeader isNumeric>L1 txn count</TableColumnHeader>
-          <TableColumnHeader isNumeric>L2 blocks</TableColumnHeader>
+          <TableColumnHeader isNumeric>{ layerLabels.parent } txn count</TableColumnHeader>
+          <TableColumnHeader isNumeric>{ layerLabels.current } blocks</TableColumnHeader>
           <TableColumnHeader isNumeric>Txn</TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>

ui/txnBatches/scrollL2/ScrollL2TxnBatchDetails.tsx

@@ -8,6 +8,7 @@ import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import { layerLabels } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
@@ -19,7 +20,6 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import PrevNext from 'ui/shared/PrevNext';
 import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
-
 interface Props {
   query: UseQueryResult<ScrollL2TxnBatch, ResourceError>;
 }
@@ -60,7 +60,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
     >
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on L1"
+        hint={ `Batch number indicates the length of batches produced by grouping ${ layerLabels.current } blocks to be proven on ${ layerLabels.parent }` }
       >
         Txn batch number
       </DetailedInfo.ItemLabel>
@@ -100,7 +100,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Date and time at which batch is finalized to L1"
+        hint={ `Date and time at which batch is finalized to ${ layerLabels.parent }` }
       >
         Finalized timestamp
       </DetailedInfo.ItemLabel>
@@ -129,7 +129,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Number of L2 blocks in this batch"
+        hint={ `Number of ${ layerLabels.current } blocks in this batch` }
       >
         Blocks
       </DetailedInfo.ItemLabel>
@@ -141,7 +141,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Date and time at which batch is committed to L1"
+        hint={ `Date and time at which batch is committed to ${ layerLabels.parent }` }
       >
         Committed timestamp
       </DetailedInfo.ItemLabel>
@@ -154,7 +154,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Hash of L1 transaction this batch was committed in"
+        hint={ `Hash of ${ layerLabels.parent } transaction this batch was committed in` }
       >
         Committed transaction hash
       </DetailedInfo.ItemLabel>
@@ -170,7 +170,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="L1 block that includes transaction with this batch commitment"
+        hint={ `${ layerLabels.parent } block that includes transaction with this batch commitment` }
       >
         Committed block
       </DetailedInfo.ItemLabel>
@@ -183,7 +183,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="Hash of L1 transaction this batch was finalized in"
+        hint={ `Hash of ${ layerLabels.parent } transaction this batch was finalized in` }
       >
         Finalized transaction hash
       </DetailedInfo.ItemLabel>
@@ -200,7 +200,7 @@ const ScrollL2TxnBatchDetails = ({ query }: Props) => {
 
       <DetailedInfo.ItemLabel
         isLoading={ isPlaceholderData }
-        hint="L1 block that includes transaction with this batch finalization data"
+        hint={ `${ layerLabels.parent } block that includes transaction with this batch finalization data` }
       >
         Finalized block
       </DetailedInfo.ItemLabel>

ui/txnBatches/zkEvmL2/ZkEvmL2TxnBatchDetails.tsx

@@ -10,6 +10,7 @@ import { route } from 'nextjs-routes';
 
 import type { ResourceError } from 'lib/api/resources';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import { formatZkEvmL2TxnBatchStatus } from 'lib/rollups/utils';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
@@ -22,6 +23,8 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import PrevNext from 'ui/shared/PrevNext';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 
+const verificationSteps = ZKEVM_L2_TX_BATCH_STATUSES.map(formatZkEvmL2TxnBatchStatus);
+
 interface Props {
   query: UseQueryResult<ZkEvmL2TxnBatch, ResourceError>;
 }
@@ -83,7 +86,11 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
         Status
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <VerificationSteps steps={ ZKEVM_L2_TX_BATCH_STATUSES } currentStep={ data.status } isLoading={ isPlaceholderData }/>
+        <VerificationSteps
+          steps={ verificationSteps }
+          currentStep={ formatZkEvmL2TxnBatchStatus(data.status) }
+          isLoading={ isPlaceholderData }
+        />
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel

ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx

@@ -10,6 +10,7 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import type { ResourceError } from 'lib/api/resources';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import { formatZkSyncL2TxnBatchStatus, layerLabels } from 'lib/rollups/utils';
 import { currencyUnits } from 'lib/units';
 import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
 import { Link } from 'toolkit/chakra/link';
@@ -68,7 +69,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
       templateColumns={{ base: 'minmax(0, 1fr)', lg: 'minmax(min-content, 200px) minmax(0, 1fr)' }}
     >
       <DetailedInfo.ItemLabel
-        hint="Batch number indicates the length of batches produced by grouping L2 blocks to be proven on Ethereum."
+        hint={ `Batch number indicates the length of batches produced by grouping ${ layerLabels.current } blocks to be proven on ${ layerLabels.parent }.` }
         isLoading={ isPlaceholderData }
       >
         Txn batch number
@@ -94,7 +95,11 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         Status
       </DetailedInfo.ItemLabel>
       <DetailedInfo.ItemValue>
-        <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES.slice(1) } currentStep={ data.status } isLoading={ isPlaceholderData }/>
+        <VerificationSteps
+          steps={ ZKSYNC_L2_TX_BATCH_STATUSES.slice(1).map(formatZkSyncL2TxnBatchStatus) }
+          currentStep={ formatZkSyncL2TxnBatchStatus(data.status) }
+          isLoading={ isPlaceholderData }
+        />
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
@@ -129,7 +134,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
         <DetailedInfo.ItemLabel
-          hint="L1 batch root is a hash that summarizes batch data and submitted to the L1"
+          hint={ `${ layerLabels.parent } batch root is a hash that summarizes batch data and submitted to ${ layerLabels.parent }` }
         >
           Root hash
         </DetailedInfo.ItemLabel>
@@ -142,9 +147,9 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         </DetailedInfo.ItemValue>
 
         <DetailedInfo.ItemLabel
-          hint="Gas price for the batch settlement transaction on L1"
+          hint={ `Gas price for the batch settlement transaction on ${ layerLabels.parent }` }
         >
-          L1 gas price
+          { layerLabels.parent } gas price
         </DetailedInfo.ItemLabel>
         <DetailedInfo.ItemValue multiRow>
           <GasPriceValue
@@ -157,7 +162,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
         <DetailedInfo.ItemLabel
           hint='The gas price below which the "baseFee" of the batch should not fall'
         >
-          L2 fair gas price
+          { layerLabels.current } fair gas price
         </DetailedInfo.ItemLabel>
         <DetailedInfo.ItemValue multiRow>
           <GasPriceValue

ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchHashesInfo.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 
 import type { ZkSyncBatch } from 'types/api/zkSyncL2';
 
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
@@ -24,7 +25,7 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
   return (
     <>
       <DetailedInfo.ItemLabel
-        hint="Hash of L1 tx on which the batch was committed"
+        hint={ `Hash of ${ layerLabels.parent } tx on which the batch was committed` }
         isLoading={ isLoading }
       >
         Commit tx hash
@@ -45,7 +46,7 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
-        hint="Hash of L1 tx on which the batch was proven"
+        hint={ `Hash of ${ layerLabels.parent } tx on which the batch was proven` }
         isLoading={ isLoading }
       >
         Prove tx hash
@@ -66,7 +67,7 @@ const ZkSyncL2TxnBatchHashesInfo = ({ isLoading, data }: Props) => {
       </DetailedInfo.ItemValue>
 
       <DetailedInfo.ItemLabel
-        hint="Hash of L1 tx on which the batch was executed and finalized"
+        hint={ `Hash of ${ layerLabels.parent } tx on which the batch was executed and finalized` }
         isLoading={ isLoading }
       >
         Execute tx hash

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx

@@ -4,6 +4,7 @@ import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -47,7 +48,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         </>
       ) }
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 txn hash</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } txn hash</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <TxEntity
           isLoading={ isLoading }
@@ -76,7 +77,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
 
       { item.l1_transaction_hash && (
         <>
-          <ListItemMobileGrid.Label isLoading={ isLoading }>L1 txn hash</ListItemMobileGrid.Label>
+          <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.parent } txn hash</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
             <TxEntityL1
               isLoading={ isLoading }

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -22,13 +23,13 @@ const OptimisticL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
           <TableRow>
             <TableColumnHeader>Msg nonce</TableColumnHeader>
             <TableColumnHeader>From</TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
             <TableColumnHeader>
               Timestamp
               <TimeFormatToggle/>
             </TableColumnHeader>
             <TableColumnHeader>Status</TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
             <TableColumnHeader>Time left</TableColumnHeader>
           </TableRow>
         </TableHeaderSticky>

ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -24,7 +25,7 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } block</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntity
           number={ item.origination_transaction_block_number }
@@ -40,7 +41,7 @@ const ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         </Skeleton>
       </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 }
@@ -58,7 +59,7 @@ const ScrollL2WithdrawalsListItem = ({ 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>
         { item.completion_transaction_hash ? (
           <TxEntityL1

ui/withdrawals/scrollL2/ScrollL2WithdrawalsTable.tsx

@@ -4,6 +4,7 @@ import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -21,14 +22,14 @@ const ScrollL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
       <TableRoot tableLayout="auto" minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader>L2 block</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } block</TableColumnHeader>
             <TableColumnHeader>Index</TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
             <TableColumnHeader>
               Timestamp
               <TimeFormatToggle/>
             </TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
             <TableColumnHeader isNumeric>{ `Value ${ config.chain.currency.symbol }` }</TableColumnHeader>
           </TableRow>
         </TableHeaderSticky>

ui/withdrawals/shibarium/WithdrawalsListItem.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -22,7 +23,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
   return (
     <ListItemMobileGrid.Container>
 
-      <ListItemMobileGrid.Label isLoading={ isLoading }>L2 block No</ListItemMobileGrid.Label>
+      <ListItemMobileGrid.Label isLoading={ isLoading }>{ layerLabels.current } block No</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <BlockEntity
           number={ item.l2_block_number }
@@ -32,7 +33,7 @@ const WithdrawalsListItem = ({ 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 }
@@ -42,7 +43,7 @@ const WithdrawalsListItem = ({ 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 }

ui/withdrawals/shibarium/WithdrawalsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ShibariumWithdrawalsItem } from 'types/api/shibarium';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -20,9 +21,9 @@ const WithdrawalsTable = ({ items, top, isLoading }: Props) => {
       <TableRoot tableLayout="auto" minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader>L2 block No</TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } block No</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
             <TableColumnHeader>User</TableColumnHeader>
             <TableColumnHeader>
               Timestamp

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
 
 import config from 'configs/app';
+import { layerLabels } from 'lib/rollups/utils';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -42,7 +43,7 @@ const ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         </Skeleton>
       </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 }
@@ -61,7 +62,7 @@ const ZkEvmL2WithdrawalsListItem = ({ 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>
         { item.l1_transaction_hash ? (
           <TxEntityL1

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ZkEvmL2WithdrawalsItem } from 'types/api/zkEvmL2';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
+import { layerLabels } from 'lib/rollups/utils';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
@@ -22,12 +23,12 @@ const ZkEvmL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
           <TableRow>
             <TableColumnHeader>Block</TableColumnHeader>
             <TableColumnHeader>Index</TableColumnHeader>
-            <TableColumnHeader>L2 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.current } txn hash</TableColumnHeader>
             <TableColumnHeader>
               Timestamp
               <TimeFormatToggle/>
             </TableColumnHeader>
-            <TableColumnHeader>L1 txn hash</TableColumnHeader>
+            <TableColumnHeader>{ layerLabels.parent } txn hash</TableColumnHeader>
             <TableColumnHeader isNumeric>Value</TableColumnHeader>
             <TableColumnHeader>Token</TableColumnHeader>
           </TableRow>