txs pagination

lib/hooks/useIsMobile.tsx

 import { useBreakpointValue } from '@chakra-ui/react';
 
-export default function useIsMobile() {
-  return useBreakpointValue({ base: true, lg: false });
+export default function useIsMobile(ssr = true) {
+  return useBreakpointValue({ base: true, lg: false }, { ssr });
 }

ui/block/BlockTxs.tsx

@@ -3,7 +3,18 @@ import React from 'react';
 import TxsContent from 'ui/txs/TxsContent';
 
 const BlockTxs = () => {
-  return <TxsContent showDescription={ false } showSortButton={ false } txs={ [] }/>;
+  return (
+    <TxsContent
+      showDescription={ false }
+      showSortButton={ false }
+      txs={ [] }
+      page={ 1 }
+      // eslint-disable-next-line react/jsx-no-bind
+      onNextPageClick={ () => {} }
+      // eslint-disable-next-line react/jsx-no-bind
+      onPrevPageClick={ () => {} }
+    />
+  );
 };
 
 export default BlockTxs;

ui/blocks/BlocksContent.tsx

@@ -53,7 +53,8 @@ const BlocksContent = ({ type }: Props) => {
       <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
       <Show above="lg" key="content-desktop"><BlocksTable data={ data.items }/></Show>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
-        <Pagination currentPage={ 1 }/>
+        { /* eslint-disable-next-line react/jsx-no-bind */ }
+        <Pagination currentPage={ 1 } onNextPageClick={ () => {} } onPrevPageClick={ () => {} }/>
       </Box>
     </>
   );

ui/shared/Pagination.tsx

@@ -6,11 +6,13 @@ import arrowIcon from 'icons/arrows/east-mini.svg';
 type Props = {
   currentPage: number;
   maxPage?: number;
+  onNextPageClick: () => void;
+  onPrevPageClick: () => void;
 }
 
 const MAX_PAGE_DEFAULT = 50;
 
-const Pagination = ({ currentPage, maxPage }: Props) => {
+const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick }: Props) => {
   const pageNumber = (
     <Flex alignItems="center">
       <Button
@@ -50,6 +52,7 @@ const Pagination = ({ currentPage, maxPage }: Props) => {
       <Flex alignItems="center" justifyContent="space-between" w={{ base: '100%', lg: 'auto' }}>
         <IconButton
           variant="outline"
+          onClick={ onPrevPageClick }
           size="sm"
           aria-label="Next page"
           w="36px"
@@ -59,6 +62,7 @@ const Pagination = ({ currentPage, maxPage }: Props) => {
         { pageNumber }
         <IconButton
           variant="outline"
+          onClick={ onNextPageClick }
           size="sm"
           aria-label="Next page"
           w="36px"

ui/shared/RoutedTabs/RoutedTabsMenu.tsx

@@ -14,7 +14,7 @@ import { menuButton } from './utils';
 
 interface Props {
   tabs: Array<RoutedTab | MenuButton>;
-  activeTab: RoutedTab;
+  activeTab?: RoutedTab;
   tabsCut: number;
   isActive: boolean;
   styles?: StyleProps;
@@ -52,7 +52,7 @@ const RoutedTabsMenu = ({ tabs, tabsCut, isActive, styles, onItemClick, buttonRe
               key={ tab.id }
               variant="ghost"
               onClick={ handleItemClick }
-              isActive={ activeTab.id === tab.id }
+              isActive={ activeTab ? activeTab.id === tab.id : false }
               justifyContent="left"
               data-index={ index }
             >

ui/txs/TxsContent.tsx

@@ -17,9 +17,12 @@ type Props = {
   txs: TransactionsResponse['items'];
   showDescription?: boolean;
   showSortButton?: boolean;
+  onNextPageClick: () => void;
+  onPrevPageClick: () => void;
+  page: number;
 }
 
-const TxsContent = ({ showSortButton = true, showDescription = true, txs }: Props) => {
+const TxsContent = ({ showSortButton = true, showDescription = true, txs, page, onNextPageClick, onPrevPageClick }: Props) => {
   const [ sorting, setSorting ] = useState<Sort>();
   const [ sortedTxs, setSortedTxs ] = useState(txs);
 
@@ -95,10 +98,10 @@ const TxsContent = ({ showSortButton = true, showDescription = true, txs }: Prop
           placeholder="Search by addresses, hash, method..."
         />
       </HStack>
-      <Show below="lg"><Box>{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
-      <Show above="lg"><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Show>
+      <Show below="lg" ssr={ false }><Box>{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
+      <Show above="lg" ssr={ false }><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Show>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
-        <Pagination currentPage={ 1 }/>
+        <Pagination currentPage={ page } onNextPageClick={ onNextPageClick } onPrevPageClick={ onPrevPageClick }/>
       </Box>
     </>
   );

ui/txs/TxsPending.tsx

 import { Show, Alert } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import type { TransactionsResponse } from 'types/api/transaction';
@@ -11,6 +10,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TxsContent from './TxsContent';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
 import TxsSkeletonMobile from './TxsSkeletonMobile';
+import useQueryWithPages from './useQueryWithPages';
 
 const TxsValidated = () => {
   const fetch = useFetch();
@@ -34,7 +34,15 @@ const TxsValidated = () => {
     return <Alert>There are no transactions.</Alert>;
   }
 
-  return <TxsContent txs={ data.items } showDescription={ false }/>;
+  return (
+    <TxsContent
+      txs={ data.items }
+      showDescription={ false }
+      page={ page }
+      onPrevPageClick={ onPrevPageClick }
+      onNextPageClick={ onNextPageClick }
+    />
+  );
 };
 
 export default TxsValidated;

ui/txs/TxsTableItem.tsx

@@ -114,8 +114,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
       <Td>
         { tx.block && <Link href={ link('block', { id: tx.block.toString() }) }>{ tx.block }</Link> }
       </Td>
-      { /* TODO: fix "show" problem */ }
-      <Show above="xl">
+      <Show above="xl" ssr={ false }>
         <Td>
           { addressFrom }
         </Td>
@@ -126,7 +125,7 @@ const TxsTableItem = ({ tx }: {tx: Transaction}) => {
           { addressTo }
         </Td>
       </Show>
-      <Show below="xl">
+      <Show below="xl" ssr={ false }>
         <Td colSpan={ 3 }>
           <Box>
             { addressFrom }

ui/txs/TxsValidated.tsx

 import { Show, Alert } from '@chakra-ui/react';
-import { useQuery } from '@tanstack/react-query';
 import React from 'react';
 
 import type { TransactionsResponse } from 'types/api/transaction';
@@ -11,6 +10,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import TxsContent from './TxsContent';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
 import TxsSkeletonMobile from './TxsSkeletonMobile';
+import useQueryWithPages from './useQueryWithPages';
 
 const TxsValidated = () => {
   const fetch = useFetch();
@@ -34,7 +34,7 @@ const TxsValidated = () => {
     return <Alert>There are no transactions.</Alert>;
   }
 
-  return <TxsContent txs={ data.items }/>;
+  return <TxsContent txs={ data.items } page={ page } onNextPageClick={ onNextPageClick } onPrevPageClick={ onPrevPageClick }/>;
 };
 
 export default TxsValidated;

ui/txs/useQueryWithPages.ts

+import { useQuery } from '@tanstack/react-query';
+import React, { useCallback } from 'react';
+
+import type { TransactionsResponse } from 'types/api/transaction';
+
+import useFetch from 'lib/hooks/useFetch';
+
+export default function useQueryWithPages(queryName: string) {
+  const [ page, setPage ] = React.useState(1);
+  const [ pageParams, setPageParams ] = React.useState<Array<Partial<TransactionsResponse['next_page_params']>>>([ {} ]);
+  const fetch = useFetch();
+
+  const { data, isLoading, isError } = useQuery<unknown, unknown, TransactionsResponse>(
+    [ queryName, page ],
+    async() => {
+      const params: Array<string> = [];
+
+      Object.entries(pageParams[page - 1]).forEach(([ key, val ]) => params.push(`${ key }=${ val }`));
+
+      return fetch(`/api/transactions?filter=validated${ params.length ? '&' + params.join('&') : '' }`);
+    },
+  );
+
+  const onNextPageClick = useCallback(() => {
+    if (page >= pageParams.length && data?.next_page_params) {
+      setPageParams(prev => [ ...prev, data?.next_page_params ]);
+    }
+    setPage(prev => prev + 1);
+  }, [ data, page, pageParams ]);
+
+  const onPrevPageClick = useCallback(() => {
+    setPage(prev => prev - 1);
+  }, []);
+
+  return { data, isError, isLoading, page, onNextPageClick, onPrevPageClick };
+}