feat(homepage): add DeFi section with positions display by wachunei · Pull Request #26347 · MetaMask/metamask-mobile

wachunei · 2026-02-20T14:13:38Z

Description

This PR adds the DeFi section to the new Homepage, displaying the user's top DeFi positions.

What changed:

Added useDeFiPositionsForHomepage hook that fetches DeFi positions from the DeFiPositionsController Redux state
Positions are sorted by market value (descending) and limited to 5
Added skeleton loading state with shimmer effect
Section only renders when the user has DeFi positions and the feature flag is enabled
Added comprehensive unit tests for both the hook and component

Why:
Part of the Homepage redesign to consolidate wallet views into a single scrollable homepage with sections for Tokens, Perpetuals, Predictions, DeFi, and NFTs.

Changelog

CHANGELOG entry: null

Related issues

Refs: TMCU-420
Refs: TMCU-414
Refs: TMCU-457

Manual testing steps

Feature: DeFi section on Homepage

  Scenario: user views DeFi positions on homepage
    Given user has DeFi positions (e.g., Aave, Uniswap deposits)
    And the homepage sections feature flag is enabled
    And the DeFi feature flag is enabled

    When user navigates to the wallet homepage
    Then user sees a "DeFi" section with their top 5 positions
    And each position shows protocol name, icon, and value

  Scenario: user with no DeFi positions
    Given user has no DeFi positions
    And the homepage sections feature flag is enabled

    When user navigates to the wallet homepage
    Then the DeFi section is not displayed

  Scenario: DeFi positions loading
    Given user has DeFi positions
    And positions are still loading

    When user navigates to the wallet homepage
    Then user sees skeleton placeholders in the DeFi section

Screenshots/Recordings

Before

Feature flag OFF (no changes)

Feature flag ON

After

Feature flag OFF (no changes)

Feature flag ON

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
UI now depends on DeFiPositionsController-derived data shaping and sorting; regressions could hide positions or misorder them, but changes are scoped to homepage rendering and tests are included.

Overview
Adds a functional DeFi homepage section that renders up to 5 DeFi protocol positions from controller-backed Redux state, including a skeleton loading UI and privacyMode-aware list items.

Introduces useDeFiPositionsForHomepage to flatten multi-chain protocol data, derive loading/error/empty states, and sort/limit positions for display; the section now hides itself when disabled, empty, or errored, and exposes a no-op refresh via ref. Comprehensive unit tests were added/expanded for both the hook and the section behavior.

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

- Add useDeFiPositionsForHomepage hook to fetch DeFi positions from Redux - Add DeFiSection component with skeleton loading state - Add unit tests for hook and component - DeFi section displays top 5 positions sorted by market value

github-actions · 2026-02-20T14:15:43Z

🔍 Smart E2E Test Selection

Selected E2E tags: None (no tests recommended)
Selected Performance tags: None (no tests recommended)
Risk Level: low
AI Confidence: 85%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes add DeFi positions display functionality to the Homepage's DeFi section. This is a self-contained, additive change that:

Isolated scope: Changes are limited to the DeFi section within the Homepage component hierarchy (DeFiSection.tsx, useDeFiPositionsForHomepage.ts hook, and their tests)
Feature-flagged: The DeFi section only renders when selectAssetsDefiPositionsEnabled returns true, meaning the feature is gated
Uses existing components: Leverages the existing DeFiPositionsListItem component and Redux selectors from defiPositionsController
Comprehensive unit tests: Both the component and hook have thorough unit test coverage added in this PR
No E2E test coverage exists: There are no existing E2E tests for DeFi positions on the homepage (grep searches returned no matches)
No shared component changes: The changes don't modify any shared components like navigation, modals, confirmations, or other critical paths that could affect existing E2E tests
Graceful error handling: The component handles loading, error, and empty states gracefully, returning null when appropriate

Since this is a new feature addition that is:

Behind a feature flag
Self-contained within the DeFi section
Not covered by any existing E2E tests
Not modifying any shared components or critical paths

No E2E tags are required. The unit tests added in this PR provide adequate coverage for the new functionality.

Performance Test Selection:
The changes add a new DeFi section to the Homepage that displays DeFi positions. While this involves UI rendering (list items, skeleton loading), the impact is minimal because: 1) The DeFi section is feature-flagged and may not render at all, 2) It displays a maximum of 5 positions (MAX_POSITIONS_DISPLAYED = 5), 3) It uses existing optimized components (DeFiPositionsListItem), 4) Data comes from Redux state that's already populated by background polling (no new API calls), 5) The skeleton loading state is simple (3 placeholder items). The changes don't affect app launch, login, account list, swaps, or other performance-critical paths covered by the available performance test tags.

View GitHub Actions results

sonarqubecloud · 2026-02-20T14:39:01Z

Quality Gate passed

Issues
3 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

wachunei · 2026-02-20T14:48:15Z

cursor review

cursor

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

cursor · 2026-02-20T15:18:43Z

+    const sortedPositions = sortAssets(
+      defiPositionsList,
+      defiSortConfig,
+    ) as DeFiPositionEntry[];


Duplicated DeFi position flattening and sorting logic

Medium Severity

The position flattening, sort config construction, and sortAssets call in useDeFiPositionsForHomepage are nearly line-for-line identical to the existing logic in DeFiPositionsList.tsx (lines 56–84). Both flatten chainFilteredDeFiPositions via the same Object.entries().map().flat() chain, both construct defiSortConfig with the same tokenFiatAmount key-mapping, and both call sortAssets identically. If the sort config mapping or flattening logic ever changes, both sites need to be updated in sync, risking divergent behavior between the full DeFi positions page and the homepage section.

This is intended for now

cursor

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

cursor · 2026-02-20T15:25:17Z

+  maxPositions: number = MAX_POSITIONS_DEFAULT,
+): UseDeFiPositionsForHomepageResult => {
+  const tokenSortConfig = useSelector(selectTokenSortConfig);
+  const defiPositions = useSelector(selectDeFiPositionsByAddress);


New code depends on deprecated selector

Low Severity

Brand-new code imports and uses selectDeFiPositionsByAddress, which is explicitly marked @deprecated with the note "Use selectDefiPositionsByEnabledNetworks instead." The hook relies on the deprecated selector solely to distinguish undefined (loading) from null (error), but selectDefiPositionsByEnabledNetworks already preserves those same undefined/null states via its defiPositionByAddress == null pass-through. The deprecated selector is redundant here and creates a dependency that will break when it's removed.

This is intended for now

wachunei added the team-mobile-ux Mobile UX team label Feb 20, 2026

wachunei self-assigned this Feb 20, 2026

metamaskbot added the team-money-movement issues related to Money Movement features label Feb 20, 2026

github-actions Bot added the size-M label Feb 20, 2026

wachunei removed the team-money-movement issues related to Money Movement features label Feb 20, 2026

wachunei marked this pull request as ready for review February 20, 2026 14:41

cursor Bot reviewed Feb 20, 2026

View reviewed changes

vinnyhoward approved these changes Feb 20, 2026

View reviewed changes

wachunei added this pull request to the merge queue Feb 20, 2026

Merged via the queue into main with commit cba29ff Feb 20, 2026
106 checks passed

wachunei deleted the feat/homepage-defi-section branch February 20, 2026 16:40

github-actions Bot locked and limited conversation to collaborators Feb 20, 2026

metamaskbot added the release-7.68.0 Issue or pull request that will be included in release 7.68.0 label Feb 20, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(homepage): add DeFi section with positions display#26347

feat(homepage): add DeFi section with positions display#26347
wachunei merged 1 commit into
mainfrom
feat/homepage-defi-section

wachunei commented Feb 20, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Feb 20, 2026

Uh oh!

sonarqubecloud Bot commented Feb 20, 2026

Uh oh!

wachunei commented Feb 20, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Feb 20, 2026

Uh oh!

wachunei Feb 20, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Feb 20, 2026

Uh oh!

wachunei Feb 20, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

wachunei commented Feb 20, 2026 • edited by cursor Bot 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

Feature flag OFF (no changes)

Feature flag ON

After

Feature flag OFF (no changes)

Feature flag ON

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Feb 20, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented Feb 20, 2026

Quality Gate passed

Uh oh!

wachunei commented Feb 20, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 20, 2026

Choose a reason for hiding this comment

Duplicated DeFi position flattening and sorting logic

Uh oh!

wachunei Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 20, 2026

Choose a reason for hiding this comment

New code depends on deprecated selector

Uh oh!

wachunei Feb 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

wachunei commented Feb 20, 2026 •

edited by cursor Bot

Loading