feature(ui-ux): vault details screen v2

[JoshuaC817]

What this PR does / why we need it:

Update vault details screen UI to v2

Which issue(s) does this PR fixes?:

Fixes #

Additional comments?:

E2E will be done on a separate PR

Developer Checklist:

• [x] Read your code changes at least once
• [x] Tested on iOS/Android device (e.g, No crashes, library supported etc.)
• [x] No console errors on web
• [x] Tested on Light mode and Dark mode*
• [x] Your UI implementation visually matched the rendered design*
• [x] Unit tests*
• [ ] Added e2e tests*
• [x] Added translations*

[codeclimate[bot]]

Code Climate has analyzed commit e458a31b and detected 7 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Complexity	7

View more on Code Climate.

[defichain-bot]

Missing Translations Report

The following translations are missing for this pull request.

{
    "missingLanguageItems": {
        "zh-Hans": {
            "missingCount": 0,
            "labels": {},
            "totalCount": 1895,
            "allLabels": "{}"
        },
        "zh-Hant": {
            "missingCount": 0,
            "labels": {},
            "totalCount": 1895,
            "allLabels": "{}"
        },
        "fr": {
            "missingCount": 0,
            "labels": {},
            "totalCount": 1895,
            "allLabels": "{}"
        },
        "es": {
            "missingCount": 0,
            "labels": {},
            "totalCount": 1895,
            "allLabels": "{}"
        },
        "it": {
            "missingCount": 0,
            "labels": {},
            "totalCount": 1895,
            "allLabels": "{}"
        }
    },
    "totalMissingCount": 0
}

[codecov[bot]]

Codecov Report

Base: 20.51% // Head: 20.22% // Decreases project coverage by -0.28% :warning:

Coverage data is based on head (e458a31) compared to base (0950546). Patch coverage: 7.29% of modified lines in pull request are covered.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3638      +/-   ##
==========================================
- Coverage   20.51%   20.22%   -0.29%     
==========================================
  Files         473      482       +9     
  Lines       12499    12769     +270     
  Branches     4050     4159     +109     
==========================================
+ Hits         2564     2583      +19     
- Misses       9891    10142     +251     
  Partials       44       44              

Impacted Files	Coverage Δ
mobile-app/app/components/NumberRowV2.tsx	48.14% <ø> (ø)
mobile-app/app/components/TextRowV2.tsx	60.00% <ø> (ø)
...eens/AppNavigator/screens/Loans/LoansNavigator.tsx	3.84% <0.00%> (ø)
.../screens/Loans/VaultDetail/VaultDetailScreenV2.tsx	0.00% <0.00%> (ø)
.../Loans/VaultDetail/components/CloseVaultButton.tsx	0.00% <0.00%> (ø)
...oans/VaultDetail/components/VaultActionButtons.tsx	0.00% <0.00%> (ø)
...ultDetail/components/VaultDetailCollateralsRow.tsx	0.00% <0.00%> (ø)
...ans/VaultDetail/components/VaultDetailLoansRow.tsx	0.00% <0.00%> (ø)
...Loans/VaultDetail/components/VaultDetailStatus.tsx	0.00% <0.00%> (ø)
...oans/VaultDetail/components/VaultDetailSummary.tsx	0.00% <0.00%> (ø)
... and 11 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

:umbrella: View full report at Codecov.
:loudspeaker: Do you have feedback about the report comment? Let us know in this issue.

[defichain-bot]

Build preview for DeFiChain Wallet is ready!

Built with commit efc7f361eba3581f59665e3993c2354037e92f78

https://expo.io/@defichain/wallet?release-channel=pr-preview-3638

[cypress[bot]]

---

Test summary

435 • 76 • 1 • 50

---

Run details

Project	wallet
Status	Failed
Commit	fa1d0aba04 ℹ️
Started	Oct 21, 2022 9:52 AM
Ended	Oct 21, 2022 10:25 AM
Duration	33:43 💡
OS	Linux Ubuntu - 20.04
Browser	Chrome 106

View run in Cypress Dashboard ➡️

---

Failures

	dex/swap/swap_future_withdraw.spec.ts		1
1	Wallet - Future Swap -> Display -> Withdraw flow > should future swap DUSD -> dTU10
	portfolio/send.spec.ts		9
1	Wallet - Send - Address book > should be able to add new address
2	Wallet - Send - Address book > should not have favourite button in Your addresses tab
3	Wallet - Send - Address book > should be able to select address from address book and display in address input
4	Wallet - Send - Address book > should be able to select wallet address and display default label in address input
5	Wallet - Send - Address book > should be able to block duplicate address
6	Wallet - Send - Address book > should be able to block wallet address
7	Wallet - Send - Address book > should disable add new, edit and favourite button has has refresh button in Your address tab
8	Wallet - Send - Address book > should remove address book from storage after exiting wallet through setting
9	Wallet - Send - Address book > should remove address book from storage after forced exit from invalid passcode
This comment includes only the first 10 test failures. See all 76 failures in the Cypress Dashboard.

---

This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard

[JoshuaC817]

One known issue on web (works fine on Android and iOS) - Collaterals bottom sheet info (title and message) not updated accordingly, tried using useState/useMemo does not work

[G9000]

why did you opt to combine them both ahhaah. not sure if only on my screen

[JoshuaC817]

why did you opt to combine them both ahhaah. not sure if only on my screen

updating to this to cater the flexibility of difference screen sizes and languages, there are situations where the text might overflow into 3 liners instead of 2 only