chore: hiding network selectors in empty tabs

georgewrmarshall · georgewrmarshall · commit d9edc950aa64 · 2025-10-01T10:28:25.000-07:00
diff --git a/app/components/UI/CollectibleContracts/index.js b/app/components/UI/CollectibleContracts/index.js
@@ -12,7 +12,7 @@ import {
   RefreshControl,
   ActivityIndicator,
 } from 'react-native';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
+
 import { FlashList } from '@shopify/flash-list';
 import { connect, useSelector } from 'react-redux';
 import { fontStyles } from '../../../styles/common';
@@ -176,7 +176,6 @@ const CollectibleContracts = ({
 }) => {
   // Start tracing component loading
   const isFirstRender = useRef(true);
-  const tw = useTailwind();
   if (isFirstRender.current) {
     trace({ name: TraceName.CollectibleContractsComponent });
   }
@@ -500,16 +499,20 @@ const CollectibleContracts = ({
 
   const renderEmpty = useCallback(
     () => (
-      <CollectiblesEmptyState
-        onDiscoverCollectibles={goToAddCollectible}
-        actionButtonProps={{
-          testID: WalletViewSelectorsIDs.IMPORT_NFT_BUTTON,
-          isDisabled: !isAddNFTEnabled,
-        }}
-        style={tw.style('mx-auto')}
-      />
+      <>
+        {!isNftFetchingProgress && (
+          <CollectiblesEmptyState
+            onAction={goToAddCollectible}
+            actionButtonProps={{
+              testID: WalletViewSelectorsIDs.IMPORT_NFT_BUTTON,
+              isDisabled: !isAddNFTEnabled,
+            }}
+            twClassName="mx-auto mt-4"
+          />
+        )}
+      </>
     ),
-    [goToAddCollectible, tw, isAddNFTEnabled],
+    [goToAddCollectible, isAddNFTEnabled, isNftFetchingProgress],
   );
 
   const renderList = useCallback(
@@ -564,6 +567,13 @@ const CollectibleContracts = ({
     chainId: firstEnabledChainId,
   });
 
+  // Determine if we should show the network selector
+  // Show when there are NFTs (contracts, collectibles, or favorites) and not in loading state
+  const shouldShowNetworkSelector =
+    filteredCollectibleContracts.length > 0 ||
+    collectibles.length > 0 ||
+    favoriteCollectibles.length > 0;
+
   // End trace when component has finished initial loading
   useEffect(() => {
     endTrace({ name: TraceName.CollectibleContractsComponent });
@@ -575,60 +585,62 @@ const CollectibleContracts = ({
       style={styles.BarWrapper}
       testID={WalletViewSelectorsIDs.NFT_TAB_CONTAINER}
     >
-      <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 && (
+        <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}
+                        />
+                      )}
+                      <TextComponent
+                        variant={TextVariant.BodyMDMedium}
+                        style={styles.controlButtonText}
+                        numberOfLines={1}
+                      >
+                        {enabledNetworks.length > 1
+                          ? strings('wallet.popular_networks')
+                          : currentNetworkName ??
+                            strings('wallet.current_network')}
+                      </TextComponent>
+                    </View>
+                  ) : (
                     <TextComponent
                       variant={TextVariant.BodyMDMedium}
                       style={styles.controlButtonText}
                       numberOfLines={1}
                     >
-                      {enabledNetworks.length > 1
+                      {isAllNetworks && isPopularNetwork && isEvmSelected
                         ? strings('wallet.popular_networks')
-                        : currentNetworkName ??
-                          strings('wallet.current_network')}
+                        : networkName ?? strings('wallet.current_network')}
                     </TextComponent>
-                  </View>
-                ) : (
-                  <TextComponent
-                    variant={TextVariant.BodyMDMedium}
-                    style={styles.controlButtonText}
-                    numberOfLines={1}
-                  >
-                    {isAllNetworks && isPopularNetwork && isEvmSelected
-                      ? strings('wallet.popular_networks')
-                      : networkName ?? strings('wallet.current_network')}
-                  </TextComponent>
-                )}
-              </>
-            }
-            isDisabled={isDisabled}
-            onPress={showFilterControls}
-            endIconName={
-              isEvmSelected || isMultichainAccountsState2Enabled
-                ? IconName.ArrowDown
-                : undefined
-            }
-            style={
-              isDisabled ? styles.controlButtonDisabled : styles.controlButton
-            }
-            disabled={isDisabled}
-          />
+                  )}
+                </>
+              }
+              isDisabled={isDisabled}
+              onPress={showFilterControls}
+              endIconName={
+                isEvmSelected || isMultichainAccountsState2Enabled
+                  ? IconName.ArrowDown
+                  : undefined
+              }
+              style={
+                isDisabled ? styles.controlButtonDisabled : styles.controlButton
+              }
+              disabled={isDisabled}
+            />
+          </View>
         </View>
-      </View>
+      )}
       {renderList()}
     </View>
   );
diff --git a/app/components/UI/CollectibleContracts/index.test.tsx b/app/components/UI/CollectibleContracts/index.test.tsx
@@ -1142,7 +1142,13 @@ describe('CollectibleContracts', () => {
             },
             allNftContracts: {
               [MOCK_ADDRESS]: {
-                '0x1': [],
+                '0x1': [
+                  {
+                    address: '0x1234567890123456789012345678901234567890',
+                    name: 'Test NFT Collection',
+                    symbol: 'TNFT',
+                  },
+                ],
               },
             },
           },
@@ -1154,7 +1160,18 @@ describe('CollectibleContracts', () => {
       push: jest.fn(),
     };
     const { getByTestId } = renderWithProvider(
-      <CollectibleContracts navigation={mockNavigation} />,
+      <CollectibleContracts
+        navigation={mockNavigation}
+        collectibleContracts={{
+          '0x1': [
+            {
+              address: '0x1234567890123456789012345678901234567890',
+              name: 'Test NFT Collection',
+              symbol: 'TNFT',
+            },
+          ],
+        }}
+      />,
       {
         state: mockState,
       },
@@ -1208,7 +1225,13 @@ describe('CollectibleContracts', () => {
             },
             allNftContracts: {
               [MOCK_ADDRESS]: {
-                '0x1': [],
+                '0x1': [
+                  {
+                    address: '0x1234567890123456789012345678901234567890',
+                    name: 'Test NFT Collection',
+                    symbol: 'TNFT',
+                  },
+                ],
               },
             },
           },
@@ -1220,7 +1243,18 @@ describe('CollectibleContracts', () => {
       push: jest.fn(),
     };
     const { getByTestId } = renderWithProvider(
-      <CollectibleContracts navigation={mockNavigation} />,
+      <CollectibleContracts
+        navigation={mockNavigation}
+        collectibleContracts={{
+          '0x1': [
+            {
+              address: '0x1234567890123456789012345678901234567890',
+              name: 'Test NFT Collection',
+              symbol: 'TNFT',
+            },
+          ],
+        }}
+      />,
       {
         state: mockState,
       },
@@ -1373,17 +1407,36 @@ describe('CollectibleContracts', () => {
             },
             allNftContracts: {
               [MOCK_ADDRESS]: {
-                '0x1': [],
+                '0x1': [
+                  {
+                    address: '0x1234567890123456789012345678901234567890',
+                    name: 'Test NFT Collection',
+                    symbol: 'TNFT',
+                  },
+                ],
               },
             },
           },
         },
       },
     };
 
-    const { getByText } = renderWithProvider(<CollectibleContracts />, {
-      state: mockState,
-    });
+    const { getByText } = renderWithProvider(
+      <CollectibleContracts
+        collectibleContracts={{
+          '0x1': [
+            {
+              address: '0x1234567890123456789012345678901234567890',
+              name: 'Test NFT Collection',
+              symbol: 'TNFT',
+            },
+          ],
+        }}
+      />,
+      {
+        state: mockState,
+      },
+    );
 
     expect(getByText('Popular networks')).toBeDefined();
   });
diff --git a/app/components/UI/CollectiblesEmptyState/CollectiblesEmptyState.test.tsx b/app/components/UI/CollectiblesEmptyState/CollectiblesEmptyState.test.tsx
@@ -24,15 +24,13 @@ describe('CollectiblesEmptyState', () => {
     // Button should not render when no onAction is provided
   });
 
-  it('calls onDiscoverCollectibles when action button is pressed', () => {
-    const mockOnDiscoverCollectibles = jest.fn();
+  it('calls onAction when action button is pressed', () => {
+    const mockOnAction = jest.fn();
     const { getByText } = renderWithProvider(
-      <CollectiblesEmptyState
-        onDiscoverCollectibles={mockOnDiscoverCollectibles}
-      />,
+      <CollectiblesEmptyState onAction={mockOnAction} />,
     );
 
     fireEvent.press(getByText('Import NFTs'));
-    expect(mockOnDiscoverCollectibles).toHaveBeenCalledTimes(1);
+    expect(mockOnAction).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/app/components/UI/CollectiblesEmptyState/CollectiblesEmptyState.tsx b/app/components/UI/CollectiblesEmptyState/CollectiblesEmptyState.tsx
@@ -11,11 +11,11 @@ import emptyStateNftsLight from '../../../images/empty-state-nfts-light.png';
 import emptyStateNftsDark from '../../../images/empty-state-nfts-dark.png';
 
 interface CollectiblesEmptyStateProps extends TabEmptyStateProps {
-  onDiscoverCollectibles?: () => void;
+  onAction?: () => void;
 }
 
 export const CollectiblesEmptyState: React.FC<CollectiblesEmptyStateProps> = ({
-  onDiscoverCollectibles,
+  onAction,
   ...props
 }) => {
   const collectiblesImage = useAssetFromTheme(
@@ -34,7 +34,7 @@ export const CollectiblesEmptyState: React.FC<CollectiblesEmptyStateProps> = ({
       }
       description={strings('wallet.nft_empty_description')}
       actionButtonText={strings('wallet.discover_nfts')}
-      onAction={onDiscoverCollectibles}
+      onAction={onAction}
       {...props}
     />
   );
diff --git a/app/components/UI/DeFiPositions/DeFiPositionsList.test.tsx b/app/components/UI/DeFiPositions/DeFiPositionsList.test.tsx
@@ -328,9 +328,6 @@ describe('DeFiPositionsList', () => {
     expect(
       await findByTestId(WalletViewSelectorsIDs.DEFI_POSITIONS_CONTAINER),
     ).toBeOnTheScreen();
-    expect(
-      await findByTestId(WalletViewSelectorsIDs.DEFI_POSITIONS_NETWORK_FILTER),
-    ).toBeOnTheScreen();
     expect(
       await findByText(`Lend, borrow, and trade, right in your wallet.`),
     ).toBeOnTheScreen();
@@ -446,11 +443,6 @@ describe('DeFiPositionsList', () => {
       expect(
         await findByTestId(WalletViewSelectorsIDs.DEFI_POSITIONS_CONTAINER),
       ).toBeOnTheScreen();
-      expect(
-        await findByTestId(
-          WalletViewSelectorsIDs.DEFI_POSITIONS_NETWORK_FILTER,
-        ),
-      ).toBeOnTheScreen();
       expect(
         await findByText(`Lend, borrow, and trade, right in your wallet.`),
       ).toBeOnTheScreen();
diff --git a/app/components/UI/DeFiPositions/DeFiPositionsList.tsx b/app/components/UI/DeFiPositions/DeFiPositionsList.tsx
@@ -2,7 +2,6 @@ import React, { useMemo } from 'react';
 import { View, FlatList } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import { useSelector } from 'react-redux';
-import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import {
   selectChainId,
   selectIsAllNetworks,
@@ -41,7 +40,6 @@ export interface DeFiPositionsListProps {
 
 const DeFiPositionsList: React.FC<DeFiPositionsListProps> = () => {
   const { styles } = useStyles(styleSheet, undefined);
-  const tw = useTailwind();
   const isAllNetworks = useSelector(selectIsAllNetworks);
   const currentChainId = useSelector(selectChainId) as Hex;
   const tokenSortConfig = useSelector(selectTokenSortConfig);
@@ -138,8 +136,7 @@ const DeFiPositionsList: React.FC<DeFiPositionsListProps> = () => {
     // No positions found for the current account
     return (
       <View testID={WalletViewSelectorsIDs.DEFI_POSITIONS_CONTAINER}>
-        <DeFiPositionsControlBar />
-        <DefiEmptyState style={tw.style('mx-auto')} />
+        <DefiEmptyState twClassName="mx-auto mt-4" />
       </View>
     );
   }
diff --git a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.styles.ts b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.styles.ts
@@ -9,12 +9,6 @@ const styleSheet = (params: { theme: Theme }) => {
     tradeInfoContainer: {
       paddingBottom: 12,
     },
-    firstTimeIcon: {
-      width: 48,
-      height: 48,
-      marginTop: 16,
-      marginBottom: 8,
-    },
     wrapper: {
       flex: 1,
       backgroundColor: colors.background.default,
@@ -25,7 +19,6 @@ const styleSheet = (params: { theme: Theme }) => {
     contentContainer: {
       flexGrow: 1,
     },
-    section: {},
     sectionHeader: {
       flexDirection: 'row',
       justifyContent: 'space-between',
diff --git a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.test.tsx b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.test.tsx
diff --git a/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx b/app/components/UI/Perps/Views/PerpsTabView/PerpsTabView.tsx
diff --git a/app/components/UI/Perps/components/PerpsLoadingSkeleton/PerpsLoadingSkeleton.tsx b/app/components/UI/Perps/components/PerpsLoadingSkeleton/PerpsLoadingSkeleton.tsx
