update token placeholder

icons/token-placeholder.svg

@@ -0,0 +1,3 @@
+<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>

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/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/TokenLogo.tsx

@@ -1,22 +1,22 @@
-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>
         );
       }