Unify rollups routes

.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,15 +26,18 @@ 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'}}]
 # app features
 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,12 +9,12 @@ 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>
   );
 };
 
 export default Page;
 
-export { zkEvmL2 as getServerSideProps } from 'nextjs/getServerSideProps';
+export { zkEvmRollup as getServerSideProps } from 'nextjs/getServerSideProps';

pages/batches/index.tsx

@@ -0,0 +1,26 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+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="/batches">
+      <Batches/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+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-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';