new version of sticky, probably final

lib/hooks/useScrollDirection.ts

@@ -16,7 +16,9 @@ export default function useScrollDirection() {
     const currentScrollPosition = clamp(window.pageYOffset, 0, window.document.body.scrollHeight - window.innerHeight);
     const scrollDiff = currentScrollPosition - prevScrollPosition.current;
 
-    if (Math.abs(scrollDiff) > SCROLL_DIFF_THRESHOLD) {
+    if (window.pageYOffset === 0) {
+      setDirection(undefined);
+    } else if (Math.abs(scrollDiff) > SCROLL_DIFF_THRESHOLD) {
       setDirection(scrollDiff < 0 ? 'up' : 'down');
     }
 

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',
   },
 });

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/BlocksTable.tsx

-import { Table, Thead, Tbody, Tr, Th, TableContainer } from '@chakra-ui/react';
+import { Table, Thead, Tbody, Tr, Th } from '@chakra-ui/react';
 import { AnimatePresence } from 'framer-motion';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -16,8 +16,7 @@ interface Props {
 const BlocksTable = ({ data }: Props) => {
 
   return (
-    <TableContainer width="100%" mt={ 8 }>
-      <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }>
+    <Table variant="simple" minWidth="1040px" size="md" fontWeight={ 500 }  mt={ 8 }>
       <Thead>
         <Tr>
           <Th width="125px">Block</Th>
@@ -36,7 +35,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/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';
@@ -23,11 +25,14 @@ const Page = ({ children, wrapChildren = true, hideMobileHeaderOnScrollDown }: P
     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%">
@@ -35,6 +40,7 @@ const Page = ({ children, wrapChildren = true, hideMobileHeaderOnScrollDown }: P
           { renderedChildren }
         </Flex>
       </Flex>
+    </ScrollDirectionContext.Provider>
   );
 };
 

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',
+  };
+
+  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 useScrollDirection from 'lib/hooks/useScrollDirection';
+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';
@@ -11,11 +11,11 @@ import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
 
 const Header = ({ hideOnScrollDown }: {hideOnScrollDown?: boolean}) => {
-  const scrollDirection = useScrollDirection();
   const bgColor = useColorModeValue('white', 'black');
 
-  const transform = hideOnScrollDown && scrollDirection === 'down' ? 'translateY(-60px)' : 'translateY(0)';
   return (
+    <ScrollDirectionContext.Consumer>
+      { (scrollDirection) => (
         <>
           <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
             <Flex
@@ -30,18 +30,16 @@ const Header = ({ hideOnScrollDown }: {hideOnScrollDown?: boolean}) => {
               alignItems="center"
               justifyContent="space-between"
               zIndex="sticky2"
-          transform={ transform }
-          transitionProperty="transform,box-shadow"
+              transitionProperty="box-shadow"
               transitionDuration="slow"
-          boxShadow={ scrollDirection === 'down' ? 'md' : 'none' }
+              boxShadow={ !hideOnScrollDown && scrollDirection === 'down' ? 'md' : 'none' }
             >
               <Burger/>
               <NetworkLogo/>
               <ProfileMenuMobile/>
             </Flex>
-        <SearchBar/>
-      </Box>
-      <HStack
+            <SearchBar withShadow={ !hideOnScrollDown }/>
+          </Box><HStack
             as="header"
             width="100%"
             alignItems="center"
@@ -57,6 +55,8 @@ const Header = ({ hideOnScrollDown }: {hideOnScrollDown?: boolean}) => {
             <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

@@ -4,29 +4,27 @@ import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
 import searchIcon from 'icons/search.svg';
-import useScrollDirection from 'lib/hooks/useScrollDirection';
+import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 
 const TOP = 55;
 
 interface Props {
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
+  withShadow?: boolean;
 }
 
-const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
-
-  const scrollDirection = useScrollDirection();
-  const isVisible = !scrollDirection || scrollDirection === 'up';
+const SearchBarMobile = ({ onChange, onSubmit, withShadow }: Props) => {
 
   const [ isSticky, setIsSticky ] = React.useState(false);
 
   const handleScroll = React.useCallback(() => {
-    if (window.pageYOffset === 0 || !isVisible) {
-      setIsSticky(false);
-    } else {
+    if (window.pageYOffset !== 0) {
       setIsSticky(true);
+    } else {
+      setIsSticky(false);
     }
-  }, [ isVisible ]);
+  }, []);
 
   React.useEffect(() => {
     const throttledHandleScroll = throttle(handleScroll, 300);
@@ -45,6 +43,8 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
   const bgColor = useColorModeValue('white', 'black');
 
   return (
+    <ScrollDirectionContext.Consumer>
+      { (scrollDirection) => (
         <chakra.form
           noValidate
           onSubmit={ onSubmit }
@@ -56,12 +56,12 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
           left="0"
           zIndex="sticky1"
           bgColor={ bgColor }
-      transform={ isVisible ? 'translateY(0)' : 'translateY(-112px)' }
+          transform={ scrollDirection !== 'down' ? 'translateY(0)' : 'translateY(-100%)' }
           transitionProperty="transform,box-shadow"
           transitionDuration="slow"
           display={{ base: 'block', lg: 'none' }}
           w="100%"
-      boxShadow={ isVisible && isSticky ? 'md' : 'none' }
+          boxShadow={ withShadow && scrollDirection !== 'down' && isSticky ? 'md' : 'none' }
         >
           <InputGroup size="sm">
             <InputLeftElement >
@@ -76,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, Thead, Tbody, Tr, Th, Link, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { InternalTransaction } from 'types/api/internalTransaction';
@@ -18,8 +18,7 @@ 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">
+    <Table variant="simple" size="sm" mt={ 6 }>
       <Thead>
         <Tr>
           <Th width="28%">Type</Th>
@@ -46,7 +45,6 @@ const TxInternalsTable = ({ data, sort, onSortToggle }: Props) => {
         )) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/tx/state/TxStateTable.tsx

@@ -4,7 +4,6 @@ import {
   Tbody,
   Tr,
   Th,
-  TableContainer,
 } from '@chakra-ui/react';
 import capitalize from 'lodash/capitalize';
 import React from 'react';
@@ -16,8 +15,7 @@ import TxStateTableItem from 'ui/tx/state/TxStateTableItem';
 
 const TxStateTable = () => {
   return (
-    <TableContainer width="100%" mt={ 6 }>
-      <Table variant="simple" minWidth="950px" size="sm" w="auto">
+    <Table variant="simple" minWidth="950px" size="sm" w="auto" mt={ 6 }>
       <Thead>
         <Tr>
           <Th width="92px">Storage</Th>
@@ -32,7 +30,6 @@ const TxStateTable = () => {
         { data.map((item, index) => <TxStateTableItem txStateItem={ item } key={ index }/>) }
       </Tbody>
     </Table>
-    </TableContainer>
   );
 };
 

ui/txs/TxsContent.tsx

@@ -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 TxsHeader from './TxsHeader';
 import TxsSkeletonDesktop from './TxsSkeletonDesktop';
 import TxsSkeletonMobile from './TxsSkeletonMobile';
-import TxsSorting from './TxsSorting';
 import TxsWithSort from './TxsWithSort';
 import useQueryWithPages from './useQueryWithPages';
 
@@ -91,7 +87,7 @@ const TxsContent = ({
 
   const paginationProps = {
     ...pagination,
-    hasNextPage: data?.next_page_params !== undefined && Object.keys(data?.next_page_params).length > 0,
+    hasNextPage: data?.next_page_params !== undefined && data?.next_page_params !== null && Object.keys(data?.next_page_params).length > 0,
   };
 
   return (

ui/txs/TxsHeader.tsx

@@ -6,7 +6,7 @@ import type { Sort } from 'types/client/txs-sort';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
 // import FilterInput from 'ui/shared/FilterInput';
-import useScrollDirection from 'lib/hooks/useScrollDirection';
+import ScrollDirectionContext from 'ui/ScrollDirectionContext';
 import Pagination from 'ui/shared/Pagination';
 import type { Props as PaginationProps } from 'ui/shared/Pagination';
 import SortButton from 'ui/shared/SortButton';
@@ -22,7 +22,6 @@ const TOP_UP = 106;
 const TOP_DOWN = 0;
 
 const TxsHeader = ({ sorting, paginationProps }: Props) => {
-  const scrollDirection = useScrollDirection();
   const [ isSticky, setIsSticky ] = React.useState(false);
   const ref = React.useRef<HTMLDivElement>(null);
 
@@ -30,14 +29,13 @@ const TxsHeader = ({ sorting, paginationProps }: Props) => {
 
   const handleScroll = useCallback(() => {
     if (
-      Number(ref.current?.getBoundingClientRect().y) <= TOP_DOWN ||
-      (scrollDirection === 'up' && Number(ref.current?.getBoundingClientRect().y) <= TOP_UP)
+      Number(ref.current?.getBoundingClientRect().y) < TOP_UP + 5
     ) {
       setIsSticky(true);
     } else {
       setIsSticky(false);
     }
-  }, [ scrollDirection ]);
+  }, [ ]);
 
   React.useEffect(() => {
     const throttledHandleScroll = throttle(handleScroll, 300);
@@ -47,11 +45,17 @@ const TxsHeader = ({ sorting, paginationProps }: Props) => {
     return () => {
       window.removeEventListener('scroll', throttledHandleScroll);
     };
-  }, [ handleScroll ]);
+  // replicate componentDidMount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ ]);
+
+  const bgColor = useColorModeValue('white', 'black');
 
   return (
+    <ScrollDirectionContext.Consumer>
+      { (scrollDirection) => (
         <Flex
-      backgroundColor={ useColorModeValue('white', 'black') }
+          backgroundColor={ bgColor }
           mt={ -6 }
           pt={ 6 }
           pb={ 6 }
@@ -61,7 +65,7 @@ const TxsHeader = ({ sorting, paginationProps }: Props) => {
           width={{ base: '100vw', lg: 'unset' }}
           position="sticky"
           top={{ base: scrollDirection === 'down' ? `${ TOP_DOWN }px` : `${ TOP_UP }px`, lg: 0 }}
-      transitionProperty="top"
+          transitionProperty="top,box-shadow"
           transitionDuration="slow"
           zIndex={{ base: 'sticky2', lg: 'docked' }}
           boxShadow={{ base: isSticky ? 'md' : 'none', lg: 'none' }}
@@ -92,6 +96,8 @@ const TxsHeader = ({ sorting, paginationProps }: Props) => {
           </HStack>
           <Pagination { ...paginationProps }/>
         </Flex>
+      ) }
+    </ScrollDirectionContext.Consumer>
   );
 };
 

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%">
     <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/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>
   );
 };