change icon sizes in search suggest

icons/publictags.svg

-<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30">
-  <path d="M13.61 25a2.262 2.262 0 0 1-1.615-.665l-6.318-6.318a2.265 2.265 0 0 1 0-3.23l8.456-8.457c.76-.76 2.138-1.33 3.183-1.33h5.416c1.235 0 2.28 1.045 2.28 2.28v5.416c0 1.045-.57 2.423-1.33 3.183l-8.456 8.456A2.262 2.262 0 0 1 13.61 25Zm3.706-18.575c-.665 0-1.71.428-2.185.903l-8.456 8.456a.832.832 0 0 0 0 1.187l6.318 6.319c.332.332.902.332 1.188 0l8.456-8.456c.475-.475.902-1.473.902-2.185V7.232a.852.852 0 0 0-.855-.855h-5.368v.047Z" stroke="currentColor" stroke-width=".5"/>
-  <path d="M19.311 13.504a2.808 2.808 0 0 1-2.803-2.803 2.808 2.808 0 0 1 2.803-2.803 2.808 2.808 0 0 1 2.803 2.803 2.808 2.808 0 0 1-2.803 2.803Zm0-4.276a1.48 1.48 0 0 0-1.473 1.473 1.48 1.48 0 0 0 1.473 1.473 1.48 1.48 0 0 0 1.473-1.473 1.48 1.48 0 0 0-1.473-1.473Z" stroke="currentColor" stroke-width=".5"/>
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.094 19.3c-.58 0-1.116-.223-1.517-.625l-5.936-5.94a2.13 2.13 0 0 1 0-3.036L9.585 1.75c.714-.714 2.008-1.25 2.99-1.25h5.088c1.16 0 2.142.982 2.142 2.143v5.091c0 .983-.536 2.278-1.25 2.992l-7.944 7.949a2.125 2.125 0 0 1-1.517.625Zm3.481-17.46c-.625 0-1.607.402-2.053.848l-7.944 7.949a.782.782 0 0 0 0 1.116l5.936 5.94c.312.312.848.312 1.115 0l7.944-7.95c.447-.446.848-1.384.848-2.053V2.599a.8.8 0 0 0-.803-.804h-5.043v.045Z" fill="currentColor"/>
+  <path d="M14.45 8.493a2.639 2.639 0 0 1-2.634-2.634 2.639 2.639 0 0 1 2.633-2.635 2.639 2.639 0 0 1 2.634 2.635 2.639 2.639 0 0 1-2.633 2.634Zm0-4.019a1.39 1.39 0 0 0-1.384 1.385c0 .759.625 1.384 1.383 1.384a1.39 1.39 0 0 0 1.384-1.384 1.39 1.39 0 0 0-1.383-1.385Z" fill="currentColor"/>
 </svg>

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

-import { Box, Text, Grid, Flex, Icon } from '@chakra-ui/react';
+import { Box, Text, Grid, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultAddressOrContract } from 'types/api/search';
 
-import iconSuccess from 'icons/status/success.svg';
 import highlightText from 'lib/highlightText';
-import AddressIcon from 'ui/shared/address/AddressIcon';
+import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
@@ -16,7 +15,11 @@ interface Props {
 
 const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
   const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
-  const icon = <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} flexShrink={ 0 }/>;
+  const icon = (
+    <AddressEntity.Icon
+      address={{ hash: data.address, is_contract: data.type === 'contract', name: '', is_verified: data.is_smart_contract_verified, implementation_name: null }}
+    />
+  );
   const name = data.name && (
     <Text
       variant="secondary"
@@ -27,15 +30,13 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
       <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
     </Text>
   );
-  const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 1 }/>;
   const address = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
 
   if (isMobile) {
     return (
       <>
-        <Grid templateColumns="24px 1fr" gap={ 2 }>
+        <Grid templateColumns="24px 1fr">
           { icon }
-          <Flex alignItems="center" overflow="hidden">
           <Box
             as={ shouldHighlightHash ? 'mark' : 'span' }
             display="block"
@@ -45,8 +46,6 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
           >
             { address }
           </Box>
-            { isContractVerified }
-          </Flex>
         </Grid>
         { name }
       </>
@@ -54,20 +53,19 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
   }
 
   return (
-    <Flex alignItems="center" gap={ 2 }>
+    <Flex alignItems="center">
       { icon }
-      <Flex alignItems="center" w="450px" overflow="hidden">
       <Box
         as={ shouldHighlightHash ? 'mark' : 'span' }
         display="block"
         overflow="hidden"
         whiteSpace="nowrap"
         fontWeight={ 700 }
+        w="450px"
+        mr={ 2 }
       >
         { address }
       </Box>
-        { isContractVerified }
-      </Flex>
       { name }
     </Flex>
   );

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

@@ -21,7 +21,7 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
   const logo = (
     <Image
       borderRadius="base"
-      boxSize={ 6 }
+      boxSize={ 5 }
       src={ useColorModeValue(data.logo, data.logoDarkMode || data.logo) }
       alt={ `${ data.title } app icon` }
     />

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx

-import { Text, Icon, Flex, Grid } from '@chakra-ui/react';
+import { Text, Flex, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultBlock } from 'types/api/search';
 
-import blockIcon from 'icons/block.svg';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
+import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
@@ -15,7 +15,8 @@ interface Props {
 }
 
 const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
-  const icon = <Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>;
+  // const icon = <Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>;
+  const icon = <BlockEntity.Icon/>;
   const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
   const blockNumber = (
     <Text
@@ -43,7 +44,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
   if (isMobile) {
     return (
       <>
-        <Flex alignItems="center" gap={ 2 }>
+        <Flex alignItems="center">
           { icon }
           { blockNumber }
         </Flex>
@@ -54,9 +55,11 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
   }
 
   return (
-    <Grid templateColumns="24px 200px minmax(auto, max-content) auto" gap={ 2 }>
+    <Grid templateColumns="228px minmax(auto, max-content) auto" gap={ 2 }>
+      <Flex alignItems="center">
         { icon }
         { blockNumber }
+      </Flex>
       { hash }
       <Text variant="secondary" textAlign="end">{ date }</Text>
     </Grid>

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx

@@ -15,7 +15,7 @@ interface Props {
 }
 
 const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
-  const icon = <Icon as={ labelIcon } boxSize={ 6 } color="gray.500"/>;
+  const icon = <Icon as={ labelIcon } boxSize={ 5 } color="gray.500"/>;
 
   const name = (
     <Text
@@ -56,9 +56,11 @@ const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
   }
 
   return (
-    <Grid alignItems="center" gridTemplateColumns="24px 200px max-content 24px" gap={ 2 }>
+    <Grid alignItems="center" gridTemplateColumns="228px max-content 24px" gap={ 2 }>
+      <Flex alignItems="center" gap={ 2 }>
         { icon }
         { name }
+      </Flex>
       <Flex alignItems="center" overflow="hidden" gap={ 1 }>
         { address }
         { isContractVerified }

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

@@ -5,8 +5,8 @@ import type { SearchResultToken } from 'types/api/search';
 
 import iconSuccess from 'icons/status/success.svg';
 import highlightText from 'lib/highlightText';
+import * as TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
   data: SearchResultToken;
@@ -15,7 +15,7 @@ interface Props {
 }
 
 const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
-  const icon = <TokenLogo boxSize={ 6 } data={ data }/>;
+  const icon = <TokenEntity.Icon token={ data }/>;
   const name = (
     <Text
       fontWeight={ 700 }
@@ -47,7 +47,7 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
 
     return (
       <>
-        <Flex alignItems="center" gap={ 2 }>
+        <Flex alignItems="center">
           { icon }
           { name }
         </Flex>
@@ -63,9 +63,11 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
   }
 
   return (
-    <Grid templateColumns="24px 200px 1fr auto" gap={ 2 }>
+    <Grid templateColumns="228px 1fr auto" gap={ 2 }>
+      <Flex alignItems="center">
         { icon }
         { name }
+      </Flex>
       <Flex alignItems="center" overflow="hidden">
         { address }
         { contractVerifiedIcon }

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx

-import { chakra, Grid, Text, Flex, Icon } from '@chakra-ui/react';
+import { chakra, Text, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultTx } from 'types/api/search';
 
-import txIcon from 'icons/transactions.svg';
 import dayjs from 'lib/date/dayjs';
+import * as TxEntity from 'ui/shared/entities/tx/TxEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
 interface Props {
@@ -14,7 +14,7 @@ interface Props {
 }
 
 const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
-  const icon = <Icon as={ txIcon } boxSize={ 6 } color="gray.500"/>;
+  const icon = <TxEntity.Icon/>;
   const hash = (
     <chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
       <HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
@@ -25,7 +25,7 @@ const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
   if (isMobile) {
     return (
       <>
-        <Flex alignItems="center" justifyContent="space-between" gap={ 2 }>
+        <Flex alignItems="center">
           { icon }
           { hash }
         </Flex>
@@ -35,11 +35,13 @@ const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
   }
 
   return (
-    <Grid templateColumns="24px minmax(auto, max-content) auto" gap={ 2 }>
+    <Flex columnGap={ 2 }>
+      <Flex alignItems="center" minW={ 0 }>
         { icon }
         { hash }
-      <Text variant="secondary" textAlign="end">{ date }</Text>
-    </Grid>
+      </Flex>
+      <Text variant="secondary" textAlign="end" flexShrink={ 0 } ml="auto">{ date }</Text>
+    </Flex>
   );
 };