add certified icon to search

mocks/search/index.ts

@@ -96,6 +96,15 @@ export const contract1: SearchResultAddressOrContract = {
   url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
 };
 
+export const contract2: SearchResultAddressOrContract = {
+  address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+  name: 'Super utko',
+  type: 'contract' as const,
+  is_smart_contract_verified: true,
+  certified: true,
+  url: '/address/0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
+};
+
 export const label1: SearchResultLabel = {
   address: '0xb64a30399f7F6b0C154c2E7Af0a3ec7B0A5b131a',
   name: 'utko',

types/api/search.ts

@@ -22,6 +22,7 @@ export interface SearchResultAddressOrContract {
   name: string | null;
   address: string;
   is_smart_contract_verified: boolean;
+  certified?: true;
   url?: string; // not used by the frontend, we build the url ourselves
   ens_info?: {
     address_hash: string;

ui/pages/SearchResults.pw.tsx

@@ -42,7 +42,7 @@ test('search by address hash +@mobile', async({ render, mockApiResponse }) => {
     },
   };
   const data = {
-    items: [ searchMock.address1 ],
+    items: [ searchMock.address1, searchMock.contract2 ],
     next_page_params: null,
   };
   await mockApiResponse('search', data, { queryParams: { q: searchMock.address1.address } });

ui/searchResults/SearchResultListItem.tsx

@@ -11,6 +11,7 @@ import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -346,16 +347,21 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
         const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
 
         return addressName ? (
-          <>
+          <Flex alignItems="center">
+            <Text
+              overflow="hidden"
+              whiteSpace="nowrap"
+              textOverflow="ellipsis"
+            >
               <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
-            { data.ens_info &&
-              (
+              { data.ens_info && (
                 data.ens_info.names_count > 1 ?
                   <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
                   <chakra.span color="text_secondary">{ expiresText }</chakra.span>
-              )
-            }
-          </>
+              ) }
+            </Text>
+            { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } ml={ 1 }/> }
+          </Flex>
         ) :
           null;
       }

ui/searchResults/SearchResultTableItem.tsx

@@ -11,6 +11,7 @@ import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
 import { saveToRecentKeywords } from 'lib/recentSearchKeywords';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import * as BlobEntity from 'ui/shared/entities/blob/BlobEntity';
 import * as BlockEntity from 'ui/shared/entities/block/BlockEntity';
@@ -24,6 +25,7 @@ import LinkExternal from 'ui/shared/LinkExternal';
 import LinkInternal from 'ui/shared/LinkInternal';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
+
 interface Props {
   data: SearchResultItem | SearchResultAppItem;
   searchTerm: string;
@@ -128,14 +130,24 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
             </Td>
             { addressName && (
               <Td colSpan={ 2 } fontSize="sm" verticalAlign="middle">
+                <Flex alignItems="center">
+                  <Text
+                    overflow="hidden"
+                    whiteSpace="nowrap"
+                    textOverflow="ellipsis"
+                  >
                     <span dangerouslySetInnerHTML={{ __html: shouldHighlightHash ? xss(addressName) : highlightText(addressName, searchTerm) }}/>
-                { data.ens_info &&
-                  (
-                    data.ens_info.names_count > 1 ?
-                      <chakra.span color="text_secondary"> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</chakra.span> :
+                    { data.ens_info && (
+                      data.ens_info.names_count > 1 ? (
+                        <chakra.span color="text_secondary">
+                          { data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }
+                        </chakra.span>
+                      ) :
                         <chakra.span color="text_secondary">{ expiresText }</chakra.span>
-                  )
-                }
+                    ) }
+                  </Text>
+                  { data.certified && <ContractCertifiedLabel iconSize={ 5 } boxSize={ 5 } mx={ 1 }/> }
+                </Flex>
               </Td>
             ) }
           </>

ui/snippets/searchBar/SearchBar.pw.tsx

@@ -30,6 +30,7 @@ test('search by token name  +@mobile +@dark-mode', async({ render, page, mockApi
 test('search by contract name  +@mobile +@dark-mode', async({ render, page, mockApiResponse }) => {
   const apiUrl = await mockApiResponse('quick_search', [
     searchMock.contract1,
+    searchMock.contract2,
     searchMock.address2,
   ], { queryParams: { q: 'o' } });
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

@@ -6,6 +6,7 @@ import type { SearchResultAddressOrContract } from 'types/api/search';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import { ADDRESS_REGEXP } from 'lib/validations/address';
+import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 
@@ -34,6 +35,7 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
   const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : '';
 
   const nameEl = addressName && (
+    <Flex alignItems="center">
       <Text
         variant="secondary"
         overflow="hidden"
@@ -41,14 +43,14 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => {
         textOverflow="ellipsis"
       >
         <chakra.span fontWeight={ 500 } dangerouslySetInnerHTML={{ __html: highlightText(addressName, searchTerm) }}/>
-      { data.ens_info &&
-        (
+        { data.ens_info && (
           data.ens_info.names_count > 1 ?
             <span> ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` })</span> :
             <span>{ expiresText }</span>
-        )
-      }
+        ) }
       </Text>
+      { data.certified && <ContractCertifiedLabel boxSize={ 5 } iconSize={ 5 } ml={ 1 }/> }
+    </Flex>
   );
   const addressEl = <HashStringShortenDynamic hash={ data.address } isTooltipDisabled/>;