fixes 2

configs/envs/.env.zkevm

@@ -37,6 +37,7 @@ NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c18099
 NEXT_PUBLIC_HAS_BEACON_CHAIN=true
 NEXT_PUBLIC_IS_ACCOUNT_SUPPORTED=true
 # NEXT_PUBLIC_AUTH_URL=http://localhost:3000
+NEXT_PUBLIC_API_WEBSOCKET_PROTOCOL=ws
 NEXT_PUBLIC_LOGOUT_URL=https://blockscoutcom.us.auth0.com/v2/logout
 NEXT_PUBLIC_STATS_API_HOST=https://stats-eth-main.k8s.blockscout.com
 NEXT_PUBLIC_VISUALIZE_API_HOST=https://visualizer.services.blockscout.com

lib/api/resources.ts

@@ -59,7 +59,7 @@ import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { VisualizedContract } from 'types/api/visualization';
 import type { WithdrawalsResponse, WithdrawalsCounters } from 'types/api/withdrawals';
-import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2TxnBatchesResponse, ZkEvmL2TxnBatchTxs } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem, ZkEvmL2TxnBatchesResponse, ZkEvmL2TxnBatchTxs } from 'types/api/zkEvmL2TxnBatches';
 import type { ArrayElement } from 'types/utils';
 
 import config from 'configs/app';

lib/socket/types.ts

@@ -6,6 +6,7 @@ import type { SmartContractVerificationResponse } from 'types/api/contract';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 import type { Transaction } from 'types/api/transaction';
+import type { NewZkEvmBatchSocketResponse } from 'types/api/zkEvmL2TxnBatches';
 
 export type SocketMessageParams = SocketMessage.NewBlock |
 SocketMessage.BlocksIndexStatus |
@@ -30,6 +31,7 @@ SocketMessage.SmartContractWasVerified |
 SocketMessage.TokenTransfers |
 SocketMessage.TokenTotalSupply |
 SocketMessage.ContractVerification |
+SocketMessage.NewZkEvmL2Batch |
 SocketMessage.Unknown;
 
 interface SocketMessageParamsGeneric<Event extends string | undefined, Payload extends object | unknown> {
@@ -64,5 +66,6 @@ export namespace SocketMessage {
   export type TokenTransfers = SocketMessageParamsGeneric<'token_transfer', {token_transfer: number }>;
   export type TokenTotalSupply = SocketMessageParamsGeneric<'total_supply', {total_supply: number }>;
   export type ContractVerification = SocketMessageParamsGeneric<'verification_result', SmartContractVerificationResponse>;
+  export type NewZkEvmL2Batch = SocketMessageParamsGeneric<'new_zkevm_confirmed_batch', NewZkEvmBatchSocketResponse>;
   export type Unknown = SocketMessageParamsGeneric<undefined, unknown>;
 }

mocks/zkevmL2txnBatches/zkevmL2txnBatches.ts

-import type { ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatchesResponse } from 'types/api/zkEvmL2TxnBatches';
 
 export const txnBatchesData: ZkEvmL2TxnBatchesResponse = {
   items: [

stubs/zkEvmL2.ts

-import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatch, ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
 
 import { TX_HASH } from './tx';
 

types/api/zkEvml2TxnBatches.ts → types/api/zkEvmL2TxnBatches.ts

@@ -36,3 +36,5 @@ export type ZkEvmL2TxnBatchTxs = {
   // API responce doesn't have next_page_params option, but we need to add it to the type for consistency
   next_page_params: null;
 }
+
+export type NewZkEvmBatchSocketResponse = { batch: ZkEvmL2TxnBatch };

ui/home/LatestZkEvmL2Batches.pw.tsx

-import { test, expect } from '@playwright/experimental-ct-react';
+import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
 import { txnBatchesData } from 'mocks/zkevmL2txnBatches/zkevmL2txnBatches';
+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 LatestZkEvmL2Batches from './LatestZkEvmL2Batches';
 
 const BATCHES_API_URL = buildApiUrl('homepage_zkevm_l2_batches');
 
+const test = base.extend({
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  context: contextWithEnvs(configs.featureEnvs.zkRollup) as any,
+});
+
 test('default view +@mobile +@dark-mode', async({ mount, page }) => {
   await page.route(BATCHES_API_URL, (route) => route.fulfill({
     status: 200,

ui/home/LatestZkEvmL2Batches.tsx

 import { Box, Heading, Flex, Text, VStack } from '@chakra-ui/react';
+// import { useQueryClient } from '@tanstack/react-query';
 // import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 
+// import type { SocketMessage } from 'lib/socket/types';
+// import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches';
+
 import { route } from 'nextjs-routes';
 
+// import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
+// import useSocketChannel from 'lib/socket/useSocketChannel';
+// import useSocketMessage from 'lib/socket/useSocketMessage';
 import { ZKEVM_L2_TXN_BATCHES_ITEM } from 'stubs/zkEvmL2';
 import LinkInternal from 'ui/shared/LinkInternal';
 
@@ -14,6 +21,7 @@ import LatestZkevmL2BatchItem from './LatestZkevmL2BatchItem';
 const LatestZkEvmL2Batches = () => {
   const isMobile = useIsMobile();
   const batchesMaxCount = isMobile ? 2 : 5;
+  // const queryClient = useQueryClient();
 
   const { data, isPlaceholderData, isError } = useApiQuery('homepage_zkevm_l2_batches', {
     queryOptions: {
@@ -21,6 +29,29 @@ const LatestZkEvmL2Batches = () => {
     },
   });
 
+  // const handleNewBatchMessage: SocketMessage.NewZkEvmL2Batch['handler'] = React.useCallback((payload) => {
+  //   queryClient.setQueryData(getResourceKey('homepage_zkevm_l2_batches'), (prevData: Array<ZkEvmL2TxnBatch> | undefined) => {
+
+  //     const newData = prevData ? [ ...prevData ] : [];
+
+  //     if (newData.some((batch => batch.number === payload.batch.number))) {
+  //       return newData;
+  //     }
+
+  //     return [ payload.batch, ...newData ].sort((b1, b2) => b2.number - b1.number).slice(0, batchesMaxCount);
+  //   });
+  // }, [ queryClient, batchesMaxCount ]);
+
+  // const channel = useSocketChannel({
+  //   topic: 'zkevm_batches:new_zkevm_confirmed_batch',
+  //   isDisabled: isPlaceholderData || isError,
+  // });
+  // useSocketMessage({
+  //   channel,
+  //   event: 'new_zkevm_confirmed_batch',
+  //   handler: handleNewBatchMessage,
+  // });
+
   let content;
 
   if (isError) {
@@ -33,7 +64,6 @@ const LatestZkEvmL2Batches = () => {
     content = (
       <>
         <VStack spacing={ 3 } mb={ 4 } overflow="hidden" alignItems="stretch">
-          { /* no socket so far */ }
           { /* <AnimatePresence initial={ false } > */ }
           { dataToShow.map(((batch, index) => (
             <LatestZkevmL2BatchItem

ui/home/LatestZkevmL2BatchItem.tsx

@@ -6,10 +6,13 @@ import {
 import { motion } from 'framer-motion';
 import React from 'react';
 
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
+
+import { route } from 'nextjs-routes';
 
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
+import LinkInternal from 'ui/shared/LinkInternal';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
 
 type Props = {
@@ -53,8 +56,14 @@ const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => {
       <Flex alignItems="center" justifyContent="space-between" w="100%" flexWrap="wrap">
         <Flex alignItems="center">
           <Skeleton isLoaded={ !isLoading } mr={ 2 }>Txn</Skeleton>
-          { /* LINK!!! */ }
-          <Skeleton isLoaded={ !isLoading } color="text_secondary"><span>{ batch.tx_count }</span></Skeleton>
+          <LinkInternal
+            href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: batch.number.toString(), tab: 'txs' } }) }
+            isLoading={ isLoading }
+          >
+            <Skeleton isLoaded={ !isLoading }>
+              { batch.tx_count }
+            </Skeleton>
+          </LinkInternal>
         </Flex>
         <ZkEvmL2TxnBatchStatus status={ batch.status } isLoading={ isLoading }/>
       </Flex>

ui/home/Stats.tsx

@@ -59,7 +59,7 @@ const Stats = () => {
         { config.features.zkEvmRollup.isEnabled ? (
           <StatsItem
             icon={ batchesIcon }
-            title="Latest batch "
+            title="Latest batch"
             value={ (zkEvmLatestBatchQuery.data || 0).toLocaleString() }
             url={ route({ pathname: '/zkevm-l2-txn-batches' }) }
             isLoading={ zkEvmLatestBatchQuery.isPlaceholderData }

ui/shared/entities/block/ZkEvmBatchEntityL2.tsx

@@ -11,7 +11,7 @@ import * as BlockEntity from './BlockEntity';
 
 const feature = config.features.zkEvmRollup;
 
-const BlockEntityL2 = (props: BlockEntity.EntityProps) => {
+const ZkEvmBatchEntityL2 = (props: BlockEntity.EntityProps) => {
   const linkProps = _omit(props, [ 'className' ]);
   const partsProps = _omit(props, [ 'className', 'onClick' ]);
 
@@ -32,4 +32,4 @@ const BlockEntityL2 = (props: BlockEntity.EntityProps) => {
   );
 };
 
-export default chakra(BlockEntityL2);
+export default chakra(ZkEvmBatchEntityL2);

ui/shared/statusTag/ZkEvmL2TxnBatchStatus.tsx

 import React from 'react';
 
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
 
 import type { StatusTagType } from './StatusTag';
 import StatusTag from './StatusTag';

ui/token/TokenVerifiedInfo.tsx

@@ -40,7 +40,7 @@ const TokenVerifiedInfo = ({ verifiedInfoQuery }: Props) => {
       try {
         const url = new URL(data.projectWebsite);
         return (
-          <LinkExternal href={ data.projectWebsite } variant="subtle" flexShrink={ 0 }>
+          <LinkExternal href={ data.projectWebsite } variant="subtle" flexShrink={ 0 } fontSize="sm" lineHeight={ 5 }>
             { url.host }
           </LinkExternal>
         );

ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx

-import { Grid, GridItem, Text, Skeleton } from '@chakra-ui/react';
+import { Grid, Text, Skeleton } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import { ZKEVM_L2_TX_BATCH_STATUSES } from 'types/api/zkEvml2TxnBatches';
-import type { ZkEvmL2TxnBatch } from 'types/api/zkEvml2TxnBatches';
+import { ZKEVM_L2_TX_BATCH_STATUSES } from 'types/api/zkEvmL2TxnBatches';
+import type { ZkEvmL2TxnBatch } from 'types/api/zkEvmL2TxnBatches';
 
 import { route } from 'nextjs-routes';
 
@@ -15,6 +15,7 @@ import Icon from 'ui/shared/chakra/Icon';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
@@ -58,16 +59,6 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
     return null;
   }
 
-  const sectionGap = (
-    <GridItem
-      colSpan={{ base: undefined, lg: 2 }}
-      mt={{ base: 2, lg: 3 }}
-      mb={{ base: 0, lg: 3 }}
-      borderBottom="1px solid"
-      borderColor="divider"
-    />
-  );
-
   return (
     <Grid
       columnGap={ 8 }
@@ -133,7 +124,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
         </Skeleton>
       </DetailsInfoItem>
 
-      { sectionGap }
+      <DetailsInfoItemDivider/>
 
       <DetailsInfoItem
         title="Global exit root"

ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx

 import { Skeleton, Text } from '@chakra-ui/react';
 import React from 'react';
 
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
 
 import { route } from 'nextjs-routes';
 

ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTable.tsx

 import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
 
 import { default as Thead } from 'ui/shared/TheadSticky';
 

ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTableItem.tsx

 import { Td, Tr, Text, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
-import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvml2TxnBatches';
+import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2TxnBatches';
 
 import { route } from 'nextjs-routes';
 
@@ -25,7 +25,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
 
   return (
     <Tr>
-      <Td>
+      <Td verticalAlign="middle">
         <ZkEvmBatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
@@ -34,15 +34,15 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           fontWeight={ 600 }
         />
       </Td>
-      <Td>
+      <Td verticalAlign="middle">
         <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
       </Td>
-      <Td>
+      <Td verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } color="text_secondary">
           <span>{ timeAgo }</span>
         </Skeleton>
       </Td>
-      <Td>
+      <Td verticalAlign="middle">
         <LinkInternal
           href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
           isLoading={ isLoading }
@@ -52,7 +52,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           </Skeleton>
         </LinkInternal>
       </Td>
-      <Td pr={ 12 }>
+      <Td pr={ 12 } verticalAlign="middle">
         { item.verify_tx_hash ? (
           <TxEntityL1
             isLoading={ isLoading }
@@ -63,7 +63,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
           />
         ) : <Text>Pending</Text> }
       </Td>
-      <Td pr={ 12 }>
+      <Td pr={ 12 } verticalAlign="middle">
         { item.sequence_tx_hash ? (
           <TxEntityL1
             isLoading={ isLoading }