diff --git a/web/cashtab/src/components/Common/BalanceHeaderToken.js b/web/cashtab/src/components/Common/BalanceHeaderToken.js
new file mode 100644
--- /dev/null
+++ b/web/cashtab/src/components/Common/BalanceHeaderToken.js
@@ -0,0 +1,21 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { formatTokenBalance } from 'utils/formatting';
+import { BalanceHeaderWrap } from 'components/Common/Atoms';
+
+const BalanceHeaderToken = ({ balance, ticker, tokenDecimals }) => {
+ return (
+
+ {formatTokenBalance(balance, tokenDecimals)} {ticker}
+
+ );
+};
+
+// balance may be a string (XEC balance) or a BigNumber object (token balance)
+BalanceHeaderToken.propTypes = {
+ balance: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+ ticker: PropTypes.string,
+ tokenDecimals: PropTypes.number,
+};
+
+export default BalanceHeaderToken;
diff --git a/web/cashtab/src/components/Home/TokenList.js b/web/cashtab/src/components/Home/TokenList.js
--- a/web/cashtab/src/components/Home/TokenList.js
+++ b/web/cashtab/src/components/Home/TokenList.js
@@ -2,7 +2,7 @@
import PropTypes from 'prop-types';
import TokenListItem from './TokenListItem';
import { Link } from 'react-router-dom';
-import { formatBalance } from 'utils/formatting';
+import { formatTokenBalance } from 'utils/formatting';
const TokenList = ({ tokens }) => {
return (
@@ -12,7 +12,10 @@
))}
diff --git a/web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap b/web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap
--- a/web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap
+++ b/web/cashtab/src/components/Home/__tests__/__snapshots__/Home.test.js.snap
@@ -302,9 +302,7 @@
TBS
-
- 6.001
-
+
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,7 +24,7 @@
} from 'components/Common/EnhancedInputs';
import useBCH from 'hooks/useBCH';
import { SidePaddingCtn } from 'components/Common/Atoms';
-import BalanceHeader from 'components/Common/BalanceHeader';
+import BalanceHeaderToken from 'components/Common/BalanceHeaderToken';
import { Redirect } from 'react-router-dom';
import useWindowDimensions from 'hooks/useWindowDimensions';
import usePrevious from 'hooks/usePrevious';
@@ -494,9 +494,10 @@
-
diff --git a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
--- a/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
+++ b/web/cashtab/src/components/Send/__tests__/__snapshots__/SendToken.test.js.snap
@@ -9,7 +9,6 @@
- 6.001
TBS
diff --git a/web/cashtab/src/utils/__tests__/formatting.test.js b/web/cashtab/src/utils/__tests__/formatting.test.js
--- a/web/cashtab/src/utils/__tests__/formatting.test.js
+++ b/web/cashtab/src/utils/__tests__/formatting.test.js
@@ -1,8 +1,10 @@
+import BigNumber from 'bignumber.js';
import {
formatDate,
formatFiatBalance,
formatSavedBalance,
formatBalance,
+ formatTokenBalance,
} from 'utils/formatting';
describe('Correctly executes formatting functions', () => {
@@ -137,4 +139,19 @@
it(`test formatFiatBalance with undefined input`, () => {
expect(formatFiatBalance(undefined, 'en-US')).toBe(undefined);
});
+ it(`returns undefined formatTokenBalance with undefined inputs`, () => {
+ expect(formatTokenBalance(undefined, undefined)).toBe(undefined);
+ });
+ it(`test formatTokenBalance with valid balance & decimal inputs`, () => {
+ const testBalance = new BigNumber(100.00000001);
+ expect(formatTokenBalance(testBalance, 8)).toBe('100.00000001');
+ });
+ it(`returns undefined when passed invalid decimals parameter`, () => {
+ const testBalance = new BigNumber(100.00000001);
+ expect(formatTokenBalance(testBalance, 'cheese')).toBe(undefined);
+ });
+ it(`returns undefined when passed invalid balance parameter`, () => {
+ const testBalance = '100.000010122';
+ expect(formatTokenBalance(testBalance, 9)).toBe(undefined);
+ });
});
diff --git a/web/cashtab/src/utils/formatting.js b/web/cashtab/src/utils/formatting.js
--- a/web/cashtab/src/utils/formatting.js
+++ b/web/cashtab/src/utils/formatting.js
@@ -1,5 +1,5 @@
import { currency } from 'components/Common/Ticker.js';
-
+import BigNumber from 'bignumber.js';
export const formatDate = (dateString, userLocale = 'en') => {
const options = { month: 'short', day: 'numeric', year: 'numeric' };
const dateFormattingError = 'Unable to format date.';
@@ -70,3 +70,24 @@
return unformattedBalance;
}
};
+
+export const formatTokenBalance = (unformattedBalance, tokenDecimal) => {
+ try {
+ if (
+ tokenDecimal === undefined ||
+ unformattedBalance === undefined ||
+ typeof tokenDecimal !== 'number' ||
+ !BigNumber.isBigNumber(unformattedBalance)
+ ) {
+ return undefined;
+ }
+ return new BigNumber(unformattedBalance)
+ .toFixed(tokenDecimal)
+ .valueOf()
+ .toString();
+ } catch (err) {
+ console.log(`Error in formatBalance for ${unformattedBalance}`);
+ console.log(err);
+ return unformattedBalance;
+ }
+};