pagination for block txs

types/api/block.ts

@@ -44,6 +44,7 @@ export interface BlockTransactionsResponse {
   next_page_params: {
     block_number: number;
     items_count: number;
+    index: number;
   } | null;
 }
 

types/api/pagination.ts

@@ -41,7 +41,7 @@ type PaginationFields = {
 
 export const PAGINATION_FIELDS: PaginationFields = {
   [QueryKeys.blocks]: [ 'block_number', 'items_count' ],
-  [QueryKeys.blockTxs]: [ 'block_number', 'items_count' ],
+  [QueryKeys.blockTxs]: [ 'block_number', 'items_count', 'index' ],
   [QueryKeys.txsValidate]: [ 'block_number', 'items_count', 'filter', 'index' ],
   [QueryKeys.txsPending]: [ 'filter', 'hash', 'inserted_at' ],
   [QueryKeys.txInternals]: [ 'block_number', 'items_count', 'transaction_hash', 'index', 'transaction_index' ],

ui/block/BlockTxs.tsx

-import { useRouter } from 'next/router';
-import React from 'react';
-
-import { QueryKeys } from 'types/client/queries';
-
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
-import TxsContent from 'ui/txs/TxsContent';
-
-const BlockTxs = () => {
-  const router = useRouter();
-  const txsQuery = useQueryWithPages({
-    apiPath: `/node-api/blocks/${ router.query.id }/transactions`,
-    queryName: QueryKeys.blockTxs,
-  });
-
-  return (
-    <TxsContent
-      query={ txsQuery }
-      showBlockInfo={ false }
-    />
-  );
-};
-
-export default BlockTxs;

ui/pages/Block.tsx

 import { useRouter } from 'next/router';
 import React from 'react';
 
+import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import BlockDetails from 'ui/block/BlockDetails';
-import BlockTxs from 'ui/block/BlockTxs';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/Pagination';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
+import TxsContent from 'ui/txs/TxsContent';
 
-const TABS: Array<RoutedTab> = [
-  { id: 'index', title: 'Details', component: <BlockDetails/> },
-  { id: 'txs', title: 'Transactions', component: <BlockTxs/> },
-];
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
 
 const BlockPageContent = () => {
   const router = useRouter();
+  const isMobile = useIsMobile();
+
+  const blockTxsQuery = useQueryWithPages({
+    apiPath: `/node-api/blocks/${ router.query.id }/transactions`,
+    queryName: QueryKeys.blockTxs,
+    options: {
+      enabled: Boolean(router.query.id && router.query.tab === 'txs'),
+    },
+  });
 
   if (!router.query.id) {
     return null;
   }
 
+  const tabs: Array<RoutedTab> = [
+    { id: 'index', title: 'Details', component: <BlockDetails/> },
+    { id: 'txs', title: 'Transactions', component: <TxsContent query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false }/> },
+  ];
+
   return (
     <Page>
       <PageTitle text={ `Block #${ router.query.id }` }/>
-      <RoutedTabs tabs={ TABS }/>
+      <RoutedTabs
+        tabs={ tabs }
+        tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+        rightSlot={ isMobile ? null : <Pagination { ...blockTxsQuery.pagination }/> }
+        stickyEnabled={ !isMobile }
+      />
     </Page>
   );
 };

ui/txs/TxsContent.tsx

@@ -23,9 +23,10 @@ type QueryResult = UseQueryResult<TxsResponse> & {
 type Props = {
   query: QueryResult;
   showBlockInfo?: boolean;
+  showSocketInfo?: boolean;
 }
 
-const TxsContent = ({ query, showBlockInfo = true }: Props) => {
+const TxsContent = ({ query, showBlockInfo = true, showSocketInfo = true }: Props) => {
   const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(query);
   const isPaginatorHidden = !isLoading && !isError && query.pagination.page === 1 && !query.pagination.hasNextPage;
   const isMobile = useIsMobile();
@@ -54,14 +55,23 @@ const TxsContent = ({ query, showBlockInfo = true }: Props) => {
       <>
         <Show below="lg" ssr={ false }>
           <Box>
-            <TxsNewItemNotice>
-              { ({ content }) => <Box>{ content }</Box> }
-            </TxsNewItemNotice>
+            { showSocketInfo && (
+              <TxsNewItemNotice>
+                { ({ content }) => <Box>{ content }</Box> }
+              </TxsNewItemNotice>
+            ) }
             { txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash } showBlockInfo={ showBlockInfo }/>) }
           </Box>
         </Show>
         <Hide below="lg" ssr={ false }>
-          <TxsTable txs={ txs } sort={ setSortByField } sorting={ sorting } showBlockInfo={ showBlockInfo } top={ isPaginatorHidden ? 0 : 80 }/>
+          <TxsTable
+            txs={ txs }
+            sort={ setSortByField }
+            sorting={ sorting }
+            showBlockInfo={ showBlockInfo }
+            showSocketInfo={ showSocketInfo }
+            top={ isPaginatorHidden ? 0 : 80 }
+          />
         </Hide>
       </>
     );

ui/txs/TxsTable.tsx

@@ -17,9 +17,10 @@ type Props = {
   sorting?: Sort;
   top: number;
   showBlockInfo: boolean;
+  showSocketInfo: boolean;
 }
 
-const TxsTable = ({ txs, sort, sorting, top, showBlockInfo }: Props) => {
+const TxsTable = ({ txs, sort, sorting, top, showBlockInfo, showSocketInfo }: Props) => {
   return (
     <Table variant="simple" minWidth="950px" size="xs">
       <TheadSticky top={ top }>
@@ -49,9 +50,11 @@ const TxsTable = ({ txs, sort, sorting, top, showBlockInfo }: Props) => {
         </Tr>
       </TheadSticky>
       <Tbody>
-        <TxsNewItemNotice borderRadius={ 0 }>
-          { ({ content }) => <Tr><Td colSpan={ 10 } p={ 0 }>{ content }</Td></Tr> }
-        </TxsNewItemNotice>
+        { showSocketInfo && (
+          <TxsNewItemNotice borderRadius={ 0 }>
+            { ({ content }) => <Tr><Td colSpan={ 10 } p={ 0 }>{ content }</Td></Tr> }
+          </TxsNewItemNotice>
+        ) }
         { txs.map((item) => (
           <TxsTableItem
             key={ item.hash }