Merge pull request #894 from blockscout/feat/token-icon-in-search

add icon for tokens in search results

mocks/search/index.ts

@@ -7,6 +7,7 @@ export const token1: SearchResultToken = {
   symbol: 'TNT',
   token_url: '/token/0x377c5F2B300B25a534d4639177873b7fEAA56d4B',
   type: 'token' as const,
+  icon_url: 'http://localhost:3000/token-icon.png',
 };
 
 export const token2: SearchResultToken = {
@@ -16,6 +17,7 @@ export const token2: SearchResultToken = {
   symbol: 'pdE1B',
   token_url: '/token/0xC35Cc7223B0175245E9964f2E3119c261E8e21F9',
   type: 'token' as const,
+  icon_url: null,
 };
 
 export const block1: SearchResultBlock = {

mocks/tokens/tokenInfo.ts

@@ -10,7 +10,7 @@ export const tokenInfo: TokenInfo = {
   symbol: 'ARIA',
   type: 'ERC-20',
   total_supply: '1235',
-  icon_url: null,
+  icon_url: 'http://localhost:3000/token-icon.png',
 };
 
 export const tokenCounters: TokenCounters = {

stubs/search.ts

@@ -9,6 +9,7 @@ export const SEARCH_RESULT_ITEM: SearchResultItem = {
   symbol: 'USDC',
   token_url: '/token/0x3714A8C7824B22271550894f7555f0a672f97809',
   type: 'token',
+  icon_url: null,
 };
 
 export const SEARCH_RESULT_NEXT_PAGE_PARAMS: SearchResult['next_page_params'] = {

types/api/search.ts

@@ -7,6 +7,7 @@ export interface SearchResultToken {
   address: string;
   token_url: string;
   address_url: string;
+  icon_url: string | null;
 }
 
 export interface SearchResultAddressOrContract {

ui/pages/SearchResults.pw.tsx

@@ -23,6 +23,12 @@ test('search by name +@mobile +@dark-mode', async({ mount, page }) => {
       ],
     }),
   }));
+  await page.route(searchMock.token1.icon_url as string, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
 
   const component = await mount(
     <TestApp>

ui/pages/Token.pw.tsx

@@ -76,6 +76,12 @@ test('with verified info', async({ mount, page, createSocket }) => {
   await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
     body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
   }));
+  await page.route(tokenInfo.icon_url as string, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
 
   const component = await mount(
     <TestApp withSocket>
@@ -119,6 +125,12 @@ test.describe('mobile', () => {
     await page.route(VERIFIED_INFO_URL, (route) => route.fulfill({
       body: JSON.stringify(verifiedAddressesMocks.TOKEN_INFO_APPLICATION.APPROVED),
     }));
+    await page.route(tokenInfo.icon_url as string, (route) => {
+      return route.fulfill({
+        status: 200,
+        path: './playwright/image_s.jpg',
+      });
+    });
 
     const component = await mount(
       <TestApp withSocket>

ui/searchResults/SearchResultListItem.tsx

@@ -31,7 +31,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
 
         return (
           <Flex alignItems="flex-start">
-            <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 } isLoading={ isLoading }/>
+            <TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 } isLoading={ isLoading }/>
             <LinkInternal
               ml={ 2 }
               href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) }

ui/searchResults/SearchResultTableItem.tsx

@@ -27,11 +27,12 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
     switch (data.type) {
       case 'token': {
         const name = data.name + (data.symbol ? ` (${ trimTokenSymbol(data.symbol) })` : '');
+
         return (
           <>
             <Td fontSize="sm">
               <Flex alignItems="center">
-                <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 } isLoading={ isLoading }/>
+                <TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 } isLoading={ isLoading }/>
                 <LinkInternal
                   ml={ 2 }
                   href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) }

ui/snippets/searchBar/SearchBar.pw.tsx

@@ -19,6 +19,12 @@ test.beforeEach(async({ page }) => {
       path: './playwright/image_s.jpg',
     });
   });
+  await page.route(searchMock.token1.icon_url as string, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
 });
 
 test('search by name  +@mobile +@dark-mode', async({ mount, page }) => {

ui/snippets/searchBar/SearchBarSuggestItem.tsx

@@ -47,7 +47,7 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick }: Props) =>
 
         return (
           <>
-            <TokenLogo boxSize={ 6 } hash={ data.address } name={ data.name } flexShrink={ 0 }/>
+            <TokenLogo boxSize={ 6 } data={ data } flexShrink={ 0 }/>
             <Text fontWeight={ 700 } ml={ 2 } w="200px" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis" flexShrink={ 0 }>
               <span dangerouslySetInnerHTML={{ __html: highlightText(name, searchTerm) }}/>
             </Text>