Merge pull request #808 from 0xProject/feature/website/better-balance-formatting

Add better balance formatting rules for balances and usd values

1 files changed, 5 insertions, 15 deletions

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index a75404637..6c8b398c4 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -1,6 +1,5 @@
 import { constants as sharedConstants, EtherscanLinkSuffixes, utils as sharedUtils } from '@0xproject/react-shared';
 import { BigNumber, errorUtils } from '@0xproject/utils';
-import { Web3Wrapper } from '@0xproject/web3-wrapper';
 import * as _ from 'lodash';
 
 import ActionAccountBalanceWallet from 'material-ui/svg-icons/action/account-balance-wallet';
@@ -83,7 +82,6 @@ const ICON_DIMENSION = 28;
 const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const ETHER_ITEM_KEY = 'ETHER';
-const USD_DECIMAL_PLACES = 2;
 const NO_ALLOWANCE_TOGGLE_SPACE_WIDTH = 56;
 const ACCOUNT_PATH = `${WebsitePaths.Portal}/account`;
 const PLACEHOLDER_COLOR = colors.grey300;
@@ -412,19 +410,11 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         price?: BigNumber,
         isLoading: boolean = false,
     ): React.ReactNode {
-        let result;
-        if (!isLoading) {
-            if (_.isUndefined(price)) {
-                result = '--';
-            } else {
-                const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
-                const value = unitAmount.mul(price);
-                const formattedAmount = value.toFixed(USD_DECIMAL_PLACES);
-                result = `$${formattedAmount}`;
-            }
-        } else {
-            result = '$0.00';
-        }
+        const result = !isLoading
+            ? _.isUndefined(price)
+                ? '--'
+                : utils.getUsdValueFormattedAmount(amount, decimals, price)
+            : '$0.00';
         return (
             <PlaceHolder hideChildren={isLoading} fillColor={PLACEHOLDER_COLOR}>
                 <Text fontSize="14px" fontColor={colors.darkGrey} lineHeight="1em">