Fix currency rounding (#524)

* Handle currency in beautifyNumber and remove currency rounding in currency

* Sneak in console log removal

* Fix some locale issues

scripts/dashboard/WalletBalance.vue

@@ -117,14 +117,7 @@ const balanceValue = computed(() => {
     const nCoins = (publicMode.value ? balance : shieldBalance).value / COIN;
     const { nValue, cLocale } = optimiseCurrencyLocale(nCoins * price.value);
 
-    cLocale.minimumFractionDigits = 0;
-    cLocale.maximumFractionDigits = 0;
-
-    return `${nValue.toLocaleString('en-gb', cLocale)}${beautifyNumber(
-        nValue.toFixed(2),
-        '13px',
-        false
-    )}`;
+    return `${beautifyNumber(nValue, '13px', cLocale)}`;
 });
 
 const ticker = computed(() => cChainParams.current.TICKER);

scripts/masternode/Masternode.vue

@@ -91,7 +91,6 @@ async function destroyMasternode() {
  * @param {import('../transaction.js').UTXO} utxo - Masternode utxo. Must be of exactly `cChainParams.current.collateralInSats` of value
  */
 function importMasternode(privateKey, ip, utxo) {
-    console.log(privateKey, ip, utxo);
     const address = parseIpAddress(ip);
     if (!address) {
         createAlert('warning', ALERTS.MN_BAD_IP, 5000);

scripts/misc.js

@@ -310,29 +310,42 @@ export function sanitizeHTML(text) {
 
 /**
  * "Beautifies" a number with HTML, by displaying decimals in a lower opacity
- * @param {string} strNumber - The number in String form to beautify
+ * @param {string} strNumber - The number in String form to beautify. This can contain a currency too.
  * @param {string?} strDecFontSize - The optional font size to display decimals in
+ * @param {Intl.NumberFormattingOptions} locale - Locale options to format with
  * @returns {string} - A HTML string with beautified number handling
  */
-export function beautifyNumber(
-    strNumber,
-    strDecFontSize = '',
-    showFirstNumber = true
-) {
-    if (typeof strNumber === 'number') strNumber = strNumber.toString();
+export function beautifyNumber(strNumber, strDecFontSize = '', locale) {
+    if (typeof strNumber === 'number')
+        strNumber = strNumber.toLocaleString('en-gb', locale).replace(',', '');
 
     // Only run this for numbers with decimals
     if (!strNumber.includes('.'))
-        return parseInt(strNumber).toLocaleString('en-GB');
+        return parseInt(strNumber).toLocaleString('en-GB', locale);
 
     // Split the number in to Full and Decimal parts
-    const arrNumParts = strNumber.split('.');
+    let arrNumParts = strNumber.split('.');
+
+    for (let i = 0; i < arrNumParts[0].length; i++) {
+        if (parseInt(arrNumParts[0][i])) {
+            // We have reached the end of the currency part
+            const currency = arrNumParts[0].slice(0, i);
+            let number = parseInt(arrNumParts[0].slice(i)).toLocaleString(
+                'en-gb',
+                {
+                    minimumFractionDigits: 0,
+                    maximumFractionDigits: 0,
+                }
+            );
+
+            arrNumParts[0] = [...currency, ...number].join('');
+            break;
+        }
+    }
 
     // Return a HTML that renders the decimal in a lower opacity
     const strFontSize = strDecFontSize ? 'font-size: ' + strDecFontSize : '';
-    return `${
-        showFirstNumber ? parseInt(arrNumParts[0]).toLocaleString('en-GB') : ''
-    }<span style="opacity: 0.55; ${strFontSize}">.${arrNumParts[1]}</span>`;
+    return `${arrNumParts[0]}<span style="opacity: 0.55; ${strFontSize}">.${arrNumParts[1]}</span>`;
 }
 
 /**

tests/unit/misc.spec.js

@@ -0,0 +1,53 @@
+import { describe, it, expect } from 'vitest';
+import { beautifyNumber } from '../../scripts/misc.js';
+
+describe('beautifyNumber', () => {
+    it('should format a number without decimals correctly', () => {
+        expect(beautifyNumber(12345)).toBe('12,345');
+        expect(beautifyNumber('12345')).toBe('12,345');
+    });
+
+    it('should format a number with decimals and include HTML for the decimals', () => {
+        expect(beautifyNumber('12345.67')).toBe(
+            '12,345<span style="opacity: 0.55; ">.' + '67</span>'
+        );
+        expect(beautifyNumber(12345.67)).toBe(
+            '12,345<span style="opacity: 0.55; ">.' + '67</span>'
+        );
+    });
+
+    it('should handle numbers with a custom font size for the decimals', () => {
+        expect(beautifyNumber('12345.67', '14px')).toBe(
+            '12,345<span style="opacity: 0.55; font-size: 14px">.' + '67</span>'
+        );
+    });
+
+    it('should handle numbers with leading 0 correctly', () => {
+        expect(beautifyNumber('0.67', '')).toBe(
+            '0<span style="opacity: 0.55; ">.' + '67</span>'
+        );
+    });
+
+    it('should handle currency symbols correctly', () => {
+        expect(beautifyNumber('USD 0.67', '')).toBe(
+            'USD 0<span style="opacity: 0.55; ">.' + '67</span>'
+        );
+        expect(beautifyNumber('$1340139.67', '')).toBe(
+            '$1,340,139<span style="opacity: 0.55; ">.' + '67</span>'
+        );
+    });
+
+    it('should handle edge cases gracefully', () => {
+        // Empty string input
+        expect(beautifyNumber('')).toBe('NaN');
+
+        // Zero as input
+        expect(beautifyNumber('0')).toBe('0');
+        expect(beautifyNumber(0)).toBe('0');
+
+        // Negative number input
+        expect(beautifyNumber('-12345.67')).toBe(
+            '-12,345<span style="opacity: 0.55; ">.' + '67</span>'
+        );
+    });
+});