From 2451f817d4992064021155973f11c5da785c4719 Mon Sep 17 00:00:00 2001
From: William O'Beirne <wbobeirne@gmail.com>
Date: Tue, 28 Nov 2017 19:28:30 -0500
Subject: [PATCH] Display less than for low balances (#485)

* Display less than for short balances.

* show 4 decimals places for short value
---
 common/components/ui/UnitDisplay.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/common/components/ui/UnitDisplay.tsx b/common/components/ui/UnitDisplay.tsx
index 8ef88a50..5bfc5218 100644
--- a/common/components/ui/UnitDisplay.tsx
+++ b/common/components/ui/UnitDisplay.tsx
@@ -58,10 +58,16 @@ const UnitDisplay: React.SFC<EthProps | TokenProps> = params => {
 
     if (displayShortBalance) {
       const digits =
-        typeof displayShortBalance === 'number' && displayShortBalance;
-      formattedValue = digits
-        ? format(convertedValue, digits)
-        : format(convertedValue);
+        typeof displayShortBalance === 'number' ? displayShortBalance : 4;
+      formattedValue = format(convertedValue, digits);
+      // If the formatted value was too low, display something like < 0.01
+      if (
+        parseFloat(formattedValue) === 0 &&
+        parseFloat(convertedValue) !== 0
+      ) {
+        const padding = digits !== 0 ? `.${'0'.repeat(digits - 1)}1` : '';
+        formattedValue = `< 0${padding}`;
+      }
     } else {
       formattedValue = convertedValue;
     }