Merge pull request #1617 from bancorprotocol/issue-#1616

Use e+ notation for very large number

src/components/strategies/overview/StrategyContent.module.css

@@ -20,10 +20,10 @@
   animation: open 300ms ease-out;
 }
 .strategy-table th {
+  @apply border-b border-background-800;
   font-weight: 400;
   color: rgba(255 255 255 / .6);
   padding: 16px;
-  border-bottom: solid 1px rgba(255 255 255 / .4);
   text-align: start;
   text-wrap: nowrap;
 }
@@ -43,7 +43,7 @@
   border-top-right-radius: 8px;
 }
 .strategy-table tr:not(:last-child) td {
-  border-bottom: solid 1px rgba(255 255 255 / .4);
+  @apply border-b border-background-800;
 }
 .strategy-table tr:last-child td:first-child {
   border-bottom-left-radius: 8px;

src/utils/helpers/number.test.ts

@@ -323,6 +323,11 @@ describe('Test helpers', () => {
           '0.00000012345'
         );
       });
+
+      // Very large numbers
+      test('should return "100.00e+18" for input 1e20', () => {
+        expect(prettifyNumber(1e20)).toEqual('100.00e+18');
+      });
     });
   });
 

src/utils/helpers/number.ts

@@ -101,6 +101,10 @@ const subscript = (num: number, formatter: Intl.NumberFormat) => {
   return formatter.formatToParts(num).map(transform).join('');
 };
 
+export const largeNumbers = (num: number, formatter: Intl.NumberFormat) => {
+  return formatter.format(num).replace('E', 'e+');
+};
+
 interface PrettifyNumberOptions {
   abbreviate?: boolean;
   currentCurrency?: FiatSymbol;
@@ -134,6 +138,10 @@ const getIntlOptions = (value: SafeDecimal, options: PrettifyNumberOptions) => {
   if (options.abbreviate && value.gte(1_000_000)) {
     intlOptions.notation = 'compact';
   }
+  // When ludicrous numbers, use 1E16 notation
+  if (value.gt(1e16)) {
+    intlOptions.notation = 'engineering';
+  }
   return intlOptions;
 };
 
@@ -186,6 +194,9 @@ export function prettifyNumber(
   if (!options.noSubscript && num.lt(0.001)) {
     return subscript(num.toNumber(), formatter);
   }
+  if (num.gte(1e16)) {
+    return largeNumbers(num.toNumber(), formatter);
+  }
 
   return formatter.format(num.toNumber());
 }