show as <$0.01 when less than a cent in USD, and also show 1 significant digit if rounded amount is 0

2 files changed, 22 insertions, 3 deletions

diff --git a/packages/instant/src/util/format.ts b/packages/instant/src/util/format.ts
index e9c432b2f..3aaf9a3a7 100644
--- a/packages/instant/src/util/format.ts
+++ b/packages/instant/src/util/format.ts
@@ -2,7 +2,7 @@ import { BigNumber } from '@0x/utils';
 import { Web3Wrapper } from '@0x/web3-wrapper';
 import * as _ from 'lodash';
 
-import { ETH_DECIMALS } from '../constants';
+import { BIG_NUMBER_ZERO, ETH_DECIMALS } from '../constants';
 
 export const format = {
     ethBaseUnitAmount: (
@@ -25,7 +25,10 @@ export const format = {
             return defaultText;
         }
         const roundedAmount = ethUnitAmount.round(decimalPlaces).toDigits(decimalPlaces);
-        return `${roundedAmount} ETH`;
+        // 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;
+        return `${displayAmount} ETH`;
     },
     ethBaseUnitAmountInUsd: (
         ethBaseUnitAmount?: BigNumber,
@@ -48,7 +51,13 @@ export const format = {
         if (_.isUndefined(ethUnitAmount) || _.isUndefined(ethUsdPrice)) {
             return defaultText;
         }
-        return `$${ethUnitAmount.mul(ethUsdPrice).toFixed(decimalPlaces)}`;
+        const rawUsdPrice = ethUnitAmount.mul(ethUsdPrice);
+        const roundedUsdPrice = rawUsdPrice.toFixed(decimalPlaces);
+        if (roundedUsdPrice === '0.00' && rawUsdPrice.gt(BIG_NUMBER_ZERO)) {
+            return '<$0.01';
+        } else {
+            return `$${roundedUsdPrice}`;
+        }
     },
     ethAddress: (address: string): string => {
         return `0x${address.slice(2, 7)}…${address.slice(-5)}`;
diff --git a/packages/instant/test/util/format.test.ts b/packages/instant/test/util/format.test.ts
index fe0a63e6e..b74d6cdaa 100644
--- a/packages/instant/test/util/format.test.ts
+++ b/packages/instant/test/util/format.test.ts
@@ -41,6 +41,10 @@ describe('format', () => {
         it('converts BigNumber(5.3014059295032) to the string `5.301 ETH`', () => {
             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');
+        });
         it('returns defaultText param when ethUnitAmount is not defined', () => {
             const defaultText = 'defaultText';
             expect(format.ethUnitAmount(undefined, 4, defaultText)).toBe(defaultText);
@@ -86,6 +90,12 @@ describe('format', () => {
         it('correctly formats 5.3014059295032 ETH to usd according to some price', () => {
             expect(format.ethUnitAmountInUsd(BIG_NUMBER_IRRATIONAL, BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$13.43');
         });
+        it('correctly formats amount that is less than 1 cent', () => {
+            expect(format.ethUnitAmountInUsd(new BigNumber(0.000001), BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('<$0.01');
+        });
+        it('correctly formats exactly 1 cent', () => {
+            expect(format.ethUnitAmountInUsd(new BigNumber(0.0039), BIG_NUMBER_FAKE_ETH_USD_PRICE)).toBe('$0.01');
+        });
         it('returns defaultText param when ethUnitAmountInUsd or ethUsdPrice is not defined', () => {
             const defaultText = 'defaultText';
             expect(format.ethUnitAmountInUsd(undefined, undefined, 2, defaultText)).toBe(defaultText);