search redesign

lib/date/dayjs.ts

@@ -7,6 +7,8 @@ import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 
+import { nbsp } from 'lib/html-entities';
+
 const relativeTimeConfig = {
   thresholds: [
     { l: 's', r: 1 },
@@ -33,7 +35,7 @@ dayjs.extend(minMax);
 
 dayjs.updateLocale('en', {
   formats: {
-    LLLL: 'MMMM-DD-YYYY HH:mm:ss A Z UTC',
+    llll: `MMM DD YYYY HH:mm:ss A (Z${ nbsp }UTC)`,
   },
   relativeTime: {
     s: 'a sec',

ui/address/contract/ContractCode.tsx

@@ -187,7 +187,7 @@ const ContractCode = ({ addressHash, noSocket }: Props) => {
             <InfoItem label="Optimization enabled" value={ data.optimization_enabled ? 'true' : 'false' } isLoading={ isPlaceholderData }/> }
           { data.optimization_runs && <InfoItem label="Optimization runs" value={ String(data.optimization_runs) } isLoading={ isPlaceholderData }/> }
           { data.verified_at &&
-            <InfoItem label="Verified at" value={ dayjs(data.verified_at).format('LLLL') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
+            <InfoItem label="Verified at" value={ dayjs(data.verified_at).format('llll') } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
           { data.file_path && <InfoItem label="Contract file path" value={ data.file_path } wordBreak="break-word" isLoading={ isPlaceholderData }/> }
         </Grid>
       ) }

ui/block/BlockDetails.tsx

@@ -166,7 +166,7 @@ const BlockDetails = ({ query }: Props) => {
         </Skeleton>
         <TextSeparator/>
         <Skeleton isLoaded={ !isPlaceholderData } whiteSpace="normal">
-          { dayjs(data.timestamp).format('LLLL') }
+          { dayjs(data.timestamp).format('llll') }
         </Skeleton>
       </DetailsInfoItem>
       <DetailsInfoItem

ui/home/IndexingAlertIntTxs.tsx

@@ -54,7 +54,7 @@ const IndexingAlertIntTxs = ({ className }: { className?: string }) => {
     <Text fontSize="xs" color={ hintTextcolor }>
       { data.indexed_internal_transactions_ratio &&
         `${ Math.floor(Number(data.indexed_internal_transactions_ratio) * 100) }% Blocks With Internal Transactions Indexed${ nbsp }${ ndash } ` }
-      We{ apos }re indexing this chain right now. Some of the counts may be inaccurate.`
+      We{ apos }re indexing this chain right now. Some of the counts may be inaccurate.
     </Text>
   );
 

ui/pages/SearchResults.tsx

@@ -15,39 +15,6 @@ import Pagination from 'ui/shared/pagination/Pagination';
 import Thead from 'ui/shared/TheadSticky';
 import Header from 'ui/snippets/header/Header';
 import useSearchQuery from 'ui/snippets/searchBar/useSearchQuery';
-// eslint-disable-next-line import-helpers/order-imports
-import * as searchMock from 'mocks/search/index';
-
-const mock = [
-  searchMock.address1,
-  searchMock.block1,
-  searchMock.contract1,
-  searchMock.label1,
-  searchMock.token1,
-  searchMock.token2,
-  searchMock.tx1,
-  searchMock.address1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.contract1,
-  searchMock.label1,
-  searchMock.token1,
-  searchMock.token2,
-  searchMock.tx1,
-  searchMock.address1,
-  searchMock.block1,
-  searchMock.contract1,
-  searchMock.label1,
-  searchMock.token1,
-  searchMock.token2,
-];
 
 const SearchResultsPageContent = () => {
   const router = useRouter();
@@ -101,8 +68,7 @@ const SearchResultsPageContent = () => {
     return (
       <>
         <Show below="lg" ssr={ false }>
-          { mock.map((item, index) => (
-          // { data.items.map((item, index) => (
+          { data.items.map((item, index) => (
             <SearchResultListItem
               key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
               data={ item }
@@ -117,13 +83,12 @@ const SearchResultsPageContent = () => {
               <Tr>
                 <Th width="30%">Search Result</Th>
                 <Th width="35%"/>
-                <Th width="35%"/>
+                <Th width="35%" pr={ 10 }/>
                 <Th width="150px">Category</Th>
               </Tr>
             </Thead>
             <Tbody>
-              { /* { data.items.map((item, index) => ( */ }
-              { mock.map((item, index) => (
+              { data.items.map((item, index) => (
                 <SearchResultTableItem
                   key={ (isPlaceholderData ? 'placeholder_' : 'actual_') + index }
                   data={ item }

ui/searchResults/SearchResultListItem.tsx

@@ -15,10 +15,10 @@ import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
-import HashStringShorten from 'ui/shared/HashStringShorten';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
@@ -89,7 +89,6 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
           <Flex alignItems="flex-start">
             <Icon as={ labelIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
             <LinkInternal
-              ml={ 2 }
               href={ route({ pathname: '/address/[hash]', query: { hash: data.address } }) }
               fontWeight={ 700 }
               wordBreak="break-all"
@@ -138,32 +137,25 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
         return (
           <Grid templateColumns="1fr auto" overflow="hidden" gap={ 5 }>
             <Skeleton isLoaded={ !isLoading } overflow="hidden" display="flex" alignItems="center">
-              <HashStringShorten hash={ data.address }/>
+              <HashStringShortenDynamic hash={ data.address }/>
               { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
             </Skeleton>
-            { data.token_type === 'ERC-20' && data.exchange_rate && (
-              <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
-                ${ Number(data.exchange_rate).toLocaleString() }
-              </Text>
-            ) }
-            { data.token_type !== 'ERC-20' && data.total_supply && (
-              <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" variant="secondary">
-                Items { Number(data.total_supply).toLocaleString() }
-              </Text>
-            ) }
+            <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" 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>
           </Grid>
         );
       }
       case 'block': {
         const shouldHighlightHash = data.block_hash.toLowerCase() === searchTerm.toLowerCase();
         return (
-          <Flex alignItems="center" justifyContent="space-between" w="100%">
-            <Text variant="secondary" mr={ 2 }>{ dayjs(data.timestamp).format('llll') }</Text>
-            <Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden">
-              <HashStringShorten hash={ data.block_hash }/>
+          <>
+            <Box as={ shouldHighlightHash ? 'mark' : 'span' } display="block" whiteSpace="nowrap" overflow="hidden" mb={ 1 }>
+              <HashStringShortenDynamic hash={ data.block_hash }/>
             </Box>
-          </Flex>
-
+            <Text variant="secondary" mr={ 2 }>{ dayjs(data.timestamp).format('llll') }</Text>
+          </>
         );
       }
       case 'transaction': {
@@ -192,12 +184,14 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
     }
   })();
 
+  const category = getItemCategory(data);
+
   return (
     <ListItemMobile py={ 3 } fontSize="sm" rowGap={ 2 }>
       <Flex justifyContent="space-between" w="100%" overflow="hidden" lineHeight={ 6 }>
         { firstRow }
         <Skeleton isLoaded={ !isLoading } color="text_secondary" ml={ 8 } textTransform="capitalize">
-          <span>{ data.type }</span>
+          <span>{ category ? searchItemTitles[category].itemTitleShort : '' }</span>
         </Skeleton>
       </Flex>
       { Boolean(secondRow) && (

ui/searchResults/SearchResultTableItem.tsx

@@ -17,6 +17,7 @@ import AddressIcon from 'ui/shared/address/AddressIcon';
 import AddressLink from 'ui/shared/address/AddressLink';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import LinkInternal from 'ui/shared/LinkInternal';
+import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
 import TokenLogo from 'ui/shared/TokenLogo';
 
 interface Props {
@@ -66,25 +67,19 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
               </Flex>
             </Td>
             <Td fontSize="sm" verticalAlign="middle">
-              <Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden" display="flex" alignItems="center">
+              <Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden" display="flex" alignItems="center" justifyContent="space-between">
                 <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-32px)' : 'unset' }>
                   <HashStringShortenDynamic hash={ data.address }/>
                 </Box>
                 { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
               </Skeleton>
             </Td>
-            <Td fontSize="sm" verticalAlign="middle">
+            <Td fontSize="sm" verticalAlign="middle" isNumeric>
               <Skeleton isLoaded={ !isLoading } whiteSpace="nowrap" overflow="hidden">
-                { data.token_type === 'ERC-20' && data.exchange_rate && (
-                  <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" fontWeight={ 700 }>
-                  ${ Number(data.exchange_rate).toLocaleString() }
-                  </Text>
-                ) }
-                { data.token_type !== 'ERC-20' && data.total_supply && (
-                  <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" variant="secondary">
-                    Items { Number(data.total_supply).toLocaleString() }
-                  </Text>
-                ) }
+                <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" 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>
               </Skeleton>
             </Td>
           </>
@@ -154,12 +149,15 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 </LinkInternal>
               </Flex>
             </Td>
-            <Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
-              <Flex alignItems="center" overflow="hidden">
-                <HashStringShortenDynamic hash={ data.address }/>
+            <Td fontSize="sm" verticalAlign="middle">
+              <Flex alignItems="center" overflow="hidden" justifyContent="space-between">
+                <Box overflow="hidden" whiteSpace="nowrap" w={ data.is_smart_contract_verified ? 'calc(100%-32px)' : 'unset' }>
+                  <HashStringShortenDynamic hash={ data.address }/>
+                </Box>
                 { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
               </Flex>
             </Td>
+            <Td></Td>
           </>
         );
       }
@@ -186,7 +184,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 <HashStringShortenDynamic hash={ data.block_hash }/>
               </Box>
             </Td>
-            <Td fontSize="sm" verticalAlign="middle">
+            <Td fontSize="sm" verticalAlign="middle" isNumeric>
               <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
             </Td>
           </>
@@ -204,7 +202,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                 </chakra.mark>
               </Flex>
             </Td>
-            <Td fontSize="sm" verticalAlign="middle">
+            <Td fontSize="sm" verticalAlign="middle" isNumeric>
               <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
             </Td>
           </>
@@ -213,12 +211,14 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
     }
   })();
 
+  const category = getItemCategory(data);
+
   return (
     <Tr>
       { content }
       <Td fontSize="sm" textTransform="capitalize" verticalAlign="middle">
         <Skeleton isLoaded={ !isLoading } color="text_secondary" display="inline-block">
-          <span>{ data.type }</span>
+          <span>{ category ? searchItemTitles[category].itemTitle : '' }</span>
         </Skeleton>
       </Td>
     </Tr>

ui/shared/search/utils.ts

+import type { SearchResultItem } from 'types/api/search';
+
+export type Category = 'token' | 'nft' | 'address' | 'app' | 'public_tag' | 'transaction' | 'block';
+
+export const searchCategories: Array<{id: Category; title: string }> = [
+  { id: 'token', title: 'Tokens (ERC-20)' },
+  { id: 'nft', title: 'NFTs (ERC-721 & 1155)' },
+  { id: 'address', title: 'Addresses' },
+  { id: 'app', title: 'Apps' },
+  { id: 'public_tag', title: 'Public tags' },
+  { id: 'transaction', title: 'Transactions' },
+  { id: 'block', title: 'Blocks' },
+];
+
+export const searchItemTitles: Record<Category, { itemTitle: string; itemTitleShort: string }> = {
+  token: { itemTitle: 'Token', itemTitleShort: 'Token' },
+  nft: { itemTitle: 'NFT', itemTitleShort: 'NFT' },
+  address: { itemTitle: 'Address', itemTitleShort: 'Address' },
+  app: { itemTitle: 'App', itemTitleShort: 'App' },
+  public_tag: { itemTitle: 'Public tag', itemTitleShort: 'Tag' },
+  transaction: { itemTitle: 'Transaction', itemTitleShort: 'Txn' },
+  block: { itemTitle: 'Block', itemTitleShort: 'Block' },
+};
+
+export function getItemCategory(item: SearchResultItem): Category | undefined {
+  switch (item.type) {
+    case 'address':
+    case 'contract': {
+      return 'address';
+    }
+    case 'token': {
+      if (item.token_type === 'ERC-20') {
+        return 'token';
+      }
+      return 'nft';
+    }
+    case 'block': {
+      return 'block';
+    }
+    case 'label': {
+      return 'public_tag';
+    }
+    case 'transaction': {
+      return 'transaction';
+    }
+  }
+}

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx

@@ -9,45 +9,11 @@ import useIsMobile from 'lib/hooks/useIsMobile';
 import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
 import type { QueryWithPagesResult } from 'ui/shared/pagination/useQueryWithPages';
+import type { Category } from 'ui/shared/search/utils';
+import { getItemCategory, searchCategories } from 'ui/shared/search/utils';
 
 import SearchBarSuggestItem from './SearchBarSuggestItem';
 
-type Category = 'token' | 'nft' | 'address' | 'app' | 'public_tag' | 'transaction' | 'block';
-
-const CATEGORIES: Array<{id: Category; title: string }> = [
-  { id: 'token', title: 'Tokens (ERC-20)' },
-  { id: 'nft', title: 'NFTs (ERC-721 & ERC-1155)' },
-  { id: 'address', title: 'Addresses' },
-  { id: 'app', title: 'Apps' },
-  { id: 'public_tag', title: 'Public tags' },
-  { id: 'transaction', title: 'Transactions' },
-  { id: 'block', title: 'Blocks' },
-];
-
-const getItemCategory = (item: SearchResultItem): Category | undefined => {
-  switch (item.type) {
-    case 'address':
-    case 'contract': {
-      return 'address';
-    }
-    case 'token': {
-      if (item.token_type === 'ERC-20') {
-        return 'token';
-      }
-      return 'nft';
-    }
-    case 'block': {
-      return 'block';
-    }
-    case 'label': {
-      return 'public_tag';
-    }
-    case 'transaction': {
-      return 'transaction';
-    }
-  }
-};
-
 interface Props {
   query: QueryWithPagesResult<'search'>;
   searchTerm: string;
@@ -55,40 +21,6 @@ interface Props {
   containerId: string;
 }
 
-// eslint-disable-next-line import-helpers/order-imports
-import * as searchMock from 'mocks/search/index';
-
-const mock = [
-  searchMock.address1,
-  searchMock.block1,
-  searchMock.contract1,
-  searchMock.label1,
-  searchMock.token1,
-  searchMock.token2,
-  searchMock.tx1,
-  searchMock.address1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.block1,
-  searchMock.contract1,
-  searchMock.label1,
-  searchMock.token1,
-  searchMock.token2,
-  searchMock.tx1,
-  searchMock.address1,
-  searchMock.block1,
-  searchMock.contract1,
-  searchMock.label1,
-  searchMock.token1,
-  searchMock.token2,
-];
-
 const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props) => {
   const isMobile = useIsMobile();
 
@@ -133,8 +65,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
       return {};
     }
     const map: Partial<Record<Category, Array<SearchResultItem>>> = {};
-    // query.data?.items.forEach(item => {
-    mock.forEach(item => {
+    query.data?.items.forEach(item => {
       const cat = getItemCategory(item);
       if (cat) {
         if (cat in map) {
@@ -168,7 +99,7 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
       return <Text>Something went wrong. Try refreshing the page or come back later.</Text>;
     }
 
-    const resultCategories = CATEGORIES.filter(cat => itemsGroups[cat.id]);
+    const resultCategories = searchCategories.filter(cat => itemsGroups[cat.id]);
 
     return (
       <>

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

@@ -27,45 +27,29 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
             flexShrink={ 0 }
 
           />
-          { data.name && (
-            <Text
-              fontWeight={ 700 }
-              overflow="hidden"
-              whiteSpace="nowrap"
-              textOverflow="ellipsis"
-              flexGrow={ 1 }
-            >
-              <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
-            </Text>
-          ) }
-          { !data.name && (
-            <Box
-              as={ shouldHighlightHash ? 'mark' : 'span' }
-              display="block"
-              overflow="hidden"
-              whiteSpace="nowrap"
-              fontWeight={ 700 }
-              flexGrow={ 1 }
+          <Box
+            as={ shouldHighlightHash ? 'mark' : 'span' }
+            display="block"
+            overflow="hidden"
+            whiteSpace="nowrap"
+            fontWeight={ 700 }
+            flexGrow={ 1 }
 
-            >
-              <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
-            </Box>
-          ) }
-          { !data.name && data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
+          >
+            <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+          </Box>
+          { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
         </Flex>
         { data.name && (
-          <Flex alignItems="center" justifyContent="space-between">
-            <Text
-              as={ shouldHighlightHash ? 'mark' : 'span' }
-              overflow="hidden"
-              whiteSpace="nowrap"
-              variant="secondary"
-              flexGrow={ 1 }
-            >
-              <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
-            </Text>
-            { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
-          </Flex>
+          <Text
+            variant="secondary"
+            overflow="hidden"
+            whiteSpace="nowrap"
+            textOverflow="ellipsis"
+            flexGrow={ 1 }
+          >
+            <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
+          </Text>
         ) }
       </>
     );
@@ -79,43 +63,29 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
         flexShrink={ 0 }
 
       />
+      <Flex alignItems="center" w="420px">
+        <Box
+          as={ shouldHighlightHash ? 'mark' : 'span' }
+          display="block"
+          overflow="hidden"
+          whiteSpace="nowrap"
+          fontWeight={ 700 }
+        >
+          <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
+        </Box>
+        { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
+      </Flex>
       { data.name && (
-        <>
-          <Text
-            fontWeight={ 700 }
-            overflow="hidden"
-            whiteSpace="nowrap"
-            textOverflow="ellipsis"
-            flexGrow={ 0 }
-            w="200px"
-          >
-            <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
-          </Text>
-          <Text
-            as={ shouldHighlightHash ? 'mark' : 'span' }
-            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 }/> }
-        </>
-      ) }
-      { !data.name && (
-        <>
-          <Box
-            as={ shouldHighlightHash ? 'mark' : 'span' }
-            display="block"
-            overflow="hidden"
-            whiteSpace="nowrap"
-            fontWeight={ 700 }
-          >
-            <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
-          </Box>
-          { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
-        </>
+        <Text
+          variant="secondary"
+          overflow="hidden"
+          whiteSpace="nowrap"
+          textOverflow="ellipsis"
+          flexGrow={ 0 }
+          ml={ 6 }
+        >
+          <span dangerouslySetInnerHTML={{ __html: highlightText(data.name, searchTerm) }}/>
+        </Text>
       ) }
     </Flex>
   );

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestBlock.tsx

-import { Text, Icon, Grid } from '@chakra-ui/react';
+import { Text, Icon, Flex, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { SearchResultBlock } from 'types/api/search';
@@ -20,7 +20,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
   if (isMobile) {
     return (
       <>
-        <Grid alignItems="center" templateColumns="24px auto 1fr" gap={ 2 }>
+        <Flex alignItems="center">
           <Icon as={ blockIcon } boxSize={ 6 } mr={ 2 } color="gray.500"/>
           <Text
             fontWeight={ 700 }
@@ -30,23 +30,24 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
           >
             <span dangerouslySetInnerHTML={{ __html: highlightText(data.block_number.toString(), searchTerm) }}/>
           </Text>
-          <Text variant="secondary" overflow="hidden" whiteSpace="nowrap" as={ shouldHighlightHash ? 'mark' : 'span' } display="block">
-            <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
-          </Text>
-        </Grid>
+        </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 1fr auto" gap={ 2 }>
+    <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>
@@ -59,7 +60,7 @@ const SearchBarSuggestBlock = ({ data, isMobile, searchTerm }: Props) => {
       >
         <HashStringShortenDynamic hash={ data.block_hash } isTooltipDisabled/>
       </Text>
-      <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+      <Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
     </Grid>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

@@ -38,16 +38,10 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
             <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>
           </Text>
           { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
-          { data.token_type === 'ERC-20' && data.exchange_rate && (
-            <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } fontWeight={ 700 } maxW="200px">
-              ${ Number(data.exchange_rate).toLocaleString() }
-            </Text>
-          ) }
-          { data.token_type !== 'ERC-20' && data.total_supply && (
-            <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } variant="secondary" maxW="200px" >
-              Items { Number(data.total_supply).toLocaleString() }
-            </Text>
-          ) }
+          <Text overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis"ml={ 2 } fontWeight={ 700 } maxW="200px">
+            { 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>
         </Grid>
       </>
     );
@@ -72,16 +66,10 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
         </Text>
         { data.is_smart_contract_verified && <Icon as={ iconSuccess } color="green.500" ml={ 2 }/> }
       </Flex>
-      { data.token_type === 'ERC-20' && data.exchange_rate && (
-        <Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } fontWeight={ 700 }>
-          ${ Number(data.exchange_rate).toLocaleString() }
-        </Text>
-      ) }
-      { data.token_type !== 'ERC-20' && data.total_supply && (
-        <Text overflow="hidden" whiteSpace="nowrap" ml={ 2 } variant="secondary">
-          Items { Number(data.total_supply).toLocaleString() }
-        </Text>
-      ) }
+      <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>
     </Grid>
   );
 };

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTx.tsx

@@ -29,12 +29,13 @@ const SearchBarSuggestTx = ({ data, isMobile }: Props) => {
   }
 
   return (
-    <Grid templateColumns="24px 1fr auto" gap={ 2 }>
+    <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 } width="fit-content">
+
+      <chakra.mark overflow="hidden" whiteSpace="nowrap" display="block" fontWeight={ 700 } >
         <HashStringShortenDynamic hash={ data.tx_hash } isTooltipDisabled/>
       </chakra.mark>
-      <Text variant="secondary">{ dayjs(data.timestamp).format('llll') }</Text>
+      <Text variant="secondary" textAlign="end">{ dayjs(data.timestamp).format('llll') }</Text>
     </Grid>
   );
 };

ui/tx/TxDetails.tsx

@@ -195,7 +195,7 @@ const TxDetails = () => {
             <Icon as={ clockIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
             <Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>{ dayjs(data.timestamp).fromNow() }</Skeleton>
             <TextSeparator/>
-            <Skeleton isLoaded={ !isPlaceholderData } whiteSpace="normal">{ dayjs(data.timestamp).format('LLLL') }</Skeleton>
+            <Skeleton isLoaded={ !isPlaceholderData } whiteSpace="normal">{ dayjs(data.timestamp).format('llll') }</Skeleton>
             <TextSeparator color="gray.500"/>
             <Skeleton isLoaded={ !isPlaceholderData } color="text_secondary">
               <span>{ getConfirmationDuration(data.confirmation_duration) }</span>