Unify rollups routes (#1547)

* display main data

* display rest of tx fields

* placeholder data

* always show tabs

* manage error and retries on details tab

* don't retry if degraded view is active

* fix tests

* fix tx receipt

* change styles and wording for warning

* tweaks

* gray alert style change and update screenshots

* display main block info from RPC

* refetch API query

* txs tab

* display empty address for contract creation tx

* withdrawals tab

* remove type coercions

* lazy rendered lists

* fix RPC query refetch

* fixes

* comment about block type

* fix tests

* Unify rollups routes

Fixes #1493

* zkevm preset

* renaming

* update screenshots

.vscode/tasks.json

@@ -322,6 +322,7 @@
               "eth",
               "rootstock",
               "polygon",
+              "zkevm",
               "gnosis",
               "localhost",
             ],

configs/envs/.env.zkevm

@@ -14,10 +14,10 @@ NEXT_PUBLIC_NETWORK_CURRENCY_NAME=Ether
 NEXT_PUBLIC_NETWORK_CURRENCY_SYMBOL=ETH
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18
 NEXT_PUBLIC_NETWORK_VERIFICATION_TYPE=validation
-NEXT_PUBLIC_NETWORK_RPC_URL=https://eth.llamarpc.com
+NEXT_PUBLIC_NETWORK_RPC_URL=https://zkevm-rpc.com
 
 # api configuration
-NEXT_PUBLIC_API_HOST=65.109.173.70
+NEXT_PUBLIC_API_HOST=zkevm.blockscout.com
 NEXT_PUBLIC_API_PORT=80
 NEXT_PUBLIC_API_PROTOCOL=http
 NEXT_PUBLIC_API_BASE_PATH=/
@@ -26,7 +26,11 @@ NEXT_PUBLIC_API_BASE_PATH=/
 ## homepage
 NEXT_PUBLIC_HOMEPAGE_CHARTS=['daily_txs']
 ## sidebar
-NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/dev/configs/featured-networks/eth.json
+NEXT_PUBLIC_FEATURED_NETWORKS=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/featured-networks/polygon-mainnet.json
+NEXT_PUBLIC_NETWORK_LOGO=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-logos/polygon.svg
+NEXT_PUBLIC_NETWORK_ICON=https://raw.githubusercontent.com/blockscout/frontend-configs/main/configs/network-icons/polygon-short.svg
+NEXT_PUBLIC_HOMEPAGE_PLATE_BACKGROUND='linear-gradient(122deg, rgba(162, 41, 197, 1) 0%, rgba(123, 63, 228, 1) 100%)'
+NEXT_PUBLIC_HOMEPAGE_PLATE_TEXT_COLOR='rgba(255, 255, 255, 1)'
 ## footer
 ## misc
 NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan.io/','paths':{'tx':'/tx','address':'/address','token':'/token','block':'/block'}}]
@@ -34,7 +38,6 @@ NEXT_PUBLIC_NETWORK_EXPLORERS=[{'title':'Etherscan','baseUrl':'https://etherscan
 NEXT_PUBLIC_APP_INSTANCE=local
 NEXT_PUBLIC_APP_ENV=development
 NEXT_PUBLIC_GRAPHIQL_TRANSACTION=0xf7d4972356e6ae44ae948d0cf19ef2beaf0e574c180997e969a2837da15e349d
-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
@@ -45,4 +48,4 @@ NEXT_PUBLIC_CONTRACT_INFO_API_HOST=https://contracts-info.services.blockscout.co
 NEXT_PUBLIC_ADMIN_SERVICE_API_HOST=https://admin-rs.services.blockscout.com
 # rollup
 NEXT_PUBLIC_IS_ZKEVM_L2_NETWORK=true
-NEXT_PUBLIC_L1_BASE_URL=http://65.109.173.70:81
+NEXT_PUBLIC_L1_BASE_URL=https://polygon.blockscout.com

lib/hooks/useNavItems.tsx

@@ -75,9 +75,9 @@ export default function useNavItems(): ReturnType {
           blocks,
           {
             text: 'Txn batches',
-            nextRoute: { pathname: '/zkevm-l2-txn-batches' as const },
+            nextRoute: { pathname: '/batches' as const },
             icon: 'txn_batches',
-            isActive: pathname === '/zkevm-l2-txn-batches' || pathname === '/zkevm-l2-txn-batch/[number]',
+            isActive: pathname === '/batches' || pathname === '/batches/[number]',
           },
         ].filter(Boolean),
         [
@@ -91,16 +91,16 @@ export default function useNavItems(): ReturnType {
         [
           txs,
           // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/l2-deposits' },
+          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/deposits' as const }, icon: 'arrows/south-east', isActive: pathname === '/deposits' },
           // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/l2-withdrawals' },
+          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/withdrawals' as const }, icon: 'arrows/north-east', isActive: pathname === '/withdrawals' },
         ],
         [
           blocks,
           // eslint-disable-next-line max-len
-          { text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: 'txn_batches', isActive: pathname === '/l2-txn-batches' },
+          { text: 'Txn batches', nextRoute: { pathname: '/batches' as const }, icon: 'txn_batches', isActive: pathname === '/batches' },
           // eslint-disable-next-line max-len
-          { text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: 'output_roots', isActive: pathname === '/l2-output-roots' },
+          { text: 'Output roots', nextRoute: { pathname: '/output-roots' as const }, icon: 'output_roots', isActive: pathname === '/output-roots' },
         ],
         [
           userOps,

lib/metadata/getPageOgType.ts

@@ -33,12 +33,10 @@ const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/withdrawals': 'Root page',
   '/visualize/sol2uml': 'Regular page',
   '/csv-export': 'Regular page',
-  '/l2-deposits': 'Root page',
-  '/l2-output-roots': 'Root page',
-  '/l2-txn-batches': 'Root page',
-  '/l2-withdrawals': 'Root page',
-  '/zkevm-l2-txn-batches': 'Root page',
-  '/zkevm-l2-txn-batch/[number]': 'Regular page',
+  '/deposits': 'Root page',
+  '/output-roots': 'Root page',
+  '/batches': 'Root page',
+  '/batches/[number]': 'Regular page',
   '/ops': 'Root page',
   '/op/[hash]': 'Regular page',
   '/404': 'Regular page',

lib/metadata/templates/description.ts

@@ -36,12 +36,10 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/withdrawals': DEFAULT_TEMPLATE,
   '/visualize/sol2uml': DEFAULT_TEMPLATE,
   '/csv-export': DEFAULT_TEMPLATE,
-  '/l2-deposits': DEFAULT_TEMPLATE,
-  '/l2-output-roots': DEFAULT_TEMPLATE,
-  '/l2-txn-batches': DEFAULT_TEMPLATE,
-  '/l2-withdrawals': DEFAULT_TEMPLATE,
-  '/zkevm-l2-txn-batches': DEFAULT_TEMPLATE,
-  '/zkevm-l2-txn-batch/[number]': DEFAULT_TEMPLATE,
+  '/deposits': DEFAULT_TEMPLATE,
+  '/output-roots': DEFAULT_TEMPLATE,
+  '/batches': DEFAULT_TEMPLATE,
+  '/batches/[number]': DEFAULT_TEMPLATE,
   '/ops': DEFAULT_TEMPLATE,
   '/op/[hash]': DEFAULT_TEMPLATE,
   '/404': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -31,12 +31,10 @@ const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/withdrawals': 'withdrawals',
   '/visualize/sol2uml': 'Solidity UML diagram',
   '/csv-export': 'export data to CSV',
-  '/l2-deposits': 'deposits (L1 > L2)',
-  '/l2-output-roots': 'output roots',
-  '/l2-txn-batches': 'tx batches (L2 blocks)',
-  '/l2-withdrawals': 'withdrawals (L2 > L1)',
-  '/zkevm-l2-txn-batches': 'zkEvm L2 Tx batches',
-  '/zkevm-l2-txn-batch/[number]': 'zkEvm L2 Tx batch %number%',
+  '/deposits': 'deposits (L1 > L2)',
+  '/output-roots': 'output roots',
+  '/batches': 'tx batches (L2 blocks)',
+  '/batches/[number]': 'L2 tx batch %number%',
   '/ops': 'user operations',
   '/op/[hash]': 'user operation %hash%',
   '/404': 'error - page not found',

lib/mixpanel/getPageType.ts

@@ -31,12 +31,10 @@ export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/withdrawals': 'Withdrawals',
   '/visualize/sol2uml': 'Solidity UML diagram',
   '/csv-export': 'Export data to CSV file',
-  '/l2-deposits': 'Deposits (L1 > L2)',
-  '/l2-output-roots': 'Output roots',
-  '/l2-txn-batches': 'Tx batches (L2 blocks)',
-  '/l2-withdrawals': 'Withdrawals (L2 > L1)',
-  '/zkevm-l2-txn-batches': 'ZkEvm L2 Tx batches',
-  '/zkevm-l2-txn-batch/[number]': 'ZkEvm L2 Tx batch details',
+  '/deposits': 'Deposits (L1 > L2)',
+  '/output-roots': 'Output roots',
+  '/batches': 'Tx batches (L2 blocks)',
+  '/batches/[number]': 'L2 tx batch details',
   '/ops': 'User operations',
   '/op/[hash]': 'User operation details',
   '/404': '404',

nextjs/getServerSideProps.ts

@@ -48,8 +48,8 @@ export const verifiedAddresses: GetServerSideProps<Props> = async(context) => {
   return account(context);
 };
 
-export const beaconChain: GetServerSideProps<Props> = async(context) => {
-  if (!config.features.beaconChain.isEnabled) {
+export const withdrawals: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.beaconChain.isEnabled && !config.features.optimisticRollup.isEnabled) {
     return {
       notFound: true,
     };
@@ -58,7 +58,17 @@ export const beaconChain: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-export const L2: GetServerSideProps<Props> = async(context) => {
+export const rollup: GetServerSideProps<Props> = async(context) => {
+  if (!config.features.optimisticRollup.isEnabled && !config.features.zkEvmRollup.isEnabled) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return base(context);
+};
+
+export const optimisticRollup: GetServerSideProps<Props> = async(context) => {
   if (!config.features.optimisticRollup.isEnabled) {
     return {
       notFound: true,
@@ -68,7 +78,7 @@ export const L2: GetServerSideProps<Props> = async(context) => {
   return base(context);
 };
 
-export const zkEvmL2: GetServerSideProps<Props> = async(context) => {
+export const zkEvmRollup: GetServerSideProps<Props> = async(context) => {
   if (!config.features.zkEvmRollup.isEnabled) {
     return {
       notFound: true,

nextjs/nextjs-routes.d.ts

@@ -26,19 +26,19 @@ declare module "nextjs-routes" {
     | StaticRoute<"/auth/auth0">
     | StaticRoute<"/auth/profile">
     | StaticRoute<"/auth/unverified-email">
+    | DynamicRoute<"/batches/[number]", { "number": string }>
+    | StaticRoute<"/batches">
     | DynamicRoute<"/block/[height_or_hash]", { "height_or_hash": string }>
     | StaticRoute<"/blocks">
     | StaticRoute<"/contract-verification">
     | StaticRoute<"/csv-export">
+    | StaticRoute<"/deposits">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
-    | StaticRoute<"/l2-deposits">
-    | StaticRoute<"/l2-output-roots">
-    | StaticRoute<"/l2-txn-batches">
-    | StaticRoute<"/l2-withdrawals">
     | StaticRoute<"/login">
     | DynamicRoute<"/name-domains/[name]", { "name": string }>
     | StaticRoute<"/name-domains">
+    | StaticRoute<"/output-roots">
     | DynamicRoute<"/op/[hash]", { "hash": string }>
     | StaticRoute<"/ops">
     | StaticRoute<"/search-results">
@@ -51,9 +51,7 @@ declare module "nextjs-routes" {
     | DynamicRoute<"/txs/kettle/[hash]", { "hash": string }>
     | StaticRoute<"/verified-contracts">
     | StaticRoute<"/visualize/sol2uml">
-    | StaticRoute<"/withdrawals">
-    | DynamicRoute<"/zkevm-l2-txn-batch/[number]", { "number": string }>
-    | StaticRoute<"/zkevm-l2-txn-batches">;
+    | StaticRoute<"/withdrawals">;
 
   interface StaticRoute<Pathname> {
     pathname: Pathname;

nextjs/redirects.js

@@ -242,6 +242,32 @@ const oldUrls = [
     source: '/token/:hash/write-proxy',
     destination: '/token/:hash?tab=write_proxy',
   },
+
+  // ROLLUPs
+  {
+    source: '/l2-txn-batches',
+    destination: '/batches',
+  },
+  {
+    source: '/zkevm-l2-txn-batches',
+    destination: '/batches',
+  },
+  {
+    source: '/zkevm-l2-txn-batch/:path*',
+    destination: '/batches/:path*',
+  },
+  {
+    source: '/l2-deposits',
+    destination: '/deposits',
+  },
+  {
+    source: '/l2-withdrawals',
+    destination: '/withdrawals',
+  },
+  {
+    source: '/l2-output-roots',
+    destination: '/output-roots',
+  },
 ];
 
 async function redirects() {

pages/zkevm-l2-txn-batch/[number].tsx → pages/batches/[number].tsx

@@ -9,7 +9,7 @@ const ZkEvmL2TxnBatch = dynamic(() => import('ui/pages/ZkEvmL2TxnBatch'), { ssr:
 
 const Page: NextPage<Props> = (props: Props) => {
   return (
-    <PageNextJs pathname="/zkevm-l2-txn-batch/[number]" query={ props }>
+    <PageNextJs pathname="/batches/[number]" query={ props }>
       <ZkEvmL2TxnBatch/>
     </PageNextJs>
   );
@@ -17,4 +17,4 @@ const Page: NextPage<Props> = (props: Props) => {
 
 export default Page;
 
-export { zkEvmL2 as getServerSideProps } from 'nextjs/getServerSideProps';
+export { zkEvmRollup as getServerSideProps } from 'nextjs/getServerSideProps';

pages/l2-output-roots.tsx → pages/batches/index.tsx

@@ -4,16 +4,23 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-const L2OutputRoots = dynamic(() => import('ui/pages/L2OutputRoots'), { ssr: false });
+import config from 'configs/app';
+
+const Batches = dynamic(() => {
+  if (config.features.zkEvmRollup.isEnabled) {
+    return import('ui/pages/ZkEvmL2TxnBatches');
+  }
+  return import('ui/pages/L2TxnBatches');
+}, { ssr: false });
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/l2-output-roots">
-      <L2OutputRoots/>
+    <PageNextJs pathname="/batches">
+      <Batches/>
     </PageNextJs>
   );
 };
 
 export default Page;
 
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';
+export { rollup as getServerSideProps } from 'nextjs/getServerSideProps';

pages/l2-deposits.tsx → pages/deposits/index.tsx

@@ -4,16 +4,16 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-const L2Deposits = dynamic(() => import('ui/pages/L2Deposits'), { ssr: false });
+const Deposits = dynamic(() => import('ui/pages/L2Deposits'), { ssr: false });
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/l2-deposits">
-      <L2Deposits/>
+    <PageNextJs pathname="/deposits">
+      <Deposits/>
     </PageNextJs>
   );
 };
 
 export default Page;
 
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';
+export { optimisticRollup as getServerSideProps } from 'nextjs/getServerSideProps';

pages/l2-withdrawals.tsx

-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const L2Withdrawals = dynamic(() => import('ui/pages/L2Withdrawals'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/l2-withdrawals">
-      <L2Withdrawals/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';

pages/l2-txn-batches.tsx → pages/output-roots/index.tsx

@@ -4,16 +4,16 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-const L2TxnBatches = dynamic(() => import('ui/pages/L2TxnBatches'), { ssr: false });
+const OutputRoots = dynamic(() => import('ui/pages/L2OutputRoots'), { ssr: false });
 
 const Page: NextPage = () => {
   return (
-    <PageNextJs pathname="/l2-txn-batches">
-      <L2TxnBatches/>
+    <PageNextJs pathname="/output-roots">
+      <OutputRoots/>
     </PageNextJs>
   );
 };
 
 export default Page;
 
-export { L2 as getServerSideProps } from 'nextjs/getServerSideProps';
+export { optimisticRollup as getServerSideProps } from 'nextjs/getServerSideProps';

pages/withdrawals.tsx → pages/withdrawals/index.tsx

@@ -4,7 +4,14 @@ import React from 'react';
 
 import PageNextJs from 'nextjs/PageNextJs';
 
-const Withdrawals = dynamic(() => import('ui/pages/Withdrawals'), { ssr: false });
+import config from 'configs/app';
+
+const Withdrawals = dynamic(() => {
+  if (config.features.optimisticRollup.isEnabled) {
+    return import('ui/pages/L2Withdrawals');
+  }
+  return import('ui/pages/Withdrawals');
+}, { ssr: false });
 
 const Page: NextPage = () => {
   return (
@@ -16,4 +23,4 @@ const Page: NextPage = () => {
 
 export default Page;
 
-export { beaconChain as getServerSideProps } from 'nextjs/getServerSideProps';
+export { withdrawals as getServerSideProps } from 'nextjs/getServerSideProps';

pages/zkevm-l2-txn-batches.tsx

-import type { NextPage } from 'next';
-import dynamic from 'next/dynamic';
-import React from 'react';
-
-import PageNextJs from 'nextjs/PageNextJs';
-
-const ZkEvmL2TxnBatches = dynamic(() => import('ui/pages/ZkEvmL2TxnBatches'), { ssr: false });
-
-const Page: NextPage = () => {
-  return (
-    <PageNextJs pathname="/zkevm-l2-txn-batches">
-      <ZkEvmL2TxnBatches/>
-    </PageNextJs>
-  );
-};
-
-export default Page;
-
-export { zkEvmL2 as getServerSideProps } from 'nextjs/getServerSideProps';

ui/home/LatestDeposits.tsx

@@ -58,7 +58,7 @@ const LatestDeposits = () => {
   }
 
   if (data) {
-    const depositsUrl = route({ pathname: '/l2-deposits' });
+    const depositsUrl = route({ pathname: '/deposits' });
     return (
       <>
         <SocketNewItemsNotice borderBottomRadius={ 0 } url={ depositsUrl } num={ num } alert={ socketAlert } type="deposit" isLoading={ isPlaceholderData }/>

ui/home/LatestZkEvmL2Batches.tsx

@@ -73,7 +73,7 @@ const LatestZkEvmL2Batches = () => {
           </AnimatePresence>
         </VStack>
         <Flex justifyContent="center">
-          <LinkInternal fontSize="sm" href={ route({ pathname: '/zkevm-l2-txn-batches' }) }>View all batches</LinkInternal>
+          <LinkInternal fontSize="sm" href={ route({ pathname: '/batches' }) }>View all batches</LinkInternal>
         </Flex>
       </>
     );

ui/home/LatestZkevmL2BatchItem.tsx

@@ -57,7 +57,7 @@ const LatestZkevmL2BatchItem = ({ batch, isLoading }: Props) => {
         <Flex alignItems="center">
           <Skeleton isLoaded={ !isLoading } mr={ 2 }>Txn</Skeleton>
           <LinkInternal
-            href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: batch.number.toString(), tab: 'txs' } }) }
+            href={ route({ pathname: '/batches/[number]', query: { number: batch.number.toString(), tab: 'txs' } }) }
             isLoading={ isLoading }
           >
             <Skeleton isLoaded={ !isLoading }>

ui/home/Stats.tsx

@@ -73,7 +73,7 @@ const Stats = () => {
             icon="txn_batches"
             title="Latest batch"
             value={ (zkEvmLatestBatchQuery.data || 0).toLocaleString() }
-            url={ route({ pathname: '/zkevm-l2-txn-batches' }) }
+            url={ route({ pathname: '/batches' }) }
             isLoading={ zkEvmLatestBatchQuery.isPlaceholderData }
           />
         ) : (

ui/shared/entities/block/ZkEvmBatchEntityL2.tsx

@@ -23,7 +23,7 @@ const ZkEvmBatchEntityL2 = (props: BlockEntity.EntityProps) => {
       <BlockEntity.Icon { ...partsProps } name="txn_batches_slim"/>
       <BlockEntity.Link
         { ...linkProps }
-        href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: props.number.toString() } }) }
+        href={ route({ pathname: '/batches/[number]', query: { number: props.number.toString() } }) }
       >
         <BlockEntity.Content { ...partsProps }/>
       </BlockEntity.Link>

ui/tx/TxDetailsDegraded.tsx

@@ -10,6 +10,7 @@ import dayjs from 'lib/date/dayjs';
 import hexToDecimal from 'lib/hexToDecimal';
 import { publicClient } from 'lib/web3/client';
 import { GET_BLOCK, GET_TRANSACTION, GET_TRANSACTION_RECEIPT, GET_TRANSACTION_CONFIRMATIONS } from 'stubs/RPC';
+import { unknownAddress } from 'ui/shared/address/utils';
 import ServiceDegradationWarning from 'ui/shared/alerts/ServiceDegradationWarning';
 import TestnetWarning from 'ui/shared/alerts/TestnetWarning';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
@@ -66,16 +67,6 @@ const TxDetailsDegraded = ({ hash, txQuery }: Props) => {
       })();
 
       const gasPrice = txReceipt?.effectiveGasPrice ?? tx.gasPrice;
-      const unknownAddress = {
-        is_contract: false,
-        is_verified: false,
-        implementation_name: '',
-        name: '',
-        private_tags: [],
-        public_tags: [],
-        watchlist_names: [],
-        ens_domain_name: null,
-      };
 
       return {
         from: { ...unknownAddress, hash: tx.from as string },

ui/zkEvmL2TxnBatches/ZkEvmL2TxnBatchDetails.tsx

@@ -38,7 +38,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
     const increment = direction === 'next' ? +1 : -1;
     const nextId = String(data.number + increment);
 
-    router.push({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: nextId } }, undefined);
+    router.push({ pathname: '/batches/[number]', query: { number: nextId } }, undefined);
   }, [ data, router ]);
 
   if (isError) {
@@ -105,7 +105,7 @@ const ZkEvmL2TxnBatchDetails = ({ query }: Props) => {
         isLoading={ isPlaceholderData }
       >
         <Skeleton isLoaded={ !isPlaceholderData }>
-          <LinkInternal href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
+          <LinkInternal href={ route({ pathname: '/batches/[number]', query: { number: data.number.toString(), tab: 'txs' } }) }>
             { data.transactions.length } transaction{ data.transactions.length === 1 ? '' : 's' }
           </LinkInternal>
         </Skeleton>

ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesListItem.tsx

@@ -51,7 +51,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
       <ListItemMobileGrid.Label isLoading={ isLoading }>Txn count</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
         <LinkInternal
-          href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
           isLoading={ isLoading }
           fontWeight={ 600 }
         >

ui/zkEvmL2TxnBatches/ZkEvmTxnBatchesTableItem.tsx

@@ -44,7 +44,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
       </Td>
       <Td verticalAlign="middle">
         <LinkInternal
-          href={ route({ pathname: '/zkevm-l2-txn-batch/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
+          href={ route({ pathname: '/batches/[number]', query: { number: item.number.toString(), tab: 'txs' } }) }
           isLoading={ isLoading }
         >
           <Skeleton isLoaded={ !isLoading } minW="40px" my={ 1 }>