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 @@ -32,6 +32,7 @@ import { getWalletState } from '@utils/cashMethods'; import { CashReceivedNotificationIcon } from '@components/Common/CustomIcons'; 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 }) => { @@ -250,7 +251,7 @@ /* Model - addressInfo = + addressInfo = { address: '', isValid: false, @@ -359,21 +360,28 @@ let fiatPriceString = ''; if (fiatPrice !== null && !isNaN(formData.value)) { if (selectedCurrency === currency.ticker) { - fiatPriceString = `${ - cashtabSettings - ? `${ - currency.fiatCurrencies[cashtabSettings.fiatCurrency] - .symbol - } ` - : '$ ' - } ${(fiatPrice * Number(formData.value)).toFixed(2)} ${ - cashtabSettings && cashtabSettings.fiatCurrency - ? cashtabSettings.fiatCurrency.toUpperCase() - : 'USD' - }`; + // 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 = + currency.fiatCurrencies[cashtabSettings?.fiatCurrency]?.symbol + + ' ' + + fiatPriceString + + ' ' + + cashtabSettings?.fiatCurrency.toUpperCase(); } 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/components/Send/__tests__/__snapshots__/Send.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap --- a/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap +++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/Send.test.js.snap @@ -318,7 +318,7 @@ > = - $ NaN USD + undefined NaN undefined
= - $ NaN USD + undefined NaN undefined
= - $ NaN USD + undefined NaN undefined
= - $ NaN USD + undefined NaN undefined
= - $ NaN USD + undefined NaN undefined
{ 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,23 @@ return 'N/A'; } }; + +export const formatFiatBalance = (fBalance, optionalLocale) => { + try { + if (fBalance === 0) { + return Number(fBalance).toFixed(currency.cashDecimals); + } else { + if (optionalLocale === undefined) { + return fBalance.toLocaleString({ + maximumFractionDigits: currency.cashDecimals, + }); + } else { + return fBalance.toLocaleString(optionalLocale, { + maximumFractionDigits: currency.cashDecimals, + }); + } + } + } catch (err) { + return fBalance; + } +};