review-fixes

ui/searchResults/SearchResultListItem.tsx

@@ -72,15 +72,13 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
       case 'address': {
         const shouldHighlightHash = data.address.toLowerCase() === searchTerm.toLowerCase();
         return (
-          <Flex alignItems="center" overflow="hidden">
           <Address>
             <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
             <Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
               <AddressLink type="address" hash={ data.address } fontWeight={ 700 } display="block" w="100%" onClick={ handleLinkClick }/>
             </Box>
-            </Address>
             { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
-          </Flex>
+          </Address>
         );
       }
 

ui/searchResults/SearchResultTableItem.tsx

@@ -119,15 +119,13 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
 
         return (
           <Td colSpan={ 3 } fontSize="sm">
-            <Flex alignItems="center" overflow="hidden">
             <Address>
               <AddressIcon address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }} mr={ 2 } flexShrink={ 0 }/>
               <mark>
                 <AddressLink hash={ data.address } type="address" fontWeight={ 700 } onClick={ handleLinkClick }/>
               </mark>
-              </Address>
               { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
-            </Flex>
+            </Address>
           </Td>
         );
       }

ui/snippets/searchBar/SearchBar.tsx

@@ -128,7 +128,7 @@ const SearchBar = ({ isHomepage }: Props) => {
         w={ `${ menuWidth.current }px` }
         ref={ menuRef }
       >
-        <PopoverBody py={ 0 } color="chakra-body-text">
+        <PopoverBody p={ 0 } color="chakra-body-text">
           <Box
             maxH="50vh"
             overflowY="scroll"
@@ -136,6 +136,7 @@ const SearchBar = ({ isHomepage }: Props) => {
             ref={ scrollRef }
             as={ Element }
             sx={ isHomepage ? { mark: { bgColor: 'green.100' } } : {} }
+            px={ 4 }
           >
             { searchTerm.trim().length === 0 && recentSearchKeywords.length > 0 && (
               <SearchBarRecentKeywords onClick={ handleSearchTermChange } onClear={ onClose }/>

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx

@@ -78,7 +78,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
     return map;
   }, [ query.data?.items ]);
 
-  const scrollToCategory = React.useCallback((index: number) => {
+  const scrollToCategory = React.useCallback((index: number) => () => {
     setTabIndex(index);
     scroller.scrollTo(`cat_${ index }`, {
       duration: 250,
@@ -99,22 +99,26 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
       return <Text>Something went wrong. Try refreshing the page or come back later.</Text>;
     }
 
+    if (!query.data.items || query.data.items.length === 0) {
+      return <Text>No results found.</Text>;
+    }
+
     const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
 
     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" onChange={ scrollToCategory } index={ tabIndex }>
+            <Tabs variant="outline" colorScheme="gray" size="sm" index={ tabIndex }>
               <TabList columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
-                { resultCategories.map(cat => <Tab key={ cat.id }>{ cat.title }</Tab>) }
+                { resultCategories.map((cat, index) => <Tab key={ cat.id } onClick={ scrollToCategory(index) }>{ cat.title }</Tab>) }
               </TabList>
             </Tabs>
           </Box>
         ) }
         { resultCategories.map((cat, indx) => {
           return (
-            <Element name={ `cat_${ indx }` } key={ indx }>
+            <Element name={ `cat_${ indx }` } key={ cat.id }>
               <Text
                 fontSize="sm"
                 fontWeight={ 600 }

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

@@ -16,17 +16,25 @@ 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 name = data.name && (
+    <Text
+      variant="secondary"
+      overflow="hidden"
+      whiteSpace="nowrap"
+      textOverflow="ellipsis"
+    >
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
+    </Text>
+  );
+  const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
+  const address = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;
 
   if (isMobile) {
     return (
       <>
-        <Flex alignItems="center" justifyContent="space-between">
-          <AddressIcon
-            address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }}
-            mr={ 2 }
-            flexShrink={ 0 }
-
-          />
+        <Flex alignItems="center" justifyContent="space-between" gap={ 2 }>
+          { icon }
           <Box
             as={ shouldHighlightHash ? 'mark' : 'span' }
             display="block"
@@ -36,34 +44,19 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
             flexGrow={ 1 }
 
           >
-            <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+            { address }
           </Box>
-          { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
+          { isContractVerified }
         </Flex>
-        { data.name && (
-          <Text
-            variant="secondary"
-            overflow="hidden"
-            whiteSpace="nowrap"
-            textOverflow="ellipsis"
-            flexGrow={ 1 }
-          >
-            <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
-          </Text>
-        ) }
+        { name }
       </>
     );
   }
 
   return (
-    <Flex alignItems="center">
-      <AddressIcon
-        address={{ hash: data.address, is_contract: data.type === 'contract', implementation_name: null }}
-        mr={ 2 }
-        flexShrink={ 0 }
-
-      />
-      <Flex alignItems="center" w="420px">
+    <Flex alignItems="center" gap={ 2 }>
+      { icon }
+      <Flex alignItems="center" w="450px" gap={ 2 }>
         <Box
           as={ shouldHighlightHash ? 'mark' : 'span' }
           display="block"
@@ -71,22 +64,11 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
           whiteSpace="nowrap"
           fontWeight={ 700 }
         >
-          <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+          { address }
         </Box>
-        { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
+        { isContractVerified }
       </Flex>
-      { data.name && (
-        <Text
-          variant="secondary"
-          overflow="hidden"
-          whiteSpace="nowrap"
-          textOverflow="ellipsis"
-          flexGrow={ 0 }
-          ml={ 6 }
-        >
-          <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
-        </Text>
-      ) }
+      { name }
     </Flex>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx

@@ -15,13 +15,9 @@ interface Props {
 }
 
 const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
+  const icon = <Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>;
   const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
-
-  if (isMobile) {
-    return (
-      <>
-        <Flex alignItems="center">
-          <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+  const blockNumber = (
     <Text
       fontWeight={ 700 }
       overflow="hidden"
@@ -30,27 +26,8 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
     >
       <span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
     </Text>
-        </Flex>
-        <Text variant="secondary" overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
-          <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
-        </Text>
-        <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
-      </>
   );
-  }
-
-  return (
-    <Grid templateColumns="24px auto minmax(auto, max-content) auto" gap={ 2 }>
-      <Icon as={ blockIcon } boxSize={ 6 } color="gray.500"/>
-      <Text
-        fontWeight={ 700 }
-        overflow="hidden"
-        whiteSpace="nowrap"
-        textOverflow="ellipsis"
-        w="200px"
-      >
-        <span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
-      </Text>
+  const hash = (
     <Text
       variant="secondary"
       overflow="hidden"
@@ -60,7 +37,28 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
     >
       <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
     </Text>
-      <Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
+  );
+  const date = dayjs(data.timestamp).format('llll');
+
+  if (isMobile) {
+    return (
+      <>
+        <Flex alignItems="center" gap={ 2 }>
+          { icon }
+          { blockNumber }
+        </Flex>
+        { hash }
+        <Text variant="secondary">{ date }</Text>
+      </>
+    );
+  }
+
+  return (
+    <Grid templateColumns="24px 200px minmax(auto, max-content) auto" gap={ 2 }>
+      { icon }
+      { blockNumber }
+      { hash }
+      <Text variant="secondary" textAlign="end">{ date }</Text>
     </Grid>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestLabel.tsx

-import { Text, Flex, Icon } from '@chakra-ui/react';
+import { Grid, Text, Flex, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultLabel } from 'types/api/search';
@@ -15,54 +15,53 @@ interface Props {
 }
 
 const SearchBarSuggestLabel = ({ data, isMobile, searchTerm }: Props) => {
-  if (isMobile) {
-    return (
-      <>
-        <Flex alignItems="center" overflow="hidden">
-          <Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+  const icon = <Icon as={ labelIcon } boxSize={ 6 } color="gray.500"/>;
+
+  const name = (
     <Text
       fontWeight={ 700 }
       overflow="hidden"
       whiteSpace="nowrap"
       textOverflow="ellipsis"
-            flexGrow={ 1 }
     >
       <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
     </Text>
-        </Flex>
-        <Flex alignItems="center" justifyContent="space-between" overflow="hidden">
-          <Text overflow="hidden" whiteSpace="nowrap" variant="secondary">
-            <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
-          </Text>
-          { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
-        </Flex>
-      </>
   );
-  }
 
-  return (
-    <Flex alignItems="center">
-      <Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
-      <Text
-        fontWeight={ 700 }
-        overflow="hidden"
-        whiteSpace="nowrap"
-        textOverflow="ellipsis"
-        flexGrow={ 0 }
-        w="200px"
-      >
-        <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
-      </Text>
+  const address = (
     <Text
       overflow="hidden"
       whiteSpace="nowrap"
       variant="secondary"
-        ml={ 2 }
     >
       <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
     </Text>
-      { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
+  );
+
+  const isContractVerified = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
+
+  if (isMobile) {
+    return (
+      <>
+        <Flex alignItems="center" overflow="hidden" gap={ 2 }>
+          { icon }
+          { name }
+        </Flex>
+        <Flex alignItems="center" justifyContent="space-between" overflow="hidden" gap={ 2 }>
+          { address }
+          { isContractVerified }
         </Flex>
+      </>
+    );
+  }
+
+  return (
+    <Grid alignItems="center" gridTemplateColumns="24px 200px max-content 24px" gap={ 2 }>
+      { icon }
+      { name }
+      { address }
+      { isContractVerified }
+    </Grid>
   );
 };
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

@@ -15,61 +15,61 @@ interface Props {
 }
 
 const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
-  const name = data.name + (data.symbol ? ` (${ data.symbol })` : '');
-
-  if (isMobile) {
-    return (
-      <>
-        <Flex alignItems="center" justifyContent="space-between">
-          <TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 }/>
+  const icon = <TokenLogo boxSize={ 6 } data={ data }/>;
+  const name = (
     <Text
       fontWeight={ 700 }
       overflow="hidden"
       whiteSpace="nowrap"
       textOverflow="ellipsis"
-            ml={ 2 }
-            flexGrow={ 1 }
     >
-            <span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
+      <span dangerouslySetInnerHTML={{ __html: highlightText(data.name + (data.symbol ? ` (${ data.symbol })` : ''), searchTerm) }}/>
     </Text>
-        </Flex>
-        <Grid templateColumns="1fr auto auto" alignItems="center">
+  );
+
+  const address = (
     <Text variant="secondary" whiteSpace="nowrap" overflow="hidden">
       <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
     </Text>
-          { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
-          <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } fontWeight={ 700 } maxW="200px">
+  );
+
+  const contractVerifiedIcon = data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500"/>;
+  const additionalInfo = (
+    <Text overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
       { data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
       { data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
     </Text>
+  );
+
+  if (isMobile) {
+    const templateCols = `1fr
+    ${ data.is_smart_contract_verified ? ' auto' : '' }
+    ${ (data.token_type === 'ERC-20' && data.exchange_rate) || (data.token_type !== 'ERC-20' && data.total_supply) ? ' auto' : '' }`;
+
+    return (
+      <>
+        <Flex alignItems="center" gap={ 2 }>
+          { icon }
+          { name }
+        </Flex>
+        <Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
+          { address }
+          { contractVerifiedIcon }
+          { additionalInfo }
         </Grid>
       </>
     );
   }
 
   return (
-    <Grid templateColumns="24px 200px 1fr auto">
-      <TokenLogo boxSize={ 6 } data={ data }/>
-      <Text
-        fontWeight={ 700 }
-        overflow="hidden"
-        whiteSpace="nowrap"
-        textOverflow="ellipsis"
-        ml={ 2 }
-        flexGrow={ 0 }
-      >
-        <span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
-      </Text>
-      <Flex alignItems="center">
-        <Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } variant="secondary">
-          <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
-        </Text>
-        { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
+    <Grid templateColumns="24px 200px 1fr auto" gap={ 2 }>
+      { icon }
+      { name }
+      <Flex alignItems="center" gap={ 2 }>
+        { address }
+        { contractVerifiedIcon }
       </Flex>
-      <Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } fontWeight={ 700 }>
-        { data.token_type === 'ERC-20' && data.exchange_rate && `$${ Number(data.exchange_rate).toLocaleString() }` }
-        { data.token_type !== 'ERC-20' && data.total_supply && `Items ${ Number(data.total_supply).toLocaleString() }` }
-      </Text>
+      { additionalInfo }
     </Grid>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx

@@ -14,28 +14,31 @@ interface Props {
 }
 
 const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
-  if (isMobile) {
-    return (
-      <>
-        <Flex alignItems="center" justifyContent="space-between">
-          <Icon as={ txIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
+  const icon = <Icon as={ txIcon } boxSize={ 6 } color="gray.500"/>;
+  const hash = (
     <chakra.mark overflow="hidden" whiteSpace="nowrap" fontWeight={ 700 }>
       <HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
     </chakra.mark>
+  );
+  const date = dayjs(data.timestamp).format('llll');
+
+  if (isMobile) {
+    return (
+      <>
+        <Flex alignItems="center" justifyContent="space-between" gap={ 2 }>
+          { icon }
+          { hash }
         </Flex>
-        <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+        <Text variant="secondary">{ date }</Text>
       </>
     );
   }
 
   return (
     <Grid templateColumns="24px minmax(auto, max-content) auto" gap={ 2 }>
-      <Icon as={ txIcon } boxSize={ 6 } color="gray.500"/>
-
-      <chakra.mark overflow="hidden" whiteSpace="nowrap" display="block" fontWeight={ 700 } >
-        <HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
-      </chakra.mark>
-      <Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
+      { icon }
+      { hash }
+      <Text variant="secondary" textAlign="end">{ date }</Text>
     </Grid>
   );
 };