feat: decouple account selector from qr code connector

[stanleyyconsensys]

Description

In order to enable multiple account select in ledger hardware wallet,
This PR is focus on decoupling the Account selector component from QR hardware wallet for reusable purpose

The changes should not impact to any UI / operations differences compare to existing QR hardware wallet account selector

For clean code purpose, the changes also decoupling the method toBlockExplorer from account selector component into a new hook useBlockExplorer

Logical flow

Related issues

issue : 109

Manual testing steps

1. Go to main screen
2. Tab current account to open account drawer
3. Click add account or hardware account
4. Choose add hardware account
5. Choose QR based
6. Scan Qr wallet
7. Account selector should appear after scan success
8. Account selector should able to perform select/un select account, unlock accounts, next page, prev pages operation as what it has to be in previous version

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained what problem this PR is solving and how it is solved.
• I've linked related issues
• I've included manual testing steps
• I've included screenshots/recordings if applicable
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • In case it's "ready for review", I've changed it from "draft" to "non-draft".

Pre-merge reviewer checklist

• I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
• I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

[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.

[codecov-commenter]

Codecov Report

Attention: 45 lines in your changes are missing coverage. Please review.

Comparison is base (4f5b0ef) 40.32% compared to head (bb02b65) 40.38%.

Files	Patch %	Lines
...onents/UI/HardwareWallet/AccountSelector/index.tsx	3.70%	26 Missing ⚠️
app/components/Views/ConnectQRHardware/index.tsx	0.00%	10 Missing ⚠️
app/components/hooks/useBlockExplorer.ts	75.00%	2 Missing and 1 partial ⚠️
...onents/UI/HardwareWallet/AccountDetails/styles.tsx	33.33%	2 Missing ⚠️
...onents/UI/HardwareWallet/AccountSelector/hooks.tsx	84.61%	0 Missing and 2 partials ⚠️
...nents/UI/HardwareWallet/AccountSelector/styles.tsx	33.33%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8093      +/-   ##
==========================================
+ Coverage   40.32%   40.38%   +0.05%     
==========================================
  Files        1235     1239       +4     
  Lines       29948    29956       +8     
  Branches     2875     2874       -1     
==========================================
+ Hits        12078    12098      +20     
+ Misses      17175    17160      -15     
- Partials      695      698       +3     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[sonarcloud]

Quality Gate passed

The SonarCloud Quality Gate passed, but some issues were introduced.

2 New issues
0 Security Hotspots
6.7% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

E2E test started on Bitrise: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/d99f912b-acb1-4d28-b3d3-daa05736eafe
You can also kick off another Bitrise E2E smoke test by removing and re-applying the (Run Smoke E2E) label

[vivek-consensys]

E2E Manual Test:-

Screen_Recording_20231215_111019_MetaMask.mp4

[gantunesr]

I found a minor bug unrelated to this PR, it'd be good to open a ticket for it cc @angelcheung22

Edit: When you navigate to Etherscan from the "Connect QR Hardware Account" screen, it dismisses the previous screen to navigate to Etherscan. I think the desired behaviour is to be able to navigate back to the "Connect QR Hardware Account".

RPReplay_Final1705930225.mp4

[gantunesr]

The rest of the code looks good to me

[angelcheung22]

I found a minor bug unrelated to this PR, it'd be good to open a ticket for it cc @angelcheung22

RPReplay_Final1705930225.mp4

Hey Gustavo, im confused about the bug that you are showing in the video. May I know whats the expected steps?

[sonarcloud]

Quality Gate passed

The SonarCloud Quality Gate passed, but some issues were introduced.

6 New issues
0 Security Hotspots
33.3% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[dawnseeker8]

i have implemented two unit tests for useBlockExplorer and hooks.tsx under hardwareWallet/AccountSelector/hooks.tsx based on @gantunesr comments in code review.
#8093

now This PR is ready to review again.

[dawnseeker8]

Regarding the small bug @gantunesr report, i have tried with main branch and confirm that this is pre-existing bug in mobile. every etherscan link open in QR code import screen, if you click back in that screen, UI will go back to main screen.

[angelcheung22]

Regarding the small bug @gantunesr report, i have tried with main branch and confirm that this is pre-existing bug in mobile. every etherscan link open in QR code import screen, if you click back in that screen, UI will go back to main screen.

https://app.zenhub.com/workspaces/cet-metamask-hardware-wallets-6566ee6aedc46007d5a260bb/issues/zh/139 <-per discussion from last weekly with alex, this one can be low priority and add to backlog for future fixing. Added new ticket in zenhub