Skip to content

Conversation

georgewrmarshall
Copy link
Contributor

Description

This PR implements the BalanceEmptyState component on the homepage when users have a zero balance, replacing empty balance displays with a more engaging user experience that encourages users to fund their wallet.

The BalanceEmptyState component (created in #20782) is now integrated into both balance components:

  • PortfolioBalance (legacy multichain support)
  • AccountGroupBalance (multichain accounts state 2)

This provides a consistent experience showing the "Fund your wallet" illustration and "Add funds" button when users have no balance, improving the onboarding flow for new users.

Changelog

CHANGELOG entry: Added BalanceEmptyState component to homepage when users have zero balance

Related issues

Implements the BalanceEmptyState integration discussed in the original design requirements.

Manual testing steps

Feature: Balance Empty State on Homepage

  Scenario: user views homepage with zero balance
    Given user has a wallet with zero balance across all networks
    
    When user navigates to the homepage
    Then user should see the BalanceEmptyState component with illustration and "Add funds" button
    And user should not see the regular balance display

  Scenario: user views homepage with positive balance  
    Given user has a wallet with positive balance
    
    When user navigates to the homepage
    Then user should see the normal balance display
    And user should not see the BalanceEmptyState component

  Scenario: user taps "Add funds" button from empty state
    Given user sees the BalanceEmptyState on homepage
    
    When user taps the "Add funds" button
    Then user should be navigated to the buy crypto flow

Screenshots/Recordings

Before

Empty balance showed minimal text or loading state

After

Zero balance now shows engaging BalanceEmptyState with illustration and call-to-action

Pre-merge author checklist

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.

Copy link
Contributor

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.

@metamaskbot metamaskbot added the team-design-system All issues relating to design system in Mobile label Oct 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

size-L team-design-system All issues relating to design system in Mobile

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants