[5.3] [IMPROVEMENT] Update SelectQRAccounts UI

[gantunesr]

Description

This PR updates the style of the SelectQRAccounts component and refactors the HOC withQRHardwareAwareness

Use Case

GIVEN I'm importing my accounts from my Keystone to MMM
WHEN I select an account or more
THEN the account(s) should be imported to MMM

Checklist

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

Issue

Progresses #3952

[plasmacorral]

Why do we have specific formatting for the iphone X in app/components/Views/ConnectQRHardware/SelectQRAccounts/index.tsx and app/components/Views/ConnectQRHardware/index.tsx, @soralit?

[plasmacorral]

This is how the screen is presented on my Pixel 3a

And for reference how this looked in earlier builds:

The way we are wrapping the public address on a screen of this size is not ideal. edited to update-I later realized that the characters in the second line were the eth balance rather than the address. Should we preserve the unit "ETH" or was that omission intentional?.

I must defer to design, but it might be nice to display "Keystone 0" on this screen to be consistent with how account names will be presented in the account menu after import, rather than just "0" as shown currently.

[plasmacorral]

Just following up on my comment above:

...wrapping the public address on a screen of this size...

I now see that it is the Eth balance appearing below the public address (not the address wrapping to a new line).

Should we preserve the unit "ETH" to make this more clear, or was that removed intentionally?

[gantunesr]

Should we preserve the unit "ETH" to make this more clear, or was that removed intentionally?

It was a bug, its already fixed in the last commit

I must defer to design, but it might be nice to display "Keystone 0" on this screen to be consistent with how account names will be presented in the account menu after import

I added the text "QR Hardware" as its showed in the Wallet View. What do you think @holantonela and @plasmacorral?

In the following screenshots you can see the evidence,

[owencraston]

Nice work. Only thing I would say is we should try and move withQRHardwareAwareness to a hook but i'd suggest we do this in another PR to reduce the scope. I didn't run the app so this is just a code review!

[plasmacorral]

Android:

iOS:

[AlexJupiter]

Candidate for 5.3