diff --git a/mocks/search/index.ts b/mocks/search/index.ts index 571eb24976..34015b5157 100644 --- a/mocks/search/index.ts +++ b/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', diff --git a/types/api/search.ts b/types/api/search.ts index bb9330a8a0..7d738e7cbd 100644 --- a/types/api/search.ts +++ b/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; diff --git a/ui/pages/SearchResults.pw.tsx b/ui/pages/SearchResults.pw.tsx index e496266474..4d4881a5dc 100644 --- a/ui/pages/SearchResults.pw.tsx +++ b/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 } }); diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png index 5c101dfdfb..2158de6556 100644 Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_default_search-by-address-hash-mobile-1.png differ diff --git a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png index 7fc3218999..46092da7a2 100644 Binary files a/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png and b/ui/pages/__screenshots__/SearchResults.pw.tsx_mobile_search-by-address-hash-mobile-1.png differ diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png similarity index 100% rename from ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-1.png rename to ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_base-view-mobile-1.png diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_mobile-base-view-1.png deleted file mode 100644 index 5f98526d58..0000000000 Binary files a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_default_mobile-base-view-1.png and /dev/null differ diff --git a/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png new file mode 100644 index 0000000000..5ea07a2053 Binary files /dev/null and b/ui/pages/__screenshots__/VerifiedContracts.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/searchResults/SearchResultListItem.tsx b/ui/searchResults/SearchResultListItem.tsx index 21ae64472c..38e12e81db 100644 --- a/ui/searchResults/SearchResultListItem.tsx +++ b/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 ? ( - <> - - { data.ens_info && - ( + + + + { data.ens_info && ( data.ens_info.names_count > 1 ? ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }) : { expiresText } - ) - } - + ) } + + { data.certified && } + ) : null; } diff --git a/ui/searchResults/SearchResultTableItem.tsx b/ui/searchResults/SearchResultTableItem.tsx index 8bb666873c..1fa0c61646 100644 --- a/ui/searchResults/SearchResultTableItem.tsx +++ b/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) => { { addressName && ( - - { data.ens_info && - ( - data.ens_info.names_count > 1 ? - ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }) : - { expiresText } - ) - } + + + + { data.ens_info && ( + data.ens_info.names_count > 1 ? ( + + { data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` } + + ) : + { expiresText } + ) } + + { data.certified && } + ) } diff --git a/ui/snippets/searchBar/SearchBar.pw.tsx b/ui/snippets/searchBar/SearchBar.pw.tsx index d593f63933..c0b348cfee 100644 --- a/ui/snippets/searchBar/SearchBar.pw.tsx +++ b/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' } }); diff --git a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx b/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx index 0a69e99525..d1fe5b0ece 100644 --- a/ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx +++ b/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,21 +35,22 @@ const SearchBarSuggestAddress = ({ data, isMobile, searchTerm }: Props) => { const expiresText = data.ens_info?.expiry_date ? ` (expires ${ dayjs(data.ens_info.expiry_date).fromNow() })` : ''; const nameEl = addressName && ( - - - { data.ens_info && - ( + + + + { data.ens_info && ( data.ens_info.names_count > 1 ? ({ data.ens_info.names_count > 39 ? '40+' : `+${ data.ens_info.names_count - 1 }` }) : { expiresText } - ) - } - + ) } + + { data.certified && } + ); const addressEl = ; diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png index 41bf00b080..8e23a46b40 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_dark-color-mode_search-by-contract-name-mobile-dark-mode-1.png differ diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png index 131547243e..3972e62da7 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_default_search-by-contract-name-mobile-dark-mode-1.png differ diff --git a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png index c86267c327..80383fc572 100644 Binary files a/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png and b/ui/snippets/searchBar/__screenshots__/SearchBar.pw.tsx_mobile_search-by-contract-name-mobile-dark-mode-1.png differ