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
@@ -23,6 +23,7 @@
} from '@components/Common/Ticker.js';
import { Event } from '@utils/GoogleAnalytics';
import { fiatToCrypto, shouldRejectAmountInput } from '@utils/validation';
+import { formatBalance } from '@utils/cashMethods';
export const BalanceHeader = styled.div`
p {
@@ -411,7 +412,8 @@
Available balance
- {balances.totalBalance} {currency.ticker}
+ {formatBalance(balances.totalBalance)}{' '}
+ {currency.ticker}
{fiatPrice !== null && (
diff --git a/web/cashtab/src/components/Send/SendToken.js b/web/cashtab/src/components/Send/SendToken.js
--- a/web/cashtab/src/components/Send/SendToken.js
+++ b/web/cashtab/src/components/Send/SendToken.js
@@ -24,6 +24,7 @@
isValidTokenPrefix,
} from '@components/Common/Ticker.js';
import { Event } from '@utils/GoogleAnalytics';
+import { formatBalance } from '@utils/cashMethods';
const SendToken = ({ tokenId }) => {
const { wallet, tokens, slpBalancesAndUtxos, apiError } = React.useContext(
@@ -227,7 +228,8 @@
Available balance
- {token.balance.toString()} {token.info.tokenTicker}
+ {formatBalance(token.balance)}{' '}
+ {token.info.tokenTicker}
diff --git a/web/cashtab/src/components/Wallet/TokenList.js b/web/cashtab/src/components/Wallet/TokenList.js
--- a/web/cashtab/src/components/Wallet/TokenList.js
+++ b/web/cashtab/src/components/Wallet/TokenList.js
@@ -2,6 +2,7 @@
import TokenListItem from './TokenListItem';
import { Link } from 'react-router-dom';
import { currency } from '@components/Common/Ticker.js';
+import { formatBalance } from '@utils/cashMethods';
const TokenList = ({ tokens }) => {
return (
@@ -12,7 +13,7 @@
))}
diff --git a/web/cashtab/src/components/Wallet/Wallet.js b/web/cashtab/src/components/Wallet/Wallet.js
--- a/web/cashtab/src/components/Wallet/Wallet.js
+++ b/web/cashtab/src/components/Wallet/Wallet.js
@@ -8,6 +8,7 @@
import { Link } from 'react-router-dom';
import TokenList from './TokenList';
import { CashLoader } from '@components/Common/CustomIcons';
+import { formatBalance } from '@utils/cashMethods';
export const LoadingCtn = styled.div`
width: 100%;
@@ -183,7 +184,7 @@
) : (
<>
- {balances.totalBalance} {currency.ticker}
+ {formatBalance(balances.totalBalance)} {currency.ticker}
{fiatPrice !== null && !isNaN(balances.totalBalance) && (
diff --git a/web/cashtab/src/utils/__tests__/cashMethods.test.js b/web/cashtab/src/utils/__tests__/cashMethods.test.js
--- a/web/cashtab/src/utils/__tests__/cashMethods.test.js
+++ b/web/cashtab/src/utils/__tests__/cashMethods.test.js
@@ -1,4 +1,4 @@
-import { fromSmallestDenomination } from '@utils/cashMethods';
+import { fromSmallestDenomination, formatBalance } from '@utils/cashMethods';
describe('Correctly executes cash utility functions', () => {
it(`Correctly converts smallest base unit to smallest decimal for cashDecimals = 2`, () => {
@@ -17,4 +17,10 @@
10000000.12345678,
);
});
+ it(`Formats a large number to add commas`, () => {
+ expect(formatBalance(1000000012345678)).toBe('1,000,000,012,345,678');
+ });
+ it(`Formats a large number with 2 decimal places to add commas`, () => {
+ expect(formatBalance(10000000123456.78)).toBe('10,000,000,123,456.78');
+ });
});
diff --git a/web/cashtab/src/utils/cashMethods.js b/web/cashtab/src/utils/cashMethods.js
--- a/web/cashtab/src/utils/cashMethods.js
+++ b/web/cashtab/src/utils/cashMethods.js
@@ -31,3 +31,7 @@
const sendAmountSmallestDenomination = sendAmount.times(conversionFactor);
return sendAmountSmallestDenomination;
};
+
+export const formatBalance = x => {
+ return x.toString().replace(/\B(?