fixes

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

-NEXT_PUBLIC_IS_L2_NETWORK=true
+NEXT_PUBLIC_IS_OPTIMISTIC_L2_NETWORK=true
 NEXT_PUBLIC_L1_BASE_URL=https://example.com
-NEXT_PUBLIC_L2_WITHDRAWAL_URL=https://example.com
+NEXT_PUBLIC_OPTIMISTIC_L2_WITHDRAWAL_URL=https://example.com
\ No newline at end of file

icons/unfinalized.svg

+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
+  <rect width="18.4" height="18.4" x=".8" y=".8" stroke="currentColor" stroke-width="1.6" rx="3.2"/>
+</svg>

lib/hooks/useNavItems.tsx

@@ -82,7 +82,7 @@ export default function useNavItems(): ReturnType {
         [
           topAccounts,
           verifiedContracts,
-        ],
+        ].filter(Boolean),
       ];
     } else if (config.features.optimisticRollup.isEnabled) {
       blockchainNavItems = [

mocks/zkevmL2txnBatches/zkevmL2txnBatch.ts

+import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches';
+
+export const txnBatchData: ZkEvmL2TxnBatch = {
+  acc_input_hash: '0x4bf88aabe33713b7817266d7860912c58272d808da7397cdc627ca53b296fad3',
+  global_exit_root: '0xad3228b676f7d3cd4284a5443f17f1962b36e491b30a40b2405849e597ba5fb5',
+  number: 5,
+  sequence_tx_hash: '0x7ae010e9758441b302db10282807358af460f38c49c618d26a897592f64977f7',
+  state_root: '0x183b4a38a4a6027947ceb93b323cc94c548c8c05cf605d73ca88351d77cae1a3',
+  status: 'Finalized',
+  timestamp: '2023-10-20T10:08:18.000000Z',
+  transactions: [
+    '0xb5d432c270057c223b973f3b5f00dbad32823d9ef26f3e8d97c819c7c573453a',
+  ],
+  verify_tx_hash: '0x6f7eeaa0eb966e63d127bba6bf8f9046d303c2a1185b542f0b5083f682a0e87f',
+};

ui/pages/ZkEvmL2TxnBatch.pw.tsx

+import { test as base, expect, devices } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import { txnBatchData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatch';
+import contextWithEnvs from 'playwright/fixtures/contextWithEnvs';
+import TestApp from 'playwright/TestApp';
+import buildApiUrl from 'playwright/utils/buildApiUrl';
+import * as configs from 'playwright/utils/configs';
+
+import ZkEvmL2TxnBatch from './ZkEvmL2TxnBatch';
+
+const test = base.extend({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: contextWithEnvs(configs.featureEnvs.zkRollup) as any,
+});
+
+const hooksConfig = {
+  router: {
+    query: { number: '5' },
+  },
+};
+
+const BATCH_API_URL = buildApiUrl('zkevm_l2_txn_batch', { number: '5' });
+
+test('base view', async({ mount, page }) => {
+  test.slow();
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: '',
+  }));
+
+  await page.route(BATCH_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(txnBatchData),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <ZkEvmL2TxnBatch/>
+    </TestApp>,
+    { hooksConfig },
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test.describe('mobile', () => {
+  test.use({ viewport: devices['iPhone 13 Pro'].viewport });
+  test('base view', async({ mount, page }) => {
+    test.slow();
+    await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+      status: 200,
+      body: '',
+    }));
+
+    await page.route(BATCH_API_URL, (route) => route.fulfill({
+      status: 200,
+      body: JSON.stringify(txnBatchData),
+    }));
+
+    const component = await mount(
+      <TestApp>
+        <ZkEvmL2TxnBatch/>
+      </TestApp>,
+      { hooksConfig },
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+});

ui/shared/LinkExternal.tsx

@@ -17,8 +17,6 @@ const LinkExternal = ({ href, children, className, isLoading, variant }: Props)
 
   const styleProps: ChakraProps = (() => {
     const commonProps = {
-      fontSize: 'sm',
-      lineHeight: 5,
       display: 'inline-block',
       alignItems: 'center',
     };

ui/shared/verificationSteps/VerificationStep.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 
 import arrowIcon from 'icons/arrows/east.svg';
 import finalizedIcon from 'icons/finalized.svg';
+import unfinalizedIcon from 'icons/unfinalized.svg';
 
 type Props = {
   step: string;
@@ -15,7 +16,7 @@ const VerificationStep = ({ step, isLast, isPassed }: Props) => {
 
   return (
     <HStack gap={ 2 } color={ stepColor }>
-      <Icon as={ finalizedIcon } boxSize={ 5 }/>
+      <Icon as={ isPassed ? finalizedIcon : unfinalizedIcon } boxSize={ 5 }/>
       <Text color={ stepColor }>{ step }</Text>
       { !isLast && <Icon as={ arrowIcon } boxSize={ 5 }/> }
     </HStack>

ui/tokenInstance/details/TokenInstanceMetadataInfo.tsx

@@ -33,6 +33,8 @@ const Item = ({ data, isLoading }: ItemProps) => {
           w="100%"
           overflow="hidden"
           href={ data.value }
+          fontSize="sm"
+          lineHeight={ 5 }
         >
           <TruncatedValue value={ data.value } w="calc(100% - 16px)"/>
         </LinkExternal>

ui/tx/TxDetails.tsx

@@ -159,6 +159,7 @@ const TxDetails = () => {
         { data.zkevm_status && (
           <DetailsInfoItem
             title="Confirmation status"
+            hint="Status of the transaction confirmation path to L1"
             isLoading={ isPlaceholderData }
           >
             <VerificationSteps step={ data.zkevm_status } steps={ ZKEVM_L2_TX_STATUSES } isLoading={ isPlaceholderData }/>
@@ -197,6 +198,7 @@ const TxDetails = () => {
         { data.zkevm_batch_number && (
           <DetailsInfoItem
             title="Tx batch"
+            hint="Batch index for this transaction"
             isLoading={ isPlaceholderData }
           >
             <ZkEvmBatchEntityL2

ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx

@@ -129,6 +129,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       <DetailsInfoItem
         title="Global exit root"
         isLoading={ isPlaceholderData }
+        flexWrap="nowrap"
       >
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.global_exit_root }/>
@@ -138,6 +139,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       <DetailsInfoItem
         title="Acc input hash"
         isLoading={ isPlaceholderData }
+        flexWrap="nowrap"
       >
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.acc_input_hash }/>
@@ -159,6 +161,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       <DetailsInfoItem
         title="State root"
         isLoading={ isPlaceholderData }
+        flexWrap="nowrap"
       >
         <Skeleton isLoaded={ !isPlaceholderData } overflow="hidden">
           <HashStringShortenDynamic hash={ data.state_root }/>