fix tags in search

toolkit/chakra/accordion.tsx

@@ -19,6 +19,7 @@ export const AccordionItemTrigger = React.forwardRef<
 
   const indicator = variant === 'faq' ? (
     <Accordion.ItemIndicator
+      asChild
       rotate="0deg"
       position="relative"
       _before={{
@@ -51,7 +52,9 @@ export const AccordionItemTrigger = React.forwardRef<
           transform: 'translateX(-50%) rotate(90deg)',
         },
       }}
-    />
+    >
+      <div/>
+    </Accordion.ItemIndicator>
   ) : (
     <Accordion.ItemIndicator rotate={{ base: '180deg', _open: '270deg' }} display="flex">
       <IconSvg name="arrows/east-mini"/>

toolkit/chakra/tag.tsx

@@ -45,7 +45,7 @@ export const Tag = React.forwardRef<HTMLSpanElement, TagProps>(
           { ...rest }
         >
           { startElement && (
-            <ChakraTag.StartElement>{ startElement }</ChakraTag.StartElement>
+            <ChakraTag.StartElement _empty={{ display: 'none' }}>{ startElement }</ChakraTag.StartElement>
           ) }
           { labelElement }
           { endElement && (

ui/searchResults/SearchResultEntityTag.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import type { AddressMetadataTagApi } from 'types/api/addressMetadata';
+
+import highlightText from 'lib/highlightText';
+import type { TagProps } from 'toolkit/chakra/tag';
+import { Tag } from 'toolkit/chakra/tag';
+import EntityTagIcon from 'ui/shared/EntityTags/EntityTagIcon';
+
+interface Props extends TagProps {
+  metadata: AddressMetadataTagApi;
+  searchTerm: string;
+}
+
+const SearchResultEntityTag = ({ metadata, searchTerm, ...rest }: Props) => {
+  return (
+    <Tag
+      { ...rest }
+      startElement={ <EntityTagIcon data={ metadata } ignoreColor/> }
+    >
+      <span dangerouslySetInnerHTML={{ __html: highlightText(metadata.name, searchTerm) }}/>
+    </Tag>
+  );
+};
+
+export default React.memo(SearchResultEntityTag);

ui/searchResults/SearchResultListItem.tsx

@@ -25,7 +25,6 @@ import * as EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
-import EntityTagIcon from 'ui/shared/EntityTags/EntityTagIcon';
 import { ADDRESS_REGEXP } from 'ui/shared/forms/validators/address';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
@@ -33,6 +32,8 @@ import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
 
+import SearchResultEntityTag from './SearchResultEntityTag';
+
 interface Props {
   data: SearchResultItem | SearchResultAppItem;
   searchTerm: string;
@@ -376,11 +377,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading, addressFormat }: Pr
               </Flex>
             ) }
             { data.type === 'metadata_tag' && (
-            // we show regular tag because we don't need all meta info here, but need to highlight search term
-              <Tag display="flex" alignItems="center">
-                <EntityTagIcon data={ data.metadata }/>
-                <span dangerouslySetInnerHTML={{ __html: highlightText(data.metadata.name, searchTerm) }}/>
-              </Tag>
+              <SearchResultEntityTag metadata={ data.metadata } searchTerm={ searchTerm }/>
             ) }
           </Flex>
         ) :

ui/searchResults/SearchResultTableItem.tsx

@@ -26,13 +26,14 @@ import * as EnsEntity from 'ui/shared/entities/ens/EnsEntity';
 import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import * as UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
-import EntityTagIcon from 'ui/shared/EntityTags/EntityTagIcon';
 import { ADDRESS_REGEXP } from 'ui/shared/forms/validators/address';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
 
+import SearchResultEntityTag from './SearchResultEntityTag';
+
 interface Props {
   data: SearchResultItem | SearchResultAppItem;
   searchTerm: string;
@@ -165,14 +166,8 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
               </TableCell>
             ) }
             { data.type === 'metadata_tag' && (
-              <TableCell colSpan={ addressName ? 1 : 2 } verticalAlign="middle">
-                <Flex justifyContent="flex-end">
-                  { /* we show regular tag because we don't need all meta info here, but need to highlight search term */ }
-                  <Tag display="flex" alignItems="center">
-                    <EntityTagIcon data={ data.metadata } iconColor="gray.400"/>
-                    <span dangerouslySetInnerHTML={{ __html: highlightText(data.metadata.name, searchTerm) }}/>
-                  </Tag>
-                </Flex>
+              <TableCell colSpan={ addressName ? 1 : 2 } verticalAlign="middle" textAlign="right">
+                <SearchResultEntityTag metadata={ data.metadata } searchTerm={ searchTerm }/>
               </TableCell>
             ) }
           </>

ui/shared/EntityTags/EntityTag.tsx

@@ -1,16 +1,14 @@
 import type { HTMLChakraProps } from '@chakra-ui/react';
-import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type { EntityTag as TEntityTag } from './types';
 
 import * as mixpanel from 'lib/mixpanel/index';
-import { Image } from 'toolkit/chakra/image';
 import { Link, LinkExternalIcon } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import { Tag } from 'toolkit/chakra/tag';
-import IconSvg from 'ui/shared/IconSvg';
 
+import EntityTagIcon from './EntityTagIcon';
 import EntityTagTooltip from './EntityTagTooltip';
 import { getTagLinkParams } from './utils';
 
@@ -42,7 +40,7 @@ const EntityTag = ({ data, isLoading, noLink, ...rest }: Props) => {
     return <Skeleton loading borderRadius="sm" w="100px" h="24px"/>;
   }
 
-  const name = (() => {
+  const text = (() => {
     if (data.meta?.warpcastHandle) {
       return `@${ data.meta.warpcastHandle }`;
     }
@@ -50,30 +48,6 @@ const EntityTag = ({ data, isLoading, noLink, ...rest }: Props) => {
     return data.name;
   })();
 
-  const icon = (() => {
-    if (data.meta?.tagIcon) {
-      return <Image boxSize={ 3 } src={ data.meta.tagIcon } alt={ `${ data.name } icon` }/>;
-    }
-
-    if (data.tagType === 'name') {
-      return <IconSvg name="publictags_slim" boxSize={ 3 } color={ iconColor }/>;
-    }
-
-    return null;
-  })();
-
-  const prefix = (() => {
-    if (data.meta?.tagIcon) {
-      return null;
-    }
-
-    if (data.tagType === 'protocol' || data.tagType === 'generic') {
-      return <chakra.span color={ iconColor } whiteSpace="pre"># </chakra.span>;
-    }
-
-    return null;
-  })();
-
   return (
     <EntityTagTooltip data={ data }>
       <Link
@@ -87,14 +61,14 @@ const EntityTag = ({ data, isLoading, noLink, ...rest }: Props) => {
         <Tag
           bg={ data.meta?.bgColor }
           color={ data.meta?.textColor }
-          startElement={ icon }
+          startElement={ <EntityTagIcon data={ data }/> }
           truncated
           endElement={ linkParams?.type === 'external' ? <LinkExternalIcon color={ iconColor }/> : null }
           endElementProps={ linkParams?.type === 'external' ? { ml: -1 } : undefined }
           _hover={ hasLink ? { opacity: 0.76 } : undefined }
           variant={ hasLink ? 'clickable' : 'subtle' }
         >
-          { prefix }{ name }
+          { text }
         </Tag>
       </Link>
     </EntityTagTooltip>

ui/shared/EntityTags/EntityTagIcon.tsx

@@ -1,28 +1,30 @@
 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-import type { EntityTag as TEntityTag } from './types';
+import type { EntityTag } from './types';
 
 import { Image } from 'toolkit/chakra/image';
 import IconSvg from 'ui/shared/IconSvg';
+
 interface Props {
-  data: TEntityTag;
-  iconColor?: string;
+  data: EntityTag;
+  ignoreColor?: boolean;
 }
 
-// TODO @tom2drum: remove this component
-const EntityTagIcon = ({ data, iconColor = 'gray.400' }: Props) => {
+const EntityTagIcon = ({ data, ignoreColor }: Props) => {
+
+  const iconColor = data.meta?.textColor && !ignoreColor ? data.meta.textColor : 'gray.400';
 
   if (data.meta?.tagIcon) {
-    return <Image boxSize={ 3 } mr={ 1 } flexShrink={ 0 } src={ data.meta.tagIcon } alt={ `${ data.name } icon` }/>;
+    return <Image boxSize={ 3 } src={ data.meta.tagIcon } alt={ `${ data.name } icon` }/>;
   }
 
   if (data.tagType === 'name') {
-    return <IconSvg name="publictags_slim" boxSize={ 3 } mr={ 1 } flexShrink={ 0 } color={ iconColor }/>;
+    return <IconSvg name="publictags_slim" boxSize={ 3 } color={ iconColor }/>;
   }
 
   if (data.tagType === 'protocol' || data.tagType === 'generic') {
-    return <chakra.span color={ iconColor } whiteSpace="pre"># </chakra.span>;
+    return <chakra.span color={ iconColor }>#</chakra.span>;
   }
 
   return null;

ui/shared/entities/ens/EnsEntity.tsx

@@ -66,7 +66,6 @@ const Icon = (props: IconProps) => {
             alignItems="center"
             external
           >
-            { /* TODO @tom2drum maybe refactor this to pass icon as a prop */ }
             <IconSvg name="docs" boxSize={ 5 } color="text.secondary" mr={ 2 }/>
             <span>Documentation</span>
           </LinkToolkit>

ui/snippets/searchBar/SearchBarInput.tsx

@@ -111,26 +111,24 @@ const SearchBarInput = (
     />
   );
 
-  const endElement = (() => {
-    return (
-      <>
-        <ClearButton onClick={ onClear } isVisible={ value.length > 0 }/>
-        { !isMobile && (
-          <Center
-            boxSize="20px"
-            my="2px"
-            mr={ 3 }
-            borderRadius="sm"
-            borderWidth="1px"
-            borderColor="gray.400"
-            color="gray.400"
-          >
-            /
-          </Center>
-        ) }
-      </>
-    );
-  })();
+  const endElement = (
+    <>
+      <ClearButton onClick={ onClear } isVisible={ value.length > 0 }/>
+      { !isMobile && (
+        <Center
+          boxSize="20px"
+          my="2px"
+          mr={ 3 }
+          borderRadius="sm"
+          borderWidth="1px"
+          borderColor="gray.400"
+          color="gray.400"
+        >
+          /
+        </Center>
+      ) }
+    </>
+  );
 
   return (
     <chakra.form
@@ -160,6 +158,7 @@ const SearchBarInput = (
         endElement={ endElement }
       >
         <Input
+          size={{ base: 'md', lg: isHomepage ? 'lg' : 'md' }}
           placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
           value={ value }
           onChange={ handleChange }
@@ -170,34 +169,6 @@ const SearchBarInput = (
           _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>
-        <Input
-          pl={{ base: isHomepage ? '50px' : '38px', lg: '50px' }}
-          sx={{
-            '@media screen and (max-width: 999px)': {
-              paddingLeft: isHomepage ? '50px' : '38px',
-              paddingRight: '36px',
-            },
-            '@media screen and (min-width: 1001px)': {
-              paddingRight: '36px',
-            },
-          }}
-          placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
-          onChange={ handleChange }
-          border={ isHomepage ? 'none' : '2px solid' }
-          borderColor={ useColorModeValue('blackAlpha.100', 'whiteAlpha.200') }
-          _focusWithin={{ _placeholder: { color: 'gray.300' } }}
-          color={ useColorModeValue('black', 'white') }
-          value={ value }
-        />
-        <InputRightElement top={{ base: 2, lg: isHomepage ? 3 : 2 }} right={ 2 }>
-          { rightElement }
-        </InputRightElement>
-      </InputGroup> */ }
     </chakra.form>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

@@ -7,10 +7,9 @@ import type { SearchResultAddressOrContract, SearchResultMetadataTag } from 'typ
 import { toBech32Address } from 'lib/address/bech32';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
-import { Tag } from 'toolkit/chakra/tag';
+import SearchResultEntityTag from 'ui/searchResults/SearchResultEntityTag';
 import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
-import EntityTagIcon from 'ui/shared/EntityTags/EntityTagIcon';
 import { ADDRESS_REGEXP } from 'ui/shared/forms/validators/address';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
@@ -54,11 +53,7 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm, addressFormat }:
     </Flex>
   );
   const tagEl = data.type === 'metadata_tag' ? (
-    // we show regular tag because we don't need all meta info here, but need to highlight search term
-    <Tag display="flex" alignItems="center" ml={{ base: 0, lg: 'auto' }}>
-      <EntityTagIcon data={ data.metadata } iconColor="gray.400"/>
-      <span dangerouslySetInnerHTML={{ __html: highlightText(data.metadata.name, searchTerm) }}/>
-    </Tag>
+    <SearchResultEntityTag metadata={ data.metadata } searchTerm={ searchTerm } ml={{ base: 0, lg: 'auto' }}/>
   ) : null;
   const addressEl = <HashStringShortenDynamic hash={ hash } isTooltipDisabled/>;
 

ui/snippets/topBar/settings/Settings.tsx

@@ -19,6 +19,8 @@ const Settings = () => {
       positioning={{ placement: 'bottom-start' }}
       open={ open }
       onOpenChange={ onOpenChange }
+      // should be false to enable auto-switch to default color theme
+      lazyMount={ false }
     >
       <PopoverTrigger>
         <IconButton

ui/verifiedAddresses/VerifiedAddressesEmailAlert.tsx

@@ -13,12 +13,10 @@ const VerifiedAddressesEmailAlert = () => {
       <Alert
         status="warning"
         mb={ 6 }
-        // TODO @tom2drum check this alert
-        // display="flex"
-        // flexDirection={{ base: 'column', md: 'row' }}
-        // alignItems={{ base: 'flex-start', lg: 'center' }}
-        // columnGap={ 2 }
-        // rowGap={ 2 }
+        descriptionProps={{
+          alignItems: 'center',
+          gap: 2,
+        }}
       >
         You need a valid email address to verify contracts. Please add your email to your account.
         <Button variant="outline" size="sm" onClick={ authModal.onOpen }>Add email</Button>