placeholder for NFT and token logo

ui/shared/TokenLogo.tsx

-import { Image, chakra } from '@chakra-ui/react';
+import { Image, Center, chakra, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import appConfig from 'configs/app/config';
 
-const EmptyElement = () => null;
+const EmptyElement = ({ className, letter }: { className?: string; letter: string }) => {
+  const bgColor = useColorModeValue('gray.200', 'gray.600');
+  const color = useColorModeValue('gray.400', 'gray.200');
+
+  return (
+    <Center
+      className={ className }
+      fontWeight={ 600 }
+      bgColor={ bgColor }
+      color={ color }
+      borderRadius="base"
+    >
+      { letter.toUpperCase() }
+    </Center>
+  );
+};
 
 interface Props {
   hash: string;
@@ -20,7 +35,14 @@ const TokenLogo = ({ hash, name, className }: Props) => {
     '/logo.png',
   ].join('') : undefined;
 
-  return <Image className={ className } src={ logoSrc } alt={ `${ name || 'token' } logo` } fallback={ <EmptyElement/> }/>;
+  return (
+    <Image
+      className={ className }
+      src={ logoSrc }
+      alt={ `${ name || 'token' } logo` }
+      fallback={ <EmptyElement className={ className } letter={ name?.slice(0, 1) || 'U' }/> }
+    />
+  );
 };
 
 export default React.memo(chakra(TokenLogo));

ui/shared/TokenSnippet.tsx

@@ -14,7 +14,7 @@ interface Props {
 const TokenSnippet = ({ symbol, hash, name, className }: Props) => {
   return (
     <Flex className={ className } alignItems="center" columnGap={ 1 } w="100%">
-      <TokenLogo boxSize={ 5 } borderRadius={ 2 } hash={ hash } name={ name }/>
+      <TokenLogo boxSize={ 5 } hash={ hash } name={ name }/>
       <AddressLink hash={ hash } alias={ name } type="token"/>
       { symbol && <Text variant="secondary">({ symbol })</Text> }
     </Flex>

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -5,7 +5,7 @@ import React from 'react';
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import eastArrowIcon from 'icons/arrows/east.svg';
-import nftPlaceholder from 'icons/nft_placeholder.svg';
+import nftPlaceholder from 'icons/nft_shield.svg';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
@@ -39,7 +39,7 @@ const TokenTransferListItem = ({ token, total, tx_hash: txHash, from, to, baseAd
       { 'token_id' in total && (
         <Flex alignItems="center">
           <Text fontWeight={ 500 }>Token ID</Text>
-          <Icon mx={ 2 } as={ nftPlaceholder } boxSize="30px"/>
+          <Icon mx={ 1 } as={ nftPlaceholder } boxSize="30px"/>
           <AddressLink hash={ token.address } id={ total.token_id } type="token_instance_item"/>
         </Flex>
       ) }

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 
 import type { TokenTransfer } from 'types/api/tokenTransfer';
 
-import nftPlaceholder from 'icons/nft_placeholder.svg';
+import nftPlaceholder from 'icons/nft_shield.svg';
 import AdditionalInfoButton from 'ui/shared/AdditionalInfoButton';
 import Address from 'ui/shared/address/Address';
 import AddressIcon from 'ui/shared/address/AddressIcon';
@@ -42,7 +42,7 @@ const TxInternalTableItem = ({ token, total, tx_hash: txHash, from, to, baseAddr
       <Td lineHeight="30px">
         { 'token_id' in total ? (
           <Flex align="center">
-            <Icon as={ nftPlaceholder } boxSize="30px" mr={ 2 }/>
+            <Icon as={ nftPlaceholder } boxSize="30px" mr={ 1 }/>
             <AddressLink hash={ token.address } id={ total.token_id } type="token_instance_item"/>
           </Flex>
         ) : '-' }