feat: Add NFTs full page

[brianacnguyen]

Description

This PR adds the NFTs Full page to the wallet

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/jira/software/c/projects/DSYS/boards/1888?selectedIssue=DSYS-246

Manual testing steps

Feature: NFTs Full Page

  Scenario: user: null
    Given: null

    When user uncomments line 73 in `app/components/UI/NFTsTabView/index.tsx` and clicks on View all NFTs
    Then it should lead them to the NFTs Full View page with a full view of NFTs with preexisting behaviors still intact

Screenshots/Recordings

Before

After

NFTs Full View
https://github.com/user-attachments/assets/4b6fe582-d5c8-4e3a-8f8e-132047cc1b9e

NFTs Tab still functional
https://github.com/user-attachments/assets/104b9d20-eb88-429f-9a60-f6475a9eea7d

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

Adds a full NFTs view with navigation/routes and updates NFT grid, control bar, and Add NFT UI/components.

• Wallet/NFTs:
  • New screen: Views/NftsFullView with header + BaseControlBar and NftGrid; registered route Routes.WALLET.NFTS_FULL_VIEW and stack screen in MainNavigator.
  • Tabs: Replace NftGrid tab usage with NFTsTabView wrapper in Views/Wallet.
• Navigation:
  • Move AddAsset registration to root stack (headerShown: false).
  • Add route constants WALLET.TOKENS_FULL_VIEW and WALLET.NFTS_FULL_VIEW.
• UI/Components:
  • NftGrid: accepts onAddCollectible and flashListProps; layout renders 3-column rows; removes internal BaseControlBar.
  • BaseControlBar: add optional style prop; minor style tweaks (alignItems).
  • AddCustomCollectible: replace ActionView with scrollable content + bottom CTA Buttons; style updates.
  • CollectibleMedia.styles: use colors.background.section for text container.
  • NftGridItem: remove item padding.
  • AddAsset: use BottomSheetHeader for title/back.
• i18n: Add wallet.view_all_tokens and wallet.view_all_nfts strings.
• Tests: Add NftsFullView.test.tsx covering header, control bar, grid, and interactions.

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

[github-actions]

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.

[cursor]

Bug: FlashList Data Prop Override Causes Grid Break

The FlashList in NftGrid expects its data prop to be an array of NFT rows (Nft[][]) for its new layout. Spreading flashListProps after data means an external data prop (e.g., Nft[]) can override this, leading to a type mismatch in renderItem and breaking the grid display.

 

[cursor]

Bug: Mocking Conflicts with Imported Modules

jest.doMock is used within test cases for modules that are already imported or globally mocked. This prevents the specific mocks from taking effect, causing tests to use the real or globally mocked implementations instead of the ones defined in the test. This can lead to unexpected test behavior or failures.

Additional Locations (1)

• app/components/Views/NftsFullView/NftsFullView.test.tsx#L76-L94