show < 0.00001 ETH when amount gets really small

1 files changed, 16 insertions, 5 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,