Improved number formatting

core/src/helpers/formatToAutomaticDecimalPoints.ts

@@ -58,6 +58,10 @@ function limitedValue(value: number | BigNumber): number | BigNumber {
     return value;
 }
 
+export function formatWithThousandSeparators(value: string): string {
+    return value.replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
+}
+
 export function formatToAutomaticDecimalPoints(
     value: number | BigNumber,
     decimalPlaces: number = DECIMAL_PLACES_DEFAULT

frontend/components/common/formatters/AnimatedNumber.stories.js

@@ -24,6 +24,10 @@ storiesOf('Common/Formatters/AnimatedNumber', module)
         ...common,
         template: `<AnimatedNumber :value="num"/>`,
     }))
+    .add('Formatted', () => ({
+        ...common,
+        template: `<AnimatedNumber :value="2220309349.12" :formatted="true" />`,
+    }))
     .add('Long Duration', () => ({
         ...common,
         template: `<AnimatedNumber :value="num" :duration="5000"/>`,

frontend/components/common/formatters/AnimatedNumber.vue

@@ -1,7 +1,7 @@
 <template>
     <span v-if="isValidNumber"
         ><span v-if="isValueSmallButNotZero">under </span
-        ><animated-number :value="format(value)" :format-value="format" :duration="duration"
+        ><animated-number :value="safeValue" :format-value="format" :duration="duration"
     /></span>
 </template>
 
@@ -13,6 +13,7 @@ import {
     isValidNumber,
     isValueSmallButNotZero,
     formatToAutomaticDecimalPoints,
+    formatWithThousandSeparators,
 } from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
 
 export default Vue.extend({
@@ -32,8 +33,18 @@ export default Vue.extend({
             type: Number,
             default: undefined,
         },
+        formatted: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
+        safeValue(): number {
+            if (BigNumber.isBigNumber(this.value)) {
+                return this.value.toNumber();
+            }
+            return this.value;
+        },
         isValidNumber(): boolean {
             return isValidNumber(this.value);
         },
@@ -43,6 +54,9 @@ export default Vue.extend({
     },
     methods: {
         format(value: number | BigNumber): string {
+            if (this.formatted) {
+                return formatWithThousandSeparators(formatToAutomaticDecimalPoints(value, this.decimalPlaces));
+            }
             return formatToAutomaticDecimalPoints(value, this.decimalPlaces);
         },
     },

frontend/components/common/formatters/FormatCurrency.vue

@@ -1,7 +1,9 @@
 <template>
     <span>
         <span v-if="isNotANumber">Unknown</span>
-        <span v-else>{{ sign }}<animated-number :value="value" :decimal-places="decimalPlaces" /> </span>
+        <span v-else
+            >{{ sign }}<animated-number :value="value" :decimal-places="decimalPlaces" :formatted="formatted" />
+        </span>
         <span class="uppercase">{{ currency }}</span>
     </span>
 </template>
@@ -31,6 +33,10 @@ export default Vue.extend({
             type: Number as Vue.PropType<Number>,
             default: 2,
         },
+        formatted: {
+            type: Boolean,
+            default: false,
+        },
     },
     computed: {
         sign(): string {

frontend/components/panels/VaultLiquidationLimitsCheckPanel.vue

@@ -35,7 +35,7 @@
                     The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
                     of this auction
                 </Explain>
-                = <FormatCurrency :value="globalDifference" currency="DAI"
+                = <FormatCurrency :value="globalDifference" currency="DAI" :formatted="true"
             /></span>
             <div v-else>
                 <span class="opacity-50">Unknown</span>
@@ -69,7 +69,7 @@
                     The amount of DAI that will be auctioned after the current liquidation plus liquidation incentives
                     of this auction
                 </Explain>
-                = <FormatCurrency :value="collateralDifference" currency="DAI"
+                = <FormatCurrency :value="collateralDifference" currency="DAI" :formatted="true"
             /></span>
             <div v-else>
                 <span class="opacity-50">Unknown</span>
@@ -93,7 +93,10 @@
 import Vue from 'vue';
 import BigNumber from 'bignumber.js';
 import { VaultTransaction } from 'auctions-core/src/types';
-import { formatToAutomaticDecimalPoints } from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
+import {
+    formatToAutomaticDecimalPoints,
+    formatWithThousandSeparators,
+} from 'auctions-core/src/helpers/formatToAutomaticDecimalPoints';
 import TextBlock from '~/components/common/other/TextBlock.vue';
 import Explain from '~/components/common/other/Explain.vue';
 import FormatCurrency from '~/components/common/formatters/FormatCurrency.vue';
@@ -180,7 +183,7 @@ export default Vue.extend({
     },
     methods: {
         format(value: BigNumber): string {
-            return formatToAutomaticDecimalPoints(value);
+            return formatWithThousandSeparators(formatToAutomaticDecimalPoints(value));
         },
     },
 });