Skip to content

fix: wrap ConnectQRHardware in SafeAreaView#30092

Merged
montelaidev merged 7 commits into
mainfrom
fix/qr-connect-view
May 15, 2026
Merged

fix: wrap ConnectQRHardware in SafeAreaView#30092
montelaidev merged 7 commits into
mainfrom
fix/qr-connect-view

Conversation

@montelaidev

@montelaidev montelaidev commented May 13, 2026

Copy link
Copy Markdown
Contributor

Description

This PR updates the the QRConnectHardware to use SafeAreaView

Changelog

CHANGELOG entry: updates the view of the QRConnectHardware to be aware of notches and bottom screen menus.

Related issues

Fixes:

Manual testing steps

Not applicable

Screenshots/Recordings

Screenshot_20260513_182003_MetaMask (1) Screenshot_20260513_182607_MetaMask (1)

TBD

Pre-merge author checklist

Performance checks (if applicable)

  • I've tested on Android
    • Ideally on a mid-range device; emulator is acceptable
  • I've tested with a power user scenario
    • Use these power-user SRPs to import wallets with many accounts and tokens
  • I've instrumented key operations with Sentry traces for production performance metrics

For performance guidelines and tooling, see the Performance Guide.

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.

Note

Low Risk
Low risk UI/layout change limited to the ConnectQRHardware screen; main risk is unintended spacing on some devices due to safe-area edge configuration.

Overview
Updates ConnectQRHardware to rely on SafeAreaView for notch/edge handling instead of manually applying insets.top, and explicitly limits safe-area padding to top/left/right.

Adds testIDs for the new safe-area container and header, and extends the test suite with safe-area-context mocks plus assertions that header top margin is removed and the container excludes the bottom edge in both instruction and account-selector states.

Reviewed by Cursor Bugbot for commit b6f3016. Bugbot is set up for automated code reviews on this repo. Configure here.

@montelaidev montelaidev self-assigned this May 13, 2026
@montelaidev montelaidev added the team-accounts-framework Accounts team label May 13, 2026
@github-actions

Copy link
Copy Markdown
Contributor

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.

Comment thread app/components/Views/ConnectQRHardware/index.tsx Outdated
@github-actions github-actions Bot added size-S and removed size-XS labels May 13, 2026
Comment thread app/components/Views/ConnectQRHardware/index.tsx
@github-actions github-actions Bot added size-M and removed size-S labels May 13, 2026
Comment thread app/components/Views/ConnectQRHardware/index.test.tsx Outdated
Comment thread app/components/Views/ConnectQRHardware/index.tsx Outdated

@cursor cursor Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Fix All in Cursor

❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.

Reviewed by Cursor Bugbot for commit e2c137f. Configure here.

Comment thread app/components/Views/ConnectQRHardware/index.tsx Outdated
@github-actions

Copy link
Copy Markdown
Contributor

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokeAccounts
  • Selected Performance tags: None (no tests recommended)
  • Risk Level: low
  • AI Confidence: 92%
click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are isolated to the ConnectQRHardware component and involve:

  1. Replacing useSafeAreaInsets + manual marginTop with SafeAreaView component using explicit edges ['top', 'left', 'right'] — a UI layout refactor.
  2. Adding CONTAINER and HEADER test IDs to ConnectQRHardware.testIds.ts.
  3. Adding unit tests to verify the SafeAreaView behavior and that no manual marginTop is applied.

The impact is strictly limited to the QR Hardware Wallet connection screen. SmokeAccounts is the appropriate tag as it covers "adding QR-based hardware wallet accounts" which is exactly the flow this component supports. No other flows, controllers, or shared components are affected. No performance impact is expected from this layout refactor.

Performance Test Selection:
The changes are a minor UI layout refactor (replacing useSafeAreaInsets with SafeAreaView) in the ConnectQRHardware component. There is no impact on rendering performance, data loading, state management, or any performance-sensitive code paths.

View GitHub Actions results

@sonarqubecloud

Copy link
Copy Markdown

@gantunesr gantunesr changed the title fix: use safe area view fix: wrap ConnectQRHardware in SafeAreaView May 15, 2026

@gantunesr gantunesr left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm. Did not test

@montelaidev if possible lets add some screenshots to the PR

@montelaidev montelaidev added this pull request to the merge queue May 15, 2026
Merged via the queue into main with commit 6375f80 May 15, 2026
106 of 107 checks passed
@montelaidev montelaidev deleted the fix/qr-connect-view branch May 15, 2026 14:26
@github-actions github-actions Bot locked and limited conversation to collaborators May 15, 2026
@metamaskbotv2 metamaskbotv2 Bot added the release-7.79.0 Issue or pull request that will be included in release 7.79.0 label May 15, 2026
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

release-7.79.0 Issue or pull request that will be included in release 7.79.0 size-M team-accounts-framework Accounts team

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants