[Cashtab] display balances for saved wallets
938e0caca334
Actions

Description

[Cashtab] display balances for saved wallets

Summary:
Starting this new diff after encountering commit issues with D10239 which will now be abandoned.

Created new function 'formatSavedBalance' in utils/validation.js to take a savedwallet balance as input and return a formated locale string so large XEC balances are legible
Imported the newly created locale string function into Configure/Configure.js and utilised as part of conditional rendering to mitigate edge cases that may prevent the app from rendering.
Added unit tests in validation.test.js to test edge case inputs for SWBalances, including undefined/null balances, zero and max supply trillion balances
Fixed overflow issue with long wallet names pushing buttons off the UI by adjusting overflow:hover css for both <SWName> and <SWBalance>
Added additional styling in Configuration.js's <SWBalance> component to enhance aesthetics and distinguish SWBalance values from SWName
Updated jest snapshot for Configure.js

Test Plan:

npm test passing successfully, which includes unit tests for the newly created formatSavedBalance functions relating to edge cases
Correctly displaying a small XEC balance for saved wallets
Correctly displaying 0 XEC balance for saved wallets
Correctly displaying a large XEC balance for saved wallets
Correctly displaying N/A balance for a newly imported saved wallet (this will test undefined or null inputs from 'sw.state.balances' and 'sw.state.balances.totalBalance')
Correctly displaying 0 balance when viewing a recently imported saved wallet a second time in the Saved Wallets list
Correctly displaying a wallet with 24 characters where it's initially shortened ellipsis style and hovering over it will display the full value
Repeat steps 2-6 for browser extension mode
Test cross browser compatibility in Firefox in standard web mode
Cosmetic check by manually reducing browser width and ensure UI components are positioned accordingly

Reviewers: bytesofman, Fabien, O1 Bitcoin ABC, #bitcoin_abc

Reviewed By: bytesofman, O1 Bitcoin ABC, #bitcoin_abc