fix: Updated root pages scrollable behavior with safeareaview cp-7.69.1 cp-7.70.0

[brianacnguyen]

Description

Standardizes safe area and header inset behavior across the main tab views (Wallet, Explore, Activity, Rewards).

1. Reason for the change: These views used edges={{ bottom: 'additive' }} on SafeAreaView and includesTopInset on headers, which was inconsistent with the desired layout and could cause double insets or incorrect safe area handling.
2. Improvement: Switched to edges={{ top: 'additive' }} on SafeAreaView and removed includesTopInset from header components so the top safe area is handled by the screen container and headers align consistently.

Changelog

CHANGELOG entry: null

Related issues

Fixes: #27443

Manual testing steps

Feature: Safe area and header insets on main tabs

  Scenario: Wallet, Explore, Activity, and Rewards use consistent safe area
    Given the app is open on a device or simulator with a notch/safe area

    When the user switches to each main tab (Wallet, Explore, Activity, Rewards)
    Then the top safe area is applied by the screen (no double inset)
    And the header (title + accessories) aligns correctly below the safe area
    And the bottom of each view respects the tab bar / device safe area as before

Screenshots/Recordings

Before

ScreenRecording_03-12-2026.10-48-07_1.MP4

After

Simulator.Screen.Recording.-.iPhone.15.Pro.Max.-.2026-03-12.at.10.12.15.mov

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• 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.

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

Medium Risk
Layout-only changes to core tab screens (Wallet/Explore/Activity/Rewards) that can affect safe-area padding and scroll behavior across devices, plus removal of Wallet’s bottom fade/scroll tracking logic which could subtly change UX on the homepage.

Overview
Standardizes safe-area handling across the main tab views by switching root SafeAreaView usage from edges={{ bottom: 'additive' }} to edges={{ top: 'additive' }} and removing header includesTopInset so the top inset is applied consistently by the screen container.

In Wallet, removes the bottom fade LinearGradient overlay and its associated scroll/size tracking state, simplifying scroll handling to just notify homepage section subscribers via handleHomepageScroll.

^{Written by Cursor Bugbot for commit c4b0e41. This will update automatically on new commits. Configure here.}

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

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform
• Selected Performance tags: @PerformanceAssetLoading, @PerformanceLaunch
• Risk Level: medium
• AI Confidence: 81%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are limited to UI components within the wallet experience:

• app/components/Views/Wallet/index.tsx (wallet home entry point)
• app/components/Views/TrendingView/TrendingView.tsx (Trending tab)
• app/components/Views/ActivityView/index.js and snapshot (transaction history)
• app/components/UI/Rewards/Views/RewardsDashboard.tsx

These files are part of the core wallet surface area covered by SmokeWalletPlatform:

• Trending tab (explicitly covered by SmokeWalletPlatform)
• Transaction history / activity list (explicitly covered)
• Wallet home and lifecycle interactions

No changes were made to controllers, Engine, network layer, confirmations, multi-chain provider, swaps logic, perps, predictions, snaps, or identity/sync logic. Therefore, broader tags such as SmokeConfirmations, SmokeNetworkAbstractions, SmokeNetworkExpansion, SmokeTrade, SmokePerps, SmokePredictions, SmokeIdentity, or FlaskBuildTests are not required.

Given that Wallet and Trending are central navigation hubs and activity display is critical to user trust, running SmokeWalletPlatform is necessary to validate:

• Trending rendering and navigation
• Activity list rendering and transaction history
• Core wallet platform behaviors and provider event handling

This provides focused but sufficient coverage with minimal unnecessary test execution.

Performance Test Selection:
Changes affect the Wallet home, Trending view, and Activity view, which are part of the initial interactive surface after app launch and heavily tied to asset/balance and transaction rendering. UI restructuring or additional logic in these components could impact:

• Time to interactive after launch (Wallet screen rendering)
• Asset and transaction list rendering performance

Therefore, Asset Loading and Launch performance tests should run to detect regressions in render time or initialization performance.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[github-actions]

✅ E2E Fixture Validation — Schema is up to date
16 value mismatches detected (expected — fixture represents an existing user).
View details