add pagination to batch txs

blockscout · Mar 25, 2024 · 93fa51f · 93fa51f
1 parent 0b920e5
commit 93fa51f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 4 deletions.
diff --git a/types/api/zkSyncL2.ts b/types/api/zkSyncL2.ts
@@ -43,6 +43,10 @@ export interface ZkSyncBatch extends Omit<ZkSyncBatchesItem, 'tx_count'> {
 
 export type ZkSyncBatchTxs = {
   items: Array<Transaction>;
-  // there is no pagination for now
-  next_page_params: null;
+  next_page_params: {
+    batch_number: string;
+    block_number: number;
+    index: number;
+    items_count: number;
+  } | null;
 }
diff --git a/ui/pages/ZkSyncL2TxnBatch.tsx b/ui/pages/ZkSyncL2TxnBatch.tsx
@@ -7,23 +7,32 @@ import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import throwOnAbsentParamError from 'lib/errors/throwOnAbsentParamError';
 import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
 import { ZKSYNC_L2_TXN_BATCH } from 'stubs/zkSyncL2';
 import TextAd from 'ui/shared/ad/TextAd';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 import TabsSkeleton from 'ui/shared/Tabs/TabsSkeleton';
 import ZkSyncL2TxnBatchDetails from 'ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails';
 import TxsWithFrontendSorting from 'ui/txs/TxsWithFrontendSorting';
 
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
+
 const ZkSyncL2TxnBatch = () => {
   const router = useRouter();
   const appProps = useAppContext();
   const number = getQueryParamString(router.query.number);
   const tab = getQueryParamString(router.query.tab);
+  const isMobile = useIsMobile();
 
   const batchQuery = useApiQuery('zksync_l2_txn_batch', {
     pathParams: { number },
@@ -38,7 +47,12 @@ const ZkSyncL2TxnBatch = () => {
     pathParams: { number },
     options: {
       enabled: Boolean(!batchQuery.isPlaceholderData && batchQuery.data?.number && tab === 'txs'),
-      placeholderData: generateListStub<'zksync_l2_txn_batch_txs'>(TX, 50, { next_page_params: null }),
+      placeholderData: generateListStub<'zksync_l2_txn_batch_txs'>(TX, 50, { next_page_params: {
+        batch_number: '8122',
+        block_number: 1338932,
+        index: 0,
+        items_count: 50,
+      } }),
     },
   });
 
@@ -63,14 +77,24 @@ const ZkSyncL2TxnBatch = () => {
     };
   }, [ appProps.referrer ]);
 
+  const hasPagination = !isMobile && batchTxsQuery.pagination.isVisible && tab === 'txs';
+
   return (
     <>
       <TextAd mb={ 6 }/>
       <PageTitle
         title={ `Tx batch #${ number }` }
         backLink={ backLink }
       />
-      { batchQuery.isPlaceholderData ? <TabsSkeleton tabs={ tabs }/> : <RoutedTabs tabs={ tabs }/> }
+      { batchQuery.isPlaceholderData ?
+        <TabsSkeleton tabs={ tabs }/> : (
+          <RoutedTabs
+            tabs={ tabs }
+            tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+            rightSlot={ hasPagination ? <Pagination { ...(batchTxsQuery.pagination) }/> : null }
+            stickyEnabled={ hasPagination }
+          />
+        ) }
     </>
   );
 };