Internal transactions list page

lib/api/resources.ts

@@ -521,6 +521,9 @@ export const RESOURCES = {
   withdrawals_counters: {
     path: '/api/v2/withdrawals/counters',
   },
+  internal_txs: {
+    path: '/api/v2/internal-transactions',
+  },
 
   // ADDRESSES
   addresses: {
@@ -1219,7 +1222,7 @@ export interface ResourceError<T = unknown> {
 export type ResourceErrorAccount<T> = ResourceError<{ errors: T }>;
 
 export type PaginatedResources = 'blocks' | 'block_txs' | 'block_election_rewards' |
-'txs_validated' | 'txs_pending' | 'txs_with_blobs' | 'txs_watchlist' | 'txs_execution_node' |
+'txs_validated' | 'txs_pending' | 'txs_with_blobs' | 'txs_watchlist' | 'txs_execution_node' | 'internal_txs' |
 'tx_internal_txs' | 'tx_logs' | 'tx_token_transfers' | 'tx_state_changes' | 'tx_blobs' |
 'addresses' | 'addresses_metadata_search' |
 'address_txs' | 'address_internal_txs' | 'address_token_transfers' | 'address_blocks_validated' | 'address_coin_balance' |
@@ -1288,6 +1291,7 @@ Q extends 'txs_pending' ? TransactionsResponsePending :
 Q extends 'txs_with_blobs' ? TransactionsResponseWithBlobs :
 Q extends 'txs_watchlist' ? TransactionsResponseWatchlist :
 Q extends 'txs_execution_node' ? TransactionsResponseValidated :
+Q extends 'internal_txs' ? InternalTransactionsResponse :
 Q extends 'tx' ? Transaction :
 Q extends 'tx_internal_txs' ? InternalTransactionsResponse :
 Q extends 'tx_logs' ? LogsResponseTx :

lib/hooks/useNavItems.tsx

@@ -44,6 +44,12 @@ export default function useNavItems(): ReturnType {
       icon: 'transactions',
       isActive: pathname === '/txs' || pathname === '/tx/[hash]',
     };
+    const internalTxs: NavItem | null = {
+      text: 'Internal transactions',
+      nextRoute: { pathname: '/internal-txs' as const },
+      icon: 'transactions',
+      isActive: pathname === '/internal-txs',
+    };
     const userOps: NavItem | null = config.features.userOps.isEnabled ? {
       text: 'User operations',
       nextRoute: { pathname: '/ops' as const },
@@ -118,6 +124,7 @@ export default function useNavItems(): ReturnType {
       blockchainNavItems = [
         [
           txs,
+          internalTxs,
           rollupDeposits,
           rollupWithdrawals,
         ],
@@ -140,6 +147,7 @@ export default function useNavItems(): ReturnType {
       blockchainNavItems = [
         [
           txs,
+          internalTxs,
           rollupDeposits,
           rollupWithdrawals,
         ],
@@ -155,6 +163,7 @@ export default function useNavItems(): ReturnType {
       blockchainNavItems = [
         [
           txs,
+          internalTxs,
           userOps,
           blocks,
           rollupTxnBatches,
@@ -169,6 +178,7 @@ export default function useNavItems(): ReturnType {
     } else {
       blockchainNavItems = [
         txs,
+        internalTxs,
         userOps,
         blocks,
         topAccounts,

lib/metadata/getPageOgType.ts

@@ -5,6 +5,7 @@ type OGPageType = 'Homepage' | 'Root page' | 'Regular page';
 const OG_TYPE_DICT: Record<Route['pathname'], OGPageType> = {
   '/': 'Homepage',
   '/txs': 'Root page',
+  '/internal-txs': 'Root page',
   '/txs/kettle/[hash]': 'Regular page',
   '/tx/[hash]': 'Regular page',
   '/blocks': 'Root page',

lib/metadata/templates/description.ts

@@ -8,6 +8,7 @@ const DEFAULT_TEMPLATE = 'Open-source block explorer by Blockscout. Search trans
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/': DEFAULT_TEMPLATE,
   '/txs': DEFAULT_TEMPLATE,
+  '/internal-txs': DEFAULT_TEMPLATE,
   '/txs/kettle/[hash]': DEFAULT_TEMPLATE,
   '/tx/[hash]': 'View transaction %hash% on %network_title%',
   '/blocks': DEFAULT_TEMPLATE,

lib/metadata/templates/title.ts

@@ -5,6 +5,7 @@ import config from 'configs/app';
 const TEMPLATE_MAP: Record<Route['pathname'], string> = {
   '/': '%network_name% blockchain explorer - View %network_name% stats',
   '/txs': '%network_name% transactions - %network_name% explorer',
+  '/internal-txs': '%network_name% internal transactions - %network_name% explorer',
   '/txs/kettle/[hash]': '%network_name% kettle %hash% transactions',
   '/tx/[hash]': '%network_name% transaction %hash%',
   '/blocks': '%network_name% blocks',

lib/mixpanel/getPageType.ts

@@ -3,6 +3,7 @@ import type { Route } from 'nextjs-routes';
 export const PAGE_TYPE_DICT: Record<Route['pathname'], string> = {
   '/': 'Homepage',
   '/txs': 'Transactions',
+  '/internal-txs': 'Internal transactions',
   '/txs/kettle/[hash]': 'Kettle transactions',
   '/tx/[hash]': 'Transaction details',
   '/blocks': 'Blocks',

nextjs/nextjs-routes.d.ts

@@ -45,6 +45,7 @@ declare module "nextjs-routes" {
     | StaticRoute<"/gas-tracker">
     | StaticRoute<"/graphiql">
     | StaticRoute<"/">
+    | StaticRoute<"/internal-txs">
     | StaticRoute<"/login">
     | StaticRoute<"/mud-worlds">
     | DynamicRoute<"/name-domains/[name]", { "name": string }>

pages/internal-txs.tsx

@@ -0,0 +1,19 @@
+import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
+import React from 'react';
+
+import PageNextJs from 'nextjs/PageNextJs';
+
+const InternalTxs = dynamic(() => import('ui/pages/InternalTxs'), { ssr: false });
+
+const Page: NextPage = () => {
+  return (
+    <PageNextJs pathname="/internal-txs">
+      <InternalTxs/>
+    </PageNextJs>
+  );
+};
+
+export default Page;
+
+export { base as getServerSideProps } from 'nextjs/getServerSideProps';

ui/address/AddressInternalTxs.tsx

@@ -11,15 +11,15 @@ import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { INTERNAL_TX } from 'stubs/internalTx';
 import { generateListStub } from 'stubs/utils';
-import AddressIntTxsTable from 'ui/address/internals/AddressIntTxsTable';
+import InternalTxsList from 'ui/internalTxs/InternalTxsList';
+import InternalTxsTable from 'ui/internalTxs/InternalTxsTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 import AddressCsvExportLink from './AddressCsvExportLink';
 import AddressTxsFilter from './AddressTxsFilter';
-import AddressIntTxsList from './internals/AddressIntTxsList';
 
 const getFilterValue = (getFilterValueFromQuery<AddressFromToFilter>).bind(null, AddressFromToFilterValues);
 
@@ -71,10 +71,10 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = t
   const content = data?.items ? (
     <>
       <Show below="lg" ssr={ false }>
-        <AddressIntTxsList data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
+        <InternalTxsList data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
       </Show>
       <Hide below="lg" ssr={ false }>
-        <AddressIntTxsTable data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
+        <InternalTxsTable data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null ;

ui/address/internals/AddressIntTxsList.tsx → ui/internalTxs/InternalTxsList.tsx

@@ -3,19 +3,19 @@ import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
-import AddressIntTxsListItem from 'ui/address/internals/AddressIntTxsListItem';
+import InternalTxsListItem from './InternalTxsListItem';
 
 type Props = {
   data: Array<InternalTransaction>;
-  currentAddress: string;
+  currentAddress?: string;
   isLoading?: boolean;
 };
 
-const AddressIntTxsList = ({ data, currentAddress, isLoading }: Props) => {
+const InternalTxsList = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <Box>
       { data.map((item, index) => (
-        <AddressIntTxsListItem
+        <InternalTxsListItem
           key={ item.transaction_hash + '_' + index }
           { ...item }
           currentAddress={ currentAddress }
@@ -26,4 +26,4 @@ const AddressIntTxsList = ({ data, currentAddress, isLoading }: Props) => {
   );
 };
 
-export default AddressIntTxsList;
+export default InternalTxsList;

ui/address/internals/AddressIntTxsListItem.tsx → ui/internalTxs/InternalTxsListItem.tsx

@@ -16,9 +16,9 @@ import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
-type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean };
+type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean };
 
-const TxInternalsListItem = ({
+const InternalTxsListItem = ({
   type,
   from,
   to,
@@ -83,4 +83,4 @@ const TxInternalsListItem = ({
   );
 };
 
-export default TxInternalsListItem;
+export default InternalTxsListItem;

ui/address/internals/AddressIntTxsTable.tsx → ui/internalTxs/InternalTxsTable.tsx

@@ -7,15 +7,15 @@ import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { currencyUnits } from 'lib/units';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
-import AddressIntTxsTableItem from './AddressIntTxsTableItem';
+import InternalTxsTableItem from './InternalTxsTableItem';
 
 interface Props {
   data: Array<InternalTransaction>;
-  currentAddress: string;
+  currentAddress?: string;
   isLoading?: boolean;
 }
 
-const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
+const InternalTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
       <Table>
@@ -32,7 +32,7 @@ const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
         </Thead>
         <Tbody>
           { data.map((item, index) => (
-            <AddressIntTxsTableItem
+            <InternalTxsTableItem
               key={ item.transaction_hash + '_' + index }
               { ...item }
               currentAddress={ currentAddress }
@@ -46,4 +46,4 @@ const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
   );
 };
 
-export default AddressIntTxsTable;
+export default InternalTxsTable;

ui/address/internals/AddressIntTxsTableItem.tsx → ui/internalTxs/InternalTxsTableItem.tsx

@@ -14,9 +14,9 @@ import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
-type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean };
+type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean };
 
-const AddressIntTxsTableItem = ({
+const InternalTxsTableItem = ({
   type,
   from,
   to,
@@ -36,7 +36,7 @@ const AddressIntTxsTableItem = ({
   return (
     <Tr alignItems="top">
       <Td verticalAlign="middle">
-        <Flex rowGap={ 3 } flexWrap="wrap">
+        <Flex rowGap={ 3 } flexDir="column">
           <TxEntity
             hash={ txnHash }
             isLoading={ isLoading }
@@ -91,4 +91,4 @@ const AddressIntTxsTableItem = ({
   );
 };
 
-export default React.memo(AddressIntTxsTableItem);
+export default React.memo(InternalTxsTableItem);

ui/pages/InternalTxs.tsx

@@ -0,0 +1,71 @@
+import { Hide, Show } from '@chakra-ui/react';
+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import { INTERNAL_TX } from 'stubs/internalTx';
+import { generateListStub } from 'stubs/utils';
+import InternalTxsList from 'ui/internalTxs/InternalTxsList';
+import InternalTxsTable from 'ui/internalTxs/InternalTxsTable';
+import ActionBar from 'ui/shared/ActionBar';
+import DataListDisplay from 'ui/shared/DataListDisplay';
+import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+
+const InternalTxs = () => {
+  const isMobile = useIsMobile();
+
+  const { isError, isPlaceholderData, data, pagination } = useQueryWithPages({
+    resourceName: 'internal_txs',
+    options: {
+      placeholderData: generateListStub<'internal_txs'>(
+        INTERNAL_TX,
+        50,
+        {
+          next_page_params: {
+            items_count: 50,
+            block_number: 1,
+            index: 1,
+            transaction_hash: '0x123',
+            transaction_index: 1,
+          },
+        },
+      ),
+    },
+  });
+
+  const actionBar = (!isMobile || pagination.isVisible) ? (
+    <ActionBar mt={ -6 }>
+      <Pagination ml="auto" { ...pagination }/>
+    </ActionBar>
+  ) : null;
+
+  const content = data?.items ? (
+    <>
+      <Show below="lg" ssr={ false }>
+        <InternalTxsList data={ data.items } isLoading={ isPlaceholderData }/>
+      </Show>
+      <Hide below="lg" ssr={ false }>
+        <InternalTxsTable data={ data.items } isLoading={ isPlaceholderData }/>
+      </Hide>
+    </>
+  ) : null;
+
+  return (
+    <>
+      <PageTitle
+        title="Internal transactions"
+        withTextAd
+      />
+      <DataListDisplay
+        isError={ isError }
+        items={ data?.items }
+        emptyText="There are no internal transactions."
+        content={ content }
+        actionBar={ actionBar }
+      />
+    </>
+  );
+};
+
+export default InternalTxs;