Merge pull request #483 from blockscout/token-placeholder

update token placeholder

icons/token-placeholder.svg

+<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M7.224 8.076V6.048h9.557v2.028H13.22v9.608h-2.432V8.076H7.224Z" fill="currentColor"/>
+</svg>

mocks/ad/textAd.ts

+export const duck = {
+  ad: {
+    name: 'Hello utia!',
+    description_short: 'Utia is the best! Go with utia! Utia is the best! Go with utia!',
+    thumbnail: 'https://utia.utia',
+    url: 'https://test.url',
+    cta_button: 'Click me!',
+  },
+};

ui/home/indicators/ChainIndicators.pw.tsx

@@ -26,7 +26,6 @@ test('daily txs chart +@mobile +@dark-mode +@dark-mode-mobile', async({ mount, p
       <ChainIndicators/>
     </TestApp>,
   );
-  await page.waitForResponse(STATS_API_URL),
   await page.hover('.ChartOverlay', { position: { x: 100, y: 100 } });
 
   await expect(component).toHaveScreenshot();

ui/pages/Blocks.pw.tsx

 import { test as base, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as textAdMock from 'mocks/ad/textAd';
 import * as blockMock from 'mocks/blocks/block';
 import * as statsMock from 'mocks/stats/index';
 import * as socketServer from 'playwright/fixtures/socketServer';
@@ -26,6 +27,19 @@ const test = base.extend<socketServer.SocketServerFixture>({
 // test cases which use socket cannot run in parallel since the socket server always run on the same port
 test.describe.configure({ mode: 'serial' });
 
+test.beforeEach(async({ page }) => {
+  await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify(textAdMock.duck),
+  }));
+  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
+    return route.fulfill({
+      status: 200,
+      path: './playwright/image_s.jpg',
+    });
+  });
+});
+
 test('base view +@mobile +@dark-mode', async({ mount, page }) => {
   await page.route(BLOCKS_API_URL, (route) => route.fulfill({
     status: 200,

ui/shared/Page/Page.pw.tsx

@@ -30,7 +30,5 @@ test('with indexing alert +@mobile', async({ mount, page }) => {
     </TestApp>,
   );
 
-  await page.waitForResponse(API_URL),
-
   await expect(component).toHaveScreenshot();
 });

ui/shared/Page/PageTitle.pw.tsx

 import { test, expect } from '@playwright/experimental-ct-react';
 import React from 'react';
 
+import * as textAdMock from 'mocks/ad/textAd';
 import TestApp from 'playwright/TestApp';
 
 import PageTitle from './PageTitle';
 
-const textAdMock = {
-  ad: {
-    name: 'Hello utia!',
-    description_short: 'Utia is the best! Go with utia! Utia is the best! Go with utia!',
-    thumbnail: 'https://utia.utia',
-    url: 'https://test.url',
-    cta_button: 'Click me!',
-  },
-};
-
 test.beforeEach(async({ page }) => {
   await page.route('https://request-global.czilladx.com/serve/native.php?z=19260bf627546ab7242', (route) => route.fulfill({
     status: 200,
-    body: JSON.stringify(textAdMock),
+    body: JSON.stringify(textAdMock.duck),
   }));
-  await page.route(textAdMock.ad.thumbnail, (route) => {
+  await page.route(textAdMock.duck.ad.thumbnail, (route) => {
     return route.fulfill({
       status: 200,
       path: './playwright/image_s.jpg',

ui/shared/TokenLogo.tsx

-import { Image, Center, chakra, useColorModeValue } from '@chakra-ui/react';
+import { Image, chakra, useColorModeValue, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
+import tokenPlaceholderIcon from 'icons/token-placeholder.svg';
 
-const EmptyElement = ({ className, letter }: { className?: string; letter: string }) => {
+const EmptyElement = ({ className }: { className?: string }) => {
   const bgColor = useColorModeValue('gray.200', 'gray.600');
   const color = useColorModeValue('gray.400', 'gray.200');
 
   return (
-    <Center
+    <Icon
       className={ className }
       fontWeight={ 600 }
       bgColor={ bgColor }
       color={ color }
       borderRadius="base"
-    >
-      { letter.toUpperCase() }
-    </Center>
+      as={ tokenPlaceholderIcon }
+    />
   );
 };
 
@@ -41,7 +41,7 @@ const TokenLogo = ({ hash, name, className }: Props) => {
       className={ className }
       src={ logoSrc }
       alt={ `${ name || 'token' } logo` }
-      fallback={ <EmptyElement className={ className } letter={ name?.slice(0, 1) || 'U' }/> }
+      fallback={ <EmptyElement className={ className }/> }
     />
   );
 };

ui/shared/TokenSnippet/TokenSnippet.tsx

@@ -9,12 +9,13 @@ interface Props {
   hash: string;
   name?: string | null;
   className?: string;
+  logoSize?: number;
 }
 
-const TokenSnippet = ({ symbol, hash, name, className }: Props) => {
+const TokenSnippet = ({ symbol, hash, name, className, logoSize = 6 }: Props) => {
   return (
-    <Flex className={ className } alignItems="center" columnGap={ 1 } w="100%">
-      <TokenLogo boxSize={ 5 } hash={ hash } name={ name }/>
+    <Flex className={ className } alignItems="center" columnGap={ 2 } w="100%">
+      <TokenLogo boxSize={ logoSize } hash={ hash } name={ name }/>
       <AddressLink hash={ hash } alias={ name } type="token"/>
       { symbol && <Text variant="secondary">({ symbol })</Text> }
     </Flex>

ui/tx/NftTokenTransferSnippet.tsx

@@ -26,7 +26,7 @@ const NftTokenTransferSnippet = ({ value, name, hash, symbol, tokenId }: Props)
         <Link href={ url } fontWeight={ 600 }>{ tokenId }</Link>
       </Box>
       { name ? (
-        <TokenSnippet symbol={ symbol } hash={ hash } name={ name } w="auto"/>
+        <TokenSnippet symbol={ symbol } hash={ hash } name={ name } w="auto" logoSize={ 5 } columnGap={ 1 }/>
       ) : (
         <AddressLink hash={ hash } truncation="constant" type="token"/>
       ) }

ui/tx/details/TxDetailsTokenTransfer.tsx

@@ -25,7 +25,15 @@ const TxDetailsTokenTransfer = ({ token, total, to, from }: Props) => {
             <Text fontWeight={ 500 } as="span">For:{ space }
               <CurrencyValue value={ payload.value } exchangeRate={ token.exchange_rate } fontWeight={ 600 }/>
             </Text>
-            <TokenSnippet symbol={ token.symbol } hash={ token.address } name={ token.name } w="auto" flexGrow="1"/>
+            <TokenSnippet
+              symbol={ token.symbol }
+              hash={ token.address }
+              name={ token.name }
+              w="auto"
+              flexGrow="1"
+              columnGap={ 1 }
+              logoSize={ 5 }
+            />
           </Flex>
         );
       }