Update Transaction Screens in Mobile

[cjeria]

Transaction screen designs in the extension will be getting updated soon and we should also update them in mobile for consistency. We'll use the new extension designs to inform how to present them in a mobile context.

[cjeria]

Here's a general approach to improve the usability of transaction screens on mobile. cc @omnat @estebanmino @ibrahimtaveras00 WDYT?

[omnat]

This sounds like a good base framework for tx overlays and a smart way to simplify the tx confirmations without losing context of use! @cjeria
And we already have similar components from Connect prompt, so hopefully it helps in doing a UI update to transaction screens.

I'd also add that let's keep general consistency with extension tx design work like this one: ensure focus is on user consent (which info should be presented, and how can we make it super clear?), which actions should the user be able to do (e.g., gas edit as a secondary and optional action), info architecture (which info to show as primary, and which details can be a layer or two deep?)

But as you already pointed out, in mobile context, we can adapt to the platform & simplify designs even further (e.g., no need for dapp url) & ensure there's consistency within all connect/sign/confirm/approve screens within mobile.

[omnat]

So for mobile, Confirm request is the oldest version, and then Approve is mainly different from full-screen view perspective. Signature and Connect requests seem to be similar framework you recommend above. Which screens would you recommend changes for @cjeria ? And let's try to re-use components from latest Approve screens and other work.

1. Confirm request:
   (today):

2. Signature request:
   (today):

3. Connect request (today)

4. Approve request (latest - design that is implemented in latest version)
   https://www.figma.com/file/Emfl6CRPRtuQtzJEOJJ3hy/Approve-Screen?node-id=721%3A1