verified token

mocks/search/index.ts

@@ -11,6 +11,7 @@ export const token1: SearchResultToken = {
   token_type: 'ERC-721',
   total_supply: '10000001',
   exchange_rate: null,
+  is_verified_via_admin_panel: true,
   is_smart_contract_verified: true,
 };
 
@@ -25,6 +26,7 @@ export const token2: SearchResultToken = {
   token_type: 'ERC-20',
   total_supply: '10000001',
   exchange_rate: '1.11',
+  is_verified_via_admin_panel: false,
   is_smart_contract_verified: false,
 };
 

stubs/search.ts

@@ -10,6 +10,7 @@ export const SEARCH_RESULT_ITEM: SearchResultItem = {
   token_url: '/token/0x3714A8C7824B22271550894f7555f0a672f97809',
   type: 'token',
   icon_url: null,
+  is_verified_via_admin_panel: false,
   is_smart_contract_verified: false,
   exchange_rate: '1.11',
   total_supply: null,

types/api/search.ts

@@ -13,6 +13,7 @@ export interface SearchResultToken {
   token_type: TokenType;
   exchange_rate: string | null;
   total_supply: string | null;
+  is_verified_via_admin_panel: boolean;
   is_smart_contract_verified: boolean;
 }
 

ui/searchResults/SearchResultListItem.tsx

@@ -7,6 +7,7 @@ import { route } from 'nextjs-routes';
 
 import labelIcon from 'icons/publictags.svg';
 import iconSuccess from 'icons/status/success.svg';
+import verifiedToken from 'icons/verified_token.svg';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
@@ -49,7 +50,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
         const name = data.name + (data.symbol ? ` (${ data.symbol })` : '');
 
         return (
-          <Flex alignItems="flex-start" flexGrow={ 1 } overflow="hidden">
+          <Flex alignItems="center" overflow="hidden">
             <TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 } isLoading={ isLoading }/>
             <LinkInternal
               ml={ 2 }
@@ -69,6 +70,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
                 textOverflow="ellipsis"
               />
             </LinkInternal>
+            { data.is_verified_via_admin_panel && <Icon as={ verifiedToken } boxSize={ 4 } ml={ 1 } color="green.500"/> }
           </Flex>
         );
       }

ui/searchResults/SearchResultTableItem.tsx

@@ -7,6 +7,7 @@ import { route } from 'nextjs-routes';
 
 import labelIcon from 'icons/publictags.svg';
 import iconSuccess from 'icons/status/success.svg';
+import verifiedToken from 'icons/verified_token.svg';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
 import * as mixpanel from 'lib/mixpanel/index';
@@ -69,6 +70,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
                     dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}
                   />
                 </LinkInternal>
+                { data.is_verified_via_admin_panel && <Icon as={ verifiedToken } boxSize={ 4 } ml={ 1 } color="green.500"/> }
               </Flex>
             </Td>
             <Td fontSize="sm" verticalAlign="middle">

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestToken.tsx

@@ -4,6 +4,7 @@ import React from 'react';
 import type { SearchResultToken } from 'types/api/search';
 
 import iconSuccess from 'icons/status/success.svg';
+import verifiedToken from 'icons/verified_token.svg';
 import highlightText from 'lib/highlightText';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import TokenLogo from 'ui/shared/TokenLogo';
@@ -16,6 +17,7 @@ interface Props {
 
 const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
   const icon = <TokenLogo boxSize={ 6 } data={ data }/>;
+  const verifiedIcon = <Icon as={ verifiedToken } boxSize={ 4 } color="green.500"/>;
   const name = (
     <Text
       fontWeight={ 700 }
@@ -49,7 +51,10 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
       <>
         <Flex alignItems="center" gap={ 2 }>
           { icon }
-          { name }
+          <Flex alignItems="center" gap={ 1 }>
+            { name }
+            { data.is_verified_via_admin_panel && verifiedIcon }
+          </Flex>
         </Flex>
         <Grid templateColumns={ templateCols } alignItems="center" gap={ 2 }>
           <Flex alignItems="center" overflow="hidden">
@@ -65,7 +70,10 @@ const SearchBarSuggestToken = ({ data, isMobile, searchTerm }: Props) => {
   return (
     <Grid templateColumns="24px 200px 1fr auto" gap={ 2 }>
       { icon }
-      { name }
+      <Flex alignItems="center" gap={ 1 }>
+        { name }
+        { data.is_verified_via_admin_panel && verifiedIcon }
+      </Flex>
       <Flex alignItems="center" overflow="hidden">
         { address }
         { contractVerifiedIcon }