batch entity

ui/block/BlockDetails.tsx

@@ -120,6 +120,14 @@ const BlockDetails = ({ query }: Props) => {
     );
   })();
 
+  const verificationTitle = (() => {
+    if (config.features.zkEvmRollup.isEnabled) {
+      return 'Sequenced by';
+    }
+
+    return config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by';
+  })();
+
   return (
     <Grid
       columnGap={ 8 }
@@ -193,7 +201,7 @@ const BlockDetails = ({ query }: Props) => {
         </DetailsInfoItem>
       ) }
       <DetailsInfoItem
-        title={ config.chain.verificationType === 'validation' ? 'Validated by' : 'Mined by' }
+        title={ verificationTitle }
         hint="A block producer who successfully included the block onto the blockchain"
         columnGap={ 1 }
         isLoading={ isPlaceholderData }
@@ -205,7 +213,8 @@ const BlockDetails = ({ query }: Props) => {
         { /* api doesn't return the block processing time yet */ }
         { /* <Text>{ dayjs.duration(block.minedIn, 'second').humanize(true) }</Text> */ }
       </DetailsInfoItem>
-      { !config.features.rollup.isEnabled && !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
+      { !config.features.rollup.isEnabled && !config.features.zkEvmRollup.isEnabled &&
+        !totalReward.isEqualTo(ZERO) && !config.UI.views.block.hiddenFields?.total_reward && (
         <DetailsInfoItem
           title="Block reward"
           hint={

ui/home/LatestZkevmL2BatchItem.tsx

@@ -8,10 +8,8 @@ import React from 'react';
 
 import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvml2TxnBatches';
 
-import { route } from 'nextjs-routes';
-
 import BlockTimestamp from 'ui/blocks/BlockTimestamp';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
 
 type Props = {
@@ -34,7 +32,7 @@ const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => {
       p={ 6 }
     >
       <Flex alignItems="center" overflow="hidden" w="100%" mb={ 3 }>
-        <BlockEntityL2
+        <ZkEvmBatchEntityL2
           isLoading={ isLoading }
           number={ batch.number }
           tailLength={ 2 }
@@ -42,7 +40,6 @@ const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => {
           lineHeight={ 7 }
           fontWeight={ 500 }
           mr="auto"
-          href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: batch.number.toString() } }) }
         />
         <BlockTimestamp
           ts={ batch.timestamp }

ui/shared/entities/block/ZkEvmBatchEntityL2.tsx

+import { chakra } from '@chakra-ui/react';
+import _omit from 'lodash/omit';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import config from 'configs/app';
+import txBatchIcon from 'icons/txn_batches_slim.svg';
+
+import * as BlockEntity from './BlockEntity';
+
+const feature = config.features.zkEvmRollup;
+
+const BlockEntityL2 = (props: BlockEntity.EntityProps) => {
+  const linkProps = _omit(props, [ 'className' ]);
+  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+
+  if (!feature.isEnabled) {
+    return null;
+  }
+
+  return (
+    <BlockEntity.Container className={ props.className }>
+      <BlockEntity.Icon { ...partsProps } asProp={ txBatchIcon }/>
+      <BlockEntity.Link
+        { ...linkProps }
+        href={ feature.L1BaseUrl + route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: props.number.toString() } }) }
+      >
+        <BlockEntity.Content { ...partsProps }/>
+      </BlockEntity.Link>
+    </BlockEntity.Container>
+  );
+};
+
+export default chakra(BlockEntityL2);

ui/tx/TxDetails.tsx

@@ -19,8 +19,6 @@ import { scroller, Element } from 'react-scroll';
 
 import { ZKEVM_L2_TX_STATUSES } from 'types/api/transaction';
 
-import { route } from 'nextjs-routes';
-
 import config from 'configs/app';
 import clockIcon from 'icons/clock.svg';
 import flameIcon from 'icons/flame.svg';
@@ -40,7 +38,7 @@ import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsSponsoredItem from 'ui/shared/DetailsSponsoredItem';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LogDecodedInputData from 'ui/shared/logs/LogDecodedInputData';
 import RawInputData from 'ui/shared/RawInputData';
@@ -199,10 +197,9 @@ const TxDetails = () => {
             title="Tx batch"
             isLoading={ isPlaceholderData }
           >
-            <BlockEntityL2
+            <ZkEvmBatchEntityL2
               isLoading={ isPlaceholderData }
               number={ data.zkevm_batch_number }
-              href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: data.zkevm_batch_number.toString() } }) }
             />
           </DetailsInfoItem>
         ) }

ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx

@@ -121,7 +121,6 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
       </DetailsInfoItem>
       <DetailsInfoItem
         title="Transactions"
-        hint="The number of transactions in the batch"
         isLoading={ isPlaceholderData }
       >
         <Skeleton isLoaded={ !isPlaceholderData }>

ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx

@@ -7,7 +7,7 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
@@ -29,13 +29,12 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Batch #</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <BlockEntityL2
+        <ZkEvmBatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
           fontSize="sm"
           lineHeight={ 5 }
           fontWeight={ 600 }
-          href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: item.number.toString() } }) }
         />
       </ListItemMobileGrid.Value>
 

ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTableItem.tsx

@@ -7,7 +7,7 @@ import { route } from 'nextjs-routes';
 
 import config from 'configs/app';
 import dayjs from 'lib/date/dayjs';
-import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
+import ZkEvmBatchEntityL2 from 'ui/shared/entities/block/ZkEvmBatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
@@ -26,13 +26,12 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
   return (
     <Tr>
       <Td>
-        <BlockEntityL2
+        <ZkEvmBatchEntityL2
           isLoading={ isLoading }
           number={ item.number }
           fontSize="sm"
           lineHeight={ 5 }
           fontWeight={ 600 }
-          href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: item.number.toString() } }) }
         />
       </Td>
       <Td>