diff --git a/web/cashtab/src/components/Send/Send.js b/web/cashtab/src/components/Send/Send.js --- a/web/cashtab/src/components/Send/Send.js +++ b/web/cashtab/src/components/Send/Send.js @@ -34,6 +34,7 @@ } from '@components/Common/Atoms'; import { getWalletState } from '@utils/cashMethods'; import ApiError from '@components/Common/ApiError'; +import { formatFiatBalance } from '@utils/validation'; // Note jestBCH is only used for unit tests; BCHJS must be mocked for jest const SendBCH = ({ jestBCH, passLoadingStatus }) => { @@ -342,6 +343,15 @@ let fiatPriceString = ''; if (fiatPrice !== null && !isNaN(formData.value)) { if (selectedCurrency === currency.ticker) { + // calculate conversion to fiatPrice + fiatPriceString = `${(fiatPrice * Number(formData.value)).toFixed( + 2, + )}`; + + // formats to fiat locale style + fiatPriceString = formatFiatBalance(Number(fiatPriceString)); + + // insert symbol and currency before/after the locale formatted fiat balance fiatPriceString = `${ cashtabSettings ? `${ @@ -349,14 +359,18 @@ .symbol } ` : '$ ' - } ${(fiatPrice * Number(formData.value)).toFixed(2)} ${ + } ${fiatPriceString} ${ cashtabSettings && cashtabSettings.fiatCurrency ? cashtabSettings.fiatCurrency.toUpperCase() : 'USD' }`; } else { fiatPriceString = `${ - formData.value ? fiatToCrypto(formData.value, fiatPrice) : '0' + formData.value + ? formatFiatBalance( + Number(fiatToCrypto(formData.value, fiatPrice)), + ) + : formatFiatBalance(0) } ${currency.ticker}`; } } diff --git a/web/cashtab/src/utils/__tests__/validation.test.js b/web/cashtab/src/utils/__tests__/validation.test.js --- a/web/cashtab/src/utils/__tests__/validation.test.js +++ b/web/cashtab/src/utils/__tests__/validation.test.js @@ -9,6 +9,7 @@ isValidTokenStats, isValidCashtabSettings, formatSavedBalance, + formatFiatBalance, } from '../validation'; import { currency } from '@components/Common/Ticker.js'; import { fromSmallestDenomination } from '@utils/cashMethods'; @@ -260,4 +261,24 @@ it(`test formatSavedBalance with non-numeric input`, () => { expect(formatSavedBalance('CainBCHA', 'en-US')).toBe('NaN'); }); + it(`test formatFiatBalance with zero XEC balance input`, () => { + expect(formatFiatBalance(Number('0'), 'en-US')).toBe('0.00'); + }); + it(`test formatFiatBalance with a small XEC balance input with 2+ decimal figures`, () => { + expect(formatFiatBalance(Number('565.54111'), 'en-US')).toBe('565.54'); + }); + it(`test formatFiatBalance with a large XEC balance input with 2+ decimal figures`, () => { + expect(formatFiatBalance(Number('131646565.54111'), 'en-US')).toBe( + '131,646,565.54', + ); + }); + it(`test formatFiatBalance with no balance`, () => { + expect(formatFiatBalance('', 'en-US')).toBe(''); + }); + it(`test formatFiatBalance with null input`, () => { + expect(formatFiatBalance(null, 'en-US')).toBe(null); + }); + it(`test formatFiatBalance with undefined input`, () => { + expect(formatFiatBalance(undefined, 'en-US')).toBe(undefined); + }); }); diff --git a/web/cashtab/src/utils/validation.js b/web/cashtab/src/utils/validation.js --- a/web/cashtab/src/utils/validation.js +++ b/web/cashtab/src/utils/validation.js @@ -139,3 +139,21 @@ return 'N/A'; } }; + +export const formatFiatBalance = (fiatBalance, optionalLocale) => { + try { + if (fiatBalance === 0) { + return Number(fiatBalance).toFixed(currency.cashDecimals); + } + if (optionalLocale === undefined) { + return fiatBalance.toLocaleString({ + maximumFractionDigits: currency.cashDecimals, + }); + } + return fiatBalance.toLocaleString(optionalLocale, { + maximumFractionDigits: currency.cashDecimals, + }); + } catch (err) { + return fiatBalance; + } +};