fixes

ui/block/BlockTxs.tsx

@@ -15,7 +15,7 @@ const BlockTxs = () => {
     //   onPrevPageClick={ () => {} }
     // />
     // eslint-disable-next-line react/jsx-no-bind
-    <TxsWithSort txs={ [] } setSorting={ () => {} }/>
+    <TxsWithSort txs={ [] } sort={ () => () => {} }/>
   );
 };
 

ui/blocks/BlocksContent.tsx

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

ui/shared/Pagination.tsx

@@ -8,11 +8,12 @@ type Props = {
   maxPage?: number;
   onNextPageClick: () => void;
   onPrevPageClick: () => void;
+  hasNextPage: boolean;
 }
 
 const MAX_PAGE_DEFAULT = 50;
 
-const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick }: Props) => {
+const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick, hasNextPage }: Props) => {
   const pageNumber = (
     <Flex alignItems="center">
       <Button
@@ -27,6 +28,7 @@ const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick }:
       >
         { currentPage }
       </Button>
+      { /* max page will be removed */ }
           of
       <Button
         variant="outline"
@@ -58,6 +60,7 @@ const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick }:
           w="36px"
           icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
           mr={ 8 }
+          disabled={ currentPage === 1 }
         />
         { pageNumber }
         <IconButton
@@ -68,6 +71,7 @@ const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick }:
           w="36px"
           icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
           ml={ 8 }
+          disabled={ !hasNextPage }
         />
       </Flex>
       { /* not implemented yet */ }

ui/txs/TxsContent.tsx

@@ -116,8 +116,15 @@ const TxsContent = ({
       </HStack>
       { content }
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
-        { hasPagination ?
-          <Pagination currentPage={ page } onNextPageClick={ onNextPageClick } onPrevPageClick={ onPrevPageClick }/> :
+        { hasPagination ? (
+          <Pagination
+            currentPage={ page }
+            hasNextPage={ data?.next_page_params !== undefined && Object.keys(data?.next_page_params).length > 0 }
+            onNextPageClick={ onNextPageClick }
+            onPrevPageClick={ onPrevPageClick }
+          />
+        ) :
+          // temporary button, waiting for new pagination mockups
           <Button onClick={ resetPage }>Reset</Button>
         }
       </Box>

ui/txs/useQueryWithPages.ts

-import { useQuery } from '@tanstack/react-query';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { pick, omit } from 'lodash';
 import { useRouter } from 'next/router';
 import React, { useCallback } from 'react';
@@ -11,8 +11,10 @@ import useFetch from 'lib/hooks/useFetch';
 const PAGINATION_FIELDS = [ 'block_number', 'index', 'items_count' ];
 
 export default function useQueryWithPages(queryName: string, filter: string) {
+  const queryClient = useQueryClient();
   const router = useRouter();
   const [ page, setPage ] = React.useState(1);
+  const currPageParams = pick(router.query, PAGINATION_FIELDS);
   const [ pageParams, setPageParams ] = React.useState<Array<Partial<TransactionsResponse['next_page_params']>>>([ {} ]);
   const fetch = useFetch();
 
@@ -21,7 +23,7 @@ export default function useQueryWithPages(queryName: string, filter: string) {
     async() => {
       const params: Array<string> = [];
 
-      Object.entries(pageParams[page - 1]).forEach(([ key, val ]) => params.push(`${ key }=${ val }`));
+      Object.entries(currPageParams).forEach(([ key, val ]) => params.push(`${ key }=${ val }`));
 
       return fetch(`/api/transactions?filter=${ filter }${ params.length ? '&' + params.join('&') : '' }`);
     },
@@ -29,16 +31,19 @@ export default function useQueryWithPages(queryName: string, filter: string) {
   );
 
   const onNextPageClick = useCallback(() => {
+    if (!data?.next_page_params) {
+      // we hide next page button if no next_page_params
+      return;
+    }
+    // api adds filters into next-page-params now
+    // later filters will be removed from response
+    const nextPageParams = pick(data.next_page_params, PAGINATION_FIELDS);
     if (page >= pageParams.length && data?.next_page_params) {
-      // api adds filters into next-page-params now
-      // later filters will be removed from response
-      const nextPageParams = pick(data.next_page_params, PAGINATION_FIELDS);
       setPageParams(prev => [ ...prev, nextPageParams ]);
-      const nextPageQuery = { ...router.query };
-      Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
-      router.query = nextPageQuery;
-      router.push(router);
     }
+    const nextPageQuery = { ...router.query };
+    Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
+    router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true });
     animateScroll.scrollToTop({ duration: 0 });
     setPage(prev => prev + 1);
   }, [ data, page, pageParams, router ]);
@@ -46,29 +51,28 @@ export default function useQueryWithPages(queryName: string, filter: string) {
   const onPrevPageClick = useCallback(() => {
     // returning to the first page
     // we dont have pagination params for the first page
+    let nextPageQuery: typeof router.query;
     if (page === 2) {
-      router.query = omit(router.query, PAGINATION_FIELDS);
+      nextPageQuery = omit(router.query, PAGINATION_FIELDS);
     } else {
-      const nextPageParams = { ...pageParams[page - 1] };
-      const nextPageQuery = { ...router.query };
+      const nextPageParams = { ...pageParams[page - 2] };
+      nextPageQuery = { ...router.query };
       Object.entries(nextPageParams).forEach(([ key, val ]) => nextPageQuery[key] = val.toString());
-      router.query = nextPageQuery;
     }
-    router.push(router);
+    router.query = nextPageQuery;
+    router.push({ pathname: router.pathname, query: nextPageQuery }, undefined, { shallow: true });
     animateScroll.scrollToTop({ duration: 0 });
     setPage(prev => prev - 1);
   }, [ router, page, pageParams ]);
 
   const resetPage = useCallback(() => {
-    router.query = omit(router.query, PAGINATION_FIELDS);
-    router.push(router);
+    queryClient.clear();
     animateScroll.scrollToTop({ duration: 0 });
-    setPageParams([ {} ]);
-    setPage(1);
-  }, [ router ]);
+    router.push({ pathname: router.pathname, query: omit(router.query, PAGINATION_FIELDS) }, undefined, { shallow: true });
+  }, [ router, queryClient ]);
 
   // if there are pagination params on the initial page, we shouldn't show pagination
-  const hasPagination = !(page === 1 && Object.keys(pick(router.query, PAGINATION_FIELDS)).length > 0);
+  const hasPagination = !(page === 1 && Object.keys(currPageParams).length > 0);
 
   return { data, isError, isLoading, page, onNextPageClick, onPrevPageClick, hasPagination, resetPage };
 }