change routes and refactor l2

deploy/values/l2-optimism-goerli/values.yaml

@@ -317,10 +317,10 @@ frontend:
         - "/accounts"
         - "/visualize"
         - "/api-docs"
-        - "/output-roots"
-        - "/txn-batches"
-        - "/withdrawals"
-        - "/deposits"
+        - "/l2-output-roots"
+        - "/l2-txn-batches"
+        - "/l2-withdrawals"
+        - "/l2-deposits"
   resources:
     limits:
       memory:

deploy/values/review-l2/values.yaml

@@ -40,10 +40,10 @@ frontend:
         - "/csv-export"
         - "/verified-contracts"
         - "/graphiql"
-        - "/output-roots"
-        - "/txn-batches"
-        - "/withdrawals"
-        - "/deposits"
+        - "/l2-output-roots"
+        - "/l2-txn-batches"
+        - "/l2-withdrawals"
+        - "/l2-deposits"
 
   resources:
     limits:

lib/api/resources.ts

@@ -18,11 +18,13 @@ import type { BlocksResponse, BlockTransactionsResponse, Block, BlockFilters } f
 import type { ChartMarketResponse, ChartTransactionResponse } from 'types/api/charts';
 import type { SmartContract, SmartContractReadMethod, SmartContractWriteMethod, SmartContractVerificationConfig } from 'types/api/contract';
 import type { VerifiedContractsResponse, VerifiedContractsFilters, VerifiedContractsCounters } from 'types/api/contracts';
-import type { DepositsResponse, DepositsItem } from 'types/api/deposits';
 import type { IndexingStatus } from 'types/api/indexingStatus';
 import type { InternalTransactionsResponse } from 'types/api/internalTransaction';
+import type { L2DepositsResponse, L2DepositsItem } from 'types/api/l2Deposits';
+import type { L2OutputRootsResponse } from 'types/api/l2OutputRoots';
+import type { L2TxnBatchesResponse } from 'types/api/l2TxnBatches';
+import type { L2WithdrawalsResponse } from 'types/api/l2Withdrawals';
 import type { LogsResponseTx, LogsResponseAddress } from 'types/api/log';
-import type { OutputRootsResponse } from 'types/api/outputRoots';
 import type { RawTracesResponse } from 'types/api/rawTrace';
 import type { SearchRedirectResult, SearchResult, SearchResultFilters } from 'types/api/search';
 import type { Counters, StatsCharts, StatsChart, HomeStats } from 'types/api/stats';
@@ -37,11 +39,9 @@ import type {
 import type { TokensResponse, TokensFilters, TokenInstanceTransferResponse } from 'types/api/tokens';
 import type { TokenTransferResponse, TokenTransferFilters } from 'types/api/tokenTransfer';
 import type { TransactionsResponseValidated, TransactionsResponsePending, Transaction } from 'types/api/transaction';
-import type { TxnBatchesResponse } from 'types/api/txnBatches';
 import type { TTxsFilters } from 'types/api/txsFilters';
 import type { TxStateChanges } from 'types/api/txStateChanges';
 import type { VisualizedContract } from 'types/api/visualization';
-import type { WithdrawalsResponse } from 'types/api/withdrawals';
 import type { ArrayElement } from 'types/utils';
 
 import appConfig from 'configs/app/config';
@@ -375,43 +375,43 @@ export const RESOURCES = {
   },
 
   // L2
-  deposits: {
+  l2_deposits: {
     path: '/api/v2/optimism/deposits',
     paginationFields: [ 'nonce' as const, 'items_count' as const ],
     filterFields: [],
   },
 
-  deposits_count: {
+  l2_deposits_count: {
     path: '/api/v2/optimism/deposits/count',
   },
 
-  withdrawals: {
+  l2_withdrawals: {
     path: '/api/v2/optimism/withdrawals',
     paginationFields: [ 'nonce' as const, 'items_count' as const ],
     filterFields: [],
   },
 
-  withdrawals_count: {
+  l2_withdrawals_count: {
     path: '/api/v2/optimism/withdrawals/count',
   },
 
-  output_roots: {
+  l2_output_roots: {
     path: '/api/v2/optimism/output-roots',
     paginationFields: [ 'index' as const, 'items_count' as const ],
     filterFields: [],
   },
 
-  output_roots_count: {
+  l2_output_roots_count: {
     path: '/api/v2/optimism/output-roots/count',
   },
 
-  txn_batches: {
+  l2_txn_batches: {
     path: '/api/v2/optimism/txn-batches',
     paginationFields: [ 'block_number' as const, 'items_count' as const ],
     filterFields: [],
   },
 
-  txn_batches_count: {
+  l2_txn_batches_count: {
     path: '/api/v2/optimism/txn-batches/count',
   },
 
@@ -474,7 +474,7 @@ export type PaginatedResources = 'blocks' | 'block_txs' |
 'token_transfers' | 'token_holders' | 'token_inventory' | 'tokens' |
 'token_instance_transfers' |
 'verified_contracts' |
-'output_roots' | 'withdrawals' | 'txn_batches' | 'deposits';
+'l2_output_roots' | 'l2_withdrawals' | 'l2_txn_batches' | 'l2_deposits';
 
 export type PaginatedResponse<Q extends PaginatedResources> = ResourcePayload<Q>;
 
@@ -492,7 +492,7 @@ Q extends 'homepage_chart_txs' ? ChartTransactionResponse :
 Q extends 'homepage_chart_market' ? ChartMarketResponse :
 Q extends 'homepage_blocks' ? Array<Block> :
 Q extends 'homepage_txs' ? Array<Transaction> :
-Q extends 'homepage_deposits' ? Array<DepositsItem> :
+Q extends 'homepage_deposits' ? Array<L2DepositsItem> :
 Q extends 'homepage_indexing_status' ? IndexingStatus :
 Q extends 'stats_counters' ? Counters :
 Q extends 'stats_lines' ? StatsCharts :
@@ -539,14 +539,14 @@ Q extends 'verified_contracts' ? VerifiedContractsResponse :
 Q extends 'verified_contracts_counters' ? VerifiedContractsCounters :
 Q extends 'visualize_sol2uml' ? VisualizedContract :
 Q extends 'contract_verification_config' ? SmartContractVerificationConfig :
-Q extends 'output_roots' ? OutputRootsResponse :
-Q extends 'withdrawals' ? WithdrawalsResponse :
-Q extends 'deposits' ? DepositsResponse :
-Q extends 'txn_batches' ? TxnBatchesResponse :
-Q extends 'output_roots_count' ? number :
-Q extends 'withdrawals_count' ? number :
-Q extends 'deposits_count' ? number :
-Q extends 'txn_batches_count' ? number :
+Q extends 'l2_output_roots' ? L2OutputRootsResponse :
+Q extends 'l2_withdrawals' ? L2WithdrawalsResponse :
+Q extends 'l2_deposits' ? L2DepositsResponse :
+Q extends 'l2_txn_batches' ? L2TxnBatchesResponse :
+Q extends 'l2_output_roots_count' ? number :
+Q extends 'l2_withdrawals_count' ? number :
+Q extends 'l2_deposits_count' ? number :
+Q extends 'l2_txn_batches_count' ? number :
 never;
 /* eslint-enable @typescript-eslint/indent */
 

lib/hooks/useNavItems.tsx

@@ -103,16 +103,16 @@ export default function useNavItems(): ReturnType {
         [
           txs,
           // eslint-disable-next-line max-len
-          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/deposits' as const }, icon: depositsIcon, isActive: pathname === '/deposits', isNewUi: true },
+          { text: `Deposits (L1${ rightLineArrow }L2)`, nextRoute: { pathname: '/l2-deposits' as const }, icon: depositsIcon, isActive: pathname === '/l2-deposits', isNewUi: true },
           // eslint-disable-next-line max-len
-          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/withdrawals' as const }, icon: withdrawalsIcon, isActive: pathname === '/withdrawals', isNewUi: true },
+          { text: `Withdrawals (L2${ rightLineArrow }L1)`, nextRoute: { pathname: '/l2-withdrawals' as const }, icon: withdrawalsIcon, isActive: pathname === '/l2-withdrawals', isNewUi: true },
         ],
         [
           blocks,
           // eslint-disable-next-line max-len
-          { text: 'Txn batches', nextRoute: { pathname: '/txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/txn-batches', isNewUi: true },
+          { text: 'Txn batches', nextRoute: { pathname: '/l2-txn-batches' as const }, icon: txnBatchIcon, isActive: pathname === '/l2-txn-batches', isNewUi: true },
           // eslint-disable-next-line max-len
-          { text: 'Output roots', nextRoute: { pathname: '/output-roots' as const }, icon: outputRootsIcon, isActive: pathname === '/output-roots', isNewUi: true },
+          { text: 'Output roots', nextRoute: { pathname: '/l2-output-roots' as const }, icon: outputRootsIcon, isActive: pathname === '/l2-output-roots', isNewUi: true },
         ],
         [
           topAccounts,

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

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import React from 'react';
 
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
-import Deposits from 'ui/pages/Deposits';
+import L2Deposits from 'ui/pages/L2Deposits';
 
 const DepositsPage: NextPage = () => {
   const title = getNetworkTitle();
@@ -12,7 +12,7 @@ const DepositsPage: NextPage = () => {
       <Head>
         <title>{ title }</title>
       </Head>
-      <Deposits/>
+      <L2Deposits/>
     </>
   );
 };

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

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import React from 'react';
 
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
-import OutputRoots from 'ui/pages/OutputRoots';
+import L2OutputRoots from 'ui/pages/L2OutputRoots';
 
 const OutputRootsPage: NextPage = () => {
   const title = getNetworkTitle();
@@ -12,7 +12,7 @@ const OutputRootsPage: NextPage = () => {
       <Head>
         <title>{ title }</title>
       </Head>
-      <OutputRoots/>
+      <L2OutputRoots/>
     </>
   );
 };

pages/txn-batches.tsx → pages/l2-txn-batches.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import React from 'react';
 
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
-import TxnBatches from 'ui/pages/TxnBatches';
+import L2TxnBatches from 'ui/pages/L2TxnBatches';
 
 const TxnBatchesPage: NextPage = () => {
   const title = getNetworkTitle();
@@ -12,7 +12,7 @@ const TxnBatchesPage: NextPage = () => {
       <Head>
         <title>{ title }</title>
       </Head>
-      <TxnBatches/>
+      <L2TxnBatches/>
     </>
   );
 };

pages/withdrawals.tsx → pages/l2-withdrawals.tsx

@@ -3,7 +3,7 @@ import Head from 'next/head';
 import React from 'react';
 
 import getNetworkTitle from 'lib/networks/getNetworkTitle';
-import Withdrawals from 'ui/pages/Withdrawals';
+import L2Withdrawals from 'ui/pages/L2Withdrawals';
 
 const WithdrawalsPage: NextPage = () => {
   const title = getNetworkTitle();
@@ -12,7 +12,7 @@ const WithdrawalsPage: NextPage = () => {
       <Head>
         <title>{ title }</title>
       </Head>
-      <Withdrawals/>
+      <L2Withdrawals/>
     </>
   );
 };

types/api/deposits.ts → types/api/l2Deposits.ts

-export type DepositsItem = {
+export type L2DepositsItem = {
   l1_block_number: number;
   l1_tx_hash: string;
   l1_block_timestamp: string;
@@ -7,8 +7,8 @@ export type DepositsItem = {
   l2_tx_hash: string;
 }
 
-export type DepositsResponse = {
-  items: Array<DepositsItem>;
+export type L2DepositsResponse = {
+  items: Array<L2DepositsItem>;
   next_page_params: {
     items_count: number;
     l1_block_number: number;

types/api/outputRoots.ts → types/api/l2OutputRoots.ts

-export type OutputRootsItem = {
+export type L2OutputRootsItem = {
   l1_block_number: number;
   l1_timestamp: string;
   l1_tx_hash: string;
@@ -7,8 +7,8 @@ export type OutputRootsItem = {
   output_root: string;
 }
 
-export type OutputRootsResponse = {
-  items: Array<OutputRootsItem>;
+export type L2OutputRootsResponse = {
+  items: Array<L2OutputRootsItem>;
   total: number;
   next_page_params: {
     index: number;

types/api/txnBatches.ts → types/api/l2TxnBatches.ts

-export type TxnBatchesItem = {
+export type L2TxnBatchesItem = {
   epoch_number: number;
   l1_tx_hashes: Array<string>;
   l1_timestamp: string;
@@ -6,8 +6,8 @@ export type TxnBatchesItem = {
   tx_count: number;
 }
 
-export type TxnBatchesResponse = {
-  items: Array<TxnBatchesItem>;
+export type L2TxnBatchesResponse = {
+  items: Array<L2TxnBatchesItem>;
   total: number;
   next_page_params: {
     index: number;

types/api/withdrawals.ts → types/api/l2Withdrawals.ts

 import type { AddressParam } from './addressParams';
 
-export type WithdrawalsItem = {
+export type L2WithdrawalsItem = {
   'challenge_period_end': string | null;
   'from': AddressParam | null;
   'l1_tx_hash': string | null;
@@ -11,15 +11,15 @@ export type WithdrawalsItem = {
   'status': string;
 }
 
-export type WithdrawalStatus =
+export type L2WithdrawalStatus =
   'In challenge period' |
   'Ready for relay' |
   'Relayed' |
   'Waiting for state root' |
   'Ready to prove';
 
-export type WithdrawalsResponse = {
-  items: Array<WithdrawalsItem>;
+export type L2WithdrawalsResponse = {
+  items: Array<L2WithdrawalsItem>;
   'next_page_params': {
     'items_count': number;
     'nonce': string;

types/nextjs-routes.d.ts

@@ -25,23 +25,23 @@ declare module "nextjs-routes" {
     | DynamicRoute<"/block/[height]", { "height": string }>
     | StaticRoute<"/blocks">
     | StaticRoute<"/csv-export">
-    | StaticRoute<"/deposits">
     | StaticRoute<"/graph">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
+    | StaticRoute<"/l2-deposits">
+    | StaticRoute<"/l2-output-roots">
+    | StaticRoute<"/l2-txn-batches">
+    | StaticRoute<"/l2-withdrawals">
     | StaticRoute<"/login">
-    | StaticRoute<"/output-roots">
     | StaticRoute<"/search-results">
     | StaticRoute<"/stats">
     | DynamicRoute<"/token/[hash]", { "hash": string }>
     | DynamicRoute<"/token/[hash]/instance/[id]", { "hash": string; "id": string }>
     | StaticRoute<"/tokens">
     | DynamicRoute<"/tx/[hash]", { "hash": string }>
-    | StaticRoute<"/txn-batches">
     | StaticRoute<"/txs">
     | StaticRoute<"/verified-contracts">
-    | StaticRoute<"/visualize/sol2uml">
-    | StaticRoute<"/withdrawals">;
+    | StaticRoute<"/visualize/sol2uml">;
 
   interface StaticRoute<Pathname> {
     pathname: Pathname;

ui/home/LatestDeposits.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import * as depositMock from 'mocks/deposits/deposits';
+import * as depositMock from 'mocks/l2deposits/deposits';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 

ui/home/LatestDeposits.tsx

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

ui/home/LatestDepositsItem.tsx

@@ -8,7 +8,7 @@ import {
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { DepositsItem } from 'types/api/deposits';
+import type { L2DepositsItem } from 'types/api/l2Deposits';
 
 import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
@@ -20,7 +20,7 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
 type Props = {
-  item: DepositsItem;
+  item: L2DepositsItem;
 }
 
 const LatestTxsItem = ({ item }: Props) => {

ui/deposits/DepositsListItem.tsx → ui/l2Deposits/DepositsListItem.tsx

@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { DepositsItem } from 'types/api/deposits';
+import type { L2DepositsItem } from 'types/api/l2Deposits';
 
 import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
@@ -15,7 +15,7 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-type Props = { item: DepositsItem };
+type Props = { item: L2DepositsItem };
 
 const DepositsListItem = ({ item }: Props) => {
   const timeAgo = dayjs(item.l1_block_timestamp).fromNow();

ui/deposits/DepositsTable.tsx → ui/l2Deposits/DepositsTable.tsx

 import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
-import type { DepositsItem } from 'types/api/deposits';
+import type { L2DepositsItem } from 'types/api/l2Deposits';
 
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import DepositsTableItem from './DepositsTableItem';
 
  type Props = {
-   items: Array<DepositsItem>;
+   items: Array<L2DepositsItem>;
    top: number;
  }
 

ui/deposits/DepositsTableItem.tsx → ui/l2Deposits/DepositsTableItem.tsx

@@ -3,7 +3,7 @@ import BigNumber from 'bignumber.js';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { DepositsItem } from 'types/api/deposits';
+import type { L2DepositsItem } from 'types/api/l2Deposits';
 
 import appConfig from 'configs/app/config';
 import blockIcon from 'icons/block.svg';
@@ -14,7 +14,7 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
- type Props = { item: DepositsItem };
+ type Props = { item: L2DepositsItem };
 
 const WithdrawalsTableItem = ({ item }: Props) => {
   const timeAgo = dayjs(item.l1_block_timestamp).fromNow();

ui/outputRoots/OutputRootsListItem.tsx → ui/l2OutputRoots/OutputRootsListItem.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, Text, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { OutputRootsItem } from 'types/api/outputRoots';
+import type { L2OutputRootsItem } from 'types/api/l2OutputRoots';
 
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
@@ -13,7 +13,7 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-type Props = { item: OutputRootsItem };
+type Props = { item: L2OutputRootsItem };
 
 const OutputRootsListItem = ({ item }: Props) => {
   const timeAgo = dayjs(item.l1_timestamp).fromNow();

ui/outputRoots/OutputRootsTable.tsx → ui/l2OutputRoots/OutputRootsTable.tsx

 import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
-import type { OutputRootsItem } from 'types/api/outputRoots';
+import type { L2OutputRootsItem } from 'types/api/l2OutputRoots';
 
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import OutputRootsTableItem from './OutputRootsTableItem';
 
 type Props = {
-  items: Array<OutputRootsItem>;
+  items: Array<L2OutputRootsItem>;
   top: number;
 }
 

ui/outputRoots/OutputRootsTableItem.tsx → ui/l2OutputRoots/OutputRootsTableItem.tsx

@@ -2,7 +2,7 @@ import { Box, Flex, Td, Tr, Text, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { OutputRootsItem } from 'types/api/outputRoots';
+import type { L2OutputRootsItem } from 'types/api/l2OutputRoots';
 
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
@@ -13,7 +13,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
-type Props = { item: OutputRootsItem };
+type Props = { item: L2OutputRootsItem };
 
 const OutputRootsTableItem = ({ item }: Props) => {
   const timeAgo = dayjs(item.l1_timestamp).fromNow();

ui/txnBatches/TxnBatchesListItem.tsx → ui/l2TxnBatches/TxnBatchesListItem.tsx

@@ -2,7 +2,7 @@ import { Box, Icon, VStack } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { TxnBatchesItem } from 'types/api/txnBatches';
+import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches';
 
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
@@ -13,7 +13,7 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-type Props = { item: TxnBatchesItem };
+type Props = { item: L2TxnBatchesItem };
 
 const TxnBatchesListItem = ({ item }: Props) => {
   const timeAgo = dayjs(item.l1_timestamp).fromNow();

ui/txnBatches/TxnBatchesTable.tsx → ui/l2TxnBatches/TxnBatchesTable.tsx

 import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
-import type { TxnBatchesItem } from 'types/api/txnBatches';
+import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches';
 
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import TxnBatchesTableItem from './TxnBatchesTableItem';
 
 type Props = {
-  items: Array<TxnBatchesItem>;
+  items: Array<L2TxnBatchesItem>;
   top: number;
 }
 

ui/txnBatches/TxnBatchesTableItem.tsx → ui/l2TxnBatches/TxnBatchesTableItem.tsx

@@ -2,7 +2,7 @@ import { Box, Td, Tr, Text, Icon, VStack } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { TxnBatchesItem } from 'types/api/txnBatches';
+import type { L2TxnBatchesItem } from 'types/api/l2TxnBatches';
 
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
@@ -12,7 +12,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
-type Props = { item: TxnBatchesItem };
+type Props = { item: L2TxnBatchesItem };
 
 const TxnBatchesTableItem = ({ item }: Props) => {
   const timeAgo = dayjs(item.l1_timestamp).fromNow();

ui/withdrawals/WithdrawalsListItem.tsx → ui/l2Withdrawals/WithdrawalsListItem.tsx

@@ -2,7 +2,7 @@ import { Box, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { WithdrawalsItem } from 'types/api/withdrawals';
+import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
 
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
@@ -15,7 +15,7 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 
-type Props = { item: WithdrawalsItem };
+type Props = { item: L2WithdrawalsItem };
 
 const WithdrawalsListItem = ({ item }: Props) => {
   const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : null;

ui/withdrawals/WithdrawalsTable.tsx → ui/l2Withdrawals/WithdrawalsTable.tsx

 import { Table, Tbody, Th, Tr } from '@chakra-ui/react';
 import React from 'react';
 
-import type { WithdrawalsItem } from 'types/api/withdrawals';
+import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
 
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import WithdrawalsTableItem from './WithdrawalsTableItem';
 
  type Props = {
-   items: Array<WithdrawalsItem>;
+   items: Array<L2WithdrawalsItem>;
    top: number;
  }
 

ui/withdrawals/WithdrawalsTableItem.tsx → ui/l2Withdrawals/WithdrawalsTableItem.tsx

@@ -2,7 +2,7 @@ import { Box, Td, Tr, Text, Icon } from '@chakra-ui/react';
 import { route } from 'nextjs-routes';
 import React from 'react';
 
-import type { WithdrawalsItem } from 'types/api/withdrawals';
+import type { L2WithdrawalsItem } from 'types/api/l2Withdrawals';
 
 import appConfig from 'configs/app/config';
 import txIcon from 'icons/transactions.svg';
@@ -14,7 +14,7 @@ import HashStringShorten from 'ui/shared/HashStringShorten';
 import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 
- type Props = { item: WithdrawalsItem };
+ type Props = { item: L2WithdrawalsItem };
 
 const WithdrawalsTableItem = ({ item }: Props) => {
   const timeAgo = item.l2_timestamp ? dayjs(item.l2_timestamp).fromNow() : 'N/A';

ui/pages/Deposits.pw.tsx → ui/pages/L2Deposits.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { data as depositsData } from 'mocks/deposits/deposits';
+import { data as depositsData } from 'mocks/l2deposits/deposits';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
-import Deposits from './Deposits';
+import L2Deposits from './L2Deposits';
 
-const DEPOSITS_API_URL = buildApiUrl('deposits');
-const DEPOSITS_COUNT_API_URL = buildApiUrl('deposits_count');
+const DEPOSITS_API_URL = buildApiUrl('l2_deposits');
+const DEPOSITS_COUNT_API_URL = buildApiUrl('l2_deposits_count');
 
 test('base view +@mobile', async({ mount, page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
@@ -28,7 +28,7 @@ test('base view +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <Deposits/>
+      <L2Deposits/>
     </TestApp>,
   );
 

ui/pages/Deposits.tsx → ui/pages/L2Deposits.tsx

@@ -5,22 +5,22 @@ import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
-import DepositsListItem from 'ui/deposits/DepositsListItem';
-import DepositsTable from 'ui/deposits/DepositsTable';
+import DepositsListItem from 'ui/l2Deposits/DepositsListItem';
+import DepositsTable from 'ui/l2Deposits/DepositsTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/Pagination';
 
-const Deposits = () => {
+const L2Deposits = () => {
   const isMobile = useIsMobile();
 
   const { data, isError, isLoading, isPaginationVisible, pagination } = useQueryWithPages({
-    resourceName: 'deposits',
+    resourceName: 'l2_deposits',
   });
 
-  const countersQuery = useApiQuery('deposits_count');
+  const countersQuery = useApiQuery('l2_deposits_count');
 
   const content = data?.items ? (
     <>
@@ -82,4 +82,4 @@ const Deposits = () => {
   );
 };
 
-export default Deposits;
+export default L2Deposits;

ui/pages/OutputRoots.pw.tsx → ui/pages/L2OutputRoots.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { outputRootsData } from 'mocks/outputRoots/outputRoots';
+import { outputRootsData } from 'mocks/l2outputRoots/outputRoots';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
-import OutputRoots from './OutputRoots';
+import OutputRoots from './L2OutputRoots';
 
-const OUTPUT_ROOTS_API_URL = buildApiUrl('output_roots');
-const OUTPUT_ROOTS_COUNT_API_URL = buildApiUrl('output_roots_count');
+const OUTPUT_ROOTS_API_URL = buildApiUrl('l2_output_roots');
+const OUTPUT_ROOTS_COUNT_API_URL = buildApiUrl('l2_output_roots_count');
 
 test('base view +@mobile', async({ mount, page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({

ui/pages/OutputRoots.tsx → ui/pages/L2OutputRoots.tsx

@@ -4,22 +4,22 @@ import React from 'react';
 import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-import OutputRootsListItem from 'ui/outputRoots/OutputRootsListItem';
-import OutputRootsTable from 'ui/outputRoots/OutputRootsTable';
+import OutputRootsListItem from 'ui/l2OutputRoots/OutputRootsListItem';
+import OutputRootsTable from 'ui/l2OutputRoots/OutputRootsTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/Pagination';
 
-const OutputRoots = () => {
+const L2OutputRoots = () => {
   const isMobile = useIsMobile();
 
   const { data, isError, isLoading, isPaginationVisible, pagination } = useQueryWithPages({
-    resourceName: 'output_roots',
+    resourceName: 'l2_output_roots',
   });
 
-  const countersQuery = useApiQuery('output_roots_count');
+  const countersQuery = useApiQuery('l2_output_roots_count');
 
   const content = data?.items ? (
     <>
@@ -84,4 +84,4 @@ const OutputRoots = () => {
   );
 };
 
-export default OutputRoots;
+export default L2OutputRoots;

ui/pages/TxnBatches.pw.tsx → ui/pages/L2TxnBatches.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { txnBatchesData } from 'mocks/txnBatches/txnBatches';
+import { txnBatchesData } from 'mocks/l2txnBatches/txnBatches';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
-import TxnBatches from './TxnBatches';
+import L2TxnBatches from './L2TxnBatches';
 
-const TXN_BATCHES_API_URL = buildApiUrl('txn_batches');
-const TXN_BATCHES_COUNT_API_URL = buildApiUrl('txn_batches_count');
+const TXN_BATCHES_API_URL = buildApiUrl('l2_txn_batches');
+const TXN_BATCHES_COUNT_API_URL = buildApiUrl('l2_txn_batches_count');
 
 test('base view +@mobile', async({ mount, page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
@@ -28,7 +28,7 @@ test('base view +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <TxnBatches/>
+      <L2TxnBatches/>
     </TestApp>,
   );
 

ui/pages/TxnBatches.tsx → ui/pages/L2TxnBatches.tsx

@@ -5,22 +5,22 @@ import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { nbsp } from 'lib/html-entities';
+import TxnBatchesListItem from 'ui/l2TxnBatches/TxnBatchesListItem';
+import TxnBatchesTable from 'ui/l2TxnBatches/TxnBatchesTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/Pagination';
-import TxnBatchesListItem from 'ui/txnBatches/TxnBatchesListItem';
-import TxnBatchesTable from 'ui/txnBatches/TxnBatchesTable';
 
-const TxnBatches = () => {
+const L2TxnBatches = () => {
   const isMobile = useIsMobile();
 
   const { data, isError, isLoading, isPaginationVisible, pagination } = useQueryWithPages({
-    resourceName: 'txn_batches',
+    resourceName: 'l2_txn_batches',
   });
 
-  const countersQuery = useApiQuery('txn_batches_count');
+  const countersQuery = useApiQuery('l2_txn_batches_count');
 
   const content = data?.items ? (
     <>
@@ -85,4 +85,4 @@ const TxnBatches = () => {
   );
 };
 
-export default TxnBatches;
+export default L2TxnBatches;

ui/pages/Withdrawals.pw.tsx → ui/pages/L2Withdrawals.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
-import { data as withdrawalsData } from 'mocks/withdrawals/withdrawals';
+import { data as withdrawalsData } from 'mocks/l2withdrawals/withdrawals';
 import TestApp from 'playwright/TestApp';
 import buildApiUrl from 'playwright/utils/buildApiUrl';
 
-import Withdrawals from './Withdrawals';
+import L2Withdrawals from './L2Withdrawals';
 
-const WITHDRAWALS_API_URL = buildApiUrl('withdrawals');
-const WITHDRAWALS_COUNT_API_URL = buildApiUrl('withdrawals_count');
+const WITHDRAWALS_API_URL = buildApiUrl('l2_withdrawals');
+const WITHDRAWALS_COUNT_API_URL = buildApiUrl('l2_withdrawals_count');
 
 test('base view +@mobile', async({ mount, page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
@@ -28,7 +28,7 @@ test('base view +@mobile', async({ mount, page }) => {
 
   const component = await mount(
     <TestApp>
-      <Withdrawals/>
+      <L2Withdrawals/>
     </TestApp>,
   );
 

ui/pages/Withdrawals.tsx → ui/pages/L2Withdrawals.tsx

@@ -5,22 +5,22 @@ import useApiQuery from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
+import WithdrawalsListItem from 'ui/l2Withdrawals/WithdrawalsListItem';
+import WithdrawalsTable from 'ui/l2Withdrawals/WithdrawalsTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/Pagination';
-import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
-import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
 
-const Withdrawals = () => {
+const L2Withdrawals = () => {
   const isMobile = useIsMobile();
 
   const { data, isError, isLoading, isPaginationVisible, pagination } = useQueryWithPages({
-    resourceName: 'withdrawals',
+    resourceName: 'l2_withdrawals',
   });
 
-  const countersQuery = useApiQuery('withdrawals_count');
+  const countersQuery = useApiQuery('l2_withdrawals_count');
 
   const content = data?.items ? (
     <>
@@ -82,4 +82,4 @@ const Withdrawals = () => {
   );
 };
 
-export default Withdrawals;
+export default L2Withdrawals;