feat(ramp): persist Transak native policy agreement for UB2 [TRAM-3340] (#28952)

## **Description**

Unified Buy V2 (Transak native) showed the verify-identity explainer on
every visit when the user had no or expired Transak token
([TRAM-3340](https://consensyssoftware.atlassian.net/browse/TRAM-3340)).

This change stores **`hasAgreedTransakNativePolicy`** on persisted Redux
**`fiatOrders`**. When the user taps Continue on the explainer, we
dispatch **`setHasAgreedTransakNativePolicy(true)`**. On later continues
with no token, **`BuildQuote`** routes straight to **Enter Email** if
**`selectHasAgreedTransakNativePolicy`** is true.

## **Changelog**

CHANGELOG entry: Unified Buy users who use Transak native only see the
verify-identity policy screen once; later visits skip to email entry
when not logged in to Transak.

## **Related issues**

Fixes:

Refs: https://consensyssoftware.atlassian.net/browse/TRAM-3340

## **Manual testing steps**

```gherkin
Feature: Transak native verify-identity explainer (Unified Buy V2)

  Scenario: First visit without Transak token shows explainer then email
    Given the user has not agreed the Transak native policy before
    And the user selects Transak native on Unified Buy amount screen
    When the user continues without a Transak session
    Then the verify-identity explainer is shown
    When the user taps Continue on the explainer
    Then the Enter Email screen is shown

  Scenario: Later visit skips explainer after agreement
    Given the user has already agreed the Transak native policy
    And the user has no valid Transak token
    When the user continues from Unified Buy amount with Transak native
    Then the Enter Email screen is shown without the explainer
```

## **Screenshots/Recordings**

### **Before**

N/A

### **After**



https://github.com/user-attachments/assets/2bad4091-15a6-4c38-9a34-778c0a30b00e



## **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.

#### Performance checks (if applicable)

- [x] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [x] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [x] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **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.


[TRAM-3340]:
https://consensyssoftware.atlassian.net/browse/TRAM-3340?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Low Risk**
> Small, isolated change to Unified Buy navigation and Redux state with
test coverage; main risk is incorrect routing if the persisted flag is
set/cleared unexpectedly.
> 
> **Overview**
> Unified Buy V2 now persists whether the user has agreed to the
Transak-native policy explainer via a new
`fiatOrders.hasAgreedTransakNativePolicy` flag, plus
`setHasAgreedTransakNativePolicy` and
`selectHasAgreedTransakNativePolicy`.
> 
> `VerifyIdentity` dispatches the consent on Continue, and `BuildQuote`
uses the selector to route native-provider users without a token
directly to `EnterEmail` instead of repeatedly showing `VerifyIdentity`.
Tests were updated/added to cover the new reducer state, selector
behavior, and the updated navigation paths.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
91e8cd1. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: wachunei

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.test.tsx

@@ -130,6 +130,7 @@ jest.mock('../../../../hooks/useAnalytics/useAnalytics', () => ({
 jest.mock('../../../../../reducers/fiatOrders', () => ({
   getRampRoutingDecision: () => 'AGGREGATOR',
   UnifiedRampRoutingType: { AGGREGATOR: 'AGGREGATOR' },
+  selectHasAgreedTransakNativePolicy: jest.fn(() => false),
 }));
 
 jest.mock('../../hooks/useRampAccountAddress', () => ({
@@ -214,6 +215,12 @@ const mockUseDebouncedValue = jest.requireMock(
   '../../../../hooks/useDebouncedValue',
 ).useDebouncedValue as jest.Mock;
 
+const mockFiatOrdersModule = jest.requireMock(
+  '../../../../../reducers/fiatOrders',
+) as {
+  selectHasAgreedTransakNativePolicy: jest.Mock;
+};
+
 const mockDeviceIsAndroid = jest.requireMock('../../../../../util/device')
   .isAndroid as jest.Mock;
 
@@ -416,6 +423,9 @@ const buildRampsControllerResult = (overrides = {}) => ({
 describe('BuildQuote', () => {
   beforeEach(() => {
     jest.clearAllMocks();
+    mockFiatOrdersModule.selectHasAgreedTransakNativePolicy.mockReturnValue(
+      false,
+    );
     mockUseParams.mockReturnValue({});
     mockUseRampsController.mockReturnValue(buildRampsControllerResult());
     mockUseDebouncedValue.mockImplementation((value: number) => value);
@@ -1290,7 +1300,35 @@ describe('BuildQuote', () => {
       expect(mockGetBuyQuote).not.toHaveBeenCalled();
       expect(mockRouteAfterAuth).not.toHaveBeenCalled();
       expect(mockNavigate).toHaveBeenCalledWith(
-        expect.any(String),
+        Routes.RAMP.VERIFY_IDENTITY,
+        expect.objectContaining({
+          amount: '100',
+          currency: 'USD',
+          assetId: 'eip155:1/slip44:60',
+        }),
+      );
+    });
+
+    it('navigates to Enter Email for native provider without token after policy agreement', async () => {
+      mockCheckExistingToken.mockResolvedValue(false);
+
+      mockFiatOrdersModule.selectHasAgreedTransakNativePolicy.mockReturnValue(
+        true,
+      );
+
+      const { getByTestId } = renderWithProvider(<BuildQuote />, {
+        state: initialRootState,
+      });
+
+      await act(async () => {
+        fireEvent.press(getByTestId(BuildQuoteSelectors.CONTINUE_BUTTON));
+      });
+
+      expect(mockCheckExistingToken).toHaveBeenCalled();
+      expect(mockGetBuyQuote).not.toHaveBeenCalled();
+      expect(mockRouteAfterAuth).not.toHaveBeenCalled();
+      expect(mockNavigate).toHaveBeenCalledWith(
+        Routes.RAMP.ENTER_EMAIL,
         expect.objectContaining({
           amount: '100',
           currency: 'USD',

app/components/UI/Ramp/Views/BuildQuote/BuildQuote.tsx

@@ -75,12 +75,14 @@ import { BannerAlertSeverity } from '../../../../../component-library/components
 import { useTransakController } from '../../hooks/useTransakController';
 import { useTransakRouting } from '../../hooks/useTransakRouting';
 import { createV2VerifyIdentityNavDetails } from '../NativeFlow/VerifyIdentity';
+import { createV2EnterEmailNavDetails } from '../NativeFlow/EnterEmail';
 import { parseUserFacingError } from '../../utils/parseUserFacingError';
 import { useAnalytics } from '../../../../hooks/useAnalytics/useAnalytics';
 import { MetaMetricsEvents } from '../../../../../core/Analytics';
 import { useSelector } from 'react-redux';
 import {
   getRampRoutingDecision,
+  selectHasAgreedTransakNativePolicy,
   UnifiedRampRoutingType,
 } from '../../../../../reducers/fiatOrders';
 import { selectProviderAutoSelected } from '../../../../../selectors/rampsController';
@@ -189,6 +191,9 @@ function BuildQuote() {
 
   const { trackEvent, createEventBuilder } = useAnalytics();
   const rampRoutingDecision = useSelector(getRampRoutingDecision);
+  const hasAgreedTransakNativePolicy = useSelector(
+    selectHasAgreedTransakNativePolicy,
+  );
   const providerAutoSelected = useSelector(selectProviderAutoSelected);
   const prevSelectedProviderRef = useRef(selectedProvider);
 
@@ -645,6 +650,14 @@ function BuildQuote() {
           throw new Error(strings('deposit.buildQuote.unexpectedError'));
         }
         await transakRouteAfterAuth(quote, amountAsNumber);
+      } else if (hasAgreedTransakNativePolicy) {
+        navigation.navigate(
+          ...createV2EnterEmailNavDetails({
+            amount: String(amountAsNumber),
+            currency,
+            assetId: selectedToken?.assetId,
+          }),
+        );
       } else {
         navigation.navigate(
           ...createV2VerifyIdentityNavDetails({
@@ -675,6 +688,7 @@ function BuildQuote() {
     transakGetBuyQuote,
     transakRouteAfterAuth,
     navigation,
+    hasAgreedTransakNativePolicy,
   ]);
 
   /**

app/components/UI/Ramp/Views/NativeFlow/VerifyIdentity.test.tsx

@@ -1,8 +1,20 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react-native';
+import { useDispatch } from 'react-redux';
 import V2VerifyIdentity from './VerifyIdentity';
 import { ThemeContext, mockTheme } from '../../../../../util/theme';
 import { Linking } from 'react-native';
+import { setHasAgreedTransakNativePolicy } from '../../../../../reducers/fiatOrders';
+import { VerifyIdentitySelectorsIDs } from './VerifyIdentity.testIds';
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: jest.fn(),
+}));
+
+const mockedUseDispatch = useDispatch as jest.MockedFunction<
+  typeof useDispatch
+>;
 
 const mockNavigate = jest.fn();
 const mockGoBack = jest.fn();
@@ -66,8 +78,12 @@ const renderWithTheme = (component: React.ReactElement) =>
   );
 
 describe('V2VerifyIdentity', () => {
+  let innerDispatch: jest.Mock;
+
   beforeEach(() => {
     jest.clearAllMocks();
+    innerDispatch = jest.fn();
+    mockedUseDispatch.mockReturnValue(innerDispatch);
   });
 
   it('calls navigation.goBack when header back is pressed', () => {
@@ -79,11 +95,14 @@ describe('V2VerifyIdentity', () => {
     expect(mockTrackEvent).toHaveBeenCalled();
   });
 
-  it('navigates to enter email when submit button is pressed', async () => {
-    const { getByText } = renderWithTheme(<V2VerifyIdentity />);
+  it('dispatches Transak native policy agreement and navigates to Enter Email on continue', () => {
+    const { getByTestId } = renderWithTheme(<V2VerifyIdentity />);
 
-    fireEvent.press(getByText('deposit.verify_identity.button'));
+    fireEvent.press(getByTestId(VerifyIdentitySelectorsIDs.CONTINUE_BUTTON));
 
+    expect(innerDispatch).toHaveBeenCalledWith(
+      setHasAgreedTransakNativePolicy(true),
+    );
     expect(mockNavigate).toHaveBeenCalledWith(
       'RampEnterEmail',
       expect.objectContaining({

app/components/UI/Ramp/Views/NativeFlow/VerifyIdentity.tsx

@@ -30,8 +30,10 @@ import {
   createNavigationDetails,
   useParams,
 } from '../../../../../util/navigation/navUtils';
+import { useDispatch } from 'react-redux';
 import { createV2EnterEmailNavDetails } from './EnterEmail';
 import { VerifyIdentitySelectorsIDs } from './VerifyIdentity.testIds';
+import { setHasAgreedTransakNativePolicy } from '../../../../../reducers/fiatOrders';
 
 export interface V2VerifyIdentityParams {
   amount?: string;
@@ -43,6 +45,7 @@ export const createV2VerifyIdentityNavDetails =
   createNavigationDetails<V2VerifyIdentityParams>(Routes.RAMP.VERIFY_IDENTITY);
 
 const V2VerifyIdentity = () => {
+  const dispatch = useDispatch();
   const navigation = useNavigation();
   const { styles } = useStyles(styleSheet, {});
   const { trackEvent, createEventBuilder } = useAnalytics();
@@ -83,7 +86,7 @@ const V2VerifyIdentity = () => {
     );
   }, [trackEvent, createEventBuilder]);
 
-  const handleSubmit = useCallback(async () => {
+  const handleSubmit = useCallback(() => {
     trackEvent(
       createEventBuilder(MetaMetricsEvents.RAMPS_TERMS_CONSENT_CLICKED)
         .addProperties({
@@ -92,8 +95,9 @@ const V2VerifyIdentity = () => {
         })
         .build(),
     );
+    dispatch(setHasAgreedTransakNativePolicy(true));
     navigateToEnterEmail();
-  }, [navigateToEnterEmail, trackEvent, createEventBuilder]);
+  }, [dispatch, navigateToEnterEmail, trackEvent, createEventBuilder]);
 
   const handleTransakLink = useCallback(() => {
     let urlDomain: string = TRANSAK_URL;

app/reducers/fiatOrders/index.test.ts

@@ -59,6 +59,8 @@ import fiatOrderReducer, {
   getDetectedGeolocation,
   getRampRoutingDecision,
   setRampRoutingDecision,
+  setHasAgreedTransakNativePolicy,
+  selectHasAgreedTransakNativePolicy,
   UnifiedRampRoutingType,
 } from '.';
 import { FIAT_ORDER_PROVIDERS } from '../../constants/on-ramp';
@@ -417,6 +419,29 @@ describe('fiatOrderReducer', () => {
     expect(stateWithStartedFalse.getStartedDeposit).toEqual(false);
   });
 
+  it('sets hasAgreedTransakNativePolicy to true', () => {
+    const next = fiatOrderReducer(
+      initialState,
+      setHasAgreedTransakNativePolicy(true),
+    );
+
+    expect(next.hasAgreedTransakNativePolicy).toEqual(true);
+  });
+
+  it('sets hasAgreedTransakNativePolicy to false', () => {
+    const agreedState = {
+      ...initialState,
+      hasAgreedTransakNativePolicy: true,
+    };
+
+    const next = fiatOrderReducer(
+      agreedState,
+      setHasAgreedTransakNativePolicy(false),
+    );
+
+    expect(next.hasAgreedTransakNativePolicy).toEqual(false);
+  });
+
   it('should set the selected region', () => {
     const testRegion = {
       id: 'test-region',
@@ -1090,6 +1115,34 @@ describe('selectors', () => {
     });
   });
 
+  describe('selectHasAgreedTransakNativePolicy', () => {
+    it('returns true for state with hasAgreedTransakNativePolicy true', () => {
+      const state = merge({}, initialRootState, {
+        fiatOrders: {
+          hasAgreedTransakNativePolicy: true,
+        },
+      });
+
+      expect(selectHasAgreedTransakNativePolicy(state)).toEqual(true);
+    });
+
+    it('returns false for state with hasAgreedTransakNativePolicy false', () => {
+      const state = merge({}, initialRootState, {
+        fiatOrders: {
+          hasAgreedTransakNativePolicy: false,
+        },
+      });
+
+      expect(selectHasAgreedTransakNativePolicy(state)).toEqual(false);
+    });
+
+    it('returns false for initial root state default fiatOrders', () => {
+      expect(selectHasAgreedTransakNativePolicy(initialRootState)).toEqual(
+        false,
+      );
+    });
+  });
+
   describe('getOrders', () => {
     it('should return empty array if order property is not defined', () => {
       const state = merge({}, initialRootState, {

app/reducers/fiatOrders/index.ts

@@ -143,6 +143,11 @@ export const setRampRoutingDecision = (
   payload: routingDecision,
 });
 
+export const setHasAgreedTransakNativePolicy = (hasAgreed: boolean) => ({
+  type: ACTIONS.FIAT_SET_HAS_AGREED_TRANSAK_NATIVE_POLICY,
+  payload: hasAgreed,
+});
+
 /**
  * Selectors
  */
@@ -223,6 +228,9 @@ export const fiatOrdersGetStartedDeposit: (
 ) => FiatOrdersState['getStartedDeposit'] = (state: RootState) =>
   state.fiatOrders.getStartedDeposit;
 
+export const selectHasAgreedTransakNativePolicy = (state: RootState): boolean =>
+  state.fiatOrders.hasAgreedTransakNativePolicy === true;
+
 export const getOrdersProviders = createSelector(ordersSelector, (orders) => {
   const providers = orders
     .filter(
@@ -343,6 +351,7 @@ export const initialState: FiatOrdersState = {
   getStartedAgg: false,
   getStartedSell: false,
   getStartedDeposit: false,
+  hasAgreedTransakNativePolicy: false,
   authenticationUrls: [],
   activationKeys: [],
   rampRoutingDecision: null,
@@ -640,6 +649,12 @@ const fiatOrderReducer: (
         rampRoutingDecision: action.payload,
       };
     }
+    case ACTIONS.FIAT_SET_HAS_AGREED_TRANSAK_NATIVE_POLICY: {
+      return {
+        ...state,
+        hasAgreedTransakNativePolicy: action.payload,
+      };
+    }
 
     default: {
       return state;

app/reducers/fiatOrders/types.ts

@@ -36,6 +36,7 @@ import {
   setFiatSellTxHash,
   removeFiatSellTxHash,
   setRampRoutingDecision,
+  setHasAgreedTransakNativePolicy,
 } from '.';
 import {
   FIAT_ORDER_PROVIDERS,
@@ -103,6 +104,8 @@ export interface FiatOrdersState {
   getStartedAgg: boolean;
   getStartedSell: boolean;
   getStartedDeposit: boolean;
+  /** Unified Buy / Transak native: user agreed to policy copy on the verify-identity explainer screen */
+  hasAgreedTransakNativePolicy: boolean;
   authenticationUrls: string[];
   activationKeys: ActivationKey[];
   rampRoutingDecision: UnifiedRampRoutingType | null;
@@ -135,6 +138,8 @@ export const ACTIONS = {
   FIAT_SET_SELL_TX_HASH: 'FIAT_SET_SELL_TX_HASH',
   FIAT_REMOVE_SELL_TX_HASH: 'FIAT_REMOVE_SELL_TX_HASH',
   FIAT_SET_RAMP_ROUTING_DECISION: 'FIAT_SET_RAMP_ROUTING_DECISION',
+  FIAT_SET_HAS_AGREED_TRANSAK_NATIVE_POLICY:
+    'FIAT_SET_HAS_AGREED_TRANSAK_NATIVE_POLICY',
 } as const;
 
 export type Action =
@@ -161,7 +166,8 @@ export type Action =
   | ReturnType<typeof updateOnRampNetworks>
   | ReturnType<typeof setFiatSellTxHash>
   | ReturnType<typeof removeFiatSellTxHash>
-  | ReturnType<typeof setRampRoutingDecision>;
+  | ReturnType<typeof setRampRoutingDecision>
+  | ReturnType<typeof setHasAgreedTransakNativePolicy>;
 
 export type Region = Country & State;