amends

toolkit/chakra/native-select.tsx

-'use client';
-
-import { NativeSelect as Select } from '@chakra-ui/react';
-import * as React from 'react';
-
-interface NativeSelectRootProps extends Select.RootProps {
-  icon?: React.ReactNode;
-}
-
-export const NativeSelectRoot = React.forwardRef<
-  HTMLDivElement,
-  NativeSelectRootProps
->(function NativeSelect(props, ref) {
-  const { icon, children, ...rest } = props;
-  return (
-    <Select.Root ref={ ref } { ...rest }>
-      { children }
-      <Select.Indicator>{ icon }</Select.Indicator>
-    </Select.Root>
-  );
-});
-
-interface NativeSelectItem {
-  value: string;
-  label: string;
-  disabled?: boolean;
-}
-
-interface NativeSelectField extends Select.FieldProps {
-  items?: Array<string | NativeSelectItem>;
-}
-
-export const NativeSelectField = React.forwardRef<
-  HTMLSelectElement,
-  NativeSelectField
->(function NativeSelectField(props, ref) {
-  const { items: itemsProp, children, ...rest } = props;
-
-  const items = React.useMemo(
-    () =>
-      itemsProp?.map((item) =>
-        typeof item === 'string' ? { label: item, value: item } : item,
-      ),
-    [ itemsProp ],
-  );
-
-  return (
-    <Select.Field ref={ ref } { ...rest }>
-      { children }
-      { items?.map((item) => (
-        <option key={ item.value } value={ item.value } disabled={ item.disabled }>
-          { item.label }
-        </option>
-      )) }
-    </Select.Field>
-  );
-});

toolkit/chakra/select.tsx

@@ -140,7 +140,7 @@ export const SelectValueText = React.forwardRef<
 
       const icon = (() => {
         if (item.icon) {
-          return typeof item.icon === 'string' ? <IconSvg name={ item.icon } boxSize={ 5 } flexShrink={ 0 } mr={ 1 }/> : item.icon;
+          return typeof item.icon === 'string' ? <IconSvg name={ item.icon } boxSize={ 5 } flexShrink={ 0 }/> : item.icon;
         }
 
         return null;
@@ -159,7 +159,7 @@ export const SelectValueText = React.forwardRef<
       return (
         <>
           { label }
-          <Flex display="inline-flex" alignItems="center" flexWrap="nowrap">
+          <Flex display="inline-flex" alignItems="center" flexWrap="nowrap" gap={ 1 }>
             { icon }
             <span style={{
               WebkitLineClamp: 1,

toolkit/theme/foundations/semanticTokens.ts

@@ -435,10 +435,8 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
       error: { value: '{colors.red.500}' },
     },
     icon: {
-      // TODO @tom2drum revise this colors
       backTo: { value: '{colors.gray.400}' },
       externalLink: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
-      content: { value: { _light: '{colors.gray.500}', _dark: '{colors.gray.300}' } },
       info: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
     },
     address: {

toolkit/theme/recipes/index.ts

@@ -12,7 +12,6 @@ import { recipe as input } from './input.recipe';
 import { recipe as link } from './link.recipe';
 import { recipe as list } from './list.recipe';
 import { recipe as menu } from './menu.recipe';
-import { recipe as nativeSelect } from './native-select.recipe';
 import { recipe as pinInput } from './pin-input.recipe';
 import { recipe as popover } from './popover.recipe';
 import { recipe as progressCircle } from './progress-circle.recipe';
@@ -53,7 +52,6 @@ export const slotRecipes = {
   field,
   list,
   menu,
-  nativeSelect,
   pinInput,
   popover,
   progressCircle,

toolkit/theme/recipes/native-select.recipe.ts

-import { defineSlotRecipe } from '@chakra-ui/react';
-
-import { recipe as selectSlotRecipe } from './select.recipe';
-
-// TODO @tom2drum check sizes for native select
-export const recipe = defineSlotRecipe({
-  slots: [ 'root', 'field', 'indicator' ],
-
-  base: {
-    root: {
-      height: 'fit-content',
-      display: 'flex',
-      width: '100%',
-      position: 'relative',
-    },
-    field: {
-      width: '100%',
-      minWidth: '0',
-      outline: '0',
-      appearance: 'none',
-      borderRadius: 'base',
-      _disabled: {
-        layerStyle: 'disabled',
-      },
-      _invalid: {
-        borderColor: 'border.error',
-      },
-      focusVisibleRing: 'none',
-      lineHeight: 'normal',
-      '& > option, & > optgroup': {
-        bg: 'inherit',
-      },
-      fontWeight: '500',
-    },
-    indicator: {
-      position: 'absolute',
-      display: 'inline-flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      pointerEvents: 'none',
-      top: '50%',
-      transform: 'translateY(-50%)',
-      height: '100%',
-      color: 'inherit',
-      _disabled: {
-        opacity: '0.5',
-      },
-      _invalid: {
-        color: 'select.fg.error',
-      },
-      _icon: {
-        width: '1em',
-        height: '1em',
-      },
-    },
-  },
-
-  variants: {
-    variant: {
-      outline: {
-        field: selectSlotRecipe.variants?.variant.outline.trigger,
-      },
-    },
-
-    size: {
-      xs: {
-        field: {
-          textStyle: 'xs',
-          ps: '2',
-          pe: '6',
-          height: '6',
-        },
-        indicator: {
-          textStyle: 'sm',
-          insetEnd: '1.5',
-        },
-      },
-      sm: {
-        field: {
-          textStyle: 'sm',
-          ps: '2.5',
-          pe: '8',
-          height: '8',
-        },
-        indicator: {
-          textStyle: 'md',
-          insetEnd: '2',
-        },
-      },
-      md: {
-        field: {
-          textStyle: 'sm',
-          ps: '3',
-          pe: '8',
-          height: '10',
-        },
-        indicator: {
-          textStyle: 'lg',
-          insetEnd: '2',
-        },
-      },
-      lg: {
-        field: {
-          textStyle: 'md',
-          ps: '4',
-          pe: '8',
-          height: '11',
-        },
-        indicator: {
-          textStyle: 'xl',
-          insetEnd: '3',
-        },
-      },
-      xl: {
-        field: {
-          textStyle: 'md',
-          ps: '4.5',
-          pe: '10',
-          height: '12',
-        },
-        indicator: {
-          textStyle: 'xl',
-          insetEnd: '3',
-        },
-      },
-    },
-  },
-
-  defaultVariants: selectSlotRecipe.defaultVariants,
-});

toolkit/theme/recipes/select.recipe.ts

@@ -130,8 +130,8 @@ export const recipe = defineSlotRecipe({
       outline: {
         trigger: {
           borderWidth: '2px',
+          bg: 'input.bg',
           color: 'select.trigger.outline.fg',
-          bgColor: 'transparent',
           borderColor: 'input.border.filled',
           _expanded: {
             color: 'link.primary.hover',

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

@@ -87,7 +87,7 @@ const ContractVerificationFieldCompiler = ({ isVyper, isStylus }: Props) => {
         required
       />
       { isVyper || isStylus ? null : (
-        <chakra.div mt={{ base: 0, lg: 8 }}>
+        <chakra.div>
           <span >The compiler version is specified in </span>
           <Code color="text.secondary">pragma solidity X.X.X</Code>
           <span>. Use the compiler version rather than the nightly build. If using the Solidity compiler, run </span>

ui/contractVerification/fields/ContractVerificationFieldMethod.tsx

@@ -9,10 +9,10 @@ import React from 'react';
 import type { FormFields } from '../types';
 import type { SmartContractVerificationMethod, SmartContractVerificationConfig } from 'types/client/contract';
 
+import { nbsp } from 'lib/html-entities';
 import { Link } from 'toolkit/chakra/link';
-import { Tooltip } from 'toolkit/chakra/tooltip';
 import FormFieldSelect from 'ui/shared/forms/fields/FormFieldSelect';
-import IconSvg from 'ui/shared/IconSvg';
+import Hint from 'ui/shared/Hint';
 
 import { METHOD_LABELS } from '../utils';
 
@@ -89,12 +89,14 @@ const ContractVerificationFieldMethod = ({ methods }: Props) => {
   return (
     <>
       <Box mt={{ base: 10, lg: 6 }} gridColumn={{ lg: '1 / 3' }}>
-        <chakra.span fontWeight={ 500 } fontSize="lg" fontFamily="heading">
-          Currently, Blockscout supports { methods.length } contract verification methods
+        <chakra.span fontWeight={ 500 } fontSize="lg" fontFamily="heading" mr={ 1 }>
+          Currently, Blockscout supports { methods.length }{ nbsp }contract verification methods
         </chakra.span>
-        <Tooltip content={ tooltipContent } interactive contentProps={{ textAlign: 'left', className: 'light' }}>
-          <IconSvg name="info" boxSize={ 5 } ml={ 1 } cursor="pointer" color="icon.info" _hover={{ color: 'link.primary.hover' }}/>
-        </Tooltip>
+        <Hint
+          label={ tooltipContent }
+          verticalAlign="text-bottom"
+          tooltipProps={{ interactive: true, contentProps: { textAlign: 'left', className: 'light' } }}
+        />
       </Box>
       <FormFieldSelect<FormFields, 'method'>
         name="method"

ui/nameDomain/details/NameDomainDetailsAlert.tsx

@@ -16,7 +16,7 @@ const NameDomainDetailsAlert = ({ data }: Props) => {
   }
 
   return (
-    <Alert status="info" colorScheme="gray" display="inline-block" whiteSpace="pre-wrap" mb={ 6 }>
+    <Alert status="info" display="inline-block" whiteSpace="pre-wrap" mb={ 6 }>
       <span>The domain name is resolved offchain using </span>
       { data.stored_offchain && <Link external href="https://eips.ethereum.org/EIPS/eip-3668">EIP-3668: CCIP Read</Link> }
       { data.stored_offchain && data.resolved_with_wildcard && <span> & </span> }

ui/pages/Chakra.tsx

@@ -29,6 +29,7 @@ import RatingShowcase from 'ui/showcases/Rating';
 import SelectShowcase from 'ui/showcases/Select';
 import SkeletonShowcase from 'ui/showcases/Skeleton';
 import SpinnerShowcase from 'ui/showcases/Spinner';
+import SwitchShowcase from 'ui/showcases/Switch';
 import TableShowcase from 'ui/showcases/Table';
 import TabsShowcase from 'ui/showcases/Tabs';
 import TagShowcase from 'ui/showcases/Tag';
@@ -37,13 +38,9 @@ import ToastShowcase from 'ui/showcases/Toast';
 import TooltipShowcase from 'ui/showcases/Tooltip';
 
 // Drawer
-// CloseButton
-// IconButton
 // EmptyState ?
-// Rating
 // Switch
 // ToggleTip
-// Popover
 
 const tabs = [
   { label: 'Accordion', value: 'accordion', component: <AccordionsShowcase/> },
@@ -70,6 +67,7 @@ const tabs = [
   { label: 'Select', value: 'select', component: <SelectShowcase/> },
   { label: 'Skeleton', value: 'skeleton', component: <SkeletonShowcase/> },
   { label: 'Spinner', value: 'spinner', component: <SpinnerShowcase/> },
+  { label: 'Switch', value: 'switch', component: <SwitchShowcase/> },
   { label: 'Table', value: 'table', component: <TableShowcase/> },
   { label: 'Tabs', value: 'tabs', component: <TabsShowcase/> },
   { label: 'Tag', value: 'tag', component: <TagShowcase/> },

ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx

@@ -95,7 +95,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
           alignItems="center"
           columnGap={ 5 }
           justifyContent={{ base: 'flex-end', lg: 'flex-start' }}
-          h={{ base: 'auto', lg: '80px' }}
+          h={{ base: 'auto', lg: '60px' }}
         >
           { onAddClick && (
             <IconButton
@@ -123,7 +123,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
           ) }
         </Flex>
         { !isMobile && (
-          <Flex flexDir="column" alignItems="flex-start" mt={ 10 } rowGap={ 2 }>
+          <Flex flexDir="column" alignItems="flex-start" mt={ 4 } rowGap={ 2 }>
             <EntityTag data={{
               name: field.name || 'Tag name',
               tagType: field.type[0],

ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx

 import { createListCollection } from '@chakra-ui/react';
 import { capitalize } from 'es-toolkit';
 import React from 'react';
-// import { useFormContext } from 'react-hook-form';
 
 import type { FormFields } from '../types';
 import type { PublicTagType } from 'types/api/addressMetadata';
 
 import FormFieldSelect from 'ui/shared/forms/fields/FormFieldSelect';
-// import IconSvg from 'ui/shared/IconSvg';
 
 interface Props {
   index: number;
@@ -15,51 +13,28 @@ interface Props {
 }
 
 const PublicTagsSubmitFieldTagType = ({ index, tagTypes }: Props) => {
-  // const { watch } = useFormContext<FormFields>();
+
+  const getItemIcon = React.useCallback((type: PublicTagType) => {
+    switch (type.type) {
+      case 'name':
+        return 'publictags_slim';
+      case 'protocol':
+      case 'generic':
+        return <span>#</span>;
+      default:
+        return null;
+    }
+  }, []);
 
   const collection = React.useMemo(() => {
     const items = tagTypes?.map((type) => ({
       value: type.type,
       label: capitalize(type.type),
+      icon: getItemIcon(type),
     })) ?? [];
 
     return createListCollection({ items });
-  }, [ tagTypes ]);
-
-  // const fieldValue = watch(`tags.${ index }.type`).value;
-
-  // TODO @tom2drum: add icon for selected value
-  // const selectComponents: SelectComponentsConfig<Option, boolean, GroupBase<Option>> = React.useMemo(() => {
-  //   type SingleValueComponentProps = SingleValueProps<Option, boolean, GroupBase<Option>> & { children: React.ReactNode };
-  //   const SingleValue = ({ children, ...props }: SingleValueComponentProps) => {
-  //     switch (fieldValue) {
-  //       case 'name': {
-  //         return (
-  //           <chakraComponents.SingleValue { ...props }>
-  //             <Flex alignItems="center" columnGap={ 1 }>
-  //               <IconSvg name="publictags_slim" boxSize={ 4 } flexShrink={ 0 } color="gray.400"/>
-  //               { children }
-  //             </Flex>
-  //           </chakraComponents.SingleValue>
-  //         );
-  //       }
-  //       case 'protocol':
-  //       case 'generic': {
-  //         return (
-  //           <chakraComponents.SingleValue { ...props }>
-  //             <chakra.span color="gray.400">#</chakra.span> { children }
-  //           </chakraComponents.SingleValue>
-  //         );
-  //       }
-
-  //       default: {
-  //         return (<chakraComponents.SingleValue { ...props }>{ children }</chakraComponents.SingleValue>);
-  //       }
-  //     }
-  //   };
-
-  //   return { SingleValue };
-  // }, [ fieldValue ]);
+  }, [ tagTypes, getItemIcon ]);
 
   return (
     <FormFieldSelect<FormFields, `tags.${ number }.type`>

ui/rewards/login/steps/LoginStepContent.tsx

@@ -135,7 +135,6 @@ const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
           <Flex w="full" alignItems="center" justifyContent="space-between">
             I have a referral code
             <Switch
-              colorScheme="blue"
               size="md"
               checked={ isRefCodeUsed }
               onCheckedChange={ handleToggleChange }

ui/showcases/Select.tsx

@@ -3,7 +3,6 @@ import { noop } from 'es-toolkit';
 import React from 'react';
 
 import { Checkbox } from 'toolkit/chakra/checkbox';
-import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
 import { Select, SelectAsync } from 'toolkit/chakra/select';
 import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
 import Sort from 'ui/shared/sort/Sort';
@@ -128,17 +127,6 @@ const SelectShowcase = () => {
 
       <Section>
         <SectionHeader>Examples</SectionHeader>
-        <SectionSubHeader>Native select</SectionSubHeader>
-        <SamplesStack>
-          <Sample>
-            <NativeSelectRoot>
-              <NativeSelectField>
-                <option value="1">Option 1</option>
-                <option value="2">Option 2</option>
-              </NativeSelectField>
-            </NativeSelectRoot>
-          </Sample>
-        </SamplesStack>
 
         <SectionSubHeader>Sort</SectionSubHeader>
         <SamplesStack>

ui/showcases/Switch.tsx

+import React from 'react';
+
+import { Switch } from 'toolkit/chakra/switch';
+
+import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
+
+const SwitchShowcase = () => {
+
+  return (
+    <Container value="switch">
+      <Section>
+        <SectionHeader>Size</SectionHeader>
+        <SamplesStack>
+          <Sample label="size: sm">
+            <Switch size="sm">
+              Show duck
+            </Switch>
+          </Sample>
+          <Sample label="size: md">
+            <Switch size="md">
+              Show duck
+            </Switch>
+          </Sample>
+        </SamplesStack>
+      </Section>
+    </Container>
+  );
+};
+
+export default React.memo(SwitchShowcase);

ui/snippets/header/alerts/IndexingBlocksAlert.tsx

@@ -72,7 +72,7 @@ const IndexingBlocksAlert = () => {
   }
 
   return (
-    <Alert status="info" colorScheme="gray" py={ 3 } borderRadius="md">
+    <Alert status="info" py={ 3 } borderRadius="md">
       { `${ data.indexed_blocks_ratio && `${ Math.floor(Number(data.indexed_blocks_ratio) * 100) }% Blocks Indexed${ nbsp }${ ndash } ` }
           We're indexing this chain right now. Some of the counts may be inaccurate.` }
     </Alert>

ui/snippets/navigation/mobile/NavLinkGroup.tsx

@@ -33,7 +33,8 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
         w="100%"
         px={ 2 }
         aria-label={ `${ item.text } link group` }
-        bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
+        color={ item.isActive ? 'link.navigation.fg.selected' : 'link.navigation.fg' }
+        bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'transparent' }
       >
         <Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
           <HStack gap={ 0 } overflow="hidden">

ui/snippets/networkMenu/NetworkMenuContentMobile.tsx

-import { Box, VStack, Flex } from '@chakra-ui/react';
+import { Box, VStack, Flex, createListCollection } from '@chakra-ui/react';
 import { capitalize } from 'es-toolkit';
 import React from 'react';
 
 import type { NetworkGroup, FeaturedNetwork } from 'types/networks';
 
-import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
+import { Select } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 
 import NetworkMenuLink from './NetworkMenuLink';
@@ -24,10 +24,16 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
     }
   }, [ items, selectedNetwork?.group, tabs ]);
 
-  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedTab(event.currentTarget.value as NetworkGroup);
+  const handleSelectChange = React.useCallback(({ value }: { value: Array<string> }) => {
+    setSelectedTab(value[0] as NetworkGroup);
   }, []);
 
+  const selectCollection = React.useMemo(() => {
+    return createListCollection({
+      items: tabs.map((tab) => ({ label: capitalize(tab), value: tab })),
+    });
+  }, [ tabs ]);
+
   const content = !items || items.length === 0 ? (
     <Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
       <Flex mx={ 3 } my={ 2 } alignItems="center">
@@ -46,11 +52,13 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
   ) : (
     <>
       { tabs.length > 1 && (
-        <NativeSelectRoot size="sm" borderRadius="base" mb={ 3 }>
-          <NativeSelectField value={ selectedTab } onChange={ handleSelectChange }>
-            { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
-          </NativeSelectField>
-        </NativeSelectRoot>
+        <Select
+          value={ [ selectedTab ] }
+          onValueChange={ handleSelectChange }
+          collection={ selectCollection }
+          placeholder="Select network type"
+          mb={ 3 }
+        />
       ) }
       <VStack as="ul" gap={ 2 } alignItems="stretch">
         { items

ui/snippets/searchBar/SearchBarInput.tsx

@@ -105,8 +105,7 @@ const SearchBarInput = (
     <IconSvg
       name="search"
       boxSize={ 5 }
-      ml={{ base: 2, lg: isHomepage ? 4 : 2 }}
-      mr={ 2 }
+      mx={ 2 }
     />
   );
 
@@ -116,7 +115,7 @@ const SearchBarInput = (
       { !isMobile && (
         <Center
           boxSize="20px"
-          mr={{ base: 2, lg: isHomepage ? 4 : 2 }}
+          mr={ 2 }
           borderRadius="sm"
           borderWidth="1px"
           borderColor="gray.500"
@@ -156,7 +155,7 @@ const SearchBarInput = (
         endElement={ endElement }
       >
         <Input
-          size={{ base: 'md', lg: isHomepage ? 'lg' : 'md' }}
+          size="md"
           placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
           value={ value }
           onChange={ handleChange }

ui/watchlist/WatchlistTable/WatchListItem.tsx

@@ -88,7 +88,6 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEmail }
           <Text textStyle="sm" fontWeight={ 500 }>Email notification</Text>
           <Skeleton loading={ isLoading } display="inline-block">
             <Switch
-              colorScheme="blue"
               size="md"
               checked={ notificationEnabled }
               onCheckedChange={ onSwitch }

ui/watchlist/WatchlistTable/WatchListTableItem.tsx

@@ -82,7 +82,6 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEm
       <TableCell>
         <Skeleton loading={ isLoading } display="inline-block">
           <Switch
-            colorScheme="blue"
             size="md"
             checked={ notificationEnabled }
             onCheckedChange={ onSwitch }