ActionBar component

ui/blocks/BlocksContent.tsx

-import { Box, Text, Show, Alert, Skeleton } from '@chakra-ui/react';
+import { Text, Show, Alert, Skeleton } from '@chakra-ui/react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 
@@ -12,6 +12,7 @@ import useSocketMessage from 'lib/socket/useSocketMessage';
 import BlocksList from 'ui/blocks/BlocksList';
 import BlocksSkeletonMobile from 'ui/blocks/BlocksSkeletonMobile';
 import BlocksTable from 'ui/blocks/BlocksTable';
+import ActionBar from 'ui/shared/ActionBar';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import Pagination from 'ui/shared/Pagination';
 import SkeletonTable from 'ui/shared/SkeletonTable';
@@ -89,13 +90,13 @@ const BlocksContent = ({ type }: Props) => {
   return (
     <>
       <Text as="span">Total of { data.items[0].height.toLocaleString() } blocks</Text>
+      <ActionBar>
+        { /* eslint-disable-next-line react/jsx-no-bind */ }
+        <Pagination ml="auto" page={ 1 } onNextPageClick={ () => {} } onPrevPageClick={ () => {} } resetPage={ () => {} } hasNextPage/>
+      </ActionBar>
       { socketAlert && <Alert status="warning" mt={ 8 } as="a" href={ window.document.location.href }>{ socketAlert }</Alert> }
       <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 }}>
-        { /* eslint-disable-next-line react/jsx-no-bind */ }
-        <Pagination page={ 1 } onNextPageClick={ () => {} } onPrevPageClick={ () => {} } resetPage={ () => {} } hasNextPage/>
-      </Box>
     </>
   );
 };

ui/blocks/BlocksTable.tsx

@@ -18,7 +18,7 @@ const BlocksTable = ({ data }: Props) => {
 
   return (
     <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 } mt={ 8 }>
-      <Thead top={ 0 }>
+      <Thead top={ 80 }>
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size</Th>

ui/shared/ActionBar.tsx

+import { Flex, useColorModeValue } from '@chakra-ui/react';
+import throttle from 'lodash/throttle';
+import React from 'react';
+
+import ScrollDirectionContext from 'ui/ScrollDirectionContext';
+
+type Props = {
+  children: React.ReactNode;
+}
+
+const TOP_UP = 106;
+const TOP_DOWN = 0;
+
+const ActionBar = ({ children }: Props) => {
+  const [ isSticky, setIsSticky ] = React.useState(false);
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  const handleScroll = React.useCallback(() => {
+    if (
+      Number(ref.current?.getBoundingClientRect().y) < TOP_UP + 5
+    ) {
+      setIsSticky(true);
+    } else {
+      setIsSticky(false);
+    }
+  }, [ ]);
+
+  React.useEffect(() => {
+    const throttledHandleScroll = throttle(handleScroll, 300);
+
+    window.addEventListener('scroll', throttledHandleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll);
+    };
+  // replicate componentDidMount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
+
+  const bgColor = useColorModeValue('white', 'black');
+
+  return (
+    <ScrollDirectionContext.Consumer>
+      { (scrollDirection) => (
+        <Flex
+          backgroundColor={ bgColor }
+          //   mt={ -6 }
+          pt={ 6 }
+          pb={ 6 }
+          mx={{ base: -4, lg: 0 }}
+          px={{ base: 4, lg: 0 }}
+          justifyContent="space-between"
+          width={{ base: '100vw', lg: 'unset' }}
+          position="sticky"
+          top={{ base: scrollDirection === 'down' ? `${ TOP_DOWN }px` : `${ TOP_UP }px`, lg: 0 }}
+          transitionProperty="top,box-shadow"
+          transitionDuration="slow"
+          zIndex={{ base: 'sticky2', lg: 'docked' }}
+          boxShadow={{ base: isSticky ? 'md' : 'none', lg: 'none' }}
+          ref={ ref }
+        >
+          { children }
+        </Flex>
+      ) }
+    </ScrollDirectionContext.Consumer>
+  );
+};
+
+export default ActionBar;

ui/shared/Pagination.tsx

-import { Button, Flex, Icon, IconButton } from '@chakra-ui/react';
+import { Button, Flex, Icon, IconButton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import arrowIcon from 'icons/arrows/east-mini.svg';
@@ -10,12 +10,14 @@ export type Props = {
   resetPage: () => void;
   hasNextPage: boolean;
   hasPaginationParams?: boolean;
+  className?: string;
 }
 
-const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, hasPaginationParams }: Props) => {
+const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, hasPaginationParams, className }: Props) => {
 
   return (
     <Flex
+      className={ className }
       fontSize="sm"
       alignItems="center"
     >
@@ -69,4 +71,4 @@ const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNext
   );
 };
 
-export default Pagination;
+export default chakra(Pagination);

ui/txs/TxsHeader.tsx

-import { HStack, Flex, useColorModeValue } from '@chakra-ui/react';
-import throttle from 'lodash/throttle';
-import React, { useCallback } from 'react';
+import { HStack } from '@chakra-ui/react';
+import React from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 // import FilterInput from 'ui/shared/FilterInput';
-import ScrollDirectionContext from 'ui/ScrollDirectionContext';
+import ActionBar from 'ui/shared/ActionBar';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import TxsSorting from 'ui/txs/TxsSorting';
@@ -19,86 +18,36 @@ type Props = {
   paginationProps: PaginationProps;
 }
 
-const TOP_UP = 106;
-const TOP_DOWN = 0;
-
 const TxsHeader = ({ sorting, setSorting, paginationProps }: Props) => {
-  const [ isSticky, setIsSticky ] = React.useState(false);
-  const ref = React.useRef<HTMLDivElement>(null);
-
   const isMobile = useIsMobile(false);
 
-  const handleScroll = useCallback(() => {
-    if (
-      Number(ref.current?.getBoundingClientRect().y) < TOP_UP + 5
-    ) {
-      setIsSticky(true);
-    } else {
-      setIsSticky(false);
-    }
-  }, [ ]);
-
-  React.useEffect(() => {
-    const throttledHandleScroll = throttle(handleScroll, 300);
-
-    window.addEventListener('scroll', throttledHandleScroll);
-
-    return () => {
-      window.removeEventListener('scroll', throttledHandleScroll);
-    };
-  // replicate componentDidMount
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ ]);
-
-  const bgColor = useColorModeValue('white', 'black');
-
   return (
-    <ScrollDirectionContext.Consumer>
-      { (scrollDirection) => (
-        <Flex
-          backgroundColor={ bgColor }
-          mt={ -6 }
-          pt={ 6 }
-          pb={ 6 }
-          mx={{ base: -4, lg: 0 }}
-          px={{ base: 4, lg: 0 }}
-          justifyContent="space-between"
-          width={{ base: '100vw', lg: 'unset' }}
-          position="sticky"
-          top={{ base: scrollDirection === 'down' ? `${ TOP_DOWN }px` : `${ TOP_UP }px`, lg: 0 }}
-          transitionProperty="top,box-shadow"
-          transitionDuration="slow"
-          zIndex={{ base: 'sticky2', lg: 'docked' }}
-          boxShadow={{ base: isSticky ? 'md' : 'none', lg: 'none' }}
-          ref={ ref }
-        >
-          <HStack>
-            { /* api is not implemented */ }
-            { /* <TxsFilters
+    <ActionBar>
+      <HStack>
+        { /* api is not implemented */ }
+        { /* <TxsFilters
           filters={ filters }
           onFiltersChange={ setFilters }
           appliedFiltersNum={ 0 }
         /> */ }
-            { isMobile && (
-              <TxsSorting
-                isActive={ Boolean(sorting) }
-                setSorting={ setSorting }
-                sorting={ sorting }
-              />
-            ) }
-            { /* api is not implemented */ }
-            { /* <FilterInput
+        { isMobile && (
+          <TxsSorting
+            isActive={ Boolean(sorting) }
+            setSorting={ setSorting }
+            sorting={ sorting }
+          />
+        ) }
+        { /* api is not implemented */ }
+        { /* <FilterInput
           // eslint-disable-next-line react/jsx-no-bind
           onChange={ () => {} }
           maxW="360px"
           size="xs"
           placeholder="Search by addresses, hash, method..."
         /> */ }
-          </HStack>
-          <Pagination { ...paginationProps }/>
-        </Flex>
-      ) }
-    </ScrollDirectionContext.Consumer>
+      </HStack>
+      <Pagination { ...paginationProps }/>
+    </ActionBar>
   );
 };