diff --git a/web/cashtab/src/components/Configure/Configure.js b/web/cashtab/src/components/Configure/Configure.js --- a/web/cashtab/src/components/Configure/Configure.js +++ b/web/cashtab/src/components/Configure/Configure.js @@ -27,6 +27,7 @@ import { ReactComponent as Edit } from '@assets/edit.svg'; import { Event } from '@utils/GoogleAnalytics'; import ApiError from '@components/Common/ApiError'; +import { formatSavedBalance } from '@utils/validation'; const { Panel } = Collapse; @@ -73,11 +74,56 @@ font-size: 16px; color: ${props => props.theme.wallet.text.secondary}; margin: 0; - text-align: left; + text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } + h3.overflow { + width: 100px; + overflow: hidden; + text-overflow: ellipsis; + } + h3.overflow:hover { + background-color: #eee; + overflow: visible; + inline-size: 100px; + white-space: normal; + } +`; + +const SWBalance = styled.div` + width: 50%; + display: flex; + align-items: center; + justify-content: space-between; + word-wrap: break-word; + hyphens: auto; + @media (max-width: 500px) { + width: 100%; + justify-content: center; + margin-bottom: 15px; + } + div { + font-size: 13px; + color: ${props => props.theme.wallet.text.secondary}; + margin: 0; + text-align: center; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + div.overflow { + width: 150px; + overflow: hidden; + text-overflow: ellipsis; + } + div.overflow:hover { + background-color: #eee; + overflow: visible; + inline-size: 150px; + white-space: normal; + } `; const SWButtonCtn = styled.div` @@ -539,9 +585,22 @@ {savedWallets.map(sw => ( -

{sw.name}

+

+ {sw.name} +

- + +
+ [ + {sw && sw.state + ? formatSavedBalance( + sw.state.balances + .totalBalance, + ) + : 'N/A'}{' '} + XEC] +
+
diff --git a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap --- a/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap +++ b/web/cashtab/src/components/Configure/__tests__/__snapshots__/Configure.test.js.snap @@ -2,7 +2,7 @@ exports[`Configure with a wallet 1`] = `

[

[ { + expect(formatSavedBalance('0', 'en-US')).toBe('0'); + }); + it(`test formatSavedBalance with a small XEC balance input with 2+ decimal figures`, () => { + expect(formatSavedBalance('1574.5445', 'en-US')).toBe('1,574.54'); + }); + it(`test formatSavedBalance with 1 Million XEC balance input`, () => { + expect(formatSavedBalance('1000000', 'en-US')).toBe('1,000,000'); + }); + it(`test formatSavedBalance with 1 Billion XEC balance input`, () => { + expect(formatSavedBalance('1000000000', 'en-US')).toBe('1,000,000,000'); + }); + it(`test formatSavedBalance with total supply as XEC balance input`, () => { + expect(formatSavedBalance('21000000000000', 'en-US')).toBe( + '21,000,000,000,000', + ); + }); + it(`test formatSavedBalance with > total supply as XEC balance input`, () => { + expect(formatSavedBalance('31000000000000', 'en-US')).toBe( + '31,000,000,000,000', + ); + }); + it(`test formatSavedBalance with no balance`, () => { + expect(formatSavedBalance('', 'en-US')).toBe('0'); + }); + it(`test formatSavedBalance with null input`, () => { + expect(formatSavedBalance(null, 'en-US')).toBe('0'); + }); + it(`test formatSavedBalance with undefined sw.state.balance or sw.state.balance.totalBalance as input`, () => { + expect(formatSavedBalance(undefined, 'en-US')).toBe('N/A'); + }); + it(`test formatSavedBalance with non-numeric input`, () => { + expect(formatSavedBalance('CainBCHA', 'en-US')).toBe('NaN'); + }); }); 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 @@ -119,3 +119,23 @@ return false; } }; + +export const formatSavedBalance = (swBalance, optionalLocale) => { + try { + if (swBalance === undefined) { + return 'N/A'; + } else { + if (optionalLocale === undefined) { + return new Number(swBalance).toLocaleString({ + maximumFractionDigits: currency.cashDecimals, + }); + } else { + return new Number(swBalance).toLocaleString(optionalLocale, { + maximumFractionDigits: currency.cashDecimals, + }); + } + } + } catch (err) { + return 'N/A'; + } +};