feat(homepage): reuse CollectiblesEmptyState in NFTs section (#26644)

## **Description**

Replaces the custom inline empty state in the NFTs homepage section with
the shared `CollectiblesEmptyState` component, ensuring consistent empty
state UX between the homepage section and the NFTs full view.

**Changes:**
- Replace custom gem icon + import card with `CollectiblesEmptyState`
from `app/components/UI/CollectiblesEmptyState`
- Fix button centering in `TabEmptyState` by adding `self-center` to the
action button (fixes centering for all consumers)
- Remove unused imports (`TouchableOpacity`, `Image`, `SectionCard`,
`gemIcon`, etc.)
- Update test to match new empty state content

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Refs: https://consensyssoftware.atlassian.net/browse/TMCU-407

## **Manual testing steps**

```gherkin
Feature: NFTs section empty state

  Scenario: user with no NFTs sees shared empty state
    Given user has no NFTs
    And user is on the Homepage

    When user scrolls to the NFTs section
    Then user sees the CollectiblesEmptyState with NFT illustration
    And user sees the Import NFTs button centered below the description
    And tapping Import NFTs navigates to the AddAsset screen

  Scenario: empty state button is centered
    Given user has no NFTs

    When the empty state is displayed
    Then the Import NFTs button is horizontally centered
```

## **Screenshots/Recordings**

### **Before**

<img width="300"
src="https://github.com/user-attachments/assets/f33f9d39-c7d3-4d1c-9afe-3adf8b2a5480"
/>

<!-- Custom gem icon card with left-aligned layout -->

### **After**


<img width="300"
src="https://github.com/user-attachments/assets/19aafd5d-d7f5-4700-b6e9-6046fdc18bd5"
/>



<!-- Shared CollectiblesEmptyState with centered illustration and button
-->

## **Pre-merge author checklist**

- [x] I have followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I have completed the PR template to the best of my ability
- [x] I have included tests if applicable
- [x] I have documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I have applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I have 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Low risk UI refactor that swaps the NFTs homepage empty state to a
shared component and adjusts related tests; minor behavior change adds
brief button disabling to prevent repeat taps.
> 
> **Overview**
> Replaces the NFTs homepage section’s custom “import NFTs” card with
the shared `CollectiblesEmptyState`, aligning the empty-state UX with
the full NFTs view and removing the bespoke gem/icon layout.
> 
> Adds a small guard to temporarily disable the empty-state action
button after tap (re-enabled after 1s), and updates homepage/NFT section
tests to stop asserting on the removed description text.
> 
> Fixes `TabEmptyState` action button alignment by applying
`twClassName="self-center"`, affecting all consumers of that component.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
b818f95. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: wachunei

app/component-library/components-temp/TabEmptyState/TabEmptyState.tsx

@@ -51,6 +51,7 @@ export const TabEmptyState: React.FC<TabEmptyStateProps> = ({
       <Button
         variant={ButtonVariant.Secondary}
         onPress={onAction}
+        twClassName="self-center"
         {...actionButtonProps}
       >
         {actionButtonText}

app/components/Views/Homepage/Homepage.test.tsx

@@ -113,7 +113,6 @@ describe('Homepage', () => {
     renderWithProvider(<Homepage />, { state: stateWithPreferences });
 
     expect(screen.getByText('Import NFTs')).toBeOnTheScreen();
-    expect(screen.getByText('Easily add your collectibles')).toBeOnTheScreen();
   });
 
   it('exposes refresh function via ref', () => {

app/components/Views/Homepage/Sections/NFTs/NFTsSection.test.tsx

@@ -79,12 +79,11 @@ describe('NFTsSection', () => {
     expect(screen.queryByText('Import NFTs')).not.toBeOnTheScreen();
   });
 
-  it('renders empty state card when user has no NFTs', () => {
+  it('renders empty state when user has no NFTs', () => {
     renderWithProvider(<NFTsSection />);
 
     expect(screen.getByText('NFTs')).toBeOnTheScreen();
     expect(screen.getByText('Import NFTs')).toBeOnTheScreen();
-    expect(screen.getByText('Easily add your collectibles')).toBeOnTheScreen();
   });
 
   it('navigates to AddAsset when import NFTs card is pressed', () => {

app/components/Views/Homepage/Sections/NFTs/NFTsSection.tsx

@@ -3,34 +3,25 @@ import React, {
   useCallback,
   useImperativeHandle,
   useMemo,
+  useState,
 } from 'react';
-import { TouchableOpacity, Image, View } from 'react-native';
+import { View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { useNavigation } from '@react-navigation/native';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { useTheme } from '../../../../../util/theme';
-import {
-  Box,
-  Text,
-  BoxFlexDirection,
-  BoxAlignItems,
-  BoxJustifyContent,
-  TextVariant,
-  TextColor,
-  FontWeight,
-} from '@metamask/design-system-react-native';
+import { Box, BoxFlexDirection } from '@metamask/design-system-react-native';
 import SectionTitle from '../../components/SectionTitle';
 import SectionRow from '../../components/SectionRow';
-import SectionCard from '../../components/SectionCard';
 import Routes from '../../../../../constants/navigation/Routes';
 import { useOwnedNfts } from './hooks';
 import NftGridItem from '../../../../UI/NftGrid/NftGridItem';
 import { useNftRefresh } from '../../../../UI/NftGrid/useNftRefresh';
+import { CollectiblesEmptyState } from '../../../../UI/CollectiblesEmptyState/CollectiblesEmptyState';
 import { SectionRefreshHandle } from '../../types';
 import { strings } from '../../../../../../locales/i18n';
 import { isNftFetchingProgressSelector } from '../../../../../reducers/collectibles';
-import gemIcon from './assets/gem.png';
 
 const MAX_NFTS_DISPLAYED = 6;
 const NFTS_PER_ROW = 3;
@@ -91,8 +82,12 @@ const NFTsSection = forwardRef<SectionRefreshHandle>((_, ref) => {
     navigation.navigate(Routes.WALLET.NFTS_FULL_VIEW);
   }, [navigation]);
 
+  const [isAddNFTEnabled, setIsAddNFTEnabled] = useState(true);
+
   const handleImportNfts = useCallback(() => {
+    setIsAddNFTEnabled(false);
     navigation.navigate('AddAsset', { assetType: 'collectible' });
+    setTimeout(() => setIsAddNFTEnabled(true), 1000);
   }, [navigation]);
 
   return (
@@ -138,45 +133,11 @@ const NFTsSection = forwardRef<SectionRefreshHandle>((_, ref) => {
           <NftSkeletonRow />
         </SectionRow>
       ) : (
-        <SectionRow>
-          <TouchableOpacity onPress={handleImportNfts} activeOpacity={0.7}>
-            <SectionCard>
-              <Box
-                flexDirection={BoxFlexDirection.Row}
-                alignItems={BoxAlignItems.Center}
-                gap={4}
-              >
-                <Box
-                  alignItems={BoxAlignItems.Center}
-                  justifyContent={BoxJustifyContent.Center}
-                  twClassName="w-10 h-10"
-                >
-                  <Image
-                    source={gemIcon}
-                    // eslint-disable-next-line react-native/no-inline-styles
-                    style={{ width: 40, height: 40 }}
-                    resizeMode="contain"
-                  />
-                </Box>
-                <Box twClassName="flex-1">
-                  <Text
-                    variant={TextVariant.BodyMd}
-                    fontWeight={FontWeight.Medium}
-                    color={TextColor.TextDefault}
-                  >
-                    {strings('homepage.sections.import_nfts')}
-                  </Text>
-                  <Text
-                    variant={TextVariant.BodySm}
-                    color={TextColor.TextAlternative}
-                  >
-                    {strings('homepage.sections.import_nfts_description')}
-                  </Text>
-                </Box>
-              </Box>
-            </SectionCard>
-          </TouchableOpacity>
-        </SectionRow>
+        <CollectiblesEmptyState
+          onAction={handleImportNfts}
+          actionButtonProps={{ isDisabled: !isAddNFTEnabled }}
+          twClassName="mx-auto mt-2"
+        />
       )}
     </Box>
   );