feat: update Perps and Predictions sections to display unrealized P&L by PatrykLucka · Pull Request #27844 · MetaMask/metamask-mobile

PatrykLucka · 2026-03-24T09:35:14Z

Description

Users with open Perpetuals or Predict positions could not see aggregate unrealized P&L on the wallet homepage next to those sections, and the Perps tab “Your positions” subtitle duplicated similar layout logic.

This PR:

Wallet homepage — Perps: Shows a sub-row under “Perpetuals” with aggregate unrealized P&L (and ROE %) when the user has filled open positions; hides it for privacy mode, while loading account data, or when there are no positions (including orders-only — no row). Colors follow profit (green) / loss (red) / flat (default text).
Wallet homepage — Predict: Shows the same style of row under “Predictions” using the existing unrealized P&L API (useUnrealizedPnL); pull-to-refresh also invalidates that query. Respects privacy mode.
Perps home (tab): Keeps the positions subtitle visible whenever there are open positions (including flat P&L), uses design-system text colors, and reuses the shared HomepageSectionUnrealizedPnlRow for the value + “Unrealized P&L” line so layout matches the homepage spec (4px under title, 8px between value and label).
Shared UI: New HomepageSectionUnrealizedPnlRow under homepage components (used by homepage sections + PerpsHomeSection).
Predict: formatPredictUnrealizedPnLStringParts in format.ts centralizes i18n interpolation for unrealized P&L strings; PredictPositionsHeader and PredictionsSection both use it.

Changelog

CHANGELOG entry: Added unrealized P&L summary on the wallet homepage for Perpetuals and Predictions, and aligned the Perps home “Your positions” subtitle with the same layout.

Related issues

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

Manual testing steps

Feature: Unrealized P&L on homepage Perps and Predict

  Scenario: Perps section shows aggregate unrealized P&L with open positions
    Given the user has at least one open Perpetuals position and privacy mode is off
    When the user views the wallet homepage
    Then the Perpetuals section shows a line with signed dollar P&L, percentage, and an unrealized P&L label below the section title
    And positive P&L is green and negative P&L is red

  Scenario: Perps section hides P&L without open positions
    Given the user has no open Perpetuals positions (only limit orders or none)
    When the user views the wallet homepage
    Then no unrealized P&L sub-row appears under Perpetuals and spacing below the title is unchanged

  Scenario: Predict section shows unrealized P&L with open positions
    Given the user has open Predict positions and privacy mode is off
    When the user views the wallet homepage
    Then the Predictions section shows the unrealized P&L sub-row consistent with design

  Scenario: Privacy mode hides homepage P&L values
    Given privacy mode is enabled
    When the user views the wallet homepage with Perps and/or Predict positions
    Then unrealized P&L sub-rows for those sections are not shown

  Scenario: Perps tab positions subtitle matches homepage styling
    Given the user has open Perps positions
    When the user opens the Perps home screen
    Then “Your positions” shows the unrealized P&L value and label with the same visual treatment as the homepage row

Screenshots/Recordings

Before

After

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
Medium risk: adds new homepage UI rows driven by live Perps account state and Predict react-query data (including query invalidation on refresh), which could affect loading/visibility states and performance but does not touch auth or funds movement.

Overview
Adds a shared HomepageSectionUnrealizedPnlRow component and uses it to display aggregate unrealized P&L under the Wallet homepage Perpetuals and Predictions section titles when the user has open positions (and not in privacy mode), including loading placeholders and tone-based coloring.

Refactors Perps tab PerpsHomeSection/PerpsHomeView to reuse the same value+label row, switch to design-system TextColor tokens, and keep the positions subtitle visible whenever positions exist (including flat P&L). Predict’s positions header and homepage section now share a centralized formatPredictUnrealizedPnLStringParts formatter, and Predictions pull-to-refresh also invalidates the unrealized P&L query; tests were updated/added accordingly.

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

… P&L

github-actions · 2026-03-24T09:35:23Z

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.

…ictions

github-actions · 2026-03-24T13:19:20Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR introduces UI changes to the Homepage's Perps and Predictions sections, plus the PerpsHomeView:

PerpsSection (Homepage): Now shows an aggregate unrealized P&L row (HomepageSectionUnrealizedPnlRow) when the user has filled positions. Adds usePerpsLiveAccount hook and privacy mode integration. This directly affects the Perps section in the Trending/Homepage tab.
PredictionsSection (Homepage): Now shows unrealized P&L row for Predict positions. Adds useUnrealizedPnL hook, privacy mode integration, and query invalidation on refresh.
PerpsHomeView: Minor logic fix (removed zero-PnL check so P&L shows even when flat) and updated TextColor enum values from deprecated to new design system values.
PerpsHomeSection: Refactored subtitle rendering to use the new shared HomepageSectionUnrealizedPnlRow component.
New HomepageSectionUnrealizedPnlRow component: Shared UI component used by both Perps and Predictions sections.
format.ts utility: New formatPredictUnrealizedPnLStringParts function extracted and shared.

Tag selection rationale:

SmokePerps: Directly affected — PerpsSection homepage display and PerpsHomeView both changed. Per tag description, also requires SmokeWalletPlatform and SmokeConfirmations.
SmokePredictions: Directly affected — PredictionsSection homepage display changed. Per tag description, also requires SmokeWalletPlatform and SmokeConfirmations.
SmokeWalletPlatform: Required by both SmokePerps and SmokePredictions (Trending tab contains both sections). The Trending tab is the entry point for these subsections.
SmokeConfirmations: Required by both SmokePerps and SmokePredictions per their tag descriptions (deposits/positions are on-chain transactions).

Risk is medium because these are UI display changes to existing features (not core logic), but they introduce new data subscriptions (hooks) and a new shared component that could affect rendering behavior across multiple homepage sections.

Performance Test Selection:
Two new data hooks are added to homepage sections: usePerpsLiveAccount in PerpsSection and useUnrealizedPnL in PredictionsSection. These add new data subscriptions that run on the homepage/Trending tab. The new HomepageSectionUnrealizedPnlRow component renders conditionally for users with positions. These changes could affect homepage rendering performance for users with active Perps or Predict positions. @PerformancePreps covers perps market loading and balance display, and @PerformancePredict covers prediction market list loading and balance display — both are directly relevant to the new P&L row rendering.

View GitHub Actions results

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

github-actions · 2026-03-24T13:39:16Z

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

sonarqubecloud · 2026-03-24T13:45:56Z

Quality Gate passed

Issues
4 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

caieu

LGTM

aganglada

LGTM, one non-blocking nit

aganglada · 2026-03-27T10:14:50Z

+        {/* Value + muted label: same row as wallet homepage unrealized P&L (8px gap). */}
+        {subtitle && subtitleSuffix ? (
+          <HomepageSectionUnrealizedPnlRow
+            label={subtitleSuffix}
+            valueText={subtitle}
+            valueColor={subtitleColor}
+            paddingHorizontal={0}
+            marginTop={1}
+            valueTestID={subtitleTestID}
+            labelTestID={
+              subtitleTestID ? `${subtitleTestID}-suffix` : undefined
+            }
+          />
+        ) : subtitle ? (
+          <Box marginTop={1}>
+            <Text
+              variant={TextVariant.BodyMd}
+              color={subtitleColor}
+              fontWeight={FontWeight.Medium}
+              testID={subtitleTestID}
+            >
+              {subtitle}
+            </Text>
+          </Box>
+        ) : null}


[nit] We could exact this to it's own component (non-blocking)

Good point, I think we could do that at some point, now I'm pretty sure we will be still changing things around here, so I think we could leave this subtitle thing separated for now

refactor: update Perps and Predictions sections to display unrealized…

74545c9

… P&L

PatrykLucka self-assigned this Mar 24, 2026

metamaskbot added the team-mobile-ux Mobile UX team label Mar 24, 2026

github-actions Bot added the size-L label Mar 24, 2026

PatrykLucka marked this pull request as ready for review March 24, 2026 09:37

PatrykLucka requested review from a team as code owners March 24, 2026 09:37

test: enhance Homepage tests with additional mocks for Perps and Pred…

4bae410

…ictions

github-actions Bot added the risk-medium Moderate testing recommended · Possible bug introduction risk label Mar 24, 2026

test: add unit tests for HomepageSectionUnrealizedPnlRow component

50ae867

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 24, 2026

cursor Bot reviewed Mar 24, 2026

View reviewed changes

Comment thread app/components/UI/Perps/components/PerpsHomeSection/PerpsHomeSection.tsx

wachunei approved these changes Mar 24, 2026

View reviewed changes

caieu approved these changes Mar 25, 2026

View reviewed changes

aganglada approved these changes Mar 27, 2026

View reviewed changes

PatrykLucka added this pull request to the merge queue Mar 27, 2026

Merged via the queue into main with commit 2324e7c Mar 27, 2026
181 of 183 checks passed

PatrykLucka deleted the TMCU-584-add-unrealized-pnl-on-perps-and-predict-sections branch March 27, 2026 11:04

github-actions Bot locked and limited conversation to collaborators Mar 27, 2026

metamaskbot added the release-7.73.0 Issue or pull request that will be included in release 7.73.0 label Mar 27, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: update Perps and Predictions sections to display unrealized P&L#27844

feat: update Perps and Predictions sections to display unrealized P&L#27844
PatrykLucka merged 3 commits into
mainfrom
TMCU-584-add-unrealized-pnl-on-perps-and-predict-sections

PatrykLucka commented Mar 24, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 24, 2026

Uh oh!

github-actions Bot commented Mar 24, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 24, 2026

Uh oh!

sonarqubecloud Bot commented Mar 24, 2026

Uh oh!

caieu left a comment

Uh oh!

aganglada left a comment

Uh oh!

aganglada Mar 27, 2026

Uh oh!

PatrykLucka Mar 27, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Uh oh!

Conversation

PatrykLucka commented Mar 24, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Mar 24, 2026

Uh oh!

github-actions Bot commented Mar 24, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 24, 2026

Uh oh!

sonarqubecloud Bot commented Mar 24, 2026

Quality Gate passed

Uh oh!

caieu left a comment

Choose a reason for hiding this comment

Uh oh!

aganglada left a comment

Choose a reason for hiding this comment

Uh oh!

aganglada Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

PatrykLucka Mar 27, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

PatrykLucka commented Mar 24, 2026 •

edited

Loading