Merge pull request #282 from blockscout/sticky-pagination-new

Sticky pagination new

lib/hooks/useScrollDirection.ts

+import clamp from 'lodash/clamp';
+import throttle from 'lodash/throttle';
+import React from 'react';
+
+import isBrowser from 'lib/isBrowser';
+
+const SCROLL_DIFF_THRESHOLD = 20;
+
+type Directions = 'up' | 'down';
+
+export default function useScrollDirection() {
+  const prevScrollPosition = React.useRef(isBrowser() ? window.pageYOffset : 0);
+  const [ scrollDirection, setDirection ] = React.useState<Directions>();
+
+  const handleScroll = React.useCallback(() => {
+    const currentScrollPosition = clamp(window.pageYOffset, 0, window.document.body.scrollHeight - window.innerHeight);
+    const scrollDiff = currentScrollPosition - prevScrollPosition.current;
+
+    if (window.pageYOffset === 0) {
+      setDirection(undefined);
+    } else if (Math.abs(scrollDiff) > SCROLL_DIFF_THRESHOLD) {
+      setDirection(scrollDiff < 0 ? 'up' : 'down');
+    }
+
+    prevScrollPosition.current = currentScrollPosition;
+  }, [ ]);
+
+  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
+  }, []);
+
+  return scrollDirection;
+}

theme/components/Table.ts

@@ -16,10 +16,10 @@ const variantSimple = definePartsStyle((props) => {
     th: {
       border: 0,
       color: mode('gray.600', 'whiteAlpha.700')(props),
+      backgroundColor: mode('blackAlpha.100', 'whiteAlpha.200')(props),
       ...transitionProps,
     },
     thead: {
-      backgroundColor: mode('blackAlpha.100', 'whiteAlpha.200')(props),
       ...transitionProps,
     },
     td: {
@@ -73,9 +73,6 @@ const variants = {
 };
 
 const baseStyle = definePartsStyle({
-  thead: {
-    backgroundColor: 'gray.50',
-  },
   th: {
     textTransform: 'none',
     fontFamily: 'body',
@@ -83,6 +80,12 @@ const baseStyle = definePartsStyle({
     overflow: 'hidden',
     color: 'gray.500',
     letterSpacing: 'none',
+    _first: {
+      borderTopLeftRadius: '8px',
+    },
+    _last: {
+      borderTopRightRadius: '8px',
+    },
   },
   td: {
     fontSize: 'md',
@@ -92,7 +95,7 @@ const baseStyle = definePartsStyle({
     tableLayout: 'fixed',
     borderTopLeftRadius: 'base',
     borderTopRightRadius: 'base',
-    overflow: 'hidden',
+    overflow: 'unset',
     fontVariant: 'normal',
   },
 });

theme/foundations/zIndices.ts

+const zIndices = {
+  hide: -1,
+  auto: 'auto',
+  base: 0,
+  docked: 10,
+  dropdown: 1000,
+  sticky: 1100,
+  sticky1: 1101,
+  sticky2: 1102,
+  banner: 1200,
+  overlay: 1300,
+  modal: 1400,
+  popover: 1500,
+  skipLink: 1600,
+  toast: 1700,
+  tooltip: 1800,
+};
+
+export default zIndices;

theme/index.ts

@@ -7,6 +7,7 @@ import breakpoints from './foundations/breakpoints';
 import colors from './foundations/colors';
 import transition from './foundations/transition';
 import typography from './foundations/typography';
+import zIndices from './foundations/zIndices';
 import global from './global';
 
 const overrides = {
@@ -20,6 +21,7 @@ const overrides = {
   },
   breakpoints,
   transition,
+  zIndices,
 };
 
 export default extendTheme(overrides);

ui/ScrollDirectionContext.tsx

+import React from 'react';
+
+const ScrollDirectionContext = React.createContext<'up' | 'down' | undefined>(undefined);
+
+export default ScrollDirectionContext;

ui/apiKey/ApiKeyTable/ApiKeyTable.tsx

@@ -4,7 +4,6 @@ import {
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -21,7 +20,6 @@ interface Props {
 
 const ApiKeyTable = ({ data, onDeleteClick, onEditClick, limit }: Props) => {
   return (
-    <TableContainer width="100%">
     <Table variant="simple" minWidth="600px">
       <Thead>
         <Tr>
@@ -40,7 +38,6 @@ const ApiKeyTable = ({ data, onDeleteClick, onEditClick, limit }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

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={ () => {} } hasNextPage/>
+        <Pagination page={ 1 } onNextPageClick={ () => {} } onPrevPageClick={ () => {} } resetPage={ () => {} } hasNextPage/>
       </Box>
     </>
   );

ui/blocks/BlocksTable.tsx

-import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import { AnimatePresence } from 'framer-motion';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -8,6 +8,7 @@ import type { Block } from 'types/api/block';
 import appConfig from 'configs/app/config';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import BlocksTableItem from 'ui/blocks/BlocksTableItem';
+import { default as Thead } from 'ui/shared/TheadSticky';
 
 interface Props {
   data: Array<Block>;
@@ -16,9 +17,8 @@ interface Props {
 const BlocksTable = ({ data }: Props) => {
 
   return (
-    <TableContainer width="100%" mt={ 8 }>
-      <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
-        <Thead>
+    <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 } mt={ 8 }>
+      <Thead top={ 0 }>
         <Tr>
           <Th width="125px">Block</Th>
           <Th width="120px">Size</Th>
@@ -36,7 +36,6 @@ const BlocksTable = ({ data }: Props) => {
         </AnimatePresence>
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/customAbi/CustomAbiTable/CustomAbiTable.tsx

@@ -4,7 +4,6 @@ import {
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -20,7 +19,6 @@ interface Props {
 
 const CustomAbiTable = ({ data, onDeleteClick, onEditClick }: Props) => {
   return (
-    <TableContainer width="100%">
     <Table variant="simple" minWidth="600px">
       <Thead>
         <Tr>
@@ -39,7 +37,6 @@ const CustomAbiTable = ({ data, onDeleteClick, onEditClick }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/pages/Transactions.tsx

@@ -19,7 +19,7 @@ const Transactions = () => {
   ];
 
   return (
-    <Page>
+    <Page hideMobileHeaderOnScrollDown>
       <Box h="100%">
         <PageTitle text="Transactions"/>
         <RoutedTabs tabs={ TABS }/>

ui/privateTags/AddressTagTable/AddressTagTable.tsx

@@ -4,7 +4,6 @@ import {
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -20,7 +19,6 @@ interface Props {
 
 const AddressTagTable = ({ data, onDeleteClick, onEditClick }: Props) => {
   return (
-    <TableContainer width="100%">
     <Table variant="simple" minWidth="600px">
       <Thead>
         <Tr>
@@ -40,7 +38,6 @@ const AddressTagTable = ({ data, onDeleteClick, onEditClick }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/privateTags/TransactionTagTable/TransactionTagTable.tsx

@@ -4,7 +4,6 @@ import {
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -20,7 +19,6 @@ interface Props {
 
 const AddressTagTable = ({ data, onDeleteClick, onEditClick }: Props) => {
   return (
-    <TableContainer width="100%">
     <Table variant="simple" minWidth="600px">
       <Thead>
         <Tr>
@@ -40,7 +38,6 @@ const AddressTagTable = ({ data, onDeleteClick, onEditClick }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/publicTags/PublicTagTable/PublicTagTable.tsx

@@ -4,7 +4,6 @@ import {
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -20,7 +19,6 @@ interface Props {
 
 const PublicTagTable = ({ data, onEditClick, onDeleteClick }: Props) => {
   return (
-    <TableContainer width="100%">
     <Table variant="simple" minWidth="600px">
       <Thead>
         <Tr>
@@ -41,7 +39,6 @@ const PublicTagTable = ({ data, onEditClick, onDeleteClick }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/shared/Page/Page.tsx

@@ -6,6 +6,8 @@ import { QueryKeys } from 'types/client/queries';
 
 import * as cookies from 'lib/cookies';
 import useFetch from 'lib/hooks/useFetch';
+import useScrollDirection from 'lib/hooks/useScrollDirection';
+import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 import PageContent from 'ui/shared/Page/PageContent';
 import Header from 'ui/snippets/header/Header';
 import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
@@ -13,27 +15,32 @@ import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
 interface Props {
   children: React.ReactNode;
   wrapChildren?: boolean;
+  hideMobileHeaderOnScrollDown?: boolean;
 }
 
-const Page = ({ children, wrapChildren = true }: Props) => {
+const Page = ({ children, wrapChildren = true, hideMobileHeaderOnScrollDown }: Props) => {
   const fetch = useFetch();
 
   useQuery<unknown, unknown, unknown>([ QueryKeys.csrf ], async() => await fetch('/node-api/account/csrf'), {
     enabled: Boolean(cookies.get(cookies.NAMES.API_TOKEN)),
   });
 
+  const directionContext = useScrollDirection();
+
   const renderedChildren = wrapChildren ? (
     <PageContent>{ children }</PageContent>
   ) : children;
 
   return (
+    <ScrollDirectionContext.Provider value={ directionContext }>
       <Flex w="100%" minH="100vh" alignItems="stretch">
         <NavigationDesktop/>
         <Flex flexDir="column" width="100%">
-        <Header/>
+          <Header hideOnScrollDown={ hideMobileHeaderOnScrollDown }/>
           { renderedChildren }
         </Flex>
       </Flex>
+    </ScrollDirectionContext.Provider>
   );
 };
 

ui/shared/Pagination.tsx

@@ -3,55 +3,31 @@ import React from 'react';
 
 import arrowIcon from 'icons/arrows/east-mini.svg';
 
-type Props = {
-  currentPage: number;
-  maxPage?: number;
+export type Props = {
+  page: number;
   onNextPageClick: () => void;
   onPrevPageClick: () => void;
+  resetPage: () => void;
   hasNextPage: boolean;
+  hasPaginationParams?: boolean;
 }
 
-const MAX_PAGE_DEFAULT = 50;
+const Pagination = ({ page, onNextPageClick, onPrevPageClick, resetPage, hasNextPage, hasPaginationParams }: Props) => {
 
-const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick, hasNextPage }: Props) => {
-  const pageNumber = (
-    <Flex alignItems="center">
-      <Button
-        variant="outline"
-        colorScheme="gray"
-        size="sm"
-        isActive
-        borderWidth="1px"
-        fontWeight={ 400 }
-        mr={ 3 }
-        h={ 8 }
+  return (
+    <Flex
+      fontSize="sm"
+      alignItems="center"
     >
-        { currentPage }
-      </Button>
-      { /* max page will be removed */ }
-          of
       <Button
         variant="outline"
-        colorScheme="gray"
         size="sm"
-        width={ 8 }
-        borderWidth="1px"
-        fontWeight={ 400 }
-        ml={ 3 }
+        onClick={ resetPage }
+        disabled={ !hasPaginationParams }
+        mr={ 4 }
       >
-        { maxPage || MAX_PAGE_DEFAULT }
+        First
       </Button>
-    </Flex>
-  );
-
-  return (
-    <Flex
-      fontSize="sm"
-      width={{ base: '100%', lg: 'auto' }}
-      justifyContent={{ base: 'space-between', lg: 'unset' }}
-      alignItems="center"
-    >
-      <Flex alignItems="center" justifyContent="space-between" w={{ base: '100%', lg: 'auto' }}>
       <IconButton
         variant="outline"
         onClick={ onPrevPageClick }
@@ -59,10 +35,21 @@ const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick, ha
         aria-label="Next page"
         w="36px"
         icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
-          mr={ 8 }
-          disabled={ currentPage === 1 }
+        mr={ 6 }
+        disabled={ page === 1 }
       />
-        { pageNumber }
+      <Button
+        variant="outline"
+        size="sm"
+        isActive
+        borderWidth="1px"
+        fontWeight={ 400 }
+        h={ 8 }
+        cursor="unset"
+        disabled={ hasPaginationParams && page === 1 }
+      >
+        { page }
+      </Button>
       <IconButton
         variant="outline"
         onClick={ onNextPageClick }
@@ -70,10 +57,9 @@ const Pagination = ({ currentPage, maxPage, onNextPageClick, onPrevPageClick, ha
         aria-label="Next page"
         w="36px"
         icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
-          ml={ 8 }
+        ml={ 6 }
         disabled={ !hasNextPage }
       />
-      </Flex>
       { /* not implemented yet */ }
       { /* <Flex alignItems="center" width="132px" ml={ 16 } display={{ base: 'none', lg: 'flex' }}>
             Go to <Input w="84px" size="xs" ml={ 2 }/>

ui/shared/SortButton.tsx

@@ -20,6 +20,7 @@ const SortButton = ({ onClick, isActive, className }: Props) => {
       minWidth="36px"
       onClick={ onClick }
       isActive={ isActive }
+      display="flex"
       className={ className }
     />
   );

ui/shared/TheadSticky.tsx

+import { Thead, useColorModeValue } from '@chakra-ui/react';
+import type { TableHeadProps, PositionProps } from '@chakra-ui/react';
+import throttle from 'lodash/throttle';
+import React from 'react';
+
+interface Props extends TableHeadProps {
+  top?: number;
+  children?: React.ReactNode;
+}
+
+const TheadSticky = ({ top, children, ...restProps }: Props) => {
+  const ref = React.useRef<HTMLTableSectionElement>(null);
+  const [ isSticky, setIsSticky ] = React.useState(false);
+
+  const handleScroll = React.useCallback(() => {
+    if (Number(ref.current?.getBoundingClientRect().y) <= (top || 0)) {
+      setIsSticky(true);
+    } else {
+      setIsSticky(false);
+    }
+  }, [ top ]);
+
+  React.useEffect(() => {
+    const throttledHandleScroll = throttle(handleScroll, 300);
+
+    window.addEventListener('scroll', throttledHandleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', throttledHandleScroll);
+    };
+  }, [ handleScroll ]);
+
+  const props = {
+    ...restProps,
+    position: 'sticky' as PositionProps['position'],
+    top: `${ top }px` || 0,
+    backgroundColor: useColorModeValue('white', 'black'),
+    boxShadow: isSticky ? 'md' : 'none',
+    zIndex: 1,
+  };
+
+  return (
+    <Thead { ...props } ref={ ref }>
+      { children }
+    </Thead>
+  );
+};
+
+export default TheadSticky;

ui/snippets/header/Header.tsx

 import { HStack, Box, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
+import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
@@ -9,9 +10,12 @@ import SearchBar from 'ui/snippets/searchBar/SearchBar';
 import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
 
-const Header = () => {
+const Header = ({ hideOnScrollDown }: {hideOnScrollDown?: boolean}) => {
   const bgColor = useColorModeValue('white', 'black');
+
   return (
+    <ScrollDirectionContext.Consumer>
+      { (scrollDirection) => (
         <>
           <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
             <Flex
@@ -25,15 +29,17 @@ const Header = () => {
               width="100%"
               alignItems="center"
               justifyContent="space-between"
-          zIndex="sticky"
+              zIndex="sticky2"
+              transitionProperty="box-shadow"
+              transitionDuration="slow"
+              boxShadow={ !hideOnScrollDown && scrollDirection === 'down' ? 'md' : 'none' }
             >
               <Burger/>
               <NetworkLogo/>
               <ProfileMenuMobile/>
             </Flex>
-        <SearchBar/>
-      </Box>
-      <HStack
+            <SearchBar withShadow={ !hideOnScrollDown }/>
+          </Box><HStack
             as="header"
             width="100%"
             alignItems="center"
@@ -49,6 +55,8 @@ const Header = () => {
             <ProfileMenuDesktop/>
           </HStack>
         </>
+      ) }
+    </ScrollDirectionContext.Consumer>
   );
 };
 

ui/snippets/searchBar/SearchBar.tsx

@@ -6,7 +6,7 @@ import link from 'lib/link/link';
 import SearchBarDesktop from './SearchBarDesktop';
 import SearchBarMobile from './SearchBarMobile';
 
-const SearchBar = () => {
+const SearchBar = ({ withShadow }: {withShadow?: boolean}) => {
   const [ value, setValue ] = React.useState('');
 
   const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
@@ -22,7 +22,7 @@ const SearchBar = () => {
   return (
     <>
       <SearchBarDesktop onChange={ handleChange } onSubmit={ handleSubmit }/>
-      <SearchBarMobile onChange={ handleChange } onSubmit={ handleSubmit }/>
+      <SearchBarMobile onChange={ handleChange } onSubmit={ handleSubmit } withShadow={ withShadow }/>
     </>
   );
 };

ui/snippets/searchBar/SearchBarMobile.tsx

 import { InputGroup, Input, InputLeftElement, Icon, useColorModeValue, chakra } from '@chakra-ui/react';
-import clamp from 'lodash/clamp';
 import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
 import searchIcon from 'icons/search.svg';
-import isBrowser from 'lib/isBrowser';
+import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 
-const SCROLL_DIFF_THRESHOLD = 20;
+const TOP = 55;
 
 interface Props {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  withShadow?: boolean;
 }
 
-const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
+const SearchBarMobile = ({ onChange, onSubmit, withShadow }: Props) => {
 
-  const prevScrollPosition = React.useRef(isBrowser() ? window.pageYOffset : 0);
-  const [ isVisible, setVisibility ] = React.useState(true);
-
-  const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
-  const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
-  const bgColor = useColorModeValue('white', 'black');
+  const [ isSticky, setIsSticky ] = React.useState(false);
 
   const handleScroll = React.useCallback(() => {
-    const currentScrollPosition = clamp(window.pageYOffset, 0, window.document.body.scrollHeight - window.innerHeight);
-    const scrollDiff = currentScrollPosition - prevScrollPosition.current;
-
-    if (Math.abs(scrollDiff) > SCROLL_DIFF_THRESHOLD) {
-      setVisibility(scrollDiff > 0 ? false : true);
+    if (window.pageYOffset !== 0) {
+      setIsSticky(true);
+    } else {
+      setIsSticky(false);
     }
-
-    prevScrollPosition.current = currentScrollPosition;
   }, []);
 
   React.useEffect(() => {
@@ -46,7 +38,13 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  const searchIconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
+  const inputBorderColor = useColorModeValue('blackAlpha.100', 'whiteAlpha.200');
+  const bgColor = useColorModeValue('white', 'black');
+
   return (
+    <ScrollDirectionContext.Consumer>
+      { (scrollDirection) => (
         <chakra.form
           noValidate
           onSubmit={ onSubmit }
@@ -54,15 +52,16 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
           paddingTop={ 1 }
           paddingBottom={ 2 }
           position="fixed"
-      top="56px"
+          top={ `${ TOP }px` }
           left="0"
-      zIndex="docked"
+          zIndex="sticky1"
           bgColor={ bgColor }
-      transform={ isVisible ? 'translateY(0)' : 'translateY(-100%)' }
-      transitionProperty="transform"
+          transform={ scrollDirection !== 'down' ? 'translateY(0)' : 'translateY(-100%)' }
+          transitionProperty="transform,box-shadow"
           transitionDuration="slow"
           display={{ base: 'block', lg: 'none' }}
           w="100%"
+          boxShadow={ withShadow && scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
         >
           <InputGroup size="sm">
             <InputLeftElement >
@@ -77,6 +76,8 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
             />
           </InputGroup>
         </chakra.form>
+      ) }
+    </ScrollDirectionContext.Consumer>
   );
 };
 

ui/tx/internals/TxInternalsTable.tsx

-import { Table, Thead, Tbody, Tr, Th, TableContainer, Link, Icon } from '@chakra-ui/react';
+import { Table, Tbody, Tr, Th, Link, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import appConfig from 'configs/app/config';
 import arrowIcon from 'icons/arrows/east.svg';
+import { default as Thead } from 'ui/shared/TheadSticky';
 import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem';
 import type { Sort, SortField } from 'ui/tx/internals/utils';
 
@@ -18,9 +19,8 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
   const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)';
 
   return (
-    <TableContainer width="100%" mt={ 6 }>
-      <Table variant="simple" size="sm">
-        <Thead>
+    <Table variant="simple" size="sm" mt={ 6 }>
+      <Thead top={ 0 }>
         <Tr>
           <Th width="28%">Type</Th>
           <Th width="20%">From</Th>
@@ -46,7 +46,6 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/tx/state/TxStateTable.tsx

 import {
   Table,
-  Thead,
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -12,13 +10,13 @@ import React from 'react';
 import appConfig from 'configs/app/config';
 import { data } from 'data/txState';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
+import { default as Thead } from 'ui/shared/TheadSticky';
 import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
 
 const TxStateTable = () => {
   return (
-    <TableContainer width="100%" mt={ 6 }>
-      <Table variant="simple" minWidth="950px" size="sm" w="auto">
-        <Thead>
+    <Table variant="simple" minWidth="950px" size="sm" w="auto" mt={ 6 }>
+      <Thead top={ 0 }>
         <Tr>
           <Th width="92px">Storage</Th>
           <Th width="146px">Address</Th>
@@ -32,7 +30,6 @@ const TxStateTable = () => {
         { data.map((item, index) => <TxStateTableItem txStateItem={ item } key={ index }/>) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/txs/TxsContent.tsx

-import { Alert, Box, HStack, Show, Button } from '@chakra-ui/react';
+import { Alert, Box, Show } from '@chakra-ui/react';
 import React, { useState, useCallback } from 'react';
 
 import type { TTxsFilters } from 'types/api/txsFilters';
@@ -6,15 +6,11 @@ import type { QueryKeys } from 'types/client/queries';
 import type { Sort } from 'types/client/txs-sort';
 
 import * as cookies from 'lib/cookies';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
-// import FilterInput from 'ui/shared/FilterInput';
-import Pagination from 'ui/shared/Pagination';
 
-// import TxsFilters from './TxsFilters';
+import TxsHeader from './TxsHeader';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
 import TxsSkeletonMobile from './TxsSkeletonMobile';
-import TxsSorting from './TxsSorting';
 import TxsWithSort from './TxsWithSort';
 import useQueryWithPages from './useQueryWithPages';
 
@@ -64,16 +60,10 @@ const TxsContent = ({
     data,
     isLoading,
     isError,
-    page,
-    onPrevPageClick,
-    onNextPageClick,
-    hasPagination,
-    resetPage,
+    pagination,
   } = useQueryWithPages(apiPath, queryName, stateFilter && { filter: stateFilter });
   // } = useQueryWithPages({ ...filters, filter: stateFilter, apiPath });
 
-  const isMobile = useIsMobile(false);
-
   if (isError) {
     return <DataFetchAlert/>;
   }
@@ -95,47 +85,16 @@ const TxsContent = ({
     content = <TxsWithSort txs={ txs } sorting={ sorting } sort={ sort }/>;
   }
 
+  const paginationProps = {
+    ...pagination,
+    hasNextPage: data?.next_page_params !== undefined && data?.next_page_params !== null && Object.keys(data?.next_page_params).length > 0,
+  };
+
   return (
     <>
       { showDescription && <Box mb={ 12 }>Only the first 10,000 elements are displayed</Box> }
-      <HStack mb={ 6 }>
-        { /* api is not implemented */ }
-        { /* <TxsFilters
-          filters={ filters }
-          onFiltersChange={ setFilters }
-          appliedFiltersNum={ 0 }
-        /> */ }
-        { isMobile && (
-          <TxsSorting
-            // eslint-disable-next-line react/jsx-no-bind
-            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>
+      <TxsHeader sorting={ sorting } setSorting={ setSorting } paginationProps={ paginationProps }/>
       { content }
-      <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
-        { 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/TxsHeader.tsx

+import { HStack, Flex, useColorModeValue } from '@chakra-ui/react';
+import throttle from 'lodash/throttle';
+import React, { useCallback } 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 Pagination from 'ui/shared/Pagination';
+import type { Props as PaginationProps } from 'ui/shared/Pagination';
+import TxsSorting from 'ui/txs/TxsSorting';
+
+// import TxsFilters from './TxsFilters';
+
+type Props = {
+  sorting: Sort;
+  setSorting: (val: Sort | ((val: Sort) => Sort)) => void;
+  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
+          filters={ filters }
+          onFiltersChange={ setFilters }
+          appliedFiltersNum={ 0 }
+        /> */ }
+            { 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>
+  );
+};
+
+export default TxsHeader;

ui/txs/TxsTable.tsx

-import { Link, Table, Thead, Tbody, Tr, Th, TableContainer, Icon } from '@chakra-ui/react';
+import { Link, Table, Tbody, Tr, Th, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
@@ -6,6 +6,7 @@ import type { Sort } from 'types/client/txs-sort';
 
 import appConfig from 'configs/app/config';
 import rightArrowIcon from 'icons/arrows/east.svg';
+import TheadSticky from 'ui/shared/TheadSticky';
 
 import TxsTableItem from './TxsTableItem';
 
@@ -17,9 +18,8 @@ type Props = {
 
 const TxsTable = ({ txs, sort, sorting }: Props) => {
   return (
-    <TableContainer width="100%" mt={ 6 }>
     <Table variant="simple" minWidth="810px" size="xs">
-        <Thead>
+      <TheadSticky top={ 80 }>
         <Tr>
           <Th width="54px"></Th>
           <Th width="20%">Type</Th>
@@ -44,7 +44,7 @@ const TxsTable = ({ txs, sort, sorting }: Props) => {
             </Link>
           </Th>
         </Tr>
-        </Thead>
+      </TheadSticky>
       <Tbody>
         { txs.map((item) => (
           <TxsTableItem
@@ -54,7 +54,6 @@ const TxsTable = ({ txs, sort, sorting }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/txs/useQueryWithPages.ts

@@ -63,6 +63,7 @@ export default function useQueryWithPages(apiPath: string, queryName: QueryKeys,
     // we dont have pagination params for the first page
     let nextPageQuery: typeof router.query;
     if (page === 2) {
+      queryClient.clear();
       nextPageQuery = omit(router.query, PAGINATION_FIELDS);
     } else {
       const nextPageParams = { ...pageParams[page - 2] };
@@ -75,16 +76,26 @@ export default function useQueryWithPages(apiPath: string, queryName: QueryKeys,
         animateScroll.scrollToTop({ duration: 0 });
         setPage(prev => prev - 1);
       });
-  }, [ router, page, pageParams ]);
+  }, [ router, page, pageParams, queryClient ]);
 
   const resetPage = useCallback(() => {
     queryClient.clear();
+    router.push({ pathname: router.pathname, query: omit(router.query, PAGINATION_FIELDS) }, undefined, { shallow: true }).then(() => {
       animateScroll.scrollToTop({ duration: 0 });
-    router.push({ pathname: router.pathname, query: omit(router.query, PAGINATION_FIELDS) }, undefined, { shallow: true });
+      setPage(1);
+      setPageParams([ {} ]);
+    });
   }, [ router, queryClient ]);
 
-  // if there are pagination params on the initial page, we shouldn't show pagination
-  const hasPagination = !(page === 1 && Object.keys(currPageParams).length > 0);
+  const hasPaginationParams = Object.keys(currPageParams).length > 0;
+
+  const pagination = {
+    page,
+    onNextPageClick,
+    onPrevPageClick,
+    hasPaginationParams,
+    resetPage,
+  };
 
-  return { data, isError, isLoading, page, onNextPageClick, onPrevPageClick, hasPagination, resetPage };
+  return { data, isError, isLoading, pagination };
 }

ui/watchlist/WatchlistTable/WatchlistTable.tsx

@@ -4,7 +4,6 @@ import {
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -20,7 +19,6 @@ interface Props {
 
 const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
   return (
-    <TableContainer width="100%">
     <Table variant="simple" minWidth="600px">
       <Thead>
         <Tr>
@@ -41,7 +39,6 @@ const WatchlistTable = ({ data, onDeleteClick, onEditClick }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };