fix(homepage): hub page discovery tabs UX & scroll improvements cp-7.77.0

[vinnyhoward]

Description

Polish pass on the Hub Page Discovery Tabs treatment (coreMCU589AbtestHubPageDiscoveryTabs). Targets scroll/animation behavior on the Predictions tab, the icon-collapse animation on the discovery bar, and several layout glitches under the bar. All changes are gated by the existing A/B feature flag — control path unchanged.

What changed

• Predictions tab scroll behavior reworked. Scrolling now hides the wallet header and the predict tabs/header together (slides off in lock‑step), instead of leaving the predict tabs pinned while the discovery bar collapsed. Discovery tabs now stay visible across all three tabs and only collapse their icons (matching Portfolio/Perpetuals behavior).
• Smooth icon collapse animation. Migrated the discovery tab icon collapse from RN Animated (JS-driven layout properties caused per-frame jank) to a Reanimated SharedValue + useAnimatedStyle running entirely on the UI thread. Gradient overlay still uses the RN Animated.Value mirror to compose with tabGradientOpacities natively.
• Fixed transparent strip showing through the bar. Discovery tab bar now paints colors.background.default so scrolled content no longer bleeds through above the underline.
• Fixed transparent gap below the bar on Perps/Predict tabs. Added a topInset prop on PerpsHomeView and PredictFeed so each tab's own background (perps gradient, predict bg) extends up directly under the discovery bar. Removed wrapper <View mt-X> hacks.
• Tightened spacing in the Portfolio tab. Moved scroll content padding/gap: 16 to a stylesheet (portfolioScrollContent), removed the redundant mt-4 mb-2 wrapper, and dropped the extra mt-2 on TabsIconList so the layout matches control more closely.
• Predict header now hides as a single unit when embedded in the discovery tabs. When walletHeaderTranslateY is provided, useFeedScrollManager slides predict header + predict tab bar away together; standalone PredictFeed retains the original behavior (only the balance/carousel hides).
• Misc cleanup. New collapseBy prop on TabsIconBar for partial-height collapse, lint/no-shadow/no-inline-styles fixes, JSDoc on new props.

Note: To test this feature locally without the LaunchDarkly flag, hard-code isDiscoveryTabsTreatment = true in app/components/Views/Wallet/index.tsx:1050

Changelog

CHANGELOG entry:null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-591

Manual testing steps

Feature: Hub Page Discovery Tabs polish

  Scenario: Predictions tab scroll hides bar contents in lock-step
    Given the Hub Page Discovery Tabs treatment is enabled
    And the Predictions tab is active
    When the user scrolls down past the threshold
    Then the wallet header, predict balance/carousel, and predict tabs all slide off together
    And the discovery tab bar (Portfolio/Perpetuals/Predictions) stays visible with collapsed icons
    When the user scrolls back to the top
    Then everything restores

  Scenario: Discovery icon collapse runs smoothly on the UI thread
    Given the user is on any discovery tab
    When the wallet header hides on scroll
    Then the icons collapse via Reanimated layout animation with no JS-thread jank

  Scenario: No transparent gap under the discovery bar on Perps/Predict
    Given the Hub Page Discovery Tabs treatment is enabled
    When the user switches to the Perpetuals tab (purple gradient bg) or Predictions tab
    Then the tab's own background extends directly under the discovery bar
    And no wallet/system background bleeds through

  Scenario: No bleed-through above the underline
    Given any discovery tab is active and the user scrolls
    When content scrolls up under the bar
    Then the bar paints its own background and content does not show through above the underline

Screenshots/Recordings

after.mov

Before

before.mov

After

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

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
  • See trace() for usage and addToken for an example

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

Medium Risk
Touches scroll-driven header/toolbar animations and layout (Reanimated + RN Animated) across Homepage/Predictions/Perps, which can be fragile across platforms despite added test coverage.

Overview
Improves the Hub Page Discovery Tabs treatment by making discovery tab icon collapse UI-thread driven: TabsIconTab now uses a Reanimated SharedValue from TabIconAnimationContext to animate icon height/margin/opacity, while keeping an RN Animated.Value mirror for the dark-mode gradient overlay.

Refines scroll/animation behavior for the embedded Predictions experience: useFeedScrollManager now optionally coordinates with walletHeaderTranslateY/walletHeaderHeight to slide the Predict header and its tab bar away together (standalone behavior unchanged), and HomepageDiscoveryTabs forwards the new wallet-header props into PredictFeed.

Cleans up layout gaps/spacing under the discovery bar: adds topInset support to PerpsHomeView, removes hardcoded margins in TabsIconList content, and centralizes Portfolio scroll padding/gap styling. Also adds TabsIconBar support for partial-height collapse via new collapseBy prop, with accompanying tests.

^{Reviewed by Cursor Bugbot for commit f56ad60. Bugbot is set up for automated code reviews on this repo. 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.

[gambinish]

Tested and looks good to me! The underline under the tabs sometimes lag as the heavy component mounts, but I'm thinking that might be a artifact from it being a dev build.

Excited to test this out on RC

[cursor]

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

^{❌ 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 9d82fca. Configure here.}

[vinnyhoward]

Tested and looks good to me! The underline under the tabs sometimes lag as the heavy component mounts, but I'm thinking that might be a artifact from it being a dev build.

Excited to test this out on RC

Thanks @gambinish I'm hoping this PR here resolves the issue for Perps. I'll be looking into Predict tomorrow

[codecov-commenter]

Codecov Report

❌ Patch coverage is 75.75758% with 8 lines in your changes missing coverage. Please review.
✅ Project coverage is 81.52%. Comparing base (8208502) to head (9d82fca).
⚠️ Report is 44 commits behind head on main.

Files with missing lines	Patch %	Lines
...ts/HomepageDiscoveryTabs/HomepageDiscoveryTabs.tsx	63.63%	4 Missing ⚠️
...omponents/UI/Predict/hooks/useFeedScrollManager.ts	75.00%	2 Missing and 1 partial ⚠️
...nts/UI/Perps/Views/PerpsHomeView/PerpsHomeView.tsx	50.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #29889      +/-   ##
==========================================
+ Coverage   81.44%   81.52%   +0.07%     
==========================================
  Files        5318     5328      +10     
  Lines      140909   141161     +252     
  Branches    32109    32162      +53     
==========================================
+ Hits       114767   115077     +310     
+ Misses      18263    18223      -40     
+ Partials     7879     7861      -18     

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

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[PatrykLucka]

LGTM, but there are some issues and unused variables in HomepageDiscoveryTabs.tsx

[vinnyhoward]

LGTM, but there are some issues and unused variables in HomepageDiscoveryTabs.tsx

@PatrykLucka good catch, I just pushed up the fix f56ad60. Not sure why the Husky pre-commit hook didn't catch this

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform, SmokePerps, SmokePredictions, SmokeConfirmations
• Selected Performance tags: @PerformancePredict, @PerformancePreps
• Risk Level: medium
• AI Confidence: 88%

click to see 🤖 AI reasoning details

E2E Test Selection:

The PR modifies the HomepageDiscoveryTabs component and its sub-components (TabsIconBar, TabsIconTab, TabsIconList, TabsIconAnimationContext), PerpsHomeView, PredictFeed, and useFeedScrollManager. The core changes are:

1. Animation system migration: Icon collapse animations migrated from RN Animated.Value (JS thread) to Reanimated SharedValue (UI thread) — affects all tabs in the discovery tab bar.
2. HomepageDiscoveryTabs: Removed tabBarCollapseAnim (Predictions-specific), added walletHeaderTranslateY/walletHeaderHeight forwarding to PredictFeed, added topInset to PerpsHomeView, layout/style adjustments.
3. PerpsHomeView: New topInset prop for padding under discovery tab bar.
4. PredictFeed + useFeedScrollManager: New walletHeaderTranslateY/walletHeaderHeight props to sync wallet header animation when embedded in discovery tabs.

Tag selection rationale:

• SmokeWalletPlatform: HomepageDiscoveryTabs is the Trending/Discovery tab container. Changes to its layout, animation system, and tab switching behavior directly affect the Trending tab experience. Per tag description, Perps and Predictions sections inside Trending affect this tag.
• SmokePerps: PerpsHomeView directly modified (topInset prop, scroll content padding). Per tag description, SmokePerps requires SmokeWalletPlatform (Trending section) and SmokeConfirmations.
• SmokePredictions: PredictFeed and useFeedScrollManager directly modified (wallet header sync, overflow-hidden). Per tag description, SmokePredictions requires SmokeWalletPlatform (Trending section) and SmokeConfirmations.
• SmokeConfirmations: Required by both SmokePerps and SmokePredictions per their tag descriptions (Add Funds deposits and opening/closing positions are on-chain transactions).

The animation migration from JS thread to UI thread is a behavioral change that could affect scroll/collapse behavior in all three tabs (Portfolio, Perps, Predictions), making these tests essential for validation.

Performance Test Selection:
The PR migrates icon collapse animations from RN Animated (JS thread) to Reanimated SharedValue (UI thread) in TabsIconTab and HomepageDiscoveryTabs, and adds wallet header sync animations in useFeedScrollManager for PredictFeed. These changes directly affect the rendering performance of the Predictions and Perps views within the discovery tabs. The @PerformancePredict tag covers prediction market list loading and balance display, and @PerformancePreps covers perps market loading — both are directly impacted by the animation system changes and scroll behavior modifications. Running these tests will validate that the Reanimated migration actually improves (or at minimum doesn't regress) performance.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud

[brianacnguyen]

is there anyway to update this prop naming to something more intuitive? collapseBy seems incredibly vague

[vinnyhoward]

Yeah I can, could I do a follow up PR for this? I want to get this CP out of the way @brianacnguyen

[brianacnguyen]

yup

[brianacnguyen]

Requesting changes to make prop name more intuitive

[brianacnguyen]

Approved to unblock with following up with fix PR