show < 0.00001 ETH when amount gets really small

2 files changed, 26 insertions, 7 deletions

diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index 3aaf9a3a7..4adb63e21 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -20,14 +20,24 @@ export const format = {
         ethUnitAmount?: BigNumber,
         decimalPlaces: number = 4,
         defaultText: React.ReactNode = '0 ETH',
+        minUnitAmountToDisplay: BigNumber = new BigNumber('0.00001'),
     ): React.ReactNode => {
         if (_.isUndefined(ethUnitAmount)) {
             return defaultText;
         }
-        const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
-        // Sometimes for small ETH amounts (i.e. 0.000045) the amount rounded to 4 decimalPlaces is 0
-        // If that is the case, show to 1 significant digit
-        const displayAmount = roundedAmount.eq(BIG_NUMBER_ZERO) ? ethUnitAmount.toPrecision(1) : roundedAmount;
+        let roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
+
+        if (roundedAmount.eq(BIG_NUMBER_ZERO) && ethUnitAmount.greaterThan(BIG_NUMBER_ZERO)) {
+            // Sometimes for small ETH amounts (i.e. 0.000045) the amount rounded to 4 decimalPlaces is 0
+            // If that is the case, show to 1 significant digit
+            roundedAmount = new BigNumber(ethUnitAmount.toPrecision(1));
+        }
+
+        const displayAmount =
+            roundedAmount.greaterThan(BIG_NUMBER_ZERO) && roundedAmount.lessThan(minUnitAmountToDisplay)
+                ? `< ${minUnitAmountToDisplay.toString()}`
+                : roundedAmount.toString();
+
         return `${displayAmount} ETH`;
     },
     ethBaseUnitAmountInUsd: (
@@ -35,12 +45,13 @@ export const format = {
         ethUsdPrice?: BigNumber,
         decimalPlaces: number = 2,
         defaultText: React.ReactNode = '$0.00',
+        minUnitAmountToDisplay: BigNumber = new BigNumber('0.00001'),
     ): React.ReactNode => {
         if (_.isUndefined(ethBaseUnitAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
         const ethUnitAmount = Web3Wrapper.toUnitAmount(ethBaseUnitAmount, ETH_DECIMALS);
-        return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces);
+        return format.ethUnitAmountInUsd(ethUnitAmount, ethUsdPrice, decimalPlaces, minUnitAmountToDisplay);
     },
     ethUnitAmountInUsd: (
         ethUnitAmount?: BigNumber,
diff --git a/packages/instant/test/util/format.test.ts b/packages/instant/test/util/format.test.ts
index b74d6cdaa..38bf356ec 100644
--- a/packages/instant/test/util/format.test.ts
+++ b/packages/instant/test/util/format.test.ts
@@ -42,8 +42,16 @@ describe('format', () => {
             expect(format.ethUnitAmount(BIG_NUMBER_IRRATIONAL)).toBe('5.301 ETH');
         });
         it('shows 1 significant digit when rounded amount would be 0', () => {
-            expect(format.ethUnitAmount(new BigNumber(0.00000045))).toBe('0.0000005 ETH');
-            expect(format.ethUnitAmount(new BigNumber(0.00000044))).toBe('0.0000004 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.00003))).toBe('0.00003 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.000034))).toBe('0.00003 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.000035))).toBe('0.00004 ETH');
+        });
+        it('shows < 0.00001 when hits threshold', () => {
+            expect(format.ethUnitAmount(new BigNumber(0.000011))).toBe('0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.00001))).toBe('0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.000009))).toBe('< 0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0.0000000009))).toBe('< 0.00001 ETH');
+            expect(format.ethUnitAmount(new BigNumber(0))).toBe('0 ETH');
         });
         it('returns defaultText param when ethUnitAmount is not defined', () => {
             const defaultText = 'defaultText';