token balance design update

ui/address/tokens/TokenBalances.tsx

@@ -8,6 +8,8 @@ import { ZERO } from 'lib/consts';
 import getCurrencyValue from 'lib/getCurrencyValue';
 import { currencyUnits } from 'lib/units';
 import DataFetchAlert from 'ui/shared/DataFetchAlert';
+import IconSvg from 'ui/shared/IconSvg';
+import NativeTokenIcon from 'ui/shared/NativeTokenIcon';
 
 import { getTokensTotalInfo } from '../utils/tokenUtils';
 import useFetchTokens from '../utils/useFetchTokens';
@@ -42,28 +44,30 @@ const TokenBalances = () => {
   const prefix = tokensInfo.isOverflow ? '>' : '';
   const totalUsd = nativeUsd.plus(tokensInfo.usd);
   const tokensNumText = tokensInfo.num > 0 ?
-    ` | ${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` :
+    `${ prefix }${ tokensInfo.num } ${ tokensInfo.num > 1 ? 'tokens' : 'token' }` :
     '';
 
   return (
     <Flex columnGap={ 3 } rowGap={ 3 } mt={{ base: '6px', lg: 0 }} flexDirection={{ base: 'column', lg: 'row' }}>
       <TokenBalancesItem
         name="Net Worth"
-        value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) } USD` : 'N/A' }
+        value={ addressData?.exchange_rate ? `${ prefix }$${ totalUsd.toFormat(2) }` : 'N/A' }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <IconSvg name="wallet" boxSize="24px" flexShrink={ 0 }/> }
       />
       <TokenBalancesItem
         name={ `${ currencyUnits.ether } Balance` }
-        value={ (!nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) } USD | ` : '') + `${ nativeValue } ${ currencyUnits.ether }` }
+        value={ `${ nativeValue } ${ currencyUnits.ether }` }
+        valueSecondary={ !nativeUsd.eq(ZERO) ? `$${ nativeUsd.toFormat(2) }` : '' }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <NativeTokenIcon boxSize="20px"/> }
       />
       <TokenBalancesItem
         name="Tokens"
-        value={
-          `${ prefix }$${ tokensInfo.usd.toFormat(2) } USD ` +
-          tokensNumText
-        }
+        value={ tokensNumText }
+        valueSecondary={ `${ prefix }$${ tokensInfo.usd.toFormat(2) }` }
         isLoading={ addressQuery.isPending || tokenQuery.isPending }
+        icon={ <IconSvg name="tokens" boxSize="20px" flexShrink={ 0 }/> }
       />
     </Flex>
   );

ui/address/tokens/TokenBalancesItem.tsx

 import { Box, Flex, Skeleton, Text, useColorModeValue } from '@chakra-ui/react';
 import React from 'react';
 
-import IconSvg from 'ui/shared/IconSvg';
+type Props = {
+  name: string;
+  value: string;
+  icon: React.ReactNode;
+  valueSecondary?: string;
+  isLoading: boolean;
+}
 
-const TokenBalancesItem = ({ name, value, isLoading }: {name: string; value: string; isLoading: boolean }) => {
+const TokenBalancesItem = ({ name, icon, value, valueSecondary, isLoading }: Props) => {
 
   const bgColor = useColorModeValue('blackAlpha.50', 'whiteAlpha.50');
 
   return (
-    <Flex p={ 5 } bgColor={ bgColor } borderRadius="16px" alignItems="center">
-      <IconSvg name="wallet" boxSize="30px" mr={ 3 } flexShrink={ 0 }/>
-      <Box>
+    <Box px="12px" py="10px" bgColor={ bgColor } borderRadius="16px">
       <Text variant="secondary" fontSize="xs">{ name }</Text>
-        <Skeleton isLoaded={ !isLoading } fontWeight="500" whiteSpace="pre-wrap" wordBreak="break-word">{ value }</Skeleton>
-      </Box>
+      <Flex alignItems="center">
+        { icon }
+        <Skeleton isLoaded={ !isLoading } fontWeight="500" whiteSpace="pre-wrap" wordBreak="break-word" display="flex" ml={ 2 }>
+          { value }
+          { Boolean(valueSecondary) && <Text color="text_secondary"> ({ valueSecondary })</Text> }
+        </Skeleton>
       </Flex>
+    </Box>
   );
 };