feat: added pna-25 banner (#38112)

This PR is to add the updated privacy notice banner on homepage

# Feature Flow Diagram

```
┌─────────────────────────────────────────────────────────────────────┐
│                        USER TYPE DETECTION                          │
└─────────────────────────────────────────────────────────────────────┘
                                  │
                 ┌────────────────┴────────────────┐
                 │                                  │
                 ▼                                  ▼
        ┌─────────────────┐              ┌──────────────────┐
        │   NEW USER      │              │  EXISTING USER   │
        │  (Onboarding)   │              │ (Already setup)  │
        └────────┬────────┘              └────────┬─────────┘
                 │                                 │
                 │                                 │
        ┌────────▼─────────┐              ┌───────▼──────────┐
        │  Check LD Flag   │              │   Check State    │
        │ (extensionUxPna25)    │              │ newUserFeature   │
        │                  │              │  Acknowledged?   │
        └────────┬─────────┘              └───────┬──────────┘
                 │                                 │
         ┌───────┴────────┐                       ▼
         │                │                  = null or false
         ▼                ▼               (State didn't exist
    LD = true      LD = false              when they onboarded)
         │                │                       │
         │                │                       │
         ▼                ▼               ┌───────▼──────────┐
 ┌───────────┐    ┌───────────┐         │   Check LD Flag  │
 │Set state  │    │ State      │         │    (Feature X)   │
 │to TRUE    │    │ remains    │         └────────┬─────────┘
 │           │    │  null      │                  │
 │(auto-     │    │            │          ┌───────┴────────┐
 │acknowledged)│   │(Feature   │          │                │
 └─────┬─────┘    │ disabled)  │          ▼                ▼
       │          └─────┬─────┘      LD = true        LD = false
       │                │                 │                │
       ▼                ▼                 │                │
 ┌──────────────────────────────┐        ▼                ▼
 │ Continue with onboarding     │  ┌──────────┐    ┌──────────┐
 │ (User experiences feature    │  │ SHOW     │    │  DON'T   │
 │      naturally)              │  │ BANNER   │    │  SHOW    │
 └──────────────────────────────┘  │          │    │ BANNER   │
                                    │"Hey! New │    │          │
                                    │ Feature" │    │(Feature  │
                                    └────┬─────┘    │ not      │
                                         │          │ enabled) │
                                         │          └──────────┘
                                         ▼
                              ┌──────────────────┐
                              │  User Clicks     │
                              │  Banner/Button   │
                              └────────┬─────────┘
                                       │
                                       ▼
                              ┌──────────────────┐
                              │  Set state to    │
                              │     TRUE         │
                              │                  │
                              │ (Changed from    │
                              │  null/false      │
                              │  to true)        │
                              └────────┬─────────┘
                                       │
                                       ▼
                              ┌──────────────────┐
                              │ Banner disappears│
                              │  (permanently)   │
                              │                  │
                              │ User now has     │
                              │ acknowledged the │
                              │ new feature      │
                              └──────────────────┘


┌─────────────────────────────────────────────────────────────────────┐
│                         STATE VALUES                                │
├─────────────────────────────────────────────────────────────────────┤
│  TRUE  = User has acknowledged the feature                          │
│          - NEW users: Set during onboarding (if LD flag ON)         │
│          - EXISTING users: Set after clicking banner                │
│                                                                      │
│  FALSE = User hasn't acknowledged yet (or feature was OFF)          │
│          - EXISTING users: Start with FALSE (not null)              │
│          - NEW users: If LD flag is OFF during onboarding           │
│                                                                      │
│└─────────────────────────────────────────────────────────────────────┘
```



## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Introduces metametrics banner

## **Related issues**

Fixes:
[issue](https://consensyssoftware.atlassian.net/browse/CEUX-716?atlOrigin=eyJpIjoiNThiZDViYmI2NTA5NDVhYjhiMGVmMmIyODlmOTY1NmIiLCJwIjoiaiJ9)

## **Manual testing steps**

1. If user onboarded (existing user), opted for metametrics, LD flag on
-> Banner should show
2. If user onboarded (existing user), not opted for metametrics, LD flag
on -> Banner shouldn't show
3. New user and LD flag on -> Banner shouldn't show
4. LD flag off -> Banner shouldn't show

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

![Screenshot 2025-11-26 at 5 27
21 PM](https://github.com/user-attachments/assets/8ebac63c-ca1c-4344-8489-dca08c6dd929)

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/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 a feature-flagged MetaMetrics privacy banner (`PNA25`) with
persisted `pna25Acknowledged` state, onboarding/use-metrics integration,
and supporting env/config/i18n updates.
> 
> - **UI**:
> - **Toast**: New `Pna25Banner` in
`ui/components/app/toast-master/toast-master.js` with selector
`selectShowPna25Banner` and action to acknowledge
(`setPna25Acknowledged`).
> - **Selectors/Utils**: Add `selectShowPna25Banner` in
`toast-master/selectors.ts`; wire `setPna25Acknowledged` in
`toast-master/utils.ts`.
> - **Hooks**: `useEnableMetametrics` auto-acknowledges when
`extensionUxPna25` enabled and `pna25Acknowledged === false`.
> - **Onboarding**: `metametrics.js` and `welcome.js` set
`pna25Acknowledged` for new/social users when `EXTENSION_UX_PNA25` is
enabled; updated checkbox copy toggle.
> - **State/Controllers**:
> - Add `pna25Acknowledged` to `AppStateController` state, defaults,
metadata, setter `setPna25Acknowledged`, and background API exposure via
`metamask-controller.js`.
> - Include in Sentry safe-state:
`app/scripts/constants/sentry-state.ts`.
> - Types: add to `shared/types/background.ts`; selector
`getPna25Acknowledged`.
> - **Build/Env**:
> - New env flag `EXTENSION_UX_PNA25: true` across `builds.yml` and
default envs.
> - **i18n/Links**:
> - New messages `pna25BannerTitle`,
`onboardingMetametricCheckboxDescriptionOneUpdated` in
`app/_locales/en*/messages.json`.
>   - Add `METAMETRICS_SETTINGS_LINK` in `shared/lib/ui-utils.js`.
> - **Tests/Fixtures**:
> - Update e2e fixtures and state-snapshot schemas to include
`pna25Acknowledged` and related ordering tweaks.
> - **Plumbing**:
> - UI actions: new `setPna25Acknowledged` in `ui/store/actions.ts` and
background wiring.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
bf7d334. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: NidhiKJha

app/_locales/en/messages.json

@@ -93,6 +93,7 @@ export const SENTRY_BACKGROUND_STATE = {
     shieldEndingToastLastClickedOrClosed: true,
     shieldPausedToastLastClickedOrClosed: true,
     isWalletResetInProgress: false,
+    pna25Acknowledged: false,
   },
   MultichainBalancesController: {
     balances: false,

app/_locales/en_GB/messages.json

@@ -792,6 +792,7 @@ describe('AppStateController', () => {
               "outdatedBrowserWarningLastShown": null,
               "pendingShieldCohort": null,
               "pendingShieldCohortTxType": null,
+              "pna25Acknowledged": false,
               "popupGasPollTokens": [],
               "productTour": "accountIcon",
               "recoveryPhraseReminderHasBeenShown": false,
@@ -883,6 +884,7 @@ describe('AppStateController', () => {
               "outdatedBrowserWarningLastShown": null,
               "pendingShieldCohort": null,
               "pendingShieldCohortTxType": null,
+              "pna25Acknowledged": false,
               "popupGasPollTokens": [],
               "productTour": "accountIcon",
               "recoveryPhraseReminderHasBeenShown": false,
@@ -963,6 +965,7 @@ describe('AppStateController', () => {
               "onboardingDate": null,
               "outdatedBrowserWarningLastShown": null,
               "pendingShieldCohortTxType": null,
+              "pna25Acknowledged": false,
               "productTour": "accountIcon",
               "recoveryPhraseReminderHasBeenShown": false,
               "recoveryPhraseReminderLastShown": 1000,
@@ -1053,6 +1056,7 @@ describe('AppStateController', () => {
               "outdatedBrowserWarningLastShown": null,
               "pendingShieldCohort": null,
               "pendingShieldCohortTxType": null,
+              "pna25Acknowledged": false,
               "popupGasPollTokens": [],
               "productTour": "accountIcon",
               "recoveryPhraseReminderHasBeenShown": false,

app/scripts/constants/sentry-state.ts

@@ -114,6 +114,7 @@ export type AppStateControllerState = {
   networkConnectionBanner: NetworkConnectionBanner;
   newPrivacyPolicyToastClickedOrClosed: boolean | null;
   newPrivacyPolicyToastShownDate: number | null;
+  pna25Acknowledged: boolean;
   nftsDetectionNoticeDismissed: boolean;
   nftsDropdownState: Json;
   notificationGasPollTokens: string[];
@@ -282,6 +283,7 @@ const getDefaultAppStateControllerState = (): AppStateControllerState => ({
   lastViewedUserSurvey: null,
   newPrivacyPolicyToastClickedOrClosed: null,
   newPrivacyPolicyToastShownDate: null,
+  pna25Acknowledged: false,
   nftsDetectionNoticeDismissed: false,
   notificationGasPollTokens: [],
   onboardingDate: null,
@@ -479,6 +481,12 @@ const controllerMetadata: StateMetadata<AppStateControllerState> = {
     includeInDebugSnapshot: true,
     usedInUi: true,
   },
+  pna25Acknowledged: {
+    includeInStateLogs: true,
+    persist: true,
+    includeInDebugSnapshot: true,
+    usedInUi: true,
+  },
   nftsDetectionNoticeDismissed: {
     includeInStateLogs: true,
     persist: true,
@@ -887,6 +895,12 @@ export class AppStateController extends BaseController<
     });
   }
 
+  setPna25Acknowledged(acknowledged: boolean): void {
+    this.update((state) => {
+      state.pna25Acknowledged = acknowledged;
+    });
+  }
+
   setShieldPausedToastLastClickedOrClosed(time: number): void {
     this.update((state) => {
       state.shieldPausedToastLastClickedOrClosed = time;

app/scripts/controllers/app-state-controller.test.ts

@@ -2986,6 +2986,8 @@ export default class MetamaskController extends EventEmitter {
         appStateController.setShieldEndingToastLastClickedOrClosed.bind(
           appStateController,
         ),
+      setPna25Acknowledged:
+        appStateController.setPna25Acknowledged.bind(appStateController),
       setAppActiveTab:
         appStateController.setAppActiveTab.bind(appStateController),
       setDefaultSubscriptionPaymentOptions:

app/scripts/controllers/app-state-controller.ts

@@ -35,6 +35,7 @@ buildTypes:
       - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/10.2.3/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
       - IS_SIDEPANEL: true
+      - EXTENSION_UX_PNA25: true
       # for seedless onboarding (social login)
       - GOOGLE_PROD_CLIENT_ID
       - APPLE_PROD_CLIENT_ID
@@ -69,6 +70,7 @@ buildTypes:
       - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/10.2.3/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
       - IS_SIDEPANEL: false
+      - EXTENSION_UX_PNA25: true
       # for seedless onboarding (social login)
       - GOOGLE_BETA_CLIENT_ID
       - APPLE_BETA_CLIENT_ID
@@ -103,6 +105,7 @@ buildTypes:
       - REJECT_INVALID_SNAPS_PLATFORM_VERSION: true
       - IFRAME_EXECUTION_ENVIRONMENT_URL: https://execution.metamask.io/iframe/10.2.3/index.html
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://snaps.metamask.io/account-management
+      - EXTENSION_UX_PNA25: true
       # for seedless onboarding (social login)
       - GOOGLE_EXPERIMENTAL_CLIENT_ID
       - APPLE_EXPERIMENTAL_CLIENT_ID
@@ -138,6 +141,7 @@ buildTypes:
       - ACCOUNT_SNAPS_DIRECTORY_URL: https://metamask.github.io/snaps-directory-staging/main/account-management
       - EIP_4337_ENTRYPOINT: '0x5FF137D4b0FDCD49DcA30c7CF57E578a026d2789'
       - IS_SIDEPANEL: false
+      - EXTENSION_UX_PNA25: true
       # for seedless onboarding (social login)
       - GOOGLE_FLASK_CLIENT_ID
       - APPLE_FLASK_CLIENT_ID
@@ -460,3 +464,6 @@ env:
   # This should only be used for local testing, and should not be enabled in any
   # production builds (including beta and Flask).
   - FORCE_PREINSTALLED_SNAPS: 'false'
+
+  # PNA25 (Privacy Notice)
+  - EXTENSION_UX_PNA25: true

app/scripts/metamask-controller.js

@@ -5,6 +5,8 @@ export const SUPPORT_LINK = process.env.SUPPORT_LINK;
 export const COINGECKO_LINK = 'https://www.coingecko.com/';
 export const CRYPTOCOMPARE_LINK = 'https://www.cryptocompare.com/';
 export const PRIVACY_POLICY_LINK = 'https://consensys.io/privacy-policy/';
+export const METAMETRICS_SETTINGS_LINK =
+  'https://support.metamask.io/configure/privacy/how-to-manage-your-metametrics-settings/';
 export const SURVEY_LINK = 'https://www.getfeedback.com/r/Oczu1vP0';
 
 // TODO make sure these links are correct

builds.yml

@@ -117,6 +117,7 @@ export type ControllerStatePropertiesEnumerated = {
   isRampCardClosed: AppStateControllerState['isRampCardClosed'];
   newPrivacyPolicyToastClickedOrClosed: AppStateControllerState['newPrivacyPolicyToastClickedOrClosed'];
   newPrivacyPolicyToastShownDate: AppStateControllerState['newPrivacyPolicyToastShownDate'];
+  pna25Acknowledged: AppStateControllerState['pna25Acknowledged'];
   // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
   // eslint-disable-next-line @typescript-eslint/naming-convention
   hadAdvancedGasFeesSetPriorToMigration92_3: AppStateControllerState['hadAdvancedGasFeesSetPriorToMigration92_3'];

shared/lib/ui-utils.js

@@ -113,6 +113,7 @@ function defaultFixture(inputChainId = CHAIN_IDS.LOCALHOST) {
         notificationGasPollTokens: [],
         popupGasPollTokens: [],
         recoveryPhraseReminderHasBeenShown: true,
+        pna25Acknowledged: false,
         recoveryPhraseReminderLastShown:
           '__FIXTURE_SUBSTITUTION__currentDateInMilliseconds',
         showTestnetMessageInDropdown: true,