txs paginator

types/api/transaction.ts

 import type { AddressParam } from './addressParams';
+import type { BlockTransactionsResponse } from './block';
 import type { DecodedInput } from './decodedInput';
 import type { Fee } from './fee';
 import type { TokenTransfer } from './tokenTransfer';
@@ -71,3 +72,5 @@ export interface TransactionsResponsePending {
 }
 
 export type TransactionType = 'token_transfer' | 'contract_creation' | 'contract_call' | 'token_creation' | 'coin_transfer'
+
+export type TxsResponse = TransactionsResponseValidated | TransactionsResponsePending | BlockTransactionsResponse;

ui/block/BlockTxs.tsx

@@ -3,15 +3,19 @@ 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
-      queryName={ QueryKeys.blockTxs }
-      apiPath={ `/node-api/blocks/${ router.query.id }/transactions` }
+      query={ txsQuery }
       showBlockInfo={ false }
     />
   );

ui/pages/Transactions.tsx

-import {
-  Box,
-} from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
+import { useRouter } from 'next/router';
 import React from 'react';
 
+import { QueryKeys } from 'types/client/queries';
 import type { RoutedTab } from 'ui/shared/RoutedTabs/types';
 
 import appConfig from 'configs/app/config';
+import useIsMobile from 'lib/hooks/useIsMobile';
+import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import RoutedTabs from 'ui/shared/RoutedTabs/RoutedTabs';
-import TxsTab from 'ui/txs/TxsTab';
+import TxsContent from 'ui/txs/TxsContent';
+import TxsTabSlot from 'ui/txs/TxsTabSlot';
+
+const TAB_LIST_PROPS = {
+  marginBottom: 0,
+  py: 5,
+  marginTop: -5,
+};
 
 const Transactions = () => {
   const verifiedTitle = appConfig.network.verificationType === 'validation' ? 'Validated' : 'Mined';
-  const TABS: Array<RoutedTab> = [
-    { id: 'validated', title: verifiedTitle, component: <TxsTab tab="validated"/> },
-    { id: 'pending', title: 'Pending', component: <TxsTab tab="pending"/> },
+  const router = useRouter();
+  const isMobile = useIsMobile();
+  const filter = router.query.tab === 'pending' ? 'pending' : 'validated';
+  const txsQuery = useQueryWithPages({
+    apiPath: '/node-api/transactions',
+    queryName: filter === 'validated' ? QueryKeys.txsValidate : QueryKeys.txsPending,
+    filters: { filter },
+  });
+
+  const tabs: Array<RoutedTab> = [
+    { id: 'validated', title: verifiedTitle, component: <TxsContent query={ txsQuery }/> },
+    { id: 'pending', title: 'Pending', component: <TxsContent query={ txsQuery } showBlockInfo={ false }/> },
   ];
 
   return (
     <Page hideMobileHeaderOnScrollDown>
       <Box h="100%">
         <PageTitle text="Transactions"/>
-        <RoutedTabs tabs={ TABS }/>
+        <RoutedTabs
+          tabs={ tabs }
+          tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
+          rightSlot={ <TxsTabSlot pagination={ txsQuery.pagination }/> }
+          stickyEnabled={ !isMobile }
+        />
       </Box>
     </Page>
   );

ui/txs/TxsContent.tsx

 import { Text, Box, Show, Hide } from '@chakra-ui/react';
+import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { TTxsFilters } from 'types/api/txsFilters';
-import type { QueryKeys } from 'types/client/queries';
+import type { TxsResponse } from 'types/api/transaction';
 
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
+import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
 
-import TxsHeader from './TxsHeader';
+import TxsHeaderMobile from './TxsHeaderMobile';
 import TxsListItem from './TxsListItem';
 import TxsNewItemNotice from './TxsNewItemNotice';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
@@ -15,30 +16,19 @@ import TxsSkeletonMobile from './TxsSkeletonMobile';
 import TxsTable from './TxsTable';
 import useTxsSort from './useTxsSort';
 
+type QueryResult = UseQueryResult<TxsResponse> & {
+  pagination: PaginationProps;
+};
+
 type Props = {
-  queryName: QueryKeys.txsPending | QueryKeys.txsValidate | QueryKeys.blockTxs;
-  stateFilter?: TTxsFilters['filter'];
-  apiPath: string;
+  query: QueryResult;
   showBlockInfo?: boolean;
 }
 
-const TxsContent = ({
-  queryName,
-  stateFilter,
-  apiPath,
-  showBlockInfo = true,
-}: Props) => {
-  const {
-    pagination,
-    ...queryResult
-  } = useQueryWithPages({
-    apiPath,
-    queryName,
-    filters: stateFilter ? { filter: stateFilter } : undefined,
-  });
-  // } = useQueryWithPages({ ...filters, filter: stateFilter, apiPath });
-  const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(queryResult);
-  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
+const TxsContent = ({ query, showBlockInfo = 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();
 
   const content = (() => {
     if (isError) {
@@ -79,7 +69,15 @@ const TxsContent = ({
 
   return (
     <>
-      <TxsHeader mt={ -6 } sorting={ sorting } setSorting={ setSortByValue } paginationProps={ pagination } showPagination={ !isPaginatorHidden }/>
+      { isMobile && (
+        <TxsHeaderMobile
+          mt={ -6 }
+          sorting={ sorting }
+          setSorting={ setSortByValue }
+          paginationProps={ query.pagination }
+          showPagination={ !isPaginatorHidden }
+        />
+      ) }
       { content }
     </>
   );

ui/txs/TxsHeader.tsx → ui/txs/TxsHeaderMobile.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 // import FilterInput from 'ui/shared/FilterInput';
 import ActionBar from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/Pagination';
@@ -20,13 +19,7 @@ type Props = {
   showPagination?: boolean;
 }
 
-const TxsHeader = ({ sorting, setSorting, paginationProps, className, showPagination = true }: Props) => {
-  const isMobile = useIsMobile(false);
-
-  if (!showPagination && !isMobile) {
-    return null;
-  }
-
+const TxsHeaderMobile = ({ sorting, setSorting, paginationProps, className, showPagination = true }: Props) => {
   return (
     <ActionBar className={ className }>
       <HStack>
@@ -36,13 +29,11 @@ const TxsHeader = ({ sorting, setSorting, paginationProps, className, showPagina
           onFiltersChange={ setFilters }
           appliedFiltersNum={ 0 }
         /> */ }
-        { isMobile && (
-          <TxsSorting
-            isActive={ Boolean(sorting) }
-            setSorting={ setSorting }
-            sorting={ sorting }
-          />
-        ) }
+        <TxsSorting
+          isActive={ Boolean(sorting) }
+          setSorting={ setSorting }
+          sorting={ sorting }
+        />
         { /* api is not implemented */ }
         { /* <FilterInput
           // eslint-disable-next-line react/jsx-no-bind
@@ -57,4 +48,4 @@ const TxsHeader = ({ sorting, setSorting, paginationProps, className, showPagina
   );
 };
 
-export default chakra(TxsHeader);
+export default chakra(TxsHeaderMobile);

ui/txs/TxsTab.tsx

-import React from 'react';
-
-import { QueryKeys } from 'types/client/queries';
-
-import TxsContent from './TxsContent';
-
-type Props = {
-  tab: 'validated' | 'pending';
-}
-
-const TxsTab = ({ tab }: Props) => {
-  if (tab === 'validated') {
-    return (
-      <TxsContent
-        queryName={ QueryKeys.txsValidate }
-        stateFilter="validated"
-        apiPath="/node-api/transactions"
-      />
-    );
-  }
-
-  return (
-    <TxsContent
-      queryName={ QueryKeys.txsPending }
-      stateFilter="pending"
-      apiPath="/node-api/transactions"
-      showBlockInfo={ false }
-    />
-  );
-};
-
-export default TxsTab;

ui/txs/TxsTabSlot.tsx

+import React from 'react';
+
+import useIsMobile from 'lib/hooks/useIsMobile';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/Pagination';
+
+interface Props {
+  pagination: PaginationProps;
+}
+
+const TxsTabSlot = ({ pagination }: Props) => {
+  const isMobile = useIsMobile();
+
+  if (isMobile) {
+    return null;
+  }
+
+  return <Pagination my={ 1 } { ...pagination }/>;
+};
+
+export default TxsTabSlot;

ui/txs/useTxsSort.tsx

 import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { BlockTransactionsResponse } from 'types/api/block';
-import type { TransactionsResponsePending, TransactionsResponseValidated } from 'types/api/transaction';
+import type { TxsResponse } from 'types/api/transaction';
 import type { Sort } from 'types/client/txs-sort';
 
 import * as cookies from 'lib/cookies';
 import sortTxs from 'lib/tx/sortTxs';
 
-type TxsResponse = TransactionsResponseValidated | TransactionsResponsePending | BlockTransactionsResponse;
-
 type HookResult = UseQueryResult<TxsResponse> & {
   sorting: Sort;
   setSortByField: (field: 'val' | 'fee') => () => void;