hide pagination if there is only one page

ui/blocks/BlocksContent.tsx

@@ -30,6 +30,7 @@ const BlocksContent = ({ type }: Props) => {
     queryName: QueryKeys.blocks,
     filters: { type },
   });
+  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
 
   const handleNewBlockMessage: SocketMessage.NewBlock['handler'] = React.useCallback((payload) => {
     queryClient.setQueryData([ QueryKeys.blocks, { page: pagination.page, filters: { type } } ], (prevData: BlocksResponse | undefined) => {
@@ -91,21 +92,27 @@ const BlocksContent = ({ type }: Props) => {
       <>
         { socketAlert && <Alert status="warning" mb={ 6 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
         <Show below="lg" key="content-mobile"><BlocksList data={ data.items }/></Show>
-        <Hide below="lg" key="content-desktop"><BlocksTable data={ data.items }/></Hide>
+        <Hide below="lg" key="content-desktop"><BlocksTable data={ data.items } top={ isPaginatorHidden ? 0 : 80 }/></Hide>
       </>
     );
 
   })();
 
+  const totalText = data?.items.length ?
+    <Text mb={{ base: 0, lg: 6 }}>Total of { data.items[0].height.toLocaleString() } blocks</Text> :
+    null;
+
   return (
     <>
       { data ?
-        <Text mb={{ base: 0, lg: 6 }}>Total of { data.items[0].height.toLocaleString() } blocks</Text> :
+        totalText :
         <Skeleton h="24px" w="200px" mb={{ base: 0, lg: 6 }}/>
       }
+      { !isPaginatorHidden && (
         <ActionBar>
           <Pagination ml="auto" { ...pagination }/>
         </ActionBar>
+      ) }
       { content }
     </>
   );

ui/blocks/BlocksTable.tsx

@@ -12,13 +12,14 @@ import { default as Thead } from 'ui/shared/TheadSticky';
 
 interface Props {
   data: Array<Block>;
+  top: number;
 }
 
-const BlocksTable = ({ data }: Props) => {
+const BlocksTable = ({ data, top }: Props) => {
 
   return (
     <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
-      <Thead top={ 80 }>
+      <Thead top={ top }>
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size</Th>

ui/txs/TxsContent.tsx

@@ -37,6 +37,7 @@ const TxsContent = ({
   });
   // } = useQueryWithPages({ ...filters, filter: stateFilter, apiPath });
   const { data, isLoading, isError, setSortByField, setSortByValue, sorting } = useTxsSort(queryResult);
+  const isPaginatorHidden = !isLoading && !isError && pagination.page === 1 && !pagination.hasNextPage;
 
   const content = (() => {
     if (isError) {
@@ -61,7 +62,7 @@ const TxsContent = ({
     return (
       <>
         <Show below="lg" ssr={ false }><Box>{ txs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Box></Show>
-        <Hide below="lg" ssr={ false }><TxsTable txs={ txs } sort={ setSortByField } sorting={ sorting }/></Hide>
+        <Hide below="lg" ssr={ false }><TxsTable txs={ txs } sort={ setSortByField } sorting={ sorting } top={ isPaginatorHidden ? 0 : 80 }/></Hide>
       </>
     );
   })();
@@ -69,7 +70,7 @@ const TxsContent = ({
   return (
     <>
       { showDescription && <Box mb={{ base: 6, lg: 12 }}>Only the first 10,000 elements are displayed</Box> }
-      <TxsHeader mt={ -6 } sorting={ sorting } setSorting={ setSortByValue } paginationProps={ pagination }/>
+      <TxsHeader mt={ -6 } sorting={ sorting } setSorting={ setSortByValue } paginationProps={ pagination } showPagination={ !isPaginatorHidden }/>
       { content }
     </>
   );

ui/txs/TxsHeader.tsx

@@ -17,11 +17,16 @@ type Props = {
   setSorting: (val: Sort) => void;
   paginationProps: PaginationProps;
   className?: string;
+  showPagination?: boolean;
 }
 
-const TxsHeader = ({ sorting, setSorting, paginationProps, className }: Props) => {
+const TxsHeader = ({ sorting, setSorting, paginationProps, className, showPagination = true }: Props) => {
   const isMobile = useIsMobile(false);
 
+  if (!showPagination && !isMobile) {
+    return null;
+  }
+
   return (
     <ActionBar className={ className }>
       <HStack>
@@ -47,7 +52,7 @@ const TxsHeader = ({ sorting, setSorting, paginationProps, className }: Props) =
           placeholder="Search by addresses, hash, method..."
         /> */ }
       </HStack>
-      <Pagination { ...paginationProps }/>
+      { showPagination && <Pagination { ...paginationProps }/> }
     </ActionBar>
   );
 };

ui/txs/TxsTable.tsx

@@ -14,12 +14,13 @@ type Props = {
   txs: Array<Transaction>;
   sort: (field: 'val' | 'fee') => () => void;
   sorting?: Sort;
+  top: number;
 }
 
-const TxsTable = ({ txs, sort, sorting }: Props) => {
+const TxsTable = ({ txs, sort, sorting, top }: Props) => {
   return (
     <Table variant="simple" minWidth="810px" size="xs">
-      <TheadSticky top={ 80 }>
+      <TheadSticky top={ top }>
         <Tr>
           <Th width="54px"></Th>
           <Th width="20%">Type</Th>