responsive fix

lib/cookies.ts

@@ -12,7 +12,7 @@ export enum NAMES {
 
 export function get(name?: string | undefined | null) {
   if (!isBrowser()) {
-    return () => {};
+    return undefined;
   }
   return Cookies.get(name);
 }

ui/shared/FilterButton.tsx

-import { Button, Circle, Icon, useColorModeValue } from '@chakra-ui/react';
+import { Box, Button, Circle, Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import filterIcon from 'icons/filter.svg';
 
-const FilterIcon = <Icon as={ filterIcon } boxSize={ 5 }/>;
+const FilterIcon = <Icon as={ filterIcon } boxSize={ 5 } mr={{ base: 0, lg: 2 }}/>;
 
 interface Props {
   isActive: boolean;
-  isCollapsed?: boolean;
   appliedFiltersNum?: number;
   onClick: () => void;
 }
 
-const FilterButton = ({ isActive, appliedFiltersNum, onClick, isCollapsed }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
+const FilterButton = ({ isActive, appliedFiltersNum, onClick }: Props, ref: React.ForwardedRef<HTMLButtonElement>) => {
   const badgeColor = useColorModeValue('white', 'black');
   const badgeBgColor = useColorModeValue('blue.700', 'gray.50');
 
   return (
     <Button
       ref={ ref }
-      leftIcon={ isCollapsed ? undefined : FilterIcon }
       rightIcon={ appliedFiltersNum ? <Circle bg={ badgeBgColor } size={ 5 } color={ badgeColor }>{ appliedFiltersNum }</Circle> : undefined }
       size="sm"
       fontWeight="500"
@@ -30,7 +28,8 @@ const FilterButton = ({ isActive, appliedFiltersNum, onClick, isCollapsed }: Pro
       px={ 1.5 }
       flexShrink={ 0 }
     >
-      { isCollapsed ? FilterIcon : 'Filter' }
+      { FilterIcon }
+      <Box display={{ base: 'none', lg: 'block' }}>Filter</Box>
     </Button>
   );
 };

ui/shared/Page.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 
 import * as cookies from 'lib/cookies';
 import useFetch from 'lib/hooks/useFetch';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import Header from 'ui/snippets/header/Header';
 import NavigationDesktop from 'ui/snippets/navigation/NavigationDesktop';
 
@@ -14,7 +13,6 @@ interface Props {
 }
 
 const Page = ({ children }: Props) => {
-  const isMobile = useIsMobile();
   const router = useRouter();
   const fetch = useFetch();
 
@@ -38,11 +36,11 @@ const Page = ({ children }: Props) => {
       minH="100vh"
       alignItems="stretch"
     >
-      { !isMobile && <NavigationDesktop/> }
+      <NavigationDesktop/>
       <VStack
         width="100%"
-        paddingX={ isMobile ? 4 : 8 }
-        paddingTop={ isMobile ? 0 : 9 }
+        paddingX={{ base: 4, lg: 8 }}
+        paddingTop={{ base: 0, lg: 9 }}
         paddingBottom={ 10 }
         spacing={ 0 }
       >
@@ -50,7 +48,7 @@ const Page = ({ children }: Props) => {
         <Box
           as="main"
           w="100%"
-          paddingTop={ isMobile ? '138px' : '52px' }
+          paddingTop={{ base: '138px', lg: '52px' }}
         >
           { children }
         </Box>

ui/shared/Pagination.tsx

@@ -6,13 +6,11 @@ import arrowIcon from 'icons/arrows/east-mini.svg';
 type Props = {
   currentPage: number;
   maxPage?: number;
-  isMobile?: boolean;
 }
 
 const MAX_PAGE_DEFAULT = 50;
 
-const Pagination = ({ currentPage, maxPage, isMobile }: Props) => {
-
+const Pagination = ({ currentPage, maxPage }: Props) => {
   const pageNumber = (
     <Flex alignItems="center">
       <Button
@@ -42,20 +40,21 @@ const Pagination = ({ currentPage, maxPage, isMobile }: Props) => {
     </Flex>
   );
 
-  if (isMobile) {
-    return (
-      <Flex
-        fontSize="sm"
-        width="100%"
-        justifyContent="space-between"
-        alignItems="center"
-      >
+  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"
           size="sm"
           aria-label="Next page"
           w="36px"
           icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
+          mr={ 8 }
         />
         { pageNumber }
         <IconButton
@@ -64,42 +63,14 @@ const Pagination = ({ currentPage, maxPage, isMobile }: Props) => {
           aria-label="Next page"
           w="36px"
           icon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
-        />
-      </Flex>
-    );
-  }
-
-  return (
-    <Flex
-      fontSize="sm"
-    >
-      <Flex alignItems="center" justifyContent="space-between">
-        <Button
-          variant="outline"
-          size="sm"
-          aria-label="Next page"
-          leftIcon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 }/> }
-          mr={ 8 }
-          pl={ 1 }
-        >
-          Previous
-        </Button>
-        { pageNumber }
-        <Button
-          variant="outline"
-          size="sm"
-          aria-label="Next page"
-          rightIcon={ <Icon as={ arrowIcon } w={ 5 } h={ 5 } transform="rotate(180deg)"/> }
           ml={ 8 }
-          pr={ 1 }
-        >
-          Next
-        </Button>
+        />
       </Flex>
-      <Flex alignItems="center" width="132px" ml={ 16 }>
-        Go to <Input w="84px" size="xs" ml={ 2 }/>
+      <Flex alignItems="center" width="132px" ml={ 16 } display={{ base: 'none', lg: 'flex' }}>
+            Go to <Input w="84px" size="xs" ml={ 2 }/>
       </Flex>
     </Flex>
+
   );
 };
 

ui/shared/RoutedTabs/RoutedTabs.tsx

@@ -33,7 +33,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
   const defaultIndex = tabs.findIndex(({ routeName }) => routeName === defaultActiveTab);
   const isMobile = useIsMobile();
 
-  const [ activeTab, setActiveTab ] = React.useState<number>(defaultIndex);
+  const [ activeTab ] = React.useState<number>(defaultIndex);
   const { tabsCut, tabsList, tabsRefs, listRef } = useAdaptiveTabs(tabs, isMobile);
 
   const router = useRouter();
@@ -45,8 +45,6 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
       const newUrl = link(nextTab.routeName, router.query);
       router.push(newUrl, undefined, { shallow: true });
     }
-
-    setActiveTab(index);
   }, [ tabs, router ]);
 
   return (
@@ -57,7 +55,7 @@ const RoutedTabs = ({ tabs, defaultActiveTab }: Props) => {
         whiteSpace="nowrap"
         ref={ listRef }
         overflowY="hidden"
-        overflowX={ isMobile ? 'auto' : undefined }
+        overflowX={{ base: 'auto', lg: undefined }}
         overscrollBehaviorX="contain"
         css={{
           'scroll-snap-type': 'x mandatory',

ui/shared/SortButton.tsx

-import { Icon, IconButton } from '@chakra-ui/react';
+import { Icon, IconButton, chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import upDownArrow from 'icons/arrows/up-down.svg';
@@ -6,9 +6,10 @@ import upDownArrow from 'icons/arrows/up-down.svg';
 type Props = {
   handleSort: () => void;
   isSortActive: boolean;
+  className?: string;
 }
 
-const SortButton = ({ handleSort, isSortActive }: Props) => {
+const SortButton = ({ handleSort, isSortActive, className }: Props) => {
   return (
     <IconButton
       icon={ <Icon as={ upDownArrow } boxSize={ 5 }/> }
@@ -16,12 +17,12 @@ const SortButton = ({ handleSort, isSortActive }: Props) => {
       size="sm"
       variant="outline"
       colorScheme="gray-dark"
-      ml={ 2 }
       minWidth="36px"
       onClick={ handleSort }
       isActive={ isSortActive }
+      className={ className }
     />
   );
 };
 
-export default SortButton;
+export default chakra(SortButton);

ui/snippets/header/Header.tsx

 import { HStack, Box, Flex, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import ProfileMenuDesktop from 'ui/snippets/profileMenu/ProfileMenuDesktop';
 import ProfileMenuMobile from 'ui/snippets/profileMenu/ProfileMenuMobile';
@@ -11,12 +10,10 @@ import Burger from './Burger';
 import ColorModeToggler from './ColorModeToggler';
 
 const Header = () => {
-  const isMobile = useIsMobile();
   const bgColor = useColorModeValue('white', 'black');
-
-  if (isMobile) {
-    return (
-      <Box bgColor={ bgColor }>
+  return (
+    <>
+      <Box bgColor={ bgColor } display={{ base: 'block', lg: 'none' }}>
         <Flex
           as="header"
           position="fixed"
@@ -36,21 +33,19 @@ const Header = () => {
         </Flex>
         <SearchBar/>
       </Box>
-    );
-  }
-
-  return (
-    <HStack
-      as="header"
-      width="100%"
-      alignItems="center"
-      justifyContent="center"
-      gap={ 12 }
-    >
-      <SearchBar/>
-      <ColorModeToggler/>
-      <ProfileMenuDesktop/>
-    </HStack>
+      <HStack
+        as="header"
+        width="100%"
+        alignItems="center"
+        justifyContent="center"
+        gap={ 12 }
+        display={{ base: 'none', lg: 'flex' }}
+      >
+        <SearchBar/>
+        <ColorModeToggler/>
+        <ProfileMenuDesktop/>
+      </HStack>
+    </>
   );
 };
 

ui/snippets/navigation/NavFooter.tsx

-import { VStack, Text, Stack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
+import { Box, VStack, Text, Stack, Icon, Link, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import ghIcon from 'icons/social/git.svg';
 import statsIcon from 'icons/social/stats.svg';
 import tgIcon from 'icons/social/telega.svg';
 import twIcon from 'icons/social/tweet.svg';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 const SOCIAL_LINKS = [
@@ -24,22 +23,13 @@ interface Props {
 }
 
 const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
-  const isMobile = useIsMobile();
-
-  const width = (() => {
-    if (isMobile) {
-      return '100%';
-    }
-
-    return isCollapsed ? '20px' : '180px';
-  })();
-
+  const isExpanded = isCollapsed === false;
   const marginTop = (() => {
     if (!hasAccount) {
       return 'auto';
     }
 
-    return isMobile ? 6 : 20;
+    return { base: 6, lg: 20 };
   })();
 
   return (
@@ -48,8 +38,8 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
       spacing={ 8 }
       borderTop="1px solid"
       borderColor={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') }
-      width={ width }
-      paddingTop={ isMobile ? 6 : 8 }
+      width={{ base: '100%', lg: isExpanded ? '180px' : '20px', xl: isCollapsed ? '20px' : '180px' }}
+      paddingTop={{ base: 6, lg: 8 }}
       marginTop={ marginTop }
       alignItems="flex-start"
       alignSelf="center"
@@ -57,7 +47,7 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
       fontSize="xs"
       { ...getDefaultTransitionProps({ transitionProperty: 'width' }) }
     >
-      <Stack direction={ isCollapsed ? 'column' : 'row' }>
+      <Stack direction={{ base: 'row', lg: isExpanded ? 'row' : 'column', xl: isCollapsed ? 'column' : 'row' }}>
         { SOCIAL_LINKS.map(sl => {
           return (
             <Link href={ sl.link } key={ sl.link } variant="secondary" w={ 5 } h={ 5 } aria-label={ sl.label }>
@@ -66,14 +56,12 @@ const NavFooter = ({ isCollapsed, hasAccount }: Props) => {
           );
         }) }
       </Stack>
-      { !isCollapsed && (
-        <>
-          <Text variant="secondary">
+      <Box display={{ base: 'block', lg: isExpanded ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}>
+        <Text variant="secondary" mb={ 8 }>
             Blockscout is a tool for inspecting and analyzing EVM based blockchains. Blockchain explorer for Ethereum Networks.
-          </Text>
-          <Text variant="secondary">Version: <Link href={ VERSION_URL } target="_blank">{ BLOCKSCOUT_VERSION }</Link></Text>
-        </>
-      ) }
+        </Text>
+        <Text variant="secondary">Version: <Link href={ VERSION_URL } target="_blank">{ BLOCKSCOUT_VERSION }</Link></Text>
+      </Box>
     </VStack>
   );
 };

ui/snippets/navigation/NavLink.tsx

@@ -2,7 +2,6 @@ import { Link, Icon, Text, HStack, Tooltip, Box } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 
 import useColors from './useColors';
@@ -18,21 +17,15 @@ interface Props {
 
 const NavLink = ({ text, url, icon, isCollapsed, isActive, px }: Props) => {
   const colors = useColors();
-  const isMobile = useIsMobile();
-  const width = (() => {
-    if (isMobile) {
-      return '100%';
-    }
 
-    return isCollapsed ? '60px' : '180px';
-  })();
+  const isExpanded = isCollapsed === false;
 
   return (
     <Box as="li" listStyleType="none" w="100%">
       <NextLink href={ url } passHref>
         <Link
-          w={ width }
-          px={ px || (isCollapsed ? '15px' : 3) }
+          w={{ base: '100%', lg: isExpanded ? '180px' : '60px', xl: isCollapsed ? '60px' : '180px' }}
+          px={ px || { base: 3, lg: isExpanded ? 3 : '15px', xl: isCollapsed ? '15px' : 3 } }
           py={ 2.5 }
           display="flex"
           color={ isActive ? colors.text.active : colors.text.default }
@@ -53,7 +46,14 @@ const NavLink = ({ text, url, icon, isCollapsed, isActive, px }: Props) => {
           >
             <HStack spacing={ 3 }>
               <Icon as={ icon } boxSize="30px"/>
-              { !isCollapsed && <Text variant="inherit" fontSize="sm" lineHeight="20px">{ text }</Text> }
+              <Text
+                variant="inherit"
+                fontSize="sm"
+                lineHeight="20px"
+                display={{ base: 'block', lg: isExpanded ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
+              >
+                { text }
+              </Text>
             </HStack>
           </Tooltip>
         </Link>

ui/snippets/navigation/NavigationDesktop.tsx

-import { Flex, Box, VStack, Icon, useColorModeValue, useBreakpointValue } from '@chakra-ui/react';
+import { Flex, Box, VStack, Icon, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import chevronIcon from 'icons/arrows/east-mini.svg';
 import * as cookies from 'lib/cookies';
 import useNavItems from 'lib/hooks/useNavItems';
 import useNetwork from 'lib/hooks/useNetwork';
+import isBrowser from 'lib/isBrowser';
 import getDefaultTransitionProps from 'theme/utils/getDefaultTransitionProps';
 import NetworkLogo from 'ui/snippets/networkMenu/NetworkLogo';
 import NetworkMenu from 'ui/snippets/networkMenu/NetworkMenu';
@@ -15,18 +16,24 @@ import NavLink from './NavLink';
 const NavigationDesktop = () => {
   const { mainNavItems, accountNavItems } = useNavItems();
   const selectedNetwork = useNetwork();
-  const isLargeScreen = useBreakpointValue({ base: false, xl: true });
-  const navBarCollapsedCookie = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED);
-  const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
-  const hasAccount = selectedNetwork?.isAccountSupported && isAuth;
 
-  const [ isCollapsed, setCollapsedState ] = React.useState(navBarCollapsedCookie === 'true');
+  const isInBrowser = isBrowser();
+  const [ hasAccount, setHasAccount ] = React.useState(false);
+  const [ isCollapsed, setCollapsedState ] = React.useState<boolean | undefined>();
 
   React.useEffect(() => {
-    if (!navBarCollapsedCookie) {
-      setCollapsedState(!isLargeScreen);
+    const navBarCollapsedCookie = cookies.get(cookies.NAMES.NAV_BAR_COLLAPSED);
+    const isAuth = Boolean(cookies.get(cookies.NAMES.API_TOKEN));
+    if (isInBrowser) {
+      if (navBarCollapsedCookie === 'true') {
+        setCollapsedState(true);
+      }
+      if (navBarCollapsedCookie === 'false') {
+        setCollapsedState(false);
+      }
+      setHasAccount(Boolean(selectedNetwork?.isAccountSupported && isAuth && isInBrowser));
     }
-  }, [ isLargeScreen, navBarCollapsedCookie ]);
+  }, [ isInBrowser, selectedNetwork?.isAccountSupported ]);
 
   const handleTogglerClick = React.useCallback(() => {
     setCollapsedState((flag) => !flag);
@@ -40,16 +47,19 @@ const NavigationDesktop = () => {
     borderColor: useColorModeValue('blackAlpha.200', 'whiteAlpha.200'),
   };
 
+  const isExpanded = isCollapsed === false;
+
   return (
     <Flex
+      display={{ base: 'none', lg: 'flex' }}
       position="relative"
       flexDirection="column"
       alignItems="flex-start"
       borderRight="1px solid"
       borderColor={ containerBorderColor }
-      px={ isCollapsed ? 4 : 6 }
+      px={{ lg: isExpanded ? 6 : 4, xl: isCollapsed ? 4 : 6 }}
       py={ 12 }
-      width={ isCollapsed ? '92px' : '229px' }
+      width={{ lg: isExpanded ? '229px' : '92px', xl: isCollapsed ? '92px' : '229px' }}
       { ...getDefaultTransitionProps({ transitionProperty: 'width, padding' }) }
     >
       <Box
@@ -86,12 +96,12 @@ const NavigationDesktop = () => {
         _hover={{ color: 'blue.400' }}
         borderRadius="base"
         { ...chevronIconStyles }
-        transform={ isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }
+        transform={{ lg: isExpanded ? 'rotate(0)' : 'rotate(180deg)', xl: isCollapsed ? 'rotate(180deg)' : 'rotate(0)' }}
         { ...getDefaultTransitionProps({ transitionProperty: 'transform, left' }) }
         transformOrigin="center"
         position="absolute"
         top="104px"
-        left={ isCollapsed ? '80px' : '216px' }
+        left={{ lg: isExpanded ? '216px' : '80px', xl: isCollapsed ? '80px' : '216px' }}
         cursor="pointer"
         onClick={ handleTogglerClick }
       />

ui/snippets/networkMenu/NetworkLogo.tsx

@@ -57,7 +57,7 @@ const NetworkLogo = ({ isCollapsed, onClick }: Props) => {
     <NextLink href={ href } passHref>
       <Box
         as="a"
-        width={ isCollapsed ? '0' : '113px' }
+        width={{ base: '113px', lg: isCollapsed === false ? '113px' : 0, xl: isCollapsed ? '0' : '113px' }}
         display="inline-flex"
         overflow="hidden"
         onClick={ onClick }

ui/snippets/networkMenu/NetworkMenu.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import NetworkMenuButton from './NetworkMenuButton';
 import NetworkMenuContentDesktop from './NetworkMenuContentDesktop';
 interface Props {
-  isCollapsed: boolean;
+  isCollapsed?: boolean;
 }
 
 const NetworkMenu = ({ isCollapsed }: Props) => {
@@ -13,7 +13,7 @@ const NetworkMenu = ({ isCollapsed }: Props) => {
       { ({ isOpen }) => (
         <>
           <PopoverTrigger>
-            <Box marginLeft={ isCollapsed ? '0px' : '7px' }>
+            <Box marginLeft={{ base: '7px', lg: isCollapsed === false ? '7px' : '0px', xl: isCollapsed ? '0px' : '7px' }}>
               <NetworkMenuButton isActive={ isOpen }/>
             </Box>
           </PopoverTrigger>

ui/snippets/searchBar/SearchBar.tsx

 import type { ChangeEvent, FormEvent } from 'react';
 import React from 'react';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 import useLink from 'lib/link/useLink';
 
 import SearchBarDesktop from './SearchBarDesktop';
@@ -10,7 +9,6 @@ import SearchBarMobile from './SearchBarMobile';
 const SearchBar = () => {
   const [ value, setValue ] = React.useState('');
   const link = useLink();
-  const isMobile = useIsMobile();
 
   const handleChange = React.useCallback((event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
@@ -22,14 +20,11 @@ const SearchBar = () => {
     window.location.assign(url);
   }, [ link, value ]);
 
-  if (isMobile) {
-    return (
-      <SearchBarMobile onChange={ handleChange } onSubmit={ handleSubmit }/>
-    );
-  }
-
   return (
-    <SearchBarDesktop onChange={ handleChange } onSubmit={ handleSubmit }/>
+    <>
+      <SearchBarDesktop onChange={ handleChange } onSubmit={ handleSubmit }/>
+      <SearchBarMobile onChange={ handleChange } onSubmit={ handleSubmit }/>
+    </>
   );
 };
 

ui/snippets/searchBar/SearchBarDesktop.tsx

-import { InputGroup, Input, InputLeftAddon, InputLeftElement, Icon, useColorModeValue } from '@chakra-ui/react';
+import { InputGroup, Input, InputLeftAddon, InputLeftElement, Icon, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 import type { ChangeEvent, FormEvent } from 'react';
 
@@ -11,7 +11,7 @@ interface Props {
 
 const SearchBarDesktop = ({ onChange, onSubmit }: Props) => {
   return (
-    <form noValidate onSubmit={ onSubmit }>
+    <chakra.form noValidate onSubmit={ onSubmit } display={{ base: 'none', lg: 'block' }} w="100%">
       <InputGroup>
         <InputLeftAddon w="111px">All filters</InputLeftAddon>
         <InputLeftElement w={ 6 } ml="132px" mr={ 2.5 }>
@@ -25,7 +25,7 @@ const SearchBarDesktop = ({ onChange, onSubmit }: Props) => {
           borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
         />
       </InputGroup>
-    </form>
+    </chakra.form>
   );
 };
 

ui/snippets/searchBar/SearchBarMobile.tsx

@@ -61,6 +61,8 @@ const SearchBarMobile = ({ onChange, onSubmit }: Props) => {
       transform={ isVisible ? 'translateY(0)' : 'translateY(-100%)' }
       transitionProperty="transform"
       transitionDuration="slow"
+      display={{ base: 'block', lg: 'none' }}
+      w="100%"
     >
       <InputGroup size="sm">
         <InputLeftElement >

ui/tx/internals/TxInternalsFilter.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 
 import type { TxInternalsType } from 'types/api/tx';
 
-import useIsMobile from 'lib/hooks/useIsMobile';
 import FilterButton from 'ui/shared/FilterButton';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -15,14 +14,12 @@ interface Props {
 
 const TxInternalsFilter = ({ onFilterChange, defaultFilters, appliedFiltersNum }: Props) => {
   const { isOpen, onToggle, onClose } = useDisclosure();
-  const isMobile = useIsMobile();
 
   return (
     <Popover isOpen={ isOpen } onClose={ onClose } placement="bottom-start" isLazy>
       <PopoverTrigger>
         <FilterButton
           isActive={ isOpen || Number(appliedFiltersNum) > 0 }
-          isCollapsed={ isMobile }
           onClick={ onToggle }
           appliedFiltersNum={ appliedFiltersNum }
         />

ui/txs/TxsContent.tsx

-import { Box, HStack } from '@chakra-ui/react';
+import { Box, HStack, Show } from '@chakra-ui/react';
 import React, { useCallback, useEffect, useState } from 'react';
 
 import type { Sort } from 'types/client/txs-sort';
 
 import { txs } from 'data/txs';
-import useIsMobile from 'lib/hooks/useIsMobile';
 import FilterButton from 'ui/shared/FilterButton';
 import FilterInput from 'ui/shared/FilterInput';
 import Pagination from 'ui/shared/Pagination';
@@ -18,8 +17,6 @@ type Props = {
 }
 
 const TxsContent = ({ isPending }: Props) => {
-  const isMobile = useIsMobile();
-
   const [ sorting, setSorting ] = useState<Sort>();
   const [ sortedTxs, setSortedTxs ] = useState(txs);
 
@@ -75,15 +72,15 @@ const TxsContent = ({ isPending }: Props) => {
         { /* TODO */ }
         <FilterButton
           isActive={ false }
-          isCollapsed={ isMobile }
           // eslint-disable-next-line react/jsx-no-bind
           onClick={ () => {} }
           appliedFiltersNum={ 0 }
         />
         <SortButton
-        // eslint-disable-next-line react/jsx-no-bind
+          // eslint-disable-next-line react/jsx-no-bind
           handleSort={ () => {} }
           isSortActive={ Boolean(sorting) }
+          display={{ base: 'block', lg: 'none' }}
         />
         <FilterInput
           // eslint-disable-next-line react/jsx-no-bind
@@ -93,11 +90,10 @@ const TxsContent = ({ isPending }: Props) => {
           placeholder="Search by addresses, hash, method..."
         />
       </HStack>
-      { isMobile ?
-        sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) :
-        <TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/> }
+      <Show below="lg">{ sortedTxs.map(tx => <TxsListItem tx={ tx } key={ tx.hash }/>) }</Show>
+      <Show above="lg"><TxsTable txs={ sortedTxs } sort={ sort } sorting={ sorting }/></Show>
       <Box mx={{ base: 0, lg: 6 }} my={{ base: 6, lg: 3 }}>
-        <Pagination currentPage={ 1 } isMobile={ isMobile }/>
+        <Pagination currentPage={ 1 }/>
       </Box>
     </>
   );

ui/txs/TxsTableItem.tsx

@@ -13,8 +13,8 @@ import {
   PopoverContent,
   PopoverBody,
   Portal,
-  useBreakpointValue,
   useColorModeValue,
+  Show,
 } from '@chakra-ui/react';
 import React from 'react';
 
@@ -37,8 +37,6 @@ import TxType from './TxType';
 const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
   const link = useLink();
 
-  const isLargeScreen = useBreakpointValue({ base: false, xl: true });
-
   const addressFrom = (
     <Address>
       <Tooltip label={ tx.address_from.type }>
@@ -108,19 +106,18 @@ const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
       <Td>
         <Link href={ link('block', { id: tx.block_num.toString() }) }>{ tx.block_num }</Link>
       </Td>
-      { isLargeScreen ? (
-        <>
-          <Td>
-            { addressFrom }
-          </Td>
-          <Td>
-            <Icon as={ rightArrowIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
-          </Td>
-          <Td>
-            { addressTo }
-          </Td>
-        </>
-      ) : (
+      <Show above="xl">
+        <Td>
+          { addressFrom }
+        </Td>
+        <Td>
+          <Icon as={ rightArrowIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+        </Td>
+        <Td>
+          { addressTo }
+        </Td>
+      </Show>
+      <Show below="xl">
         <Td colSpan={ 3 }>
           <Box>
             { addressFrom }
@@ -135,7 +132,7 @@ const TxsTableItem = ({ tx }: {tx: ArrayElement<typeof txs>}) => {
             { addressTo }
           </Box>
         </Td>
-      ) }
+      </Show>
       <Td isNumeric>
         { tx.amount.value.toFixed(8) }
       </Td>