update icon styles for tokens, contract and more (#1204)

* update border radius for token logos and contract icon

* update gaps between icons and text

* update NFT icon and create entity

* update screenshots

ui/address/AddressTokenTransfers.tsx

@@ -228,6 +228,7 @@ const AddressTokenTransfers = ({ scrollRef, overloadCount = OVERLOAD_COUNT }: Pr
     name: '',
     icon_url: '',
     symbol: '',
+    type: 'ERC-20' as const,
   }), [ tokenFilter ]);
 
   const tokenFilterComponent = tokenFilter && (

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -30,7 +30,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
         <Skeleton isLoaded={ !props.isLoading }>
           <Stat flexGrow="0">
             <StatHelpText display="flex" mb={ 0 } alignItems="center">
-              <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
+              <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' } mr={ 2 }/>
               <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
                 { deltaBn.dp(8).toFormat() }
               </Text>

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -56,7 +56,7 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         <Skeleton isLoaded={ !props.isLoading }>
           <Stat flexGrow="0" lineHeight={ 5 }>
             <StatHelpText display="flex" mb={ 0 } alignItems="center">
-              <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' }/>
+              <StatArrow type={ isPositiveDelta ? 'increase' : 'decrease' } mr={ 2 }/>
               <Text as="span" color={ isPositiveDelta ? 'green.500' : 'red.500' } fontWeight={ 600 }>
                 { deltaBn.dp(8).toFormat() }
               </Text>

ui/address/tokens/NFTItem.tsx

@@ -1,13 +1,13 @@
-import { Box, Flex, Link, Text, useColorModeValue, Skeleton } from '@chakra-ui/react';
+import { Box, Flex, Text, Link, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
 import type { AddressTokenBalance } from 'types/api/address';
 
 import { route } from 'nextjs-routes';
 
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import NftMedia from 'ui/shared/nft/NftMedia';
-import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
 
 type Props = AddressTokenBalance & { isLoading: boolean };
 
@@ -35,20 +35,7 @@ const NFTItem = ({ token, token_id: tokenId, token_instance: tokenInstance, isLo
       { tokenId && (
         <Flex mb={ 2 } ml={ 1 }>
           <Text whiteSpace="pre" variant="secondary">ID# </Text>
-          <TruncatedTextTooltip label={ tokenId }>
-            <Skeleton isLoaded={ !isLoading } overflow="hidden" h="20px">
-              <Link
-                w="100%"
-                display="inline-block"
-                whiteSpace="nowrap"
-                textOverflow="ellipsis"
-                overflow="hidden"
-                href={ tokenInstanceLink }
-              >
-                { tokenId }
-              </Link>
-            </Skeleton>
-          </TruncatedTextTooltip>
+          <NftEntity hash={ token.address } id={ tokenId } isLoading={ isLoading } noIcon/>
         </Flex>
       ) }
       <TokenEntity

ui/block/BlockDetails.tsx

@@ -315,7 +315,7 @@ const BlockDetails = ({ query }: Props) => {
           isLoading={ isPlaceholderData }
         >
           <Icon as={ flameIcon } boxSize={ 5 } color="gray.500" isLoading={ isPlaceholderData }/>
-          <Skeleton isLoaded={ !isPlaceholderData } ml={ 1 }>
+          <Skeleton isLoaded={ !isPlaceholderData } ml={ 2 }>
             { burntFees.dividedBy(WEI).toFixed() } { config.chain.currency.symbol }
           </Skeleton>
           { !txFees.isEqualTo(ZERO) && (

ui/blocks/BlocksListItem.tsx

@@ -103,7 +103,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
           <Flex columnGap={ 4 } mt={ 2 }>
             <Flex>
               <Icon as={ flameIcon } boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
-              <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary" ml={ 1 }>
+              <Skeleton isLoaded={ !isLoading } display="inline-block" color="text_secondary" ml={ 2 }>
                 <span>{ burntFees.div(WEI).toFixed() }</span>
               </Skeleton>
             </Flex>

ui/blocks/BlocksTableItem.tsx

@@ -111,7 +111,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
       </Td>
       { !config.features.rollup.isEnabled && !config.UI.views.block.hiddenFields?.burnt_fees && (
         <Td fontSize="sm">
-          <Flex alignItems="center" columnGap={ 1 }>
+          <Flex alignItems="center" columnGap={ 2 }>
             <Icon as={ flameIcon } boxSize={ 5 } color={ burntFeesIconColor } isLoading={ isLoading }/>
             <Skeleton isLoaded={ !isLoading } display="inline-block">
               { burntFees.dividedBy(WEI).toFixed(8) }

ui/home/indicators/utils/indicators.tsx

@@ -32,6 +32,7 @@ const nativeTokenData = {
   icon_url: '',
   symbol: '',
   address: '',
+  type: 'ERC-20' as const,
 };
 
 const coinPriceIndicator: TChainIndicator<'homepage_chart_market'> = {

ui/searchResults/SearchResultListItem.tsx

@@ -50,7 +50,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading }: Props) => {
 
         return (
           <Flex alignItems="center" overflow="hidden">
-            <TokenEntity.Icon token={ data } isLoading={ isLoading }/>
+            <TokenEntity.Icon token={{ ...data, type: data.token_type }} isLoading={ isLoading }/>
             <LinkInternal
               href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) }
               fontWeight={ 700 }

ui/searchResults/SearchResultTableItem.tsx

@@ -51,7 +51,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading }: Props) => {
           <>
             <Td fontSize="sm">
               <Flex alignItems="center">
-                <TokenEntity.Icon token={ data } isLoading={ isLoading }/>
+                <TokenEntity.Icon token={{ ...data, type: data.token_type }} isLoading={ isLoading }/>
                 <LinkInternal
                   href={ route({ pathname: '/token/[hash]', query: { hash: data.address } }) }
                   fontWeight={ 700 }

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -9,12 +9,12 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Icon from 'ui/shared/chakra/Icon';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
-import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
 type Props = TokenTransfer & {
@@ -66,7 +66,7 @@ const TokenTransferListItem = ({
           <TxAdditionalInfo hash={ txHash } isMobile isLoading={ isLoading }/>
         ) }
       </Flex>
-      { 'token_id' in total && <TokenTransferNft hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
+      { 'token_id' in total && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
       { showTxInfo && txHash && (
         <Flex justifyContent="space-between" alignItems="center" lineHeight="24px" width="100%">
           <TxEntity

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -7,11 +7,11 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import Tag from 'ui/shared/chakra/Tag';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import InOutTag from 'ui/shared/InOutTag';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
-import TokenTransferNft from 'ui/shared/TokenTransfer/TokenTransferNft';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
 type Props = TokenTransfer & {
@@ -59,7 +59,7 @@ const TokenTransferTableItem = ({
         </Flex>
       </Td>
       <Td>
-        { 'token_id' in total && <TokenTransferNft hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
+        { 'token_id' in total && <NftEntity hash={ token.address } id={ total.token_id } isLoading={ isLoading }/> }
       </Td>
       { showTxInfo && txHash && (
         <Td>

ui/shared/Utilization/Utilization.tsx

@@ -17,7 +17,7 @@ const Utilization = ({ className, value, colorScheme = 'green', isLoading }: Pro
   const color = colorScheme === 'gray' ? colorGrayScheme : 'green.500';
 
   return (
-    <Flex className={ className } alignItems="center" columnGap="10px">
+    <Flex className={ className } alignItems="center" columnGap={ 2 }>
       <Skeleton isLoaded={ !isLoading } w={ `${ WIDTH }px` } h="4px" borderRadius="full" overflow="hidden">
         <Box bg={ useColorModeValue('blackAlpha.200', 'whiteAlpha.200') } h="100%">
           <Box bg={ color } w={ valueString } h="100%"/>

ui/shared/entities/nft/NftEntity.pw.tsx

@@ -0,0 +1,72 @@
+import { test, expect } from '@playwright/experimental-ct-react';
+import React from 'react';
+
+import TestApp from 'playwright/TestApp';
+
+import NftEntity from './NftEntity';
+
+const iconSizes = [ 'md', 'lg' ];
+const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859';
+
+test.use({ viewport: { width: 180, height: 30 } });
+
+test.describe('icon sizes', () => {
+  iconSizes.forEach((size) => {
+    test(size, async({ mount }) => {
+      const component = await mount(
+        <TestApp>
+          <NftEntity
+            hash={ hash }
+            id={ 1042 }
+            iconSize={ size }
+          />
+        </TestApp>,
+      );
+
+      await expect(component).toHaveScreenshot();
+    });
+  });
+});
+
+test('loading', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <NftEntity
+        hash={ hash }
+        id={ 1042 }
+        isLoading
+      />
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('long id', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <NftEntity
+        hash={ hash }
+        id={ 1794350723452223 }
+      />
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
+test('customization', async({ mount }) => {
+  const component = await mount(
+    <TestApp>
+      <NftEntity
+        hash={ hash }
+        id={ 1042 }
+        p={ 3 }
+        borderWidth="1px"
+        borderColor="blue.700"
+      />
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});

ui/shared/entities/nft/NftEntity.tsx

@@ -0,0 +1,84 @@
+import type { As } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
+import _omit from 'lodash/omit';
+import React from 'react';
+
+import { route } from 'nextjs-routes';
+
+import nftPlaceholder from 'icons/nft_shield.svg';
+import * as EntityBase from 'ui/shared/entities/base/components';
+import TruncatedValue from 'ui/shared/TruncatedValue';
+
+const Container = EntityBase.Container;
+
+type IconProps = Pick<EntityProps, 'isLoading' | 'noIcon' | 'iconSize'> & {
+  asProp?: As;
+};
+
+const Icon = (props: IconProps) => {
+  if (props.noIcon) {
+    return null;
+  }
+
+  return (
+    <EntityBase.Icon
+      { ...props }
+      iconSize={ props.iconSize ?? 'lg' }
+      asProp={ props.asProp ?? nftPlaceholder }
+    />
+  );
+};
+
+type LinkProps = EntityBase.LinkBaseProps & Pick<EntityProps, 'hash' | 'id'>;
+
+const Link = chakra((props: LinkProps) => {
+  const defaultHref = route({ pathname: '/token/[hash]/instance/[id]', query: { hash: props.hash, id: props.id } });
+
+  return (
+    <EntityBase.Link
+      { ...props }
+      href={ props.href ?? defaultHref }
+    >
+      { props.children }
+    </EntityBase.Link>
+  );
+});
+
+type ContentProps = Omit<EntityBase.ContentBaseProps, 'text'> & Pick<EntityProps, 'id'>;
+
+const Content = chakra((props: ContentProps) => {
+  return (
+    <TruncatedValue
+      isLoading={ props.isLoading }
+      value={ props.id }
+    />
+  );
+});
+
+export interface EntityProps extends EntityBase.EntityBaseProps {
+  hash: string;
+  id: string;
+}
+
+const NftEntity = (props: EntityProps) => {
+  const linkProps = _omit(props, [ 'className' ]);
+  const partsProps = _omit(props, [ 'className', 'onClick' ]);
+
+  return (
+    <Container className={ props.className } w="100%">
+      <Icon { ...partsProps }/>
+      <Link { ...linkProps }>
+        <Content { ...partsProps }/>
+      </Link>
+    </Container>
+  );
+};
+
+export default React.memo(chakra(NftEntity));
+
+export {
+  Container,
+  Link,
+  Icon,
+  Content,
+};