feat: MUSD-508 align earn balance rows with parent asset layout and add privacy mode support

[Matt561]

Description

Fixes visual inconsistencies in the "Staked Ethereum" (StakingBalance) and Stablecoin lending (EarnLendingBalance) balance rows so they match the layout of their parent asset rows above them.

Layout fixes (both components):

• Increased asset logo from 32×32 to 40×40 to match parent row
• Removed explicit size={AvatarSize.Lg} from the network Badge to use the default size
• Moved percentage change to the right side (as secondaryBalanceElement on AssetElement)
• Moved crypto balance to the left side, directly beneath the asset name

Privacy mode:

• Fiat balance (right, top) is now hidden via AssetElement's privacyMode prop
• Crypto balance (left, bottom) is now wrapped in SensitiveText and hidden when privacy mode is on
• Percentage change remains visible in privacy mode (matching parent row behaviour)

Changelog

CHANGELOG entry: update earn balance row layout (logo size, badge size, balance/percentage placement) and add privacy mode support for StakingBalance and EarnLendingBalance

Related issues

Fixes: MUSD-508: Earn asset details screen paper cuts

Manual testing steps

Feature: Earn balance row layout and privacy mode

  Scenario: user views earn balance rows
    Given user has staked ETH or lent stablecoins
    When user views the asset details screen
    Then the earn balance row matches the layout of the parent asset row above it
    And the asset logo, network badge, crypto balance, fiat balance, and percentage change are correctly positioned

  Scenario: user enables privacy mode with earn positions
    Given user has staked ETH or lent stablecoins
    When user enables privacy mode
    Then the fiat balance and crypto balance in the earn balance row are masked
    And the percentage change remains visible

Screenshots/Recordings

Before

After

earn-papercuts-demo.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
Moderate UI risk: changes how balances/percent change render and switches some buttons to the design-system components, which could affect layout, accessibility, or privacy masking behavior.

Overview
Updates EarnLendingBalance and StakingBalance to match the parent asset-row layout by moving percentage change into AssetElement’s secondaryBalanceElement (right side) and displaying the token amount beneath the asset name (left side), along with associated style tweaks (spacing/alignment and larger 40×40 logos for staking).

Adds privacy mode support to these rows by passing privacyMode into AssetElement (masking fiat) and wrapping the token amount in SensitiveText (masking crypto), while keeping percentage change visible.

Standardizes several action buttons (EarnLendingBalance, StakingButtons) to @metamask/design-system-react-native and adjusts sizing (Md), updates EarningsHistoryButton button size, and refreshes Jest snapshots accordingly (plus adds bottom padding in StakingEarnings).

^{Written by Cursor Bugbot for commit 1e2bf3b. 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.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

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

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeTrade, SmokeConfirmations
• Selected Performance tags: None (no tests recommended)
• Risk Level: medium
• AI Confidence: 82%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are limited to UI components under Earn and Stake (e.g., StakingBalance, StakingEarnings, EarnLendingBalance). These components are part of the Earn/Staking experience accessed via the Trade wallet actions menu. SmokeTrade explicitly covers native ETH staking flows and Earn-related entry points, which rely on these balance and earnings components for correct rendering and interaction. Since staking and earn flows involve on-chain transactions and confirmation screens, SmokeConfirmations is also selected to validate that transaction/signature confirmations still function correctly within these flows.

No core Engine, controller, network, identity, or multi-chain permission logic was modified. Changes are UI-focused within staking/earn modules, so broader tags (Accounts, Network, Identity, MultiChainAPI, etc.) are not required.

Performance Test Selection:
The changes are limited to specific Earn and Stake UI components and styles. There are no modifications to core rendering infrastructure, large lists (e.g., account selector, token list), Engine initialization, swaps, perps, or prediction market flows. Therefore, no dedicated performance test suite is required.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
81.8% 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