fix SearchBar component

eslint.config.mjs

@@ -29,7 +29,7 @@ const RESTRICTED_MODULES = {
       name: '@chakra-ui/react',
       importNames: [
         'Menu', 'useToast', 'useDisclosure', 'useClipboard', 'Tooltip', 'Skeleton', 'IconButton', 'Button',
-        'Image',
+        'Image', 'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverBody', 'PopoverFooter',
       ],
       message: 'Please use corresponding component or hook from ui/shared/chakra component instead',
     },

toolkit/chakra/image.tsx

-import type { ImageProps as ChakraImageProps } from '@chakra-ui/react';
+/* eslint-disable no-restricted-imports */
+import type { BoxProps, ImageProps as ChakraImageProps } from '@chakra-ui/react';
 import { Image as ChakraImage } from '@chakra-ui/react';
 import React from 'react';
 
@@ -6,11 +7,12 @@ import { Skeleton } from './skeleton';
 
 export interface ImageProps extends ChakraImageProps {
   fallback?: React.ReactNode;
+  containerProps?: BoxProps;
 }
 
 export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
   function Image(props, ref) {
-    const { fallback, src, ...rest } = props;
+    const { fallback, src, containerProps, ...rest } = props;
 
     const [ loading, setLoading ] = React.useState(true);
     const [ error, setError ] = React.useState(false);
@@ -33,7 +35,7 @@ export const Image = React.forwardRef<HTMLImageElement, ImageProps>(
     }
 
     return (
-      <Skeleton loading={ loading }>
+      <Skeleton loading={ loading } { ...containerProps }>
         <ChakraImage
           ref={ ref }
           src={ src }

toolkit/chakra/popover.tsx

+/* eslint-disable no-restricted-imports */
 import { Popover as ChakraPopover, Portal } from '@chakra-ui/react';
 import * as React from 'react';
 
@@ -53,6 +54,7 @@ export const PopoverCloseTrigger = React.forwardRef<
 
 export const PopoverRoot = (props: ChakraPopover.RootProps) => {
   const positioning = {
+    placement: 'bottom-start' as const,
     ...props.positioning,
     offset: {
       mainAxis: 4,

ui/shared/ClearButton.tsx

-import { chakra, IconButton, useColorModeValue } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import { IconButton } from 'toolkit/chakra/icon-button';
 import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
@@ -10,21 +11,22 @@ interface Props {
 }
 
 const ClearButton = ({ onClick, isDisabled, className }: Props) => {
-  const iconColor = useColorModeValue('gray.300', 'gray.600');
-  const iconColorHover = useColorModeValue('gray.200', 'gray.500');
-
   return (
     <IconButton
-      isDisabled={ isDisabled }
+      disabled={ isDisabled }
       className={ className }
-      colorScheme="none"
       aria-label="Clear input"
       title="Clear input"
-      boxSize={ 6 }
-      icon={ <IconSvg name="status/error" boxSize={ 3 } color={ iconColor } _hover={{ color: iconColorHover }}/> }
       size="sm"
       onClick={ onClick }
-    />
+    >
+      <IconSvg
+        name="status/error"
+        boxSize={ 3 }
+        color={{ _light: 'gray.300', _dark: 'gray.600' }}
+        _hover={{ color: { _light: 'gray.200', _dark: 'gray.500' } }}
+      />
+    </IconButton>
   );
 };
 

ui/shared/TokenLogoPlaceholder.tsx

-import { chakra, useColorModeValue } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import IconSvg from 'ui/shared/IconSvg';
 
 const TokenLogoPlaceholder = ({ className }: { className?: string }) => {
-  const bgColor = useColorModeValue('gray.200', 'gray.600');
-  const color = useColorModeValue('gray.400', 'gray.200');
-
   return (
     <IconSvg
       className={ className }
       fontWeight={ 600 }
-      bgColor={ bgColor }
-      color={ color }
+      bgColor={{ _light: 'gray.200', _dark: 'gray.600' }}
+      color={{ _light: 'gray.400', _dark: 'gray.200' }}
       borderRadius="base"
       name="token-placeholder"
       transitionProperty="background-color,color"

ui/shared/ad/CoinzillaTextAd.tsx

-import { Box, Image, Link, Text, chakra, Skeleton } from '@chakra-ui/react';
+import { Box, Link, Text, chakra } from '@chakra-ui/react';
 import React, { useEffect } from 'react';
 
 import { ndash } from 'lib/html-entities';
 import isBrowser from 'lib/isBrowser';
+import { Image } from 'toolkit/chakra/image';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 
 type AdData = {
   ad: {
@@ -78,9 +80,13 @@ const CoinzillaTextAd = ({ className }: { className?: string }) => {
         Ads:
       </Text>
       { urlObject.hostname === 'nifty.ink' ?
-        <Text as="span" mr={ 1 }>🎨</Text> :
-        <Image src={ adData.ad.thumbnail } width="20px" height="20px" mb="-4px" mr={ 1 } display="inline" alt=""/>
-      }
+        <Text as="span" mr={ 1 }>🎨</Text> : (
+          <Image
+            src={ adData.ad.thumbnail }
+            containerProps={{ width: '20px', height: '20px', mb: '-4px', mr: 1, display: 'inline-block' }}
+            alt=""
+          />
+        ) }
       <Text as="span" whiteSpace="pre-wrap">{ `${ adData.ad.name } ${ ndash } ${ adData.ad.description_short } ` }</Text>
       <Link href={ adData.ad.url }>{ adData.ad.cta_button }</Link>
     </Box>

ui/shared/entities/token/TokenEntity.tsx

-import type { As } from '@chakra-ui/react';
-import { Image, Skeleton, chakra } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TokenInfo } from 'types/api/token';
 
 import { route } from 'nextjs-routes';
 
+import { Image } from 'toolkit/chakra/image';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import * as EntityBase from 'ui/shared/entities/base/components';
 import TokenLogoPlaceholder from 'ui/shared/TokenLogoPlaceholder';
 import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
@@ -48,11 +49,15 @@ const Icon = (props: IconProps) => {
   return (
     <Image
       { ...styles }
-      className={ props.className }
+      containerProps={{
+        className: props.className,
+        ...styles,
+      }}
       src={ props.token.icon_url ?? undefined }
       alt={ `${ props.token.name || 'token' } logo` }
       fallback={ <TokenLogoPlaceholder { ...styles }/> }
-      fallbackStrategy={ props.token.icon_url ? 'onError' : 'beforeLoadOrError' }
+      // TODO @tom2drum implement fallbackStrategy in Image component
+      // fallbackStrategy={ props.token.icon_url ? 'onError' : 'beforeLoadOrError' }
     />
   );
 };
@@ -69,7 +74,7 @@ const Content = chakra((props: ContentProps) => {
   return (
     <TruncatedTextTooltip label={ nameString }>
       <Skeleton
-        isLoaded={ !props.isLoading }
+        loading={ props.isLoading }
         display="inline-block"
         whiteSpace="nowrap"
         overflow="hidden"
@@ -93,7 +98,7 @@ const Symbol = (props: SymbolProps) => {
 
   return (
     <Skeleton
-      isLoaded={ !props.isLoading }
+      loading={ props.isLoading }
       display="inline-flex"
       alignItems="center"
       maxW="20%"
@@ -152,7 +157,7 @@ const TokenEntity = (props: EntityProps) => {
   );
 };
 
-export default React.memo(chakra<As, EntityProps>(TokenEntity));
+export default React.memo(chakra(TokenEntity));
 
 export {
   Container,

ui/shared/layout/Layout.tsx

@@ -20,7 +20,7 @@ const LayoutDefault = ({ children }: Props) => {
         <Layout.SideBar/>
         <Layout.MainColumn>
           <HeaderAlert/>
-          { /* <HeaderDesktop/> */ }
+          <HeaderDesktop/>
           <AppErrorBoundary>
             <Layout.Content>
               { children }

ui/snippets/networkMenu/NetworkMenuContentDesktop.tsx

-import { Tabs, VStack, Skeleton, Flex, Box } from '@chakra-ui/react';
+import { Tabs, VStack, Flex, Box } from '@chakra-ui/react';
 import React from 'react';
 
 import type { FeaturedNetwork, NetworkGroup } from 'types/networks';
 
 import { PopoverBody, PopoverContent } from 'toolkit/chakra/popover';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 
 import NetworkMenuLink from './NetworkMenuLink';
 

ui/snippets/searchBar/SearchBar.tsx

-import {
-  Box,
-  Portal,
-  PopoverTrigger,
-  PopoverContent,
-  PopoverBody,
-  PopoverFooter,
-  useDisclosure,
-  useOutsideClick,
-} from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
+import { useClickAway } from '@uidotdev/usehooks';
 import _debounce from 'lodash/debounce';
 import { useRouter } from 'next/router';
 import type { FormEvent } from 'react';
@@ -20,7 +12,8 @@ import { route } from 'nextjs-routes';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as mixpanel from 'lib/mixpanel/index';
 import { getRecentSearchKeywords, saveToRecentKeywords } from 'lib/recentSearchKeywords';
-import Popover from 'ui/shared/chakra/Popover';
+import { PopoverBody, PopoverContent, PopoverFooter, PopoverRoot, PopoverTrigger } from 'toolkit/chakra/popover';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 
 import SearchBarBackdrop from './SearchBarBackdrop';
@@ -36,9 +29,8 @@ type Props = {
 const SCROLL_CONTAINER_ID = 'search_bar_popover_content';
 
 const SearchBar = ({ isHomepage }: Props) => {
-  const { isOpen, onClose, onOpen } = useDisclosure();
+  const { open, onClose, onOpen } = useDisclosure();
   const inputRef = React.useRef<HTMLFormElement>(null);
-  const menuRef = React.useRef<HTMLDivElement>(null);
   const scrollRef = React.useRef<HTMLDivElement>(null);
   const menuWidth = React.useRef<number>(0);
   const isMobile = useIsMobile();
@@ -80,7 +72,11 @@ const SearchBar = ({ isHomepage }: Props) => {
     }
   }, [ handelHide ]);
 
-  useOutsideClick({ ref: menuRef, handler: handleOutsideClick });
+  const menuRef = useClickAway<HTMLDivElement>(handleOutsideClick);
+
+  const handleOpenChange = React.useCallback(({ open }: { open: boolean }) => {
+    open && onOpen();
+  }, [ onOpen ]);
 
   const handleClear = React.useCallback(() => {
     handleSearchTermChange('');
@@ -126,13 +122,13 @@ const SearchBar = ({ isHomepage }: Props) => {
 
   return (
     <>
-      <Popover
-        isOpen={ isOpen && (searchTerm.trim().length > 0 || recentSearchKeywords.length > 0) }
+      <PopoverRoot
+        open={ open && (searchTerm.trim().length > 0 || recentSearchKeywords.length > 0) }
         autoFocus={ false }
-        onClose={ onClose }
-        placement="bottom-start"
-        offset={ isMobile && !isHomepage ? [ 12, -4 ] : [ 0, 8 ] }
-        isLazy
+        onOpenChange={ handleOpenChange }
+        positioning={{ offset: isMobile && !isHomepage ? { mainAxis: -4, crossAxis: 12 } : { mainAxis: 8, crossAxis: 0 } }}
+        lazyMount
+        closeOnInteractOutside={ false }
       >
         <PopoverTrigger>
           <SearchBarInput
@@ -144,54 +140,52 @@ const SearchBar = ({ isHomepage }: Props) => {
             onClear={ handleClear }
             isHomepage={ isHomepage }
             value={ searchTerm }
-            isSuggestOpen={ isOpen }
+            isSuggestOpen={ open }
           />
         </PopoverTrigger>
-        <Portal>
-          <PopoverContent
-            w={ `${ menuWidth.current }px` }
-            ref={ menuRef }
-            overflow="hidden"
+        <PopoverContent
+          w={ `${ menuWidth.current }px` }
+          ref={ menuRef }
+          overflow="hidden"
+        >
+          <PopoverBody
+            p={ 0 }
+            color="chakra-body-text"
           >
-            <PopoverBody
-              p={ 0 }
-              color="chakra-body-text"
+            <Box
+              maxH="50vh"
+              overflowY="auto"
+              id={ SCROLL_CONTAINER_ID }
+              ref={ scrollRef }
+              as={ Element }
+              px={ 4 }
             >
-              <Box
-                maxH="50vh"
-                overflowY="auto"
-                id={ SCROLL_CONTAINER_ID }
-                ref={ scrollRef }
-                as={ Element }
-                px={ 4 }
+              { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
+                <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
+              ) }
+              { searchTerm.trim().length > 0 && (
+                <SearchBarSuggest
+                  query={ query }
+                  searchTerm={ debouncedSearchTerm }
+                  onItemClick={ handleItemClick }
+                  containerId={ SCROLL_CONTAINER_ID }
+                />
+              ) }
+            </Box>
+          </PopoverBody>
+          { searchTerm.trim().length > 0 && query.data && query.data.length >= 50 && (
+            <PopoverFooter>
+              <LinkInternal
+                href={ route({ pathname: '/search-results', query: { q: searchTerm } }) }
+                fontSize="sm"
               >
-                { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
-                  <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>
-                ) }
-                { searchTerm.trim().length > 0 && (
-                  <SearchBarSuggest
-                    query={ query }
-                    searchTerm={ debouncedSearchTerm }
-                    onItemClick={ handleItemClick }
-                    containerId={ SCROLL_CONTAINER_ID }
-                  />
-                ) }
-              </Box>
-            </PopoverBody>
-            { searchTerm.trim().length > 0 && query.data && query.data.length >= 50 && (
-              <PopoverFooter>
-                <LinkInternal
-                  href={ route({ pathname: '/search-results', query: { q: searchTerm } }) }
-                  fontSize="sm"
-                >
-                  View all results
-                </LinkInternal>
-              </PopoverFooter>
-            ) }
-          </PopoverContent>
-        </Portal>
-      </Popover>
-      <SearchBarBackdrop isOpen={ isOpen }/>
+                View all results
+              </LinkInternal>
+            </PopoverFooter>
+          ) }
+        </PopoverContent>
+      </PopoverRoot>
+      <SearchBarBackdrop isOpen={ open }/>
     </>
   );
 };

ui/snippets/searchBar/SearchBarBackdrop.tsx

-import { Box, useColorModeValue } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 interface Props {
@@ -6,8 +6,6 @@ interface Props {
 }
 
 const SearchBarBackdrop = ({ isOpen }: Props) => {
-  const backdropBgColor = useColorModeValue('blackAlpha.400', 'blackAlpha.600');
-
   return (
     <Box
       position="fixed"
@@ -15,7 +13,7 @@ const SearchBarBackdrop = ({ isOpen }: Props) => {
       left={ 0 }
       w="100vw"
       h="100vh"
-      bgColor={ backdropBgColor }
+      bgColor={{ _light: 'blackAlpha.400', _dark: 'blackAlpha.600' }}
       zIndex="overlay"
       display={{ base: 'none', lg: isOpen ? 'block' : 'none' }}
     />

ui/snippets/searchBar/SearchBarInput.tsx

-import { InputGroup, Input, InputLeftElement, chakra, InputRightElement, Center } from '@chakra-ui/react';
+import { chakra, Center } from '@chakra-ui/react';
 import throttle from 'lodash/throttle';
 import React from 'react';
 import type { ChangeEvent, FormEvent, FocusEvent } from 'react';
 
-import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { useScrollDirection } from 'lib/contexts/scrollDirection';
 import useIsMobile from 'lib/hooks/useIsMobile';
+import { Input } from 'toolkit/chakra/input';
+import { InputGroup } from 'toolkit/chakra/input-group';
 import ClearButton from 'ui/shared/ClearButton';
 import IconSvg from 'ui/shared/IconSvg';
-
 interface Props {
   onChange: (value: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
@@ -98,10 +98,17 @@ const SearchBarInput = (
     };
   }, [ handleKeyPress ]);
 
-  const bgColor = useColorModeValue('white', 'black');
   const transformMobile = scrollDirection !== 'down' ? 'translateY(0)' : 'translateY(-100%)';
 
-  const rightElement = (() => {
+  const startElement = (
+    <IconSvg
+      name="search"
+      boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }}
+      color={{ _light: 'blackAlpha.600', _dark: 'whiteAlpha.600' }}
+    />
+  );
+
+  const endElement = (() => {
     if (value) {
       return <ClearButton onClick={ onClear }/>;
     }
@@ -132,9 +139,8 @@ const SearchBarInput = (
       noValidate
       onSubmit={ onSubmit }
       onBlur={ onBlur }
-      onFocus={ onFocus }
       w="100%"
-      backgroundColor={ bgColor }
+      backgroundColor={{ _light: 'white', _dark: 'black' }}
       borderRadius={{ base: isHomepage ? 'base' : 'none', lg: 'base' }}
       position={{ base: isHomepage ? 'static' : 'absolute', lg: 'relative' }}
       top={{ base: isHomepage ? 0 : 55, lg: 0 }}
@@ -149,7 +155,24 @@ const SearchBarInput = (
       transitionDuration="normal"
       transitionTimingFunction="ease"
     >
-      <InputGroup size={{ base: 'sm', lg: isHomepage ? 'sm_md' : 'sm' }}>
+      <InputGroup
+        startElement={ startElement }
+        startOffset={{ base: isHomepage ? '50px' : '38px', lg: '50px' }}
+        endElement={ endElement }
+      >
+        <Input
+          placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
+          value={ value }
+          onChange={ handleChange }
+          border={ isHomepage ? 'none' : '2px solid' }
+          borderColor={{ _light: 'blackAlpha.100', _dark: 'whiteAlpha.200' }}
+          color={{ _light: 'black', _dark: 'white' }}
+          _hover={{ borderColor: 'input.border.hover' }}
+          _focusWithin={{ _placeholder: { color: 'gray.300' }, borderColor: 'input.border.focus', _hover: { borderColor: 'input.border.focus' } }}
+        />
+      </InputGroup>
+      { /* TODO @tom2drum migrate icon styles */ }
+      { /* <InputGroup size={{ base: 'sm', lg: isHomepage ? 'sm_md' : 'sm' }}>
         <InputLeftElement w={{ base: isHomepage ? 6 : 4, lg: 6 }} ml={{ base: isHomepage ? 4 : 3, lg: 4 }} h="100%">
           <IconSvg name="search" boxSize={{ base: isHomepage ? 6 : 4, lg: 6 }} color={ useColorModeValue('blackAlpha.600', 'whiteAlpha.600') }/>
         </InputLeftElement>
@@ -175,7 +198,7 @@ const SearchBarInput = (
         <InputRightElement top={{ base: 2, lg: isHomepage ? 3 : 2 }} right={ 2 }>
           { rightElement }
         </InputRightElement>
-      </InputGroup>
+      </InputGroup> */ }
     </chakra.form>
   );
 };

ui/snippets/searchBar/SearchBarRecentKeywords.tsx

-import { Box, Flex, Link, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Flex, Link, Text } from '@chakra-ui/react';
 import React from 'react';
 
 import useIsMobile from 'lib/hooks/useIsMobile';
@@ -14,7 +14,6 @@ type Props = {
 
 const SearchBarSuggest = ({ onClick, onClear }: Props) => {
   const isMobile = useIsMobile();
-  const bgHoverColor = useColorModeValue('blue.50', 'gray.800');
 
   const [ keywords, setKeywords ] = React.useState<Array<string>>(getRecentSearchKeywords());
 
@@ -49,7 +48,7 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
         </Box>
       ) }
       <Flex mb={ 3 } justifyContent="space-between" fontSize="sm">
-        <Text fontWeight={ 600 } variant="secondary">Recent</Text>
+        <Text fontWeight={ 600 } color="text.secondary">Recent</Text>
         <Link onClick={ clearKeywords }>Clear all</Link>
       </Flex>
       { keywords.map(kw => (
@@ -63,7 +62,7 @@ const SearchBarSuggest = ({ onClick, onClear }: Props) => {
             borderBottomWidth: '0',
           }}
           _hover={{
-            bgColor: bgHoverColor,
+            bgColor: { _light: 'blue.50', _dark: 'gray.800' },
           }}
           fontSize="sm"
           _first={{

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx

-import { Box, Tab, TabList, Tabs, Text, useColorModeValue } from '@chakra-ui/react';
+import { Box, Text, Tabs } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import throttle from 'lodash/throttle';
 import React from 'react';
@@ -13,7 +13,7 @@ import * as regexp from 'lib/regexp';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
-import type { ApiCategory, ItemsCategoriesMap } from 'ui/shared/search/utils';
+import type { ApiCategory, Category, ItemsCategoriesMap } from 'ui/shared/search/utils';
 import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
 
 import SearchBarSuggestApp from './SearchBarSuggestApp';
@@ -36,7 +36,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
   const categoriesRefs = React.useRef<Array<HTMLParagraphElement>>([]);
   const tabsRef = React.useRef<HTMLDivElement>(null);
 
-  const [ tabIndex, setTabIndex ] = React.useState(0);
+  const [ currentTab, setCurrentTab ] = React.useState<Category | undefined>(undefined);
 
   const handleScroll = React.useCallback(() => {
     const container = document.getElementById(containerId);
@@ -45,12 +45,20 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     }
     const topLimit = container.getBoundingClientRect().y + (tabsRef.current?.clientHeight || 0) + 24;
     if (categoriesRefs.current[categoriesRefs.current.length - 1].getBoundingClientRect().y <= topLimit) {
-      setTabIndex(categoriesRefs.current.length - 1);
+      const lastCategory = categoriesRefs.current[categoriesRefs.current.length - 1];
+      const lastCategoryId = lastCategory.getAttribute('data-id');
+      if (lastCategoryId) {
+        setCurrentTab(lastCategoryId as Category);
+      }
       return;
     }
     for (let i = 0; i < categoriesRefs.current.length - 1; i++) {
       if (categoriesRefs.current[i].getBoundingClientRect().y <= topLimit && categoriesRefs.current[i + 1].getBoundingClientRect().y > topLimit) {
-        setTabIndex(i);
+        const currentCategory = categoriesRefs.current[i];
+        const currentCategoryId = currentCategory.getAttribute('data-id');
+        if (currentCategoryId) {
+          setCurrentTab(currentCategoryId as Category);
+        }
         break;
       }
     }
@@ -106,11 +114,13 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
 
   React.useEffect(() => {
     categoriesRefs.current = Array(Object.keys(itemsGroups).length).fill('').map((_, i) => categoriesRefs.current[i] || React.createRef());
+    const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
+    setCurrentTab(resultCategories[0]?.id);
   }, [ itemsGroups ]);
 
-  const scrollToCategory = React.useCallback((index: number) => () => {
-    setTabIndex(index);
-    scroller.scrollTo(`cat_${ index }`, {
+  const handleTabsValueChange = React.useCallback(({ value }: { value: string }) => {
+    setCurrentTab(value as Category);
+    scroller.scrollTo(`cat_${ value }`, {
       duration: 250,
       smooth: true,
       offset: -(tabsRef.current?.clientHeight || 0),
@@ -118,8 +128,6 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     });
   }, [ containerId ]);
 
-  const bgColor = useColorModeValue('white', 'gray.900');
-
   const content = (() => {
     if (query.isPending || marketplaceApps.isPlaceholderData) {
       return <ContentLoader text="We are searching, please wait... " fontSize="sm"/>;
@@ -142,30 +150,39 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     return (
       <>
         { resultCategories.length > 1 && (
-          <Box position="sticky" top="0" width="100%" background={ bgColor } py={ 5 } my={ -5 } ref={ tabsRef }>
-            <Tabs variant="outline" colorScheme="gray" size="sm" index={ tabIndex }>
-              <TabList columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
-                { resultCategories.map((cat, index) => (
-                  <Tab key={ cat.id } onClick={ scrollToCategory(index) } { ...(tabIndex === index ? { 'data-selected': 'true' } : {}) }>
+          <Box position="sticky" top="0" width="100%" background={{ _light: 'white', _dark: 'gray.900' }} py={ 5 } my={ -5 } ref={ tabsRef }>
+            <Tabs.Root
+              variant="secondary"
+              size="sm"
+              value={ currentTab }
+              onValueChange={ handleTabsValueChange }
+            >
+              <Tabs.List columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
+                { resultCategories.map((cat) => (
+                  <Tabs.Trigger
+                    key={ cat.id }
+                    value={ cat.id }
+                  >
                     { cat.title }
-                  </Tab>
+                  </Tabs.Trigger>
                 )) }
-              </TabList>
-            </Tabs>
+              </Tabs.List>
+            </Tabs.Root>
           </Box>
         ) }
-        { resultCategories.map((cat, indx) => {
+        { resultCategories.map((cat, index) => {
           return (
-            <Element name={ `cat_${ indx }` } key={ cat.id }>
+            <Element name={ `cat_${ cat.id }` } key={ cat.id }>
               <Text
-                fontSize="sm"
+                textStyle="sm"
                 fontWeight={ 600 }
-                variant="secondary"
+                color="text.secondary"
                 mt={ 6 }
                 mb={ 3 }
                 ref={ (el: HTMLParagraphElement) => {
-                  categoriesRefs.current[indx] = el;
+                  categoriesRefs.current[index] = el;
                 } }
+                data-id={ cat.id }
               >
                 { cat.title }
               </Text>

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

@@ -34,7 +34,7 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm, addressFormat }:
   const nameEl = addressName && (
     <Flex alignItems="center">
       <Text
-        variant="secondary"
+        color="text.secondary"
         overflow="hidden"
         whiteSpace="nowrap"
         textOverflow="ellipsis"

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

-import { Image, Flex, Text, useColorModeValue } from '@chakra-ui/react';
+import { Flex, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
 import highlightText from 'lib/highlightText';
+import { useColorModeValue } from 'toolkit/chakra/color-mode';
+import { Image } from 'toolkit/chakra/image';
 import IconSvg from 'ui/shared/IconSvg';
 
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
@@ -45,7 +47,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
             { data.external && <IconSvg name="link_external" color="icon_link_external" boxSize={ 3 } verticalAlign="middle" flexShrink={ 0 }/> }
           </Flex>
           <Text
-            variant="secondary"
+            color="text.secondary"
             overflow="hidden"
             textOverflow="ellipsis"
             style={{
@@ -73,7 +75,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
           <span dangerouslySetInnerHTML={{ __html: highlightText(data.title, searchTerm) }}/>
         </Text>
         <Text
-          variant="secondary"
+          color="text.secondary"
           overflow="hidden"
           whiteSpace="nowrap"
           textOverflow="ellipsis"

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx

-import { Text, Flex, Grid, Tag } from '@chakra-ui/react';
+import { Text, Flex, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ItemsProps } from './types';
@@ -6,6 +6,7 @@ import type { SearchResultBlock } from 'types/client/search';
 
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
+import { Tag } from 'toolkit/chakra/tag';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
@@ -26,7 +27,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
   );
   const hash = !isFutureBlock ? (
     <Text
-      variant="secondary"
+      color="text.secondary"
       overflow="hidden"
       whiteSpace="nowrap"
       as={ shouldHighlightHash ? 'mark' : 'span' }
@@ -36,7 +37,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
     </Text>
   ) : null;
   const date = !isFutureBlock ? dayjs(data.timestamp).format('llll') : undefined;
-  const futureBlockText = <Text variant="secondary">Learn estimated time for this block to be created.</Text>;
+  const futureBlockText = <Text color="text.secondary">Learn estimated time for this block to be created.</Text>;
 
   if (isMobile) {
     return (
@@ -48,7 +49,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
           { data.block_type === 'uncle' && <Tag ml="auto">Uncle</Tag> }
         </Flex>
         { hash }
-        { isFutureBlock ? futureBlockText : <Text variant="secondary">{ date }</Text> }
+        { isFutureBlock ? futureBlockText : <Text color="text.secondary">{ date }</Text> }
       </>
     );
   }
@@ -64,7 +65,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: ItemsProps<Search
         { data.block_type === 'uncle' && <Tag flexShrink={ 0 }>Uncle</Tag> }
         { isFutureBlock ? futureBlockText : hash }
       </Flex>
-      { date && <Text variant="secondary" textAlign="end">{ date }</Text> }
+      { date && <Text color="text.secondary" textAlign="end">{ date }</Text> }
     </Grid>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestDomain.tsx

@@ -29,7 +29,7 @@ const SearchBarSuggestDomain = ({ data, isMobile, searchTerm, addressFormat }: I
     <Text
       overflow="hidden"
       whiteSpace="nowrap"
-      variant="secondary"
+      color="text.secondary"
     >
       <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>
     </Text>
@@ -40,7 +40,7 @@ const SearchBarSuggestDomain = ({ data, isMobile, searchTerm, addressFormat }: I
   const expiresText = data.ens_info?.expiry_date ? ` expires ${ dayjs(data.ens_info.expiry_date).fromNow() }` : '';
   const ensNamesCount = data?.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }`;
   const additionalInfo = (
-    <Text variant="secondary" textAlign={ isMobile ? 'start' : 'end' }>
+    <Text color="text.secondary" textAlign={ isMobile ? 'start' : 'end' }>
       { data?.ens_info.names_count > 1 ? ensNamesCount : expiresText }
     </Text>
   );

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemLink.tsx

-import { chakra, useColorModeValue } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 type Props = {
@@ -8,9 +8,10 @@ type Props = {
   children: React.ReactNode;
 };
 
-const SearchBarSuggestItemLink = ({ onClick, href, target, children }: Props) => {
+const SearchBarSuggestItemLink = React.forwardRef<HTMLAnchorElement, Props>(({ onClick, href, target, children }, ref) => {
   return (
     <chakra.a
+      ref={ ref }
       py={ 3 }
       px={ 1 }
       display="flex"
@@ -22,9 +23,9 @@ const SearchBarSuggestItemLink = ({ onClick, href, target, children }: Props) =>
         borderBottomWidth: '0',
       }}
       _hover={{
-        bgColor: useColorModeValue('blue.50', 'gray.800'),
+        bgColor: { _light: 'blue.50', _dark: 'gray.800' },
       }}
-      fontSize="sm"
+      textStyle="sm"
       _first={{
         mt: 2,
       }}
@@ -35,6 +36,6 @@ const SearchBarSuggestItemLink = ({ onClick, href, target, children }: Props) =>
       { children }
     </chakra.a>
   );
-};
+});
 
 export default SearchBarSuggestItemLink;

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx

@@ -28,7 +28,7 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm, addressFormat }: It
     <Text
       overflow="hidden"
       whiteSpace="nowrap"
-      variant="secondary"
+      color="text.secondary"
     >
       <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>
     </Text>

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

@@ -29,7 +29,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm, addressFormat }: It
   );
 
   const address = (
-    <Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
+    <Text color="text.secondary" whiteSpace="nowrap" overflow="hidden">
       <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>
     </Text>
   );

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx

@@ -24,7 +24,7 @@ const SearchBarSuggestTx = ({ data, isMobile }: ItemsProps<SearchResultTx>) => {
           { icon }
           { hash }
         </Flex>
-        <Text variant="secondary">{ date }</Text>
+        <Text color="text.secondary">{ date }</Text>
       </>
     );
   }
@@ -35,7 +35,7 @@ const SearchBarSuggestTx = ({ data, isMobile }: ItemsProps<SearchResultTx>) => {
         { icon }
         { hash }
       </Flex>
-      <Text variant="secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
+      <Text color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
     </Flex>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestUserOp.tsx

@@ -24,7 +24,7 @@ const SearchBarSuggestUserOp = ({ data, isMobile }: ItemsProps<SearchResultUserO
           { icon }
           { hash }
         </Flex>
-        <Text variant="secondary">{ date }</Text>
+        <Text color="text.secondary">{ date }</Text>
       </>
     );
   }
@@ -35,7 +35,7 @@ const SearchBarSuggestUserOp = ({ data, isMobile }: ItemsProps<SearchResultUserO
         { icon }
         { hash }
       </Flex>
-      <Text variant="secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
+      <Text color="text.secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
     </Flex>
   );
 };

ui/snippets/topBar/settings/Settings.tsx

@@ -16,7 +16,6 @@ const Settings = () => {
   return (
     <PopoverRoot
       positioning={{ placement: 'bottom-start' }}
-      lazyMount
       open={ open }
       onOpenChange={ onOpenChange }
     >