From d75fec0ceeb420763aa8ec9fb645ba6f286f8672 Mon Sep 17 00:00:00 2001
From: Brandon Millman <brandon.millman@gmail.com>
Date: Tue, 5 Jun 2018 22:03:26 -0700
Subject: Update balance amount rendering logic

---
 packages/website/ts/components/wallet/wallet.tsx | 23 ++++++++++++++---------
 1 file changed, 14 insertions(+), 9 deletions(-)

(limited to 'packages/website/ts/components/wallet')

diff --git a/packages/website/ts/components/wallet/wallet.tsx b/packages/website/ts/components/wallet/wallet.tsx
index 37233930e..43603bd75 100644
--- a/packages/website/ts/components/wallet/wallet.tsx
+++ b/packages/website/ts/components/wallet/wallet.tsx
@@ -135,7 +135,7 @@ const styles: Styles = {
 
 const ETHER_ICON_PATH = '/images/ether.png';
 const ICON_DIMENSION = 28;
-const TOKEN_AMOUNT_DISPLAY_PRECISION = 3;
+const TOKEN_AMOUNT_DISPLAY_PRECISION = 5;
 const BODY_ITEM_KEY = 'BODY';
 const HEADER_ITEM_KEY = 'HEADER';
 const FOOTER_ITEM_KEY = 'FOOTER';
@@ -448,14 +448,19 @@ export class Wallet extends React.Component<WalletProps, WalletState> {
         symbol: string,
         isLoading: boolean = false,
     ): React.ReactNode {
-        const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
-        const formattedAmount = unitAmount.toPrecision(TOKEN_AMOUNT_DISPLAY_PRECISION);
-        const result = `${formattedAmount} ${symbol}`;
-        return (
-            <PlaceHolder hideChildren={isLoading}>
-                <div style={styles.amountLabel}>{result}</div>
-            </PlaceHolder>
-        );
+        if (isLoading) {
+            return (
+                <PlaceHolder hideChildren={isLoading}>
+                    <div style={styles.amountLabel}>0.00 XXX</div>
+                </PlaceHolder>
+            );
+        } else {
+            const unitAmount = Web3Wrapper.toUnitAmount(amount, decimals);
+            const precision = Math.min(TOKEN_AMOUNT_DISPLAY_PRECISION, unitAmount.decimalPlaces());
+            const formattedAmount = unitAmount.toFixed(precision);
+            const result = `${formattedAmount} ${symbol}`;
+            return <div style={styles.amountLabel}>{result}</div>;
+        }
     }
     private _renderValue(
         amount: BigNumber,
-- 
cgit v1.2.3