unstake and savings available inputs displaying incorrect value

src/components/staking/SavingsTab.vue

@@ -3,7 +3,7 @@ import { defineComponent, ref, computed } from 'vue';
 import { useStore } from 'src/store';
 import ViewTransaction from 'src/components/ViewTransanction.vue';
 import { API } from '@greymass/eosio';
-import { assetToAmount } from 'src/utils/string-utils';
+import { assetToAmount, formatNumberWithCommas } from 'src/utils/string-utils';
 
 export default defineComponent({
     name: 'SavingsTab',
@@ -104,6 +104,7 @@ export default defineComponent({
             rexSavings,
             transactionId,
             transactionError,
+            formatNumberWithCommas,
             formatDec,
             moveToSavings,
             moveFromSavings,
@@ -126,7 +127,7 @@ export default defineComponent({
                         <div class="col-9">STAKE TO SAVINGS</div>
                         <div class="col-3">
                             <div class="row items-center justify-end q-hoverable cursor-pointer" @click="setMaxSavingsValue">
-                                <div class="text-weight-bold text-right balance-amount">{{ eligibleStaked }}</div>
+                                <div class="text-weight-bold text-right balance-amount">{{ formatNumberWithCommas(eligibleStaked) }}</div>
                                 <q-icon class="q-ml-xs" name="info"/>
                                 <q-tooltip>Any balance currently maturing will be moved first, click to stake full amount</q-tooltip>
                             </div>

src/utils/string-utils.ts

@@ -69,12 +69,16 @@ export function formatCurrency(
 export function assetToAmount(asset: string): number {
     try {
         const qty: string = asset.split(' ')[0];
-        return parseFloat(qty);
+        return parseFloat(qty.replace(/,/g, '')); // remove commas
     } catch (error) {
         return 0;
     }
 }
 
+export function formatNumberWithCommas(num: number): string {
+    return num.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ',');
+}
+
 export function formatDate(date: string, showTime = true): string {
     return showTime ?
         new Date(date).toLocaleDateString('en-US', {

test/jest/__tests__/utils/string-utils.spec.ts

@@ -4,6 +4,7 @@ import {
     isValidTransactionHex,
     formatCurrency,
     assetToAmount,
+    formatNumberWithCommas,
     formatDate,
     getRexHistoryAsset,
 } from 'src/utils/string-utils';
@@ -162,6 +163,24 @@ describe('string-utils utility functions', () => {
         });
     });
 
+    describe('formatNumberWithCommas', () => {
+        it('passed a number less than one thousand returns the same number as a string', () => {
+            const testValue = 123;
+            const expectedResult = '123';
+            expect(formatNumberWithCommas(testValue)).toEqual(expectedResult);
+        });
+        it('inserts commas for numbers larger than four digits', () => {
+            const testValue = 123456789;
+            const expectedResult = '123,456,789';
+            expect(formatNumberWithCommas(testValue)).toEqual(expectedResult);
+        });
+        it('does not insert commas for trailing decimal places exceeding four digits', () => {
+            const testValue = 12345.6789;
+            const expectedResult = '12,345.6789';
+            expect(formatNumberWithCommas(testValue)).toEqual(expectedResult);
+        });
+    });
+
     describe('formatDate', () => {
         it('formats ISO date timestamp string to `<Month> <day>, <Year> at H:MM:SS <AM/PM>`', () => {
             const testDate = '2023-03-21T21:26:16+01:23';