refactor

ui/address/AddressBlocksValidated.tsx

@@ -8,14 +8,14 @@ import type { AddressBlocksValidatedResponse } from 'types/api/address';
 
 import appConfig from 'configs/app/config';
 import { getResourceKey } from 'lib/api/useApiQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import SocketAlert from 'ui/shared/SocketAlert';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
@@ -88,7 +88,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
       { socketAlert && <SocketAlert mb={ 6 }/> }
       <Hide below="lg" ssr={ false }>
         <Table variant="simple" size="sm">
-          <Thead top={ query.isPaginationVisible ? 80 : 0 }>
+          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
             <Tr>
               <Th width="17%">Block</Th>
               <Th width="17%">Age</Th>
@@ -122,7 +122,7 @@ const AddressBlocksValidated = ({ scrollRef }: Props) => {
     </>
   ) : null;
 
-  const actionBar = query.isPaginationVisible ? (
+  const actionBar = query.pagination.isVisible ? (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...query.pagination }/>
     </ActionBar>

ui/address/AddressCoinBalance.tsx

@@ -6,12 +6,12 @@ import type { SocketMessage } from 'lib/socket/types';
 import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
 
 import { getResourceKey } from 'lib/api/useApiQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { ADDRESS_COIN_BALANCE } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import SocketAlert from 'ui/shared/SocketAlert';
 
 import AddressCoinBalanceChart from './coinBalance/AddressCoinBalanceChart';

ui/address/AddressInternalTxs.tsx

@@ -6,7 +6,6 @@ import type { AddressFromToFilter } from 'types/api/address';
 import { AddressFromToFilterValues } from 'types/api/address';
 
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { INTERNAL_TX } from 'stubs/internalTx';
@@ -14,7 +13,8 @@ import { generateListStub } from 'stubs/utils';
 import AddressIntTxsTable from 'ui/address/internals/AddressIntTxsTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 import AddressCsvExportLink from './AddressCsvExportLink';
 import AddressTxsFilter from './AddressTxsFilter';
@@ -28,7 +28,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
 
   const hash = getQueryParamString(router.query.hash);
 
-  const { data, isPlaceholderData, isError, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination, onFilterChange } = useQueryWithPages({
     resourceName: 'address_internal_txs',
     pathParams: { hash },
     filters: { filter: filterValue },
@@ -75,7 +75,7 @@ const AddressInternalTxs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
         isLoading={ pagination.isLoading }
       />
       <AddressCsvExportLink address={ hash } isLoading={ pagination.isLoading } type="internal-transactions" ml={{ base: 2, lg: 'auto' }}/>
-      { isPaginationVisible && <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/> }
+      <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/>
     </ActionBar>
   );
 

ui/address/AddressLogs.tsx

 import { useRouter } from 'next/router';
 import React from 'react';
 
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { LOG } from 'stubs/log';
 import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import LogItem from 'ui/shared/logs/LogItem';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>}) => {
   const router = useRouter();
 
   const hash = getQueryParamString(router.query.hash);
-  const { data, isPlaceholderData, isError, pagination, isPaginationVisible } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'address_logs',
     pathParams: { hash },
     scrollRef,
@@ -28,7 +28,7 @@ const AddressLogs = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivElement>
     },
   });
 
-  const actionBar = isPaginationVisible ? (
+  const actionBar = pagination.isVisible ? (
     <ActionBar mt={ -6 } showShadow>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>

ui/address/AddressTokenTransfers.tsx

@@ -14,7 +14,6 @@ import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
@@ -24,7 +23,8 @@ import { getTokenTransfersStub } from 'stubs/token';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import HashStringShorten from 'ui/shared/HashStringShorten';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenLogo from 'ui/shared/TokenLogo';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
@@ -88,7 +88,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     },
   );
 
-  const { isError, isPlaceholderData, data, pagination, onFilterChange, isPaginationVisible } = useQueryWithPages({
+  const { isError, isPlaceholderData, data, pagination, onFilterChange } = useQueryWithPages({
     resourceName: 'address_token_transfers',
     pathParams: { hash: currentAddress },
     filters: tokenFilter ? { token: tokenFilter } : filters,
@@ -277,7 +277,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
               isLoading={ isPlaceholderData }
             />
           ) }
-          { isPaginationVisible && <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/> }
+          <Pagination ml={{ base: 'auto', lg: 8 }} { ...pagination }/>
         </ActionBar>
       ) }
     </>

ui/address/AddressTokens.tsx

@@ -3,14 +3,14 @@ import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { TokenType } from 'types/api/token';
+import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { ADDRESS_TOKEN_BALANCE_ERC_1155, ADDRESS_TOKEN_BALANCE_ERC_20, ADDRESS_TOKEN_BALANCE_ERC_721 } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
 import { tokenTabsByType } from 'ui/pages/Address';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
 import ERC1155Tokens from './tokens/ERC1155Tokens';
@@ -81,17 +81,13 @@ const AddressTokens = () => {
     { id: tokenTabsByType['ERC-1155'], title: 'ERC-1155', component: <ERC1155Tokens tokensQuery={ erc1155Query }/> },
   ];
 
-  let isPaginationVisible;
-  let pagination: PaginationProps | undefined;
+  let pagination: PaginationParams | undefined;
 
   if (tab === tokenTabsByType['ERC-1155']) {
-    isPaginationVisible = erc1155Query.isPaginationVisible;
     pagination = erc1155Query.pagination;
   } else if (tab === tokenTabsByType['ERC-721']) {
-    isPaginationVisible = erc721Query.isPaginationVisible;
     pagination = erc721Query.pagination;
   } else {
-    isPaginationVisible = erc20Query.isPaginationVisible;
     pagination = erc20Query.pagination;
   }
 
@@ -106,7 +102,7 @@ const AddressTokens = () => {
         colorScheme="gray"
         size="sm"
         tabListProps={ isMobile ? TAB_LIST_PROPS_MOBILE : TAB_LIST_PROPS }
-        rightSlot={ isPaginationVisible && !isMobile ? <Pagination { ...pagination }/> : null }
+        rightSlot={ pagination.isVisible && !isMobile ? <Pagination { ...pagination }/> : null }
         stickyEnabled={ !isMobile }
       />
     </>

ui/address/AddressTxs.tsx

@@ -10,14 +10,14 @@ import type { Transaction } from 'types/api/transaction';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import getFilterValueFromQuery from 'lib/getFilterValueFromQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxsContent from 'ui/txs/TxsContent';
 
 import AddressCsvExportLink from './AddressCsvExportLink';
@@ -172,7 +172,7 @@ const AddressTxs = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Props) => {
               isLoading={ addressTxsQuery.pagination.isLoading }
             />
           ) }
-          { addressTxsQuery.isPaginationVisible && <Pagination { ...addressTxsQuery.pagination } ml={ 8 }/> }
+          <Pagination { ...addressTxsQuery.pagination } ml={ 8 }/>
         </ActionBar>
       ) }
       <TxsContent

ui/address/AddressWithdrawals.tsx

@@ -2,13 +2,13 @@ import { Show, Hide } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
 import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
 
@@ -17,7 +17,7 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
 
   const hash = getQueryParamString(router.query.hash);
 
-  const { data, isPlaceholderData, isError, pagination, isPaginationVisible } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'address_withdrawals',
     pathParams: { hash },
     scrollRef,
@@ -41,12 +41,12 @@ const AddressWithdrawals = ({ scrollRef }: {scrollRef?: React.RefObject<HTMLDivE
         )) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } view="address" top={ isPaginationVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <WithdrawalsTable items={ data.items } view="address" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null ;
 
-  const actionBar = isPaginationVisible ? (
+  const actionBar = pagination.isVisible ? (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -3,12 +3,12 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
 import type { AddressCoinBalanceHistoryResponse } from 'types/api/address';
+import type { PaginationParams } from 'ui/shared/pagination/types';
 
 import appConfig from 'configs/app/config';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
 import { default as Thead } from 'ui/shared/TheadSticky';
 
 import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
@@ -16,8 +16,7 @@ import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
 
 interface Props {
   query: UseQueryResult<AddressCoinBalanceHistoryResponse> & {
-    pagination: PaginationProps;
-    isPaginationVisible: boolean;
+    pagination: PaginationParams;
   };
 }
 
@@ -27,7 +26,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
     <>
       <Hide below="lg" ssr={ false }>
         <Table variant="simple" size="sm">
-          <Thead top={ query.isPaginationVisible ? 80 : 0 }>
+          <Thead top={ query.pagination.isVisible ? 80 : 0 }>
             <Tr>
               <Th width="20%">Block</Th>
               <Th width="20%">Txn</Th>
@@ -61,7 +60,7 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
     </>
   ) : null;
 
-  const actionBar = query.isPaginationVisible ? (
+  const actionBar = query.pagination.isVisible ? (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...query.pagination }/>
     </ActionBar>

ui/address/tokens/ERC1155Tokens.tsx

 import { Grid } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { AddressTokensResponse } from 'types/api/address';
-
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 import NFTItem from './NFTItem';
 
 type Props = {
-  tokensQuery: UseQueryResult<AddressTokensResponse> & {
-    pagination: PaginationProps;
-    isPaginationVisible: boolean;
-  };
+  tokensQuery: QueryWithPagesResult<'address_tokens'>;
 }
 
 const ERC1155Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
 
-  const { isError, isPlaceholderData, data, pagination, isPaginationVisible } = tokensQuery;
+  const { isError, isPlaceholderData, data, pagination } = tokensQuery;
 
-  const actionBar = isMobile && isPaginationVisible && (
+  const actionBar = isMobile && pagination.isVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>

ui/address/tokens/ERC20Tokens.tsx

 import { Show, Hide } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { AddressTokensResponse } from 'types/api/address';
-
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 import ERC20TokensListItem from './ERC20TokensListItem';
 import ERC20TokensTable from './ERC20TokensTable';
 
 type Props = {
-  tokensQuery: UseQueryResult<AddressTokensResponse> & {
-    pagination: PaginationProps;
-    isPaginationVisible: boolean;
-  };
+  tokensQuery: QueryWithPagesResult<'address_tokens'>;
 }
 
 const ERC20Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
 
-  const { isError, isPlaceholderData, data, pagination, isPaginationVisible } = tokensQuery;
+  const { isError, isPlaceholderData, data, pagination } = tokensQuery;
 
-  const actionBar = isMobile && isPaginationVisible && (
+  const actionBar = isMobile && pagination.isVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
@@ -33,7 +27,7 @@ const ERC20Tokens = ({ tokensQuery }: Props) => {
 
   const content = data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }><ERC20TokensTable data={ data.items } top={ isPaginationVisible ? 72 : 0 } isLoading={ isPlaceholderData }/></Hide>
+      <Hide below="lg" ssr={ false }><ERC20TokensTable data={ data.items } top={ pagination.isVisible ? 72 : 0 } isLoading={ isPlaceholderData }/></Hide>
       <Show below="lg" ssr={ false }>{ data.items.map((item, index) => (
         <ERC20TokensListItem
           key={ item.token.address + (isPlaceholderData ? index : '') }

ui/address/tokens/ERC721Tokens.tsx

 import { Show, Hide } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { AddressTokensResponse } from 'types/api/address';
-
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 import ERC721TokensListItem from './ERC721TokensListItem';
 import ERC721TokensTable from './ERC721TokensTable';
 
 type Props = {
-  tokensQuery: UseQueryResult<AddressTokensResponse> & {
-    pagination: PaginationProps;
-    isPaginationVisible: boolean;
-  };
+  tokensQuery: QueryWithPagesResult<'address_tokens'>;
 }
 
 const ERC721Tokens = ({ tokensQuery }: Props) => {
   const isMobile = useIsMobile();
 
-  const { isError, isPlaceholderData, data, pagination, isPaginationVisible } = tokensQuery;
+  const { isError, isPlaceholderData, data, pagination } = tokensQuery;
 
-  const actionBar = isMobile && isPaginationVisible && (
+  const actionBar = isMobile && pagination.isVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
@@ -33,7 +27,7 @@ const ERC721Tokens = ({ tokensQuery }: Props) => {
 
   const content = data?.items ? (
     <>
-      <Hide below="lg" ssr={ false }><ERC721TokensTable data={ data.items } isLoading={ isPlaceholderData } top={ isPaginationVisible ? 72 : 0 }/></Hide>
+      <Hide below="lg" ssr={ false }><ERC721TokensTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 72 : 0 }/></Hide>
       <Show below="lg" ssr={ false }>{ data.items.map((item, index) => (
         <ERC721TokensListItem
           key={ item.token.address + (isPlaceholderData ? index : '') }

ui/block/BlockWithdrawals.tsx

 import { Show, Hide } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { BlockWithdrawalsResponse } from 'types/api/block';
-
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
 import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
 
-type QueryResult = UseQueryResult<BlockWithdrawalsResponse> & {
-  pagination: PaginationProps;
-  isPaginationVisible: boolean;
-};
-
 type Props = {
-  blockWithdrawalsQuery: QueryResult;
+  blockWithdrawalsQuery: QueryWithPagesResult<'block_withdrawals'>;
 }
 
 const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
@@ -35,7 +27,7 @@ const BlockWithdrawals = ({ blockWithdrawalsQuery }: Props) => {
         <WithdrawalsTable
           items={ blockWithdrawalsQuery.data.items }
           isLoading={ blockWithdrawalsQuery.isPlaceholderData }
-          top={ blockWithdrawalsQuery.isPaginationVisible ? 80 : 0 }
+          top={ blockWithdrawalsQuery.pagination.isVisible ? 80 : 0 }
           view="block"
         />
       </Hide>

ui/blocks/BlocksContent.tsx

 import { Alert, Box } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -14,17 +13,12 @@ import BlocksList from 'ui/blocks/BlocksList';
 import BlocksTable from 'ui/blocks/BlocksTable';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-
-type QueryResult = UseQueryResult<BlocksResponse> & {
-  pagination: PaginationProps;
-  isPaginationVisible: boolean;
-};
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 interface Props {
   type?: BlockType;
-  query: QueryResult;
+  query: QueryWithPagesResult<'blocks'>;
 }
 
 const BlocksContent = ({ type, query }: Props) => {
@@ -81,12 +75,17 @@ const BlocksContent = ({ type, query }: Props) => {
         <BlocksList data={ query.data.items } isLoading={ query.isPlaceholderData } page={ query.pagination.page }/>
       </Box>
       <Box display={{ base: 'none', lg: 'block' }}>
-        <BlocksTable data={ query.data.items } top={ query.isPaginationVisible ? 80 : 0 } page={ query.pagination.page } isLoading={ query.isPlaceholderData }/>
+        <BlocksTable
+          data={ query.data.items }
+          top={ query.pagination.isVisible ? 80 : 0 }
+          page={ query.pagination.page }
+          isLoading={ query.isPlaceholderData }
+        />
       </Box>
     </>
   ) : null;
 
-  const actionBar = isMobile && query.isPaginationVisible ? (
+  const actionBar = isMobile && query.pagination.isVisible ? (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...query.pagination }/>
     </ActionBar>

ui/blocks/BlocksTabSlot.tsx

 import { Flex, Box, Text, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
+import type { PaginationParams } from 'ui/shared/pagination/types';
+
 import useApiQuery from 'lib/api/useApiQuery';
 import { nbsp } from 'lib/html-entities';
 import { HOMEPAGE_STATS } from 'stubs/stats';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
 
 interface Props {
-  pagination: PaginationProps;
-  isPaginationVisible: boolean;
+  pagination: PaginationParams;
 }
 
-const BlocksTabSlot = ({ pagination, isPaginationVisible }: Props) => {
+const BlocksTabSlot = ({ pagination }: Props) => {
   const statsQuery = useApiQuery('homepage_stats', {
     queryOptions: {
       placeholderData: HOMEPAGE_STATS,
@@ -31,7 +31,7 @@ const BlocksTabSlot = ({ pagination, isPaginationVisible }: Props) => {
           </Skeleton>
         </Box>
       ) }
-      { isPaginationVisible && <Pagination my={ 1 } { ...pagination }/> }
+      <Pagination my={ 1 } { ...pagination }/>
     </Flex>
   );
 };

ui/pages/Accounts.tsx

 import { Hide, Show } from '@chakra-ui/react';
 import React from 'react';
 
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { TOP_ADDRESS } from 'stubs/address';
 import { generateListStub } from 'stubs/utils';
 import AddressesListItem from 'ui/addresses/AddressesListItem';
@@ -9,12 +8,13 @@ import AddressesTable from 'ui/addresses/AddressesTable';
 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';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 const PAGE_SIZE = 50;
 
 const Accounts = () => {
-  const { isError, isPlaceholderData, data, isPaginationVisible, pagination } = useQueryWithPages({
+  const { isError, isPlaceholderData, data, pagination } = useQueryWithPages({
     resourceName: 'addresses',
     options: {
       placeholderData: generateListStub<'addresses'>(
@@ -32,7 +32,7 @@ const Accounts = () => {
     },
   });
 
-  const actionBar = isPaginationVisible && (
+  const actionBar = pagination.isVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>
@@ -43,7 +43,7 @@ const Accounts = () => {
     <>
       <Hide below="lg" ssr={ false }>
         <AddressesTable
-          top={ isPaginationVisible ? 80 : 0 }
+          top={ pagination.isVisible ? 80 : 0 }
           items={ data.items }
           totalSupply={ data.total_supply }
           pageStartIndex={ pageStartIndex }

ui/pages/Block.tsx

 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { PaginationParams } from 'ui/shared/pagination/types';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import appConfig from 'configs/app/config';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { BLOCK } from 'stubs/block';
 import { TX } from 'stubs/tx';
@@ -18,8 +18,8 @@ import BlockWithdrawals from 'ui/block/BlockWithdrawals';
 import TextAd from 'ui/shared/ad/TextAd';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import Pagination from 'ui/shared/Pagination';
+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 TxsContent from 'ui/txs/TxsContent';
@@ -87,8 +87,8 @@ const BlockPageContent = () => {
   ].filter(Boolean)), [ blockQuery, blockTxsQuery, blockWithdrawalsQuery ]);
 
   const hasPagination = !isMobile && (
-    (tab === 'txs' && blockTxsQuery.isPaginationVisible) ||
-    (tab === 'withdrawals' && blockWithdrawalsQuery.isPaginationVisible)
+    (tab === 'txs' && blockTxsQuery.pagination.isVisible) ||
+    (tab === 'withdrawals' && blockWithdrawalsQuery.pagination.isVisible)
   );
 
   let pagination;
@@ -124,7 +124,7 @@ const BlockPageContent = () => {
         <RoutedTabs
           tabs={ tabs }
           tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-          rightSlot={ hasPagination ? <Pagination { ...(pagination as PaginationProps) }/> : null }
+          rightSlot={ hasPagination ? <Pagination { ...(pagination as PaginationParams) }/> : null }
           stickyEnabled={ hasPagination }
         />
       ) }

ui/pages/Blocks.tsx

@@ -4,13 +4,13 @@ import React from 'react';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { BLOCK } from 'stubs/block';
 import { generateListStub } from 'stubs/utils';
 import BlocksContent from 'ui/blocks/BlocksContent';
 import BlocksTabSlot from 'ui/blocks/BlocksTabSlot';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import RoutedTabs from 'ui/shared/Tabs/RoutedTabs';
 
 const TAB_LIST_PROPS = {
@@ -58,23 +58,14 @@ const BlocksPageContent = () => {
     },
   });
 
-  const { pagination, isPaginationVisible } = (() => {
+  const pagination = (() => {
     if (tab === 'reorgs') {
-      return {
-        pagination: reorgsQuery.pagination,
-        isPaginationVisible: reorgsQuery.isPaginationVisible,
-      };
+      return reorgsQuery.pagination;
     }
     if (tab === 'uncles') {
-      return {
-        pagination: unclesQuery.pagination,
-        isPaginationVisible: unclesQuery.isPaginationVisible,
-      };
+      return unclesQuery.pagination;
     }
-    return {
-      pagination: blocksQuery.pagination,
-      isPaginationVisible: blocksQuery.isPaginationVisible,
-    };
+    return blocksQuery.pagination;
   })();
 
   const tabs: Array<RoutedTab> = [
@@ -89,7 +80,7 @@ const BlocksPageContent = () => {
       <RoutedTabs
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
-        rightSlot={ <BlocksTabSlot pagination={ pagination } isPaginationVisible={ isPaginationVisible }/> }
+        rightSlot={ <BlocksTabSlot pagination={ pagination }/> }
         stickyEnabled={ !isMobile }
       />
     </>

ui/pages/L2Deposits.tsx

@@ -2,7 +2,6 @@ import { Box, Hide, Show, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { L2_DEPOSIT_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
@@ -11,10 +10,11 @@ import DepositsTable from 'ui/l2Deposits/DepositsTable';
 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';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 const L2Deposits = () => {
-  const { data, isError, isPlaceholderData, isPaginationVisible, pagination } = useQueryWithPages({
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
     resourceName: 'l2_deposits',
     options: {
       placeholderData: generateListStub<'l2_deposits'>(
@@ -49,7 +49,7 @@ const L2Deposits = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <DepositsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <DepositsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
@@ -78,7 +78,7 @@ const L2Deposits = () => {
         <Box display={{ base: 'none', lg: 'block' }}>
           { text }
         </Box>
-        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
+        { pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
     </>
   );

ui/pages/L2OutputRoots.tsx

@@ -2,7 +2,6 @@ import { Box, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { L2_OUTPUT_ROOTS_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
 import OutputRootsListItem from 'ui/l2OutputRoots/OutputRootsListItem';
@@ -10,10 +9,11 @@ import OutputRootsTable from 'ui/l2OutputRoots/OutputRootsTable';
 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';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 const L2OutputRoots = () => {
-  const { data, isError, isPlaceholderData, isPaginationVisible, pagination } = useQueryWithPages({
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
     resourceName: 'l2_output_roots',
     options: {
       placeholderData: generateListStub<'l2_output_roots'>(
@@ -47,7 +47,7 @@ const L2OutputRoots = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <OutputRootsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <OutputRootsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
@@ -76,7 +76,7 @@ const L2OutputRoots = () => {
         <Box display={{ base: 'none', lg: 'block' }}>
           { text }
         </Box>
-        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
+        { pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
     </>
   );

ui/pages/L2TxnBatches.tsx

@@ -2,7 +2,6 @@ import { Box, Hide, Show, Skeleton, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { nbsp } from 'lib/html-entities';
 import { L2_TXN_BATCHES_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
@@ -11,10 +10,11 @@ import TxnBatchesTable from 'ui/l2TxnBatches/TxnBatchesTable';
 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';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 const L2TxnBatches = () => {
-  const { data, isError, isPlaceholderData, isPaginationVisible, pagination } = useQueryWithPages({
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
     resourceName: 'l2_txn_batches',
     options: {
       placeholderData: generateListStub<'l2_txn_batches'>(
@@ -47,7 +47,7 @@ const L2TxnBatches = () => {
           />
         ))) }
       </Show>
-      <Hide below="lg" ssr={ false }><TxnBatchesTable items={ data.items } top={ isPaginationVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
+      <Hide below="lg" ssr={ false }><TxnBatchesTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/></Hide>
     </>
   ) : null;
 
@@ -75,7 +75,7 @@ const L2TxnBatches = () => {
         <Box display={{ base: 'none', lg: 'block' }}>
           { text }
         </Box>
-        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
+        { pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
     </>
   );

ui/pages/L2Withdrawals.tsx

@@ -2,7 +2,6 @@ import { Box, Hide, Show, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { rightLineArrow, nbsp } from 'lib/html-entities';
 import { L2_WITHDRAWAL_ITEM } from 'stubs/L2';
 import { generateListStub } from 'stubs/utils';
@@ -11,10 +10,11 @@ import WithdrawalsTable from 'ui/l2Withdrawals/WithdrawalsTable';
 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';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 const L2Withdrawals = () => {
-  const { data, isError, isPlaceholderData, isPaginationVisible, pagination } = useQueryWithPages({
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
     resourceName: 'l2_withdrawals',
     options: {
       placeholderData: generateListStub<'l2_withdrawals'>(
@@ -46,7 +46,7 @@ const L2Withdrawals = () => {
         />
       ))) }</Show>
       <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } top={ isPaginationVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <WithdrawalsTable items={ data.items } top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
@@ -75,7 +75,7 @@ const L2Withdrawals = () => {
         <Box display={{ base: 'none', lg: 'block' }}>
           { text }
         </Box>
-        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
+        { pagination.isVisible && <Pagination ml="auto" { ...pagination }/> }
       </ActionBar>
     </>
   );

ui/pages/SearchResults.tsx

@@ -10,7 +10,7 @@ import ContentLoader from 'ui/shared/ContentLoader';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Page from 'ui/shared/Page/Page';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
 import Thead from 'ui/shared/TheadSticky';
 import Header from 'ui/snippets/header/Header';
 import SearchBarInput from 'ui/snippets/searchBar/SearchBarInput';
@@ -19,7 +19,7 @@ import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
 const SearchResultsPageContent = () => {
   const router = useRouter();
   const { query, redirectCheckQuery, searchTerm, debouncedSearchTerm, handleSearchTermChange } = useSearchQuery(true);
-  const { data, isError, isPlaceholderData, pagination, isPaginationVisible } = query;
+  const { data, isError, isPlaceholderData, pagination } = query;
   const [ showContent, setShowContent ] = React.useState(false);
 
   React.useEffect(() => {
@@ -70,7 +70,7 @@ const SearchResultsPageContent = () => {
         </Show>
         <Hide below="lg" ssr={ false }>
           <Table variant="simple" size="md" fontWeight={ 500 }>
-            <Thead top={ isPaginationVisible ? 80 : 0 }>
+            <Thead top={ pagination.isVisible ? 80 : 0 }>
               <Tr>
                 <Th width="50%">Search Result</Th>
                 <Th width="50%"/>
@@ -99,10 +99,10 @@ const SearchResultsPageContent = () => {
     }
 
     const text = isPlaceholderData && pagination.page === 1 ? (
-      <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ isPaginationVisible ? 0 : 6 }/>
+      <Skeleton h={ 6 } w="280px" borderRadius="full" mb={ pagination.isVisible ? 0 : 6 }/>
     ) : (
       (
-        <Box mb={ isPaginationVisible ? 0 : 6 } lineHeight="32px">
+        <Box mb={ pagination.isVisible ? 0 : 6 } lineHeight="32px">
           <span>Found </span>
           <chakra.span fontWeight={ 700 }>
             { pagination.page > 1 ? 50 : data?.items.length }{ data?.next_page_params || pagination.page > 1 ? '+' : '' }
@@ -113,7 +113,7 @@ const SearchResultsPageContent = () => {
       )
     );
 
-    if (!isPaginationVisible) {
+    if (!pagination.isVisible) {
       return text;
     }
 

ui/pages/Token.tsx

@@ -5,6 +5,7 @@ import React, { useEffect } from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { TokenInfo } from 'types/api/token';
+import type { PaginationParams } from 'ui/shared/pagination/types';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import appConfig from 'configs/app/config';
@@ -13,7 +14,6 @@ import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import useContractTabs from 'lib/hooks/useContractTabs';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
@@ -26,8 +26,8 @@ import TextAd from 'ui/shared/ad/TextAd';
 import EntityTags from 'ui/shared/EntityTags';
 import NetworkExplorers from 'ui/shared/NetworkExplorers';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import Pagination from 'ui/shared/Pagination';
+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 TokenLogo from 'ui/shared/TokenLogo';
@@ -183,21 +183,17 @@ const TokenPageContent = () => {
     } : undefined,
   ].filter(Boolean);
 
-  let hasPagination;
-  let pagination: PaginationProps | undefined;
+  let pagination: PaginationParams | undefined;
 
   if (!router.query.tab || router.query.tab === 'token_transfers') {
-    hasPagination = transfersQuery.isPaginationVisible;
     pagination = transfersQuery.pagination;
   }
 
   if (router.query.tab === 'holders') {
-    hasPagination = holdersQuery.isPaginationVisible;
     pagination = holdersQuery.pagination;
   }
 
   if (router.query.tab === 'inventory') {
-    hasPagination = inventoryQuery.isPaginationVisible;
     pagination = inventoryQuery.pagination;
   }
 
@@ -280,7 +276,7 @@ const TokenPageContent = () => {
           <RoutedTabs
             tabs={ tabs }
             tabListProps={ tabListProps }
-            rightSlot={ !isMobile && hasPagination && pagination ? <Pagination { ...pagination }/> : null }
+            rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
             stickyEnabled={ !isMobile }
           />
         ) }

ui/pages/TokenInstance.tsx

@@ -2,13 +2,13 @@ import { Box, Icon, Skeleton } from '@chakra-ui/react';
 import { useRouter } from 'next/router';
 import React from 'react';
 
+import type { PaginationParams } from 'ui/shared/pagination/types';
 import type { RoutedTab } from 'ui/shared/Tabs/types';
 
 import nftIcon from 'icons/nft_shield.svg';
 import useApiQuery from 'lib/api/useApiQuery';
 import { useAppContext } from 'lib/contexts/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { TOKEN_INSTANCE } from 'stubs/token';
 import * as tokenStubs from 'stubs/token';
 import { generateListStub } from 'stubs/utils';
@@ -17,8 +17,8 @@ import AddressHeadingInfo from 'ui/shared/AddressHeadingInfo';
 import Tag from 'ui/shared/chakra/Tag';
 import LinkExternal from 'ui/shared/LinkExternal';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+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 TokenHolders from 'ui/token/TokenHolders/TokenHolders';
@@ -144,15 +144,12 @@ const TokenInstanceContent = () => {
     }
   })();
 
-  let pagination: PaginationProps | undefined;
-  let isPaginationVisible;
+  let pagination: PaginationParams | undefined;
 
   if (tab === 'token_transfers') {
     pagination = transfersQuery.pagination;
-    isPaginationVisible = transfersQuery.isPaginationVisible;
   } else if (tab === 'holders') {
     pagination = holdersQuery.pagination;
-    isPaginationVisible = holdersQuery.isPaginationVisible;
   }
 
   return (
@@ -179,7 +176,7 @@ const TokenInstanceContent = () => {
         <RoutedTabs
           tabs={ tabs }
           tabListProps={ isMobile ? { mt: 8 } : { mt: 3, py: 5, marginBottom: 0 } }
-          rightSlot={ !isMobile && isPaginationVisible && pagination ? <Pagination { ...pagination }/> : null }
+          rightSlot={ !isMobile && pagination?.isVisible ? <Pagination { ...pagination }/> : null }
           stickyEnabled={ !isMobile }
         />
       ) }

ui/pages/Transactions.tsx

@@ -7,13 +7,13 @@ import appConfig from 'configs/app/config';
 import useHasAccount from 'lib/hooks/useHasAccount';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useNewTxsSocket from 'lib/hooks/useNewTxsSocket';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { TX } from 'stubs/tx';
 import { generateListStub } from 'stubs/utils';
 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 TxsContent from 'ui/txs/TxsContent';
-import TxsTabSlot from 'ui/txs/TxsTabSlot';
 import TxsWatchlist from 'ui/txs/TxsWatchlist';
 
 const TAB_LIST_PROPS = {
@@ -81,6 +81,8 @@ const Transactions = () => {
     } : undefined,
   ].filter(Boolean);
 
+  const pagination = router.query.tab === 'watchlist' ? txsWatchlistQuery.pagination : txsQuery.pagination;
+
   return (
     <>
       <PageTitle title="Transactions" withTextAd/>
@@ -88,10 +90,7 @@ const Transactions = () => {
         tabs={ tabs }
         tabListProps={ isMobile ? undefined : TAB_LIST_PROPS }
         rightSlot={ (
-          <TxsTabSlot
-            pagination={ router.query.tab === 'watchlist' ? txsWatchlistQuery.pagination : txsQuery.pagination }
-            isPaginationVisible={ txsQuery.isPaginationVisible && !isMobile }
-          />
+          pagination.isVisible && !isMobile ? <Pagination my={ 1 } { ...pagination }/> : null
         ) }
         stickyEnabled={ !isMobile }
       />

ui/pages/VerifiedContracts.tsx

@@ -6,7 +6,6 @@ import type { VerifiedContractsFilters } from 'types/api/contracts';
 
 import useDebounce from 'lib/hooks/useDebounce';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { VERIFIED_CONTRACT_INFO } from 'stubs/contract';
@@ -15,7 +14,8 @@ import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import Sort from 'ui/shared/sort/Sort';
 import type { SortField, Sort as TSort } from 'ui/verifiedContracts/utils';
 import { SORT_OPTIONS, sortFn, getNextSortValue } from 'ui/verifiedContracts/utils';
@@ -34,7 +34,7 @@ const VerifiedContracts = () => {
 
   const isMobile = useIsMobile();
 
-  const { isError, isPlaceholderData, data, isPaginationVisible, pagination, onFilterChange } = useQueryWithPages({
+  const { isError, isPlaceholderData, data, pagination, onFilterChange } = useQueryWithPages({
     resourceName: 'verified_contracts',
     filters: { q: debouncedSearchTerm, filter: type },
     options: {
@@ -104,13 +104,13 @@ const VerifiedContracts = () => {
         { sortButton }
         { filterInput }
       </HStack>
-      { (!isMobile || isPaginationVisible) && (
+      { (!isMobile || pagination.isVisible) && (
         <ActionBar mt={ -6 }>
           <HStack spacing={ 3 } display={{ base: 'none', lg: 'flex' }}>
             { typeFilter }
             { filterInput }
           </HStack>
-          { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
+          <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
       ) }
     </>

ui/pages/Withdrawals.tsx

@@ -5,20 +5,20 @@ import React from 'react';
 import useApiQuery from 'lib/api/useApiQuery';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import useIsMobile from 'lib/hooks/useIsMobile';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { generateListStub } from 'stubs/utils';
 import { WITHDRAWAL } from 'stubs/withdrawals';
 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';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import WithdrawalsListItem from 'ui/withdrawals/WithdrawalsListItem';
 import WithdrawalsTable from 'ui/withdrawals/WithdrawalsTable';
 
 const Withdrawals = () => {
   const isMobile = useIsMobile();
 
-  const { data, isError, isPlaceholderData, isPaginationVisible, pagination } = useQueryWithPages({
+  const { data, isError, isPlaceholderData, pagination } = useQueryWithPages({
     resourceName: 'withdrawals',
     options: {
       placeholderData: generateListStub<'withdrawals'>(WITHDRAWAL, 50, { next_page_params: {
@@ -43,7 +43,7 @@ const Withdrawals = () => {
         ))) }
       </Show>
       <Hide below="lg" ssr={ false }>
-        <WithdrawalsTable items={ data.items } view="list" top={ isPaginationVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
+        <WithdrawalsTable items={ data.items } view="list" top={ pagination.isVisible ? 80 : 0 } isLoading={ isPlaceholderData }/>
       </Hide>
     </>
   ) : null;
@@ -54,8 +54,8 @@ const Withdrawals = () => {
         <Skeleton
           w={{ base: '100%', lg: '320px' }}
           h="24px"
-          mb={{ base: 6, lg: isPaginationVisible ? 0 : 7 }}
-          mt={{ base: 0, lg: isPaginationVisible ? 0 : 7 }}
+          mb={{ base: 6, lg: pagination.isVisible ? 0 : 7 }}
+          mt={{ base: 0, lg: pagination.isVisible ? 0 : 7 }}
         />
       );
     }
@@ -66,7 +66,7 @@ const Withdrawals = () => {
 
     const { valueStr } = getCurrencyValue({ value: countersQuery.data.withdrawal_sum });
     return (
-      <Text mb={{ base: 6, lg: isPaginationVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
+      <Text mb={{ base: 6, lg: pagination.isVisible ? 0 : 6 }} lineHeight={{ base: '24px', lg: '32px' }}>
         { BigNumber(countersQuery.data.withdrawal_count).toFormat() } withdrawals processed and { valueStr } ETH withdrawn
       </Text>
     );
@@ -74,8 +74,8 @@ const Withdrawals = () => {
 
   const actionBar = (
     <>
-      { (isMobile || !isPaginationVisible) && text }
-      { isPaginationVisible && (
+      { (isMobile || !pagination.isVisible) && text }
+      { pagination.isVisible && (
         <ActionBar mt={ -6 }>
           <Flex alignItems="center" justifyContent="space-between" w="100%">
             { !isMobile && text }

ui/shared/Pagination.tsx → ui/shared/pagination/Pagination.tsx

 import { Button, Skeleton, Flex, Icon, IconButton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { PaginationParams } from './types';
+
 import arrowIcon from 'icons/arrows/east-mini.svg';
 
-export type Props = {
-  page: number;
-  onNextPageClick: () => void;
-  onPrevPageClick: () => void;
-  resetPage: () => void;
-  hasNextPage: boolean;
+interface Props extends PaginationParams {
   className?: string;
-  canGoBackwards: boolean;
-  isLoading?: boolean;
 }
 
-const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, className, canGoBackwards, isLoading }: Props) => {
+const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, className, canGoBackwards, isLoading, isVisible }: Props) => {
+
+  if (!isVisible) {
+    return null;
+  }
 
   return (
     <Flex

ui/shared/pagination/types.ts

+export interface PaginationParams {
+  page: number;
+  onNextPageClick: () => void;
+  onPrevPageClick: () => void;
+  resetPage: () => void;
+  hasNextPage: boolean;
+  canGoBackwards: boolean;
+  isLoading: boolean;
+  isVisible: boolean;
+}

lib/hooks/useQueryWithPages.test.tsx → ui/shared/pagination/useQueryWithPages.test.tsx

@@ -29,6 +29,7 @@ it('returns correct data if there is only one page', async() => {
     canGoBackwards: true,
     hasNextPage: false,
     isLoading: false,
+    isVisible: true,
   });
 });
 

lib/hooks/useQueryWithPages.ts → ui/shared/pagination/useQueryWithPages.ts

+import type { UseQueryResult } from '@tanstack/react-query';
 import { useQueryClient } from '@tanstack/react-query';
 import omit from 'lodash/omit';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
 import { animateScroll } from 'react-scroll';
 
-import type { PaginatedResources, PaginationFilters } from 'lib/api/resources';
+import type { PaginationParams } from './types';
+
+import type { PaginatedResources, PaginationFilters, ResourceError, ResourcePayload } from 'lib/api/resources';
 import { RESOURCES } from 'lib/api/resources';
 import type { Params as UseApiQueryParams } from 'lib/api/useApiQuery';
 import useApiQuery from 'lib/api/useApiQuery';
@@ -30,13 +33,20 @@ function getPaginationParamsFromQuery(queryString: string | Array<string> | unde
   return {};
 }
 
+export type QueryWithPagesResult<Resource extends PaginatedResources> =
+UseQueryResult<ResourcePayload<Resource>, ResourceError<unknown>> &
+{
+  onFilterChange: (filters: PaginationFilters<Resource>) => void;
+  pagination: PaginationParams;
+}
+
 export default function useQueryWithPages<Resource extends PaginatedResources>({
   resourceName,
   filters,
   options,
   pathParams,
   scrollRef,
-}: Params<Resource>) {
+}: Params<Resource>): QueryWithPagesResult<Resource> {
   const resource = RESOURCES[resourceName];
   const queryClient = useQueryClient();
   const router = useRouter();
@@ -154,19 +164,19 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
   }, [ router, resource.filterFields, scrollToTop ]);
 
   const nextPageParams = data?.next_page_params;
+  const hasNextPage = nextPageParams ? Object.keys(nextPageParams).length > 0 : false;
 
   const pagination = {
     page,
     onNextPageClick,
     onPrevPageClick,
     resetPage,
-    hasNextPage: nextPageParams ? Object.keys(nextPageParams).length > 0 : false,
+    hasNextPage,
     canGoBackwards: canGoBackwards.current,
     isLoading: queryResult.isPlaceholderData && !hasPagination,
+    isVisible: hasPagination || (!queryResult.isLoading && !queryResult.isError && hasNextPage),
   };
 
-  const isPaginationVisible = hasPagination || (!queryResult.isLoading && !queryResult.isError && pagination.hasNextPage);
-
   React.useEffect(() => {
     if (page !== 1 && isMounted.current) {
       queryClient.cancelQueries({ queryKey: [ resourceName ] });
@@ -182,5 +192,5 @@ export default function useQueryWithPages<Resource extends PaginatedResources>({
     }, 0);
   }, []);
 
-  return { ...queryResult, pagination, onFilterChange, isPaginationVisible };
+  return { ...queryResult, pagination, onFilterChange };
 }

ui/snippets/searchBar/SearchBarSuggest.tsx

@@ -3,12 +3,12 @@ import type { UseQueryResult } from '@tanstack/react-query';
 import _uniqBy from 'lodash/uniqBy';
 import React from 'react';
 
-import type { SearchRedirectResult, SearchResult, SearchResultItem } from 'types/api/search';
+import type { SearchRedirectResult, SearchResultItem } from 'types/api/search';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 import SearchBarSuggestItem from './SearchBarSuggestItem';
 
@@ -31,9 +31,7 @@ const getUniqueIdentifier = (item: SearchResultItem) => {
 };
 
 interface Props {
-  query: UseQueryResult<SearchResult> & {
-    pagination: PaginationProps;
-  };
+  query: QueryWithPagesResult<'search'>;
   redirectCheckQuery: UseQueryResult<SearchRedirectResult>;
   searchTerm: string;
   onItemClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;

ui/snippets/searchBar/useSearchQuery.tsx

@@ -3,11 +3,11 @@ import React from 'react';
 
 import useApiQuery from 'lib/api/useApiQuery';
 import useDebounce from 'lib/hooks/useDebounce';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import useUpdateValueEffect from 'lib/hooks/useUpdateValueEffect';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { SEARCH_RESULT_ITEM, SEARCH_RESULT_NEXT_PAGE_PARAMS } from 'stubs/search';
 import { generateListStub } from 'stubs/utils';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 export default function useSearchQuery(isSearchPage = false) {
   const router = useRouter();

ui/token/TokenHolders/TokenHolders.tsx

 import { Box } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { TokenHolders, TokenInfo } from 'types/api/token';
+import type { TokenInfo } from 'types/api/token';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 import TokenHoldersList from './TokenHoldersList';
 import TokenHoldersTable from './TokenHoldersTable';
 
 type Props = {
   token?: TokenInfo;
-  holdersQuery: UseQueryResult<TokenHolders> & {
-    pagination: PaginationProps;
-    isPaginationVisible: boolean;
-  };
+  holdersQuery: QueryWithPagesResult<'token_holders'>;
 }
 
 const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
@@ -29,7 +25,7 @@ const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
     return <DataFetchAlert/>;
   }
 
-  const actionBar = isMobile && holdersQuery.isPaginationVisible && (
+  const actionBar = isMobile && holdersQuery.pagination.isVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...holdersQuery.pagination }/>
     </ActionBar>
@@ -43,7 +39,7 @@ const TokenHoldersContent = ({ holdersQuery, token }: Props) => {
         <TokenHoldersTable
           data={ items }
           token={ token }
-          top={ holdersQuery.isPaginationVisible ? 80 : 0 }
+          top={ holdersQuery.pagination.isVisible ? 80 : 0 }
           isLoading={ holdersQuery.isPlaceholderData }
         />
       </Box>

ui/token/TokenInventory.pw.tsx

@@ -19,7 +19,6 @@ test('base view +@mobile', async({ mount }) => {
             items: [ tokenInstanse, tokenInstanse, tokenInstanse ],
             next_page_params: { unique_token: 1 },
           },
-          isPaginationVisible: true,
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
           pagination: { page: 1 },

ui/token/TokenInventory.tsx

 import { Grid } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { TokenInventoryResponse } from 'types/api/token';
-
 import useIsMobile from 'lib/hooks/useIsMobile';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 
 import TokenInventoryItem from './TokenInventoryItem';
 
 type Props = {
-  inventoryQuery: UseQueryResult<TokenInventoryResponse> & {
-    pagination: PaginationProps;
-    isPaginationVisible: boolean;
-  };
+  inventoryQuery: QueryWithPagesResult<'token_inventory'>;
 }
 
 const TokenInventory = ({ inventoryQuery }: Props) => {
   const isMobile = useIsMobile();
 
-  const actionBar = isMobile && inventoryQuery.isPaginationVisible && (
+  const actionBar = isMobile && inventoryQuery.pagination.isVisible && (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...inventoryQuery.pagination }/>
     </ActionBar>

ui/token/TokenTransfer/TokenTransfer.pw.tsx

@@ -19,7 +19,6 @@ test('erc20 +@mobile', async({ mount }) => {
             items: [ tokenTransferMock.erc20 ],
             next_page_params: null,
           },
-          isPaginationVisible: true,
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
           pagination: { page: 1 },
@@ -43,7 +42,6 @@ test('erc721 +@mobile', async({ mount }) => {
             items: [ tokenTransferMock.erc721 ],
             next_page_params: null,
           },
-          isPaginationVisible: true,
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
           pagination: { page: 1 },
@@ -72,7 +70,6 @@ test('erc1155 +@mobile', async({ mount }) => {
             ],
             next_page_params: null,
           },
-          isPaginationVisible: true,
           // eslint-disable-next-line @typescript-eslint/ban-ts-comment
           // @ts-ignore:
           pagination: { page: 1 },

ui/token/TokenTransfer/TokenTransfer.tsx

 import { Box } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
 
 import type { SocketMessage } from 'lib/socket/types';
 import type { TokenInfo } from 'types/api/token';
-import type { TokenTransferResponse } from 'types/api/tokenTransfer';
 
 import useGradualIncrement from 'lib/hooks/useGradualIncrement';
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -13,17 +11,14 @@ import useSocketChannel from 'lib/socket/useSocketChannel';
 import useSocketMessage from 'lib/socket/useSocketMessage';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 import TokenTransferList from 'ui/token/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/token/TokenTransfer/TokenTransferTable';
 
 type Props = {
-  transfersQuery: UseQueryResult<TokenTransferResponse> & {
-    pagination: PaginationProps;
-    isPaginationVisible: boolean;
-  };
+  transfersQuery: QueryWithPagesResult<'token_transfers'> | QueryWithPagesResult<'token_instance_transfers'>;
   tokenId?: string;
   token?: TokenInfo;
 }
@@ -31,7 +26,7 @@ type Props = {
 const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
   const isMobile = useIsMobile();
   const router = useRouter();
-  const { isError, isPlaceholderData, data, pagination, isPaginationVisible } = transfersQuery;
+  const { isError, isPlaceholderData, data, pagination } = transfersQuery;
 
   const [ newItemsCount, setNewItemsCount ] = useGradualIncrement(0);
   const [ socketAlert, setSocketAlert ] = React.useState('');
@@ -66,7 +61,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
       <Box display={{ base: 'none', lg: 'block' }}>
         <TokenTransferTable
           data={ data?.items }
-          top={ isPaginationVisible ? 80 : 0 }
+          top={ pagination.isVisible ? 80 : 0 }
           showSocketInfo={ pagination.page === 1 }
           socketInfoAlert={ socketAlert }
           socketInfoNum={ newItemsCount }
@@ -90,7 +85,7 @@ const TokenTransfer = ({ transfersQuery, tokenId, token }: Props) => {
     </>
   ) : null;
 
-  const actionBar = isMobile && isPaginationVisible ? (
+  const actionBar = isMobile && pagination.isVisible ? (
     <ActionBar mt={ -6 }>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>

ui/tokens/Tokens.tsx

@@ -6,7 +6,6 @@ import type { TokenType } from 'types/api/token';
 
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
 import useDebounce from 'lib/hooks/useDebounce';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
 import TOKEN_TYPE from 'lib/token/tokenTypes';
 import { TOKEN_INFO_ERC_20 } from 'stubs/token';
@@ -17,7 +16,8 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import FilterInput from 'ui/shared/filters/FilterInput';
 import PopoverFilter from 'ui/shared/filters/PopoverFilter';
 import TokenTypeFilter from 'ui/shared/filters/TokenTypeFilter';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 
 import TokensListItem from './TokensListItem';
 import TokensTable from './TokensTable';
@@ -32,7 +32,7 @@ const Tokens = () => {
 
   const debouncedFilter = useDebounce(filter, 300);
 
-  const { isError, isPlaceholderData, data, isPaginationVisible, pagination, onFilterChange } = useQueryWithPages({
+  const { isError, isPlaceholderData, data, pagination, onFilterChange } = useQueryWithPages({
     resourceName: 'tokens',
     filters: { q: debouncedFilter, type },
     options: {
@@ -92,7 +92,7 @@ const Tokens = () => {
           { typeFilter }
           { filterInput }
         </HStack>
-        { isPaginationVisible && <Pagination ml="auto" { ...pagination }/> }
+        <Pagination ml="auto" { ...pagination }/>
       </ActionBar>
     </>
   );

ui/tx/TxInternals.tsx

@@ -4,7 +4,6 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import { SECOND } from 'lib/consts';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 // import { apos } from 'lib/html-entities';
 import { INTERNAL_TX } from 'stubs/internalTx';
 import { generateListStub } from 'stubs/utils';
@@ -12,7 +11,8 @@ import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 // import FilterInput from 'ui/shared/filters/FilterInput';
 // import TxInternalsFilter from 'ui/tx/internals/TxInternalsFilter';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxInternalsList from 'ui/tx/internals/TxInternalsList';
 import TxInternalsTable from 'ui/tx/internals/TxInternalsTable';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
@@ -72,7 +72,7 @@ const TxInternals = () => {
   // const [ searchTerm, setSearchTerm ] = React.useState<string>('');
   const [ sort, setSort ] = React.useState<Sort>();
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isPlaceholderData, isError, pagination, isPaginationVisible } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'tx_internal_txs',
     pathParams: { hash: txInfo.data?.hash },
     options: {
@@ -112,14 +112,14 @@ const TxInternals = () => {
           data={ filteredData }
           sort={ sort }
           onSortToggle={ handleSortToggle }
-          top={ isPaginationVisible ? 80 : 0 }
+          top={ pagination.isVisible ? 80 : 0 }
           isLoading={ isPlaceholderData }
         />
       </Hide>
     </>
   ) : null;
 
-  const actionBar = isPaginationVisible ? (
+  const actionBar = pagination.isVisible ? (
     <ActionBar mt={ -6 }>
       { /* <TxInternalsFilter onFilterChange={ handleFilterChange } defaultFilters={ filters } appliedFiltersNum={ filters.length }/> */ }
       { /* <FilterInput onChange={ setSearchTerm } maxW="360px" ml={ 3 } size="xs" placeholder="Search by addresses, hash, method..."/> */ }

ui/tx/TxLogs.tsx

@@ -2,20 +2,20 @@ import { Box, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import { SECOND } from 'lib/consts';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { LOG } from 'stubs/log';
 import { generateListStub } from 'stubs/utils';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import LogItem from 'ui/shared/logs/LogItem';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxPendingAlert from 'ui/tx/TxPendingAlert';
 import TxSocketAlert from 'ui/tx/TxSocketAlert';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
 
 const TxLogs = () => {
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isPlaceholderData, isError, pagination, isPaginationVisible } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'tx_logs',
     pathParams: { hash: txInfo.data?.hash },
     options: {
@@ -38,7 +38,7 @@ const TxLogs = () => {
 
   return (
     <Box>
-      { isPaginationVisible && (
+      { pagination.isVisible && (
         <ActionBar mt={ -6 }>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>

ui/tx/TxState.tsx

@@ -2,11 +2,11 @@ import { Accordion, Hide, Show, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import { SECOND } from 'lib/consts';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { TX_STATE_CHANGES } from 'stubs/txStateChanges';
 import ActionBar from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TxStateList from 'ui/tx/state/TxStateList';
 import TxStateTable from 'ui/tx/state/TxStateTable';
 import useFetchTxInfo from 'ui/tx/useFetchTxInfo';
@@ -16,7 +16,7 @@ import TxSocketAlert from './TxSocketAlert';
 
 const TxState = () => {
   const txInfo = useFetchTxInfo({ updateDelay: 5 * SECOND });
-  const { data, isPlaceholderData, isError, isPaginationVisible, pagination } = useQueryWithPages({
+  const { data, isPlaceholderData, isError, pagination } = useQueryWithPages({
     resourceName: 'tx_state_changes',
     pathParams: { hash: txInfo.data?.hash },
     options: {
@@ -38,7 +38,7 @@ const TxState = () => {
   const content = data ? (
     <Accordion allowMultiple defaultIndex={ [] }>
       <Hide below="lg" ssr={ false }>
-        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ isPaginationVisible ? 80 : 0 }/>
+        <TxStateTable data={ data.items } isLoading={ isPlaceholderData } top={ pagination.isVisible ? 80 : 0 }/>
       </Hide>
       <Show below="lg" ssr={ false }>
         <TxStateList data={ data.items } isLoading={ isPlaceholderData }/>
@@ -46,7 +46,7 @@ const TxState = () => {
     </Accordion>
   ) : null;
 
-  const actionBar = isPaginationVisible ? (
+  const actionBar = pagination.isVisible ? (
     <ActionBar mt={ -6 } showShadow>
       <Pagination ml="auto" { ...pagination }/>
     </ActionBar>

ui/tx/TxTokenTransfer.tsx

@@ -6,14 +6,14 @@ import type { TokenType } from 'types/api/token';
 
 import { SECOND } from 'lib/consts';
 import getFilterValuesFromQuery from 'lib/getFilterValuesFromQuery';
-import useQueryWithPages from 'lib/hooks/useQueryWithPages';
 import { apos } from 'lib/html-entities';
 import TOKEN_TYPE from 'lib/token/tokenTypes';
 import { getTokenTransfersStub } from 'stubs/token';
 import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import Pagination from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
+import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import TokenTransferFilter from 'ui/shared/TokenTransfer/TokenTransferFilter';
 import TokenTransferList from 'ui/shared/TokenTransfer/TokenTransferList';
 import TokenTransferTable from 'ui/shared/TokenTransfer/TokenTransferTable';
@@ -77,7 +77,7 @@ const TxTokenTransfer = () => {
         appliedFiltersNum={ numActiveFilters }
         isLoading={ tokenTransferQuery.isPlaceholderData }
       />
-      { tokenTransferQuery.isPaginationVisible && <Pagination ml="auto" { ...tokenTransferQuery.pagination }/> }
+      <Pagination ml="auto" { ...tokenTransferQuery.pagination }/>
     </ActionBar>
   ) : null;
 

ui/txs/TxsContent.tsx

 import { Box, Show, Hide } from '@chakra-ui/react';
-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { TxsResponse } from 'types/api/transaction';
-
 import useIsMobile from 'lib/hooks/useIsMobile';
 import AddressCsvExportLink from 'ui/address/AddressCsvExportLink';
 import DataListDisplay from 'ui/shared/DataListDisplay';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
 
 import TxsHeaderMobile from './TxsHeaderMobile';
@@ -15,13 +12,8 @@ import TxsListItem from './TxsListItem';
 import TxsTable from './TxsTable';
 import useTxsSort from './useTxsSort';
 
-type QueryResult = UseQueryResult<TxsResponse> & {
-  pagination: PaginationProps;
-  isPaginationVisible: boolean;
-};
-
 type Props = {
-  query: QueryResult;
+  query: QueryWithPagesResult<'txs_validated' | 'txs_pending'> | QueryWithPagesResult<'txs_watchlist'> | QueryWithPagesResult<'block_txs'>;
   showBlockInfo?: boolean;
   showSocketInfo?: boolean;
   socketInfoAlert?: string;
@@ -79,7 +71,7 @@ const TxsContent = ({
           showSocketInfo={ showSocketInfo }
           socketInfoAlert={ socketInfoAlert }
           socketInfoNum={ socketInfoNum }
-          top={ top || query.isPaginationVisible ? 80 : 0 }
+          top={ top || query.pagination.isVisible ? 80 : 0 }
           currentAddress={ currentAddress }
           enableTimeIncrement={ enableTimeIncrement }
           isLoading={ isPlaceholderData }
@@ -94,7 +86,7 @@ const TxsContent = ({
       sorting={ sorting }
       setSorting={ setSortByValue }
       paginationProps={ query.pagination }
-      showPagination={ query.isPaginationVisible }
+      showPagination={ query.pagination.isVisible }
       filterComponent={ filter }
       linkSlot={ currentAddress ?
         <AddressCsvExportLink address={ currentAddress } type="transactions" ml={ 2 } isLoading={ query.pagination.isLoading }/> : null

ui/txs/TxsHeaderMobile.tsx

@@ -2,11 +2,12 @@ import { HStack, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Sort as TSort } from 'types/client/txs-sort';
+import type { PaginationParams } from 'ui/shared/pagination/types';
 
 // import FilterInput from 'ui/shared/filters/FilterInput';
+
 import ActionBar from 'ui/shared/ActionBar';
-import Pagination from 'ui/shared/Pagination';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import Pagination from 'ui/shared/pagination/Pagination';
 import type { Option } from 'ui/shared/sort/Sort';
 import Sort from 'ui/shared/sort/Sort';
 
@@ -23,7 +24,7 @@ const SORT_OPTIONS: Array<Option<TSort>> = [
 type Props = {
   sorting: TSort;
   setSorting: (val: TSort | undefined) => void;
-  paginationProps: PaginationProps;
+  paginationProps: PaginationParams;
   className?: string;
   showPagination?: boolean;
   filterComponent?: React.ReactNode;

ui/txs/TxsTabSlot.tsx

-import React from 'react';
-
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
-import Pagination from 'ui/shared/Pagination';
-
-interface Props {
-  pagination: PaginationProps;
-  isPaginationVisible: boolean;
-}
-
-const TxsTabSlot = ({ pagination, isPaginationVisible }: Props) => {
-  if (!isPaginationVisible) {
-    return null;
-  }
-
-  return <Pagination my={ 1 } { ...pagination }/>;
-};
-
-export default TxsTabSlot;

ui/txs/TxsWatchlist.tsx

-import type { UseQueryResult } from '@tanstack/react-query';
 import React from 'react';
 
-import type { TxsResponse } from 'types/api/transaction';
-
 import useRedirectForInvalidAuthToken from 'lib/hooks/useRedirectForInvalidAuthToken';
-import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
 import TxsContent from 'ui/txs/TxsContent';
 
-type QueryResult = UseQueryResult<TxsResponse> & {
-  pagination: PaginationProps;
-  isPaginationVisible: boolean;
-};
-
 type Props = {
-  query: QueryResult;
+  query: QueryWithPagesResult<'txs_watchlist'>;
 }
 
 const TxsWatchlist = ({ query }: Props) => {