feat: track analytics events for View All button clicks in NFT and Token lists (MetaMask#23107)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Implemented analytics tracking for the "View All" buttons on the Tokens
and NFTs pages to measure user engagement with the homepage performance
optimization feature.

**Reason for change:**
The recent homepage redesign added "View All" buttons to limit the
number of tokens and NFTs displayed initially. However, we weren't
tracking user interactions with these buttons, making it difficult to
understand adoption and usage patterns.

**Solution:**
- Added new Segment event `View All Assets Clicked` that fires when
users tap either button
- Event includes `asset_type` property to differentiate between Token
and NFT interactions
- Updated both TokenList and NftGrid components to track the event
- Added comprehensive unit tests to verify tracking implementation

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: TMCU-206

## **Manual testing steps**
```gherkin
Feature: View All Assets Analytics Tracking

  Scenario: user views all tokens from homepage
    Given the user is on the wallet homepage with more than 10 tokens
    When user taps the "View all tokens" button
    Then the "View All Assets Clicked" event is sent to Segment with asset_type: Token
    And user navigates to the full tokens list view

  Scenario: user views all NFTs from homepage
    Given the user is on the wallet homepage with more than 18 NFTs
    When user taps the "View all NFTs" button
    Then the "View All Assets Clicked" event is sent to Segment with asset_type: NFT
    And user navigates to the full NFTs list view
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve 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've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve 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'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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Adds `VIEW_ALL_ASSETS_CLICKED` tracking with `asset_type` for Tokens
and NFTs and updates tests accordingly.
> 
> - **Analytics**
> - Add `MetaMetricsEvents.VIEW_ALL_ASSETS_CLICKED` to
`app/core/Analytics/MetaMetrics.events.ts` (enum and `events` map).
> - **UI**
> - `app/components/UI/Tokens/TokenList/index.tsx`: Track
`VIEW_ALL_ASSETS_CLICKED` with `{ asset_type: 'Token' }` in
`handleViewAllTokens`; include metrics deps in callback.
> - `app/components/UI/NftGrid/NftGrid.tsx`: Track
`VIEW_ALL_ASSETS_CLICKED` with `{ asset_type: 'NFT' }` in
`handleViewAllNfts`; include metrics deps in callback.
> - **Tests**
> - `app/components/UI/Tokens/TokenList/index.test.tsx`: Mock metrics
and assert event fired on "View all tokens" press.
> - `app/components/UI/NftGrid/NftGrid.test.tsx`: Assert event fired on
"View all NFTs" press.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d2d75cd. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: PatrykLucka

app/components/UI/NftGrid/NftGrid.test.tsx

@@ -434,6 +434,45 @@ describe('NftGrid', () => {
     });
   });
 
+  it('tracks analytics event when view all button is clicked', async () => {
+    const mockCollectibles = {
+      '0x1': Array.from({ length: 20 }, (_, i) => ({
+        ...mockNft,
+        tokenId: `${i}`,
+      })),
+    };
+    mockUseSelector
+      .mockReturnValueOnce(false) // isNftFetchingProgress
+      .mockReturnValueOnce(true) // selectHomepageRedesignV1Enabled (maxItems = 18)
+      .mockReturnValueOnce(mockCollectibles); // multichainCollectiblesByEnabledNetworksSelector
+    const store = mockStore(initialState);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <NftGrid />
+      </Provider>,
+    );
+
+    act(() => {
+      jest.advanceTimersByTime(100);
+    });
+
+    await waitFor(() => {
+      expect(getByTestId('view-all-nfts-button')).toBeOnTheScreen();
+    });
+
+    fireEvent.press(getByTestId('view-all-nfts-button'));
+
+    expect(mockTrackEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'View All Assets Clicked',
+        properties: expect.objectContaining({
+          asset_type: 'NFT',
+        }),
+      }),
+    );
+  });
+
   it('hides view all button when homepage redesign is disabled', async () => {
     const mockCollectibles = {
       '0x1': Array.from({ length: 20 }, (_, i) => ({

app/components/UI/NftGrid/NftGrid.tsx

@@ -139,8 +139,13 @@ const NftGrid = ({ isFullView = false }: NftGridProps) => {
   }, [navigation, trackEvent, createEventBuilder]);
 
   const handleViewAllNfts = useCallback(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.VIEW_ALL_ASSETS_CLICKED)
+        .addProperties({ asset_type: 'NFT' })
+        .build(),
+    );
     navigation.navigate(Routes.WALLET.NFTS_FULL_VIEW);
-  }, [navigation]);
+  }, [navigation, trackEvent, createEventBuilder]);
 
   const nftRowList =
     !isFullView && isHomepageRedesignV1Enabled ? (

app/components/UI/Tokens/TokenList/index.test.tsx

@@ -5,12 +5,16 @@ import configureMockStore from 'redux-mock-store';
 import { TokenList } from './index';
 import { useNavigation } from '@react-navigation/native';
 import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
+import { useMetrics } from '../../../hooks/useMetrics';
+import { MetricsEventBuilder } from '../../../../core/Analytics/MetricsEventBuilder';
 
 // Mock external dependencies
 jest.mock('@react-navigation/native', () => ({
   useNavigation: jest.fn(),
 }));
 
+jest.mock('../../../hooks/useMetrics');
+
 jest.mock('../../../../util/theme', () => ({
   useTheme: () => ({
     colors: {
@@ -127,10 +131,12 @@ jest.mock('@shopify/flash-list', () => {
 
 const mockStore = configureMockStore();
 const mockNavigate = jest.fn();
+const mockTrackEvent = jest.fn();
 const mockUseNavigation = useNavigation as jest.MockedFunction<
   typeof useNavigation
 >;
 const mockUseSelector = useSelector as jest.MockedFunction<typeof useSelector>;
+const mockUseMetrics = useMetrics as jest.MockedFunction<typeof useMetrics>;
 
 const mockTokenKeys = [
   {
@@ -162,6 +168,20 @@ describe('TokenList', () => {
       navigate: mockNavigate,
     } as unknown as ReturnType<typeof useNavigation>);
 
+    mockUseMetrics.mockReturnValue({
+      trackEvent: mockTrackEvent,
+      createEventBuilder: MetricsEventBuilder.createEventBuilder,
+      enable: jest.fn(),
+      addTraitsToUser: jest.fn(),
+      createDataDeletionTask: jest.fn(),
+      checkDataDeleteStatus: jest.fn(),
+      getDeleteRegulationCreationDate: jest.fn(),
+      getDeleteRegulationId: jest.fn(),
+      isDataRecorded: jest.fn(),
+      isEnabled: jest.fn(),
+      getMetaMetricsId: jest.fn(),
+    });
+
     // Mock useSelector to call the selector function with empty state
     mockUseSelector.mockImplementation((selector) => selector({}));
   });
@@ -227,6 +247,22 @@ describe('TokenList', () => {
     expect(mockNavigate).toHaveBeenCalledWith('TokensFullView');
   });
 
+  it('tracks analytics event when view all button is pressed', () => {
+    const { getByText } = renderComponent({ maxItems: 1 });
+
+    const viewAllButton = getByText('wallet.view_all_tokens');
+    fireEvent.press(viewAllButton);
+
+    expect(mockTrackEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        name: 'View All Assets Clicked',
+        properties: expect.objectContaining({
+          asset_type: 'Token',
+        }),
+      }),
+    );
+  });
+
   it('renders container without items when tokenKeys is empty', () => {
     const { getByTestId, queryByTestId } = renderComponent({ tokenKeys: [] });
 

app/components/UI/Tokens/TokenList/index.tsx

@@ -22,6 +22,7 @@ import {
   ButtonVariant,
 } from '@metamask/design-system-react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
+import { MetaMetricsEvents, useMetrics } from '../../../hooks/useMetrics';
 
 export interface FlashListAssetKey {
   address: string;
@@ -71,14 +72,20 @@ const TokenListComponent = ({
   const listRef = useRef<FlashListRef<FlashListAssetKey>>(null);
 
   const navigation = useNavigation();
+  const { trackEvent, createEventBuilder } = useMetrics();
 
   useLayoutEffect(() => {
     listRef.current?.recomputeViewableItems();
   }, [isTokenNetworkFilterEqualCurrentNetwork]);
 
   const handleViewAllTokens = useCallback(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.VIEW_ALL_ASSETS_CLICKED)
+        .addProperties({ asset_type: 'Token' })
+        .build(),
+    );
     navigation.navigate(Routes.WALLET.TOKENS_FULL_VIEW);
-  }, [navigation]);
+  }, [navigation, trackEvent, createEventBuilder]);
 
   // Apply maxItems limit if specified
   const displayTokenKeys = useMemo(

app/core/Analytics/MetaMetrics.events.ts

@@ -77,6 +77,7 @@ enum EVENT_NAME {
   TOKEN_LIST_ITEM_CLICKED = 'Token List Item Clicked',
   DEFI_TAB_SELECTED = 'DeFi Tab Selected',
   DEFI_PROTOCOL_DETAILS_OPENED = 'DeFi Protocol Details Opened',
+  VIEW_ALL_ASSETS_CLICKED = 'View All Assets Clicked',
 
   // Network
   NETWORK_SWITCHED = 'Network Switched',
@@ -682,6 +683,7 @@ const events = {
   DEFI_PROTOCOL_DETAILS_OPENED: generateOpt(
     EVENT_NAME.DEFI_PROTOCOL_DETAILS_OPENED,
   ),
+  VIEW_ALL_ASSETS_CLICKED: generateOpt(EVENT_NAME.VIEW_ALL_ASSETS_CLICKED),
   CURRENCY_CHANGED: generateOpt(EVENT_NAME.CURRENCY_CHANGED),
   NETWORK_SWITCHED: generateOpt(EVENT_NAME.NETWORK_SWITCHED),
   NETWORK_ADDED: generateOpt(EVENT_NAME.NETWORK_ADDED),