search redesign

(cherry picked from commit 64b466b688985243163c9fc8781730efc4bcc83c)

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();
@@ -92,8 +59,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 }
@@ -108,13 +74,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

@@ -0,0 +1,47 @@
+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';
+    }
+  }
+}