[5.3] Show amount being approved by default on approval screens

[blackdevelopa]

Description

This PR should show the proposed approval/custom spend limit on the approval screen

Checklist

• There is a related GitHub issue
• Tests are included if applicable
• Any added code is fully documented

Issue

Progresses #4148

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[sethkfman]

LGTM

[sethkfman]

@blackdevelopa if this ticket is ready. I would move it into QA

[blackdevelopa]

@blackdevelopa if this ticket is ready. I would move it into QA

I am actually waiting on Saya for a design update on the approval screen before moving this to QA

Ready for QA.

[plasmacorral]

Currently hash a2ddea4 is not showing these updates when using the MetaMask swaps button on Binance network in Android 11, 12 or iOS 15.5.

Please make these changes in the swaps flow as well.

[plasmacorral]

One more note here: In this branch the "proposed approval limit" is showing as a long number with commas that includes a whole bunch of zeros. (please forgive my terribly out of focus screenshot, but you can at least see all the zeros)

Typically in production, this proposed approval limit value is the numeric equivalent of ffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff which is equal to 115792089237316195423570985008687907853269984665640564039457584007913129639935.

[plasmacorral]

I am still not seeing the change in d1e5672 to more prominently feature the approval amount when using MetaMask swaps on Polygon/Binance chains.

iOS 15.5
iPhone 13 mini

[blackdevelopa]

Adding this comment for the Swap flow and removing the QA issues found label. https://consensys.slack.com/archives/C03BGLXT03E/p1654878051963769?thread_ts=1654184068.226649&cid=C03BGLXT03E

[plasmacorral]

Android 12
Pixel 3a

It seems that the part of the modal where this new information is presented is not scroll-able. This actually serves to blind android users operating in split screen mode. With this change as tested in d1e5672 we actually no longer present even a mention of the spending allowance amount or provide an option to edit within the approval modal. The exception being, that if the user taps "View details" they can view but not edit the token spending allowance.

The experience on the split screen using pancakeswap.finance is tough to say the least, I still found it surprising how many android users were recently encountering the app closure in android split screen. While this may be a relatively small segment of users, the implications of these changes create what I believe to be a merge blocker. We should not further obfuscate the spending approval for this small segment of users in our effort to expand visibility and enable informed consent around spending approvals.

A possible solution would be to support scrolling for the entire approval modal, rather than just the bottom as we do today.

Reproduction steps:

1. Open another app on the device that you will later use for split screen
2. Hold or acquire non-native asset on the BNB network on the address under test
3. Do NOT have any existing token spending approvals for the non-native asset under test that is greater than the volume of the asset currently held or equal to 115792089237316195423570985008687907853269984665640564039457584007913129639935
4. Launch MetaMask mobile client that is already setup
5. Tap the burger menu and access the browser
6. Navigate to https://Chainlist.org
7. Tap CTA to connect wallet
8. Tap CTA to add BNB network
9. Go to https://pancakeswap.finance and connect wallet
10. Let dapp change network if you did not already do that on Chainlist
11. Tap trade on the bottom left corner of the pancake UI
12. Select a non-native token for trading so you will need to provide token approval
13. Attempt to trade an amount that is larger than any existing token spending allowance set on chain for the address under test
14. Tap the "enable (asset)" CTA on Pancakeswap
15. Note the changes to include the spending approval amount on the approval modal
16. Dismiss or reject the approval modal
17. Swipe up from the bottom of the screen to access android app drawer
18. Swipe around to to feature the app you opened in step one and long press its icon
19. Select "split screen"
20. Tap to select MetaMask mobile as your second app for split screen
21. Tap the "enable (asset)" CTA on Pancakeswap
22. Note that token spending allowance AMOUNT is not shown
23. Note that CTA to edit token spending allowance is not shown
24. Note that modal is not scroll-able to present this information to the user
25. Tap "View details" to see the only place the token spending allowance is displayed
26. Note that token spending allowance is unable to be edited in view details, or at all in split screen

[omnat]

Per the discussion, let's not consider this issue as a release blocker; i.e., the issue of approval amount not visible when user is in split screen mode.

@sethkfman will write a ticket for upcoming sprint to disable split screen mode unless user is on a tablet (which is when split screen is likely more common and real estate not an issue for hiding consent visibility).

cc @plasmacorral @jakehaugen @gantunesr

[plasmacorral]

This is a non-blocking observation that may merit further investigation or may simply be a matter of my connectivity challenges today.

Android 11
Samsung A515f

https://recordit.co/oA3w4FoPyE

I have been experiencing connectivity issues today, but this "Give permission to access your [missing {{token symbol}} value]?" hung for nearly 3 seconds before the Token and spending approval amount was resolved.

This was for a non-native asset that had not yet been imported into MetaMask.

Reproduction steps 1-14 cited in my earlier comments were used to get here.