feat(ramps): add analytics events for token unavailable modal (MetaMask#27287)

## **Description**

Adds analytics tracking for all user interactions with the
`TokenNotAvailableModal` — the bottom sheet shown in Unified Buy v2 when
the selected token is not supported by the selected provider.

Previously only the "Change Provider" button was tracked. This PR adds:
- `Ramps Screen Viewed` on modal mount (`location: 'Token Unavailable
Modal'`)
- `Ramps Change Token Button Clicked` (new event) when user taps "Change
Token"
- `Ramps Close Button Clicked` when user taps X to dismiss

This gives full funnel visibility into what users do when they hit a
token-unavailability state.

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TRAM-3311

## **Manual testing steps**

```gherkin
Feature: Token unavailable modal analytics

  Scenario: user sees the modal and taps Change Token
    Given the user is on the Amount Input screen with a provider selected
    And the selected token is not supported by that provider

    When the token unavailable modal appears
    Then a "Ramps Screen Viewed" event fires with location "Token Unavailable Modal"

    When user taps "Change Token"
    Then a "Ramps Change Token Button Clicked" event fires with current_provider set

  Scenario: user dismisses the modal
    Given the token unavailable modal is visible

    When user taps the X close button
    Then a "Ramps Close Button Clicked" event fires with location "Token Unavailable Modal"

  Scenario: user taps Change Provider (no regression)
    Given the token unavailable modal is visible

    When user taps "Change Provider"
    Then a "Ramps Change Provider Button Clicked" event fires (unchanged behaviour)
```

## **Screenshots/Recordings**

### **Before**

Only `Ramps Change Provider Button Clicked` fired from this modal.

### **After**

All four interaction surfaces tracked. Verify via Segment debugger or
analytics logs.

## **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]
> **Low Risk**
> Analytics-only changes plus a small close-button behavior tweak (close
vs navigate) confined to a single modal and covered by updated tests.
> 
> **Overview**
> Adds MetaMetrics tracking to the Unified Buy v2
`TokenNotAvailableModal`, firing `RAMPS_SCREEN_VIEWED` on mount and
logging button interactions for **Change token** and the modal **close
(X)**.
> 
> Introduces a new analytics event constant
`RAMPS_CHANGE_TOKEN_BUTTON_CLICKED` in `MetaMetrics.events.ts`, wires
the close button to a new `handleClose` (close only, no navigation), and
updates/extends tests to mock `useAnalytics` and assert the new event
payloads.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
cb0455f. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: amitabh94

app/components/UI/Ramp/Views/Modals/TokenNotAvailableModal/TokenNotAvailableModal.test.tsx

@@ -4,6 +4,22 @@ import TokenNotAvailableModal from './TokenNotAvailableModal';
 import { renderScreen } from '../../../../../../util/test/renderWithProvider';
 import { backgroundState } from '../../../../../../util/test/initial-root-state';
 import Routes from '../../../../../../constants/navigation/Routes';
+import { MetaMetricsEvents } from '../../../../../../core/Analytics';
+
+const mockTrackEvent = jest.fn();
+const mockAddProperties = jest.fn().mockReturnThis();
+const mockBuild = jest.fn(() => ({ name: 'test-event' }));
+const mockCreateEventBuilder = jest.fn(() => ({
+  addProperties: mockAddProperties,
+  build: mockBuild,
+}));
+
+jest.mock('../../../../../hooks/useAnalytics/useAnalytics', () => ({
+  useAnalytics: () => ({
+    trackEvent: mockTrackEvent,
+    createEventBuilder: mockCreateEventBuilder,
+  }),
+}));
 
 const MOCK_ASSET_ID =
   'eip155:1/erc20:0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48';
@@ -143,16 +159,13 @@ describe('TokenNotAvailableModal', () => {
     );
   });
 
-  it('navigates to token selection when the close button is pressed', () => {
+  it('closes the bottom sheet when the close button is pressed', () => {
     const { getByTestId } = render(TokenNotAvailableModal);
     const closeButton = getByTestId('bottomsheetheader-close-button');
 
     fireEvent.press(closeButton);
 
-    expect(mockOnCloseBottomSheet).toHaveBeenCalledWith(expect.any(Function));
-    expect(mockNavigate).toHaveBeenCalledWith(Routes.RAMP.TOKEN_SELECTION, {
-      screen: Routes.RAMP.TOKEN_SELECTION,
-    });
+    expect(mockOnCloseBottomSheet).toHaveBeenCalled();
   });
 
   it('navigates to token selection when modal is dismissed without a pending action', () => {
@@ -181,4 +194,54 @@ describe('TokenNotAvailableModal', () => {
 
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('fires RAMPS_SCREEN_VIEWED analytics event on mount', () => {
+    render(TokenNotAvailableModal);
+
+    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+      MetaMetricsEvents.RAMPS_SCREEN_VIEWED,
+    );
+    expect(mockAddProperties).toHaveBeenCalledWith({
+      location: 'Token Unavailable Modal',
+      ramp_type: 'UNIFIED_BUY_2',
+    });
+    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires RAMPS_CHANGE_TOKEN_BUTTON_CLICKED analytics event when Change token is pressed', () => {
+    const { getByText } = render(TokenNotAvailableModal);
+    mockTrackEvent.mockClear();
+    mockCreateEventBuilder.mockClear();
+    mockAddProperties.mockClear();
+
+    fireEvent.press(getByText('Change token'));
+
+    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+      MetaMetricsEvents.RAMPS_CHANGE_TOKEN_BUTTON_CLICKED,
+    );
+    expect(mockAddProperties).toHaveBeenCalledWith({
+      current_provider: 'Transak',
+      location: 'Token Unavailable Modal',
+      ramp_type: 'UNIFIED_BUY_2',
+    });
+    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+  });
+
+  it('fires RAMPS_CLOSE_BUTTON_CLICKED analytics event when close button is pressed', () => {
+    const { getByTestId } = render(TokenNotAvailableModal);
+    mockTrackEvent.mockClear();
+    mockCreateEventBuilder.mockClear();
+    mockAddProperties.mockClear();
+
+    fireEvent.press(getByTestId('bottomsheetheader-close-button'));
+
+    expect(mockCreateEventBuilder).toHaveBeenCalledWith(
+      MetaMetricsEvents.RAMPS_CLOSE_BUTTON_CLICKED,
+    );
+    expect(mockAddProperties).toHaveBeenCalledWith({
+      location: 'Token Unavailable Modal',
+      ramp_type: 'UNIFIED_BUY_2',
+    });
+    expect(mockTrackEvent).toHaveBeenCalledTimes(1);
+  });
 });

app/components/UI/Ramp/Views/Modals/TokenNotAvailableModal/TokenNotAvailableModal.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import Text, {
@@ -49,13 +49,33 @@ function TokenNotAvailableModal() {
   const tokenName = selectedToken?.name ?? '';
   const providerName = selectedProvider?.name ?? '';
 
+  useEffect(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.RAMPS_SCREEN_VIEWED)
+        .addProperties({
+          location: 'Token Unavailable Modal',
+          ramp_type: 'UNIFIED_BUY_2',
+        })
+        .build(),
+    );
+  }, [trackEvent, createEventBuilder]);
+
   const handleChangeToken = useCallback(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.RAMPS_CHANGE_TOKEN_BUTTON_CLICKED)
+        .addProperties({
+          current_provider: selectedProvider?.name,
+          location: 'Token Unavailable Modal',
+          ramp_type: 'UNIFIED_BUY_2',
+        })
+        .build(),
+    );
     sheetRef.current?.onCloseBottomSheet(() => {
       navigation.navigate(Routes.RAMP.TOKEN_SELECTION, {
         screen: Routes.RAMP.TOKEN_SELECTION,
       });
     });
-  }, [navigation]);
+  }, [navigation, selectedProvider?.name, trackEvent, createEventBuilder]);
 
   const handleChangeProvider = useCallback(() => {
     trackEvent(
@@ -83,6 +103,18 @@ function TokenNotAvailableModal() {
     createEventBuilder,
   ]);
 
+  const handleClose = useCallback(() => {
+    trackEvent(
+      createEventBuilder(MetaMetricsEvents.RAMPS_CLOSE_BUTTON_CLICKED)
+        .addProperties({
+          location: 'Token Unavailable Modal',
+          ramp_type: 'UNIFIED_BUY_2',
+        })
+        .build(),
+    );
+    sheetRef.current?.onCloseBottomSheet();
+  }, [trackEvent, createEventBuilder]);
+
   const handleDismiss = useCallback(
     (hasPendingAction?: boolean) => {
       if (!hasPendingAction) {
@@ -102,7 +134,7 @@ function TokenNotAvailableModal() {
       testID="token-unavailable-for-provider-modal"
     >
       <BottomSheetHeader
-        onClose={handleChangeToken}
+        onClose={handleClose}
         closeButtonProps={{ testID: 'bottomsheetheader-close-button' }}
       >
         <Text variant={TextVariant.HeadingMD}>

app/core/Analytics/MetaMetrics.events.ts

@@ -318,6 +318,7 @@ enum EVENT_NAME {
   RAMPS_PAYMENT_METHOD_SELECTOR_CLICKED = 'Ramps Payment Method Selector Clicked',
   RAMPS_QUICK_AMOUNT_CLICKED = 'Ramps Quick Amount Clicked',
   RAMPS_CHANGE_PROVIDER_BUTTON_CLICKED = 'Ramps Change Provider Button Clicked',
+  RAMPS_CHANGE_TOKEN_BUTTON_CLICKED = 'Ramps Change Token Button Clicked',
   RAMPS_PROVIDER_SELECTED = 'Ramps Provider Selected',
   RAMPS_CONTINUE_BUTTON_CLICKED = 'Ramps Continue Button Clicked',
   RAMPS_TERMS_CONSENT_CLICKED = 'Ramps Terms Consent Clicked',
@@ -1117,6 +1118,9 @@ const events = {
   RAMPS_CHANGE_PROVIDER_BUTTON_CLICKED: generateOpt(
     EVENT_NAME.RAMPS_CHANGE_PROVIDER_BUTTON_CLICKED,
   ),
+  RAMPS_CHANGE_TOKEN_BUTTON_CLICKED: generateOpt(
+    EVENT_NAME.RAMPS_CHANGE_TOKEN_BUTTON_CLICKED,
+  ),
   RAMPS_PROVIDER_SELECTED: generateOpt(EVENT_NAME.RAMPS_PROVIDER_SELECTED),
   RAMPS_CONTINUE_BUTTON_CLICKED: generateOpt(
     EVENT_NAME.RAMPS_CONTINUE_BUTTON_CLICKED,