fix watchlist table item layout

types/api/account.ts

@@ -58,9 +58,8 @@ export interface UserInfo {
 export interface WatchlistAddress {
   address_hash: string;
   name: string;
-  address_balance: number;
-  coin_name: string;
-  exchange_rate: number;
+  address_balance: string;
+  exchange_rate: string;
   notification_settings: NotificationSettings;
   notification_methods: NotificationMethods;
   id: string;

ui/watchlist/WatchlistTable/WatchListAddressItem.tsx

-import { HStack, VStack, Text, Icon, useColorModeValue } from '@chakra-ui/react';
+import { HStack, VStack, Text, Icon, useColorModeValue, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TWatchlistItem } from 'types/client/account';
@@ -8,26 +8,36 @@ import TokensIcon from 'icons/tokens.svg';
 // import WalletIcon from 'icons/wallet.svg';
 import { nbsp } from 'lib/html-entities';
 import AddressSnippet from 'ui/shared/AddressSnippet';
+import CurrencyValue from 'ui/shared/CurrencyValue';
 import TokenLogo from 'ui/shared/TokenLogo';
 
-const DECIMALS = 18;
-
 const WatchListAddressItem = ({ item }: {item: TWatchlistItem}) => {
   const mainTextColor = useColorModeValue('gray.700', 'gray.50');
 
-  const nativeBalance = ((item.address_balance || 0) / 10 ** DECIMALS).toFixed(1);
-  const nativeBalanceUSD = item.exchange_rate ? `$${ Number(nativeBalance) * item.exchange_rate } USD` : 'N/A';
-  const infoItemsPaddingLeft = { base: 0, lg: 10 };
+  const infoItemsPaddingLeft = { base: 0, lg: 8 };
 
   return (
-    <VStack spacing={ 2 } align="stretch" overflow="hidden" fontWeight={ 500 } color="gray.700">
+    <VStack spacing={ 2 } align="stretch" fontWeight={ 500 } color="gray.700">
       <AddressSnippet address={ item.address_hash }/>
-      <HStack spacing={ 0 } fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft }>
-        { appConfig.network.nativeTokenAddress &&
-          <TokenLogo hash={ appConfig.network.nativeTokenAddress } name={ appConfig.network.name } boxSize={ 4 } mr="10px"/> }
-        <Text color={ mainTextColor }>{ `${ appConfig.network.currency.symbol } balance:${ nbsp }` + nativeBalance }</Text>
-        <Text variant="secondary">{ `${ nbsp }(${ nativeBalanceUSD })` }</Text>
-      </HStack>
+      <Flex fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft } flexWrap="wrap" alignItems="center" rowGap={ 1 }>
+        { appConfig.network.nativeTokenAddress && (
+          <TokenLogo
+            hash={ appConfig.network.nativeTokenAddress }
+            name={ appConfig.network.name }
+            boxSize={ 4 }
+            borderRadius="sm"
+            mr={ 2 }
+          />
+        ) }
+        <Text as="span" whiteSpace="pre">{ appConfig.network.currency.symbol } balance: </Text>
+        <CurrencyValue
+          value={ item.address_balance }
+          exchangeRate={ item.exchange_rate }
+          decimals={ String(appConfig.network.currency.decimals) }
+          accuracy={ 2 }
+          accuracyUsd={ 2 }
+        />
+      </Flex>
       { item.tokens_count && (
         <HStack spacing={ 0 } fontSize="sm" h={ 6 } pl={ infoItemsPaddingLeft }>
           <Icon as={ TokensIcon } marginRight="10px" w="17px" h="16px"/>