chore: hide network selectors in empty state for homepage tabs #20552

georgewrmarshall · 2025-09-29T20:52:44Z

Description

This PR improves the user experience by hiding network selector controls in empty states across homepage tabs (DeFi, NFT, and Perps). When users have no positions, collectibles, or perps data, the network selector is no longer displayed, providing a cleaner and less cluttered interface.

Changes Made:

CollectibleContracts: Network selector only appears when filteredCollectibleContracts?.length > 0
DeFiPositionsList: Network selector hidden in empty state, only shows DefiEmptyState component
PerpsTabView: Control bar hidden when no positions/orders exist, shows PerpsEmptyState directly
Updated corresponding test files to reflect the new conditional rendering logic

This change follows the principle of progressive disclosure - showing relevant controls only when users have content to manage.

Changelog

CHANGELOG entry: null

Related issues

Fixes: Internal UX improvement initiative

Manual testing steps

Feature: Hide network selectors in empty states

  Scenario: user views NFT tab with no collectibles
    Given I am on the Wallet homepage
    And I have no NFT collectibles
    When user navigates to the NFT tab
    Then I should see the NFT empty state
    And I should NOT see the network selector

  Scenario: user views DeFi tab with no positions  
    Given I am on the Wallet homepage
    And I have no DeFi positions
    When user navigates to the DeFi tab
    Then I should see the DeFi empty state
    And I should NOT see the network selector

  Scenario: user views Perps tab with no positions/orders
    Given I am on the Wallet homepage  
    And I have no Perps positions or orders
    When user navigates to the Perps tab
    Then I should see the Perps empty state
    And I should NOT see the control bar

  Scenario: user views tabs with existing data
    Given I am on the Wallet homepage
    And I have NFTs, DeFi positions, or Perps data
    When user navigates to any of these tabs
    Then I should see the network selector
    And I should see my existing data

Screenshots/Recordings

Before

Network selectors were visible in empty states, creating visual clutter when users had no content to filter.

After

Clean empty states without network selectors, showing only relevant content and call-to-action elements.

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

🤖 Generated with Claude Code

Co-Authored-By: Claude [email protected]

github-actions · 2025-09-29T20:53:00Z

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.

georgewrmarshall · 2025-10-01T16:31:25Z

app/components/UI/CollectibleContracts/index.js

  RefreshControl,
  ActivityIndicator,
 } from 'react-native';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';


No longer using useTailwind hook because we can use the twClassName prop directly in the CollectiblesEmptyState component

georgewrmarshall · 2025-10-01T18:04:10Z

app/components/UI/CollectibleContracts/index.test.tsx

+        collectibleContracts={{
+          '0x1': [
+            {
+              address: '0x1234567890123456789012345678901234567890',
+              name: 'Test NFT Collection',
+              symbol: 'TNFT',
+            },
+          ],


We shouldn't be passing state directly like this

georgewrmarshall · 2025-10-01T18:35:39Z

app/components/UI/CollectibleContracts/index.js

-      <View style={styles.actionBarWrapper}>
-        <View style={styles.controlButtonOuterWrapper}>
-          <ButtonBase
-            testID={WalletViewSelectorsIDs.COLLECTIBLES_NETWORK_FILTER}
-            label={
-              <>
-                {isRemoveGlobalNetworkSelectorEnabled() ? (
-                  <View style={styles.networkManagerWrapper}>
-                    {!areAllNetworksSelected && (
-                      <Avatar
-                        variant={AvatarVariant.Network}
-                        size={AvatarSize.Xs}
-                        name={networkName}
-                        imageSource={networkImageSource}
-                      />
-                    )}
+      {shouldShowNetworkSelector && (


Bad visualization of changes here but we are changing the network selector to be rendered conditionally. No other changes

georgewrmarshall · 2025-10-01T18:44:12Z

app/components/UI/CollectiblesEmptyState/CollectiblesEmptyState.test.tsx


-  it('calls onDiscoverCollectibles when action button is pressed', () => {
-    const mockOnDiscoverCollectibles = jest.fn();
+  it('calls onAction when action button is pressed', () => {


Move these rename changes into a different PR

georgewrmarshall · 2025-10-01T18:44:24Z

app/components/UI/DeFiPositions/DeFiPositionsList.test.tsx

-    expect(
-      await findByTestId(WalletViewSelectorsIDs.DEFI_POSITIONS_NETWORK_FILTER),
-    ).toBeOnTheScreen();


Will need to improve the tests here

georgewrmarshall · 2025-10-01T18:44:36Z

app/components/UI/DeFiPositions/DeFiPositionsList.tsx

 import { View, FlatList } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import { useSelector } from 'react-redux';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';


Move this out in to a different PR

sonarqubecloud · 2025-10-01T19:02:07Z

Quality Gate failed

Failed conditions
B Maintainability Rating on New Code (required ≥ A)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE

georgewrmarshall self-assigned this Sep 29, 2025

metamaskbot added the team-design-system All issues relating to design system in Mobile label Sep 29, 2025

github-actions bot added the size-M label Sep 29, 2025

metamaskbot added the INVALID-PR-TEMPLATE PR's body doesn't match template label Sep 29, 2025

metamaskbot removed the INVALID-PR-TEMPLATE PR's body doesn't match template label Sep 29, 2025

georgewrmarshall added the Run Smoke E2E Requires smoke E2E testing label Sep 29, 2025

georgewrmarshall force-pushed the tabs-hide-network-selectors branch from 1100843 to ea81d55 Compare October 1, 2025 16:29

georgewrmarshall commented Oct 1, 2025

View reviewed changes

georgewrmarshall force-pushed the tabs-hide-network-selectors branch 2 times, most recently from f384f42 to d9edc95 Compare October 1, 2025 17:28

georgewrmarshall commented Oct 1, 2025

View reviewed changes

georgewrmarshall added 2 commits October 1, 2025 11:33

chore: hiding network selectors in empty tabs

ebb62d9

chore: fixing tests

d49c8ea

georgewrmarshall force-pushed the tabs-hide-network-selectors branch from ab73ca1 to d49c8ea Compare October 1, 2025 18:33

georgewrmarshall commented Oct 1, 2025

View reviewed changes

chore: updates

c2a35bb

georgewrmarshall commented Oct 1, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

chore: hide network selectors in empty state for homepage tabs #20552

chore: hide network selectors in empty state for homepage tabs #20552

Uh oh!

georgewrmarshall commented Sep 29, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 29, 2025

Uh oh!

georgewrmarshall Oct 1, 2025

Uh oh!

georgewrmarshall Oct 1, 2025

Uh oh!

georgewrmarshall Oct 1, 2025

Uh oh!

georgewrmarshall Oct 1, 2025

Uh oh!

georgewrmarshall Oct 1, 2025

Uh oh!

georgewrmarshall Oct 1, 2025

Uh oh!

sonarqubecloud bot commented Oct 1, 2025

Uh oh!

Uh oh!

Uh oh!

chore: hide network selectors in empty state for homepage tabs #20552

Are you sure you want to change the base?

chore: hide network selectors in empty state for homepage tabs #20552

Uh oh!

Conversation

georgewrmarshall commented Sep 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changes Made:

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions bot commented Sep 29, 2025

Uh oh!

georgewrmarshall Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

georgewrmarshall Oct 1, 2025

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud bot commented Oct 1, 2025

Quality Gate failed

Uh oh!

Uh oh!

georgewrmarshall commented Sep 29, 2025 •

edited

Loading