fix: token balances display fix

[MuckT]

Description

Adjusts the styles on TokenBalances.tsx to allow display with large text and long tokens names. Also fixes the cropping of the header as seen in the attached bug ticket. Slack Thread.

Screenshots

Extra Large Font Size - Before / After

       

Large Font Size - Before / After

       

Default Font Size - Before / After

       

Other changes

Uses HeaderTitleWithSubtitle instead of custom header.

Tested

Tested locally on an iOS 12 mini device.

How others should test

prerequisites: On Mainnet and with more than one token with balance greater than .02 is in the wallet.

1. Tap 'View Assets'
2. Observe that token balances are displayed with price change indicators without line breaks in price change indicator or the local currency value: both should display on the same line or break to entirely separate lines.
3. Observe the header and check that text is not cropped.
4. Repeat with large fonts.
5. If NFT banner is present header text should not be cropped.

Related issues

• Fixes ##2548, SUP-19

Backwards compatibility

Yes

[codecov[bot]]

Codecov Report

Merging #2795 (58369b4) into main (3b5d4b3) will decrease coverage by 0.01%. The diff coverage is 69.23%.

@@            Coverage Diff             @@
##             main    #2795      +/-   ##
==========================================
- Coverage   79.86%   79.84%   -0.02%     
==========================================
  Files         608      608              
  Lines       22009    22012       +3     
  Branches     4005     4010       +5     
==========================================
- Hits        17577    17576       -1     
- Misses       4383     4385       +2     
- Partials       49       51       +2     

Impacted Files	Coverage Δ
src/components/PercentageIndicator.tsx	100.00% <ø> (ø)
src/tokens/TokenBalances.tsx	94.11% <69.23%> (+0.27%)	:arrow_up:
src/web3/saga.ts	77.77% <0.00%> (-3.04%)	:arrow_down:
src/tokens/utils.ts	97.05% <0.00%> (-2.95%)	:arrow_down:

---

Continue to review full report at Codecov.

Legend - Click here to learn more Δ = absolute <relative> (impact), ø = not affected, ? = missing data Powered by Codecov. Last update 3b5d4b3...58369b4. Read the comment docs.

[ValoraQA]

Hey @MuckT we have verified the above issue on Latest iOS Test Flight Release build V 1.40.0 and updated status in test rails

Observation :

• NFT banner is not seen cropped on view assets page when user has maximized the font size
• The tokens seen on assets page are seen properly aligned
• The view assets header is not cropping

Test Rails: iOS 14 : https://valoraapp.testrail.io/index.php?/tests/view/69523 iOS 15 : https://valoraapp.testrail.io/index.php?/tests/view/69492

Device : iPhone 12(14.7.1), iPhone 13 mini(15.1.1)

Thanks..!

[ValoraQA]

Hey @MuckT we have verified the above issue on Latest Android Release build V 1.40.0 and updated status in test rails

Test Rails: Android 11: https://valoraapp.testrail.io/index.php?/tests/view/69554 Android 12: https://valoraapp.testrail.io/index.php?/tests/view/69585

Devices : Google Pixel 2XL(11.0), Google Pixel 4a(12.0)

Thanks..!