feat: added pna-25 banner

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

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

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

@@ -101,6 +101,7 @@ export type AppStateControllerState = {
   networkConnectionBanner: NetworkConnectionBanner;
   newPrivacyPolicyToastClickedOrClosed: boolean | null;
   newPrivacyPolicyToastShownDate: number | null;
+  pna25Acknowledged: boolean | null;
   nftsDetectionNoticeDismissed: boolean;
   nftsDropdownState: Json;
   notificationGasPollTokens: string[];
@@ -269,6 +270,7 @@ const getDefaultAppStateControllerState = (): AppStateControllerState => ({
   lastViewedUserSurvey: null,
   newPrivacyPolicyToastClickedOrClosed: null,
   newPrivacyPolicyToastShownDate: null,
+  pna25Acknowledged: null,
   nftsDetectionNoticeDismissed: false,
   notificationGasPollTokens: [],
   onboardingDate: null,
@@ -466,6 +468,12 @@ const controllerMetadata: StateMetadata<AppStateControllerState> = {
     includeInDebugSnapshot: true,
     usedInUi: true,
   },
+  pna25Acknowledged: {
+    includeInStateLogs: true,
+    persist: true,
+    includeInDebugSnapshot: true,
+    usedInUi: true,
+  },
   nftsDetectionNoticeDismissed: {
     includeInStateLogs: true,
     persist: true,
@@ -874,6 +882,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/metamask-controller.js

@@ -2955,6 +2955,10 @@
         appStateController.setShieldEndingToastLastClickedOrClosed.bind(
           appStateController,
         ),
+      setPna25Acknowledged:
+        appStateController.setPna25Acknowledged.bind(
+          appStateController,
+        ),
       setAppActiveTab:
         appStateController.setAppActiveTab.bind(appStateController),
       setDefaultSubscriptionPaymentOptions:

shared/lib/ui-utils.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

test/e2e/tests/metrics/state-snapshots/errors-after-init-opt-in-background-state.json

@@ -52,6 +52,7 @@
     "outdatedBrowserWarningLastShown": "object",
     "pendingShieldCohort": null,
     "pendingShieldCohortTxType": null,
+    "pna25Acknowledged": null,
     "popupGasPollTokens": "object",
     "productTour": "accountIcon",
     "recoveryPhraseReminderHasBeenShown": true,

test/e2e/tests/metrics/state-snapshots/errors-before-init-opt-in-background-state.json

@@ -53,6 +53,7 @@
       "showShieldEntryModalOnce": "boolean",
       "pendingShieldCohort": null,
       "pendingShieldCohortTxType": null,
+      "pna25Acknowledged": null,
       "appActiveTab": "object"
     },
     "BridgeController": {},

ui/components/app/toast-master/selectors.ts

@@ -47,6 +47,10 @@ type State = {
       | 'surveyLinkLastClickedOrClosed'
       | 'shieldEndingToastLastClickedOrClosed'
       | 'shieldPausedToastLastClickedOrClosed'
+      | 'participateInMetaMetrics'
+      | 'remoteFeatureFlags'
+      | 'pna25Acknowledged'
+      | 'completedOnboarding'
     >
   >;
 };
@@ -234,3 +238,47 @@ export function selectShowShieldEndingToast(
 ): boolean {
   return !state.metamask.shieldEndingToastLastClickedOrClosed;
 }
+
+/**
+ * Determines if the PNA25 banner should be shown based on:
+ * - User has completed onboarding (completedOnboarding === true)
+ * - LaunchDarkly feature flag (extension-ux-pna25) is enabled (boolean)
+ * - User has opted into metrics (participateInMetaMetrics === true)
+ * - User is an EXISTING user (pna25Acknowledged === null)
+ * New users will have pna25Acknowledged = true (opted in) or false (opted out)
+ * Existing users will have pna25Acknowledged = null (state didn't exist when they onboarded)
+ *
+ * @param state - The application state containing the banner data.
+ * @returns Boolean indicating whether to show the banner
+ */
+export function selectShowPna25Banner(state: Pick<State, 'metamask'>): boolean {
+  const {
+    completedOnboarding,
+    participateInMetaMetrics,
+    pna25Acknowledged,
+    remoteFeatureFlags,
+  } = state.metamask || {};
+
+  // Only show to users who have completed onboarding
+  if (!completedOnboarding) {
+    return false; // User hasn't completed onboarding yet
+  }
+
+  const isPna25Enabled = remoteFeatureFlags?.['extension-ux-pna25'];
+
+  // Check all conditions
+  if (!isPna25Enabled) {
+    return false; // LD flag not enabled
+  }
+
+  if (participateInMetaMetrics !== true) {
+    return false; // User hasn't opted into metrics
+  }
+
+  if (pna25Acknowledged === true) {
+    return false; // User already acknowledged
+  }
+
+  // Show banner only for existing users who opted in before this feature
+  return true;
+}

ui/components/app/toast-master/toast-master.js

@@ -11,6 +11,7 @@ import { MILLISECOND, SECOND } from '../../../../shared/constants/time';
 import {
   PRIVACY_POLICY_LINK,
   SURVEY_LINK,
+  METAMETRICS_SETTINGS_LINK,
 } from '../../../../shared/lib/ui-utils';
 import {
   BorderColor,
@@ -94,6 +95,7 @@ import {
   selectClaimSubmitToast,
   selectShowShieldPausedToast,
   selectShowShieldEndingToast,
+  selectShowPna25Banner,
 } from './selectors';
 import {
   setNewPrivacyPolicyToastClickedOrClosed,
@@ -106,6 +108,7 @@ import {
   setShowClaimSubmitToast,
   setShieldPausedToastLastClickedOrClosed,
   setShieldEndingToastLastClickedOrClosed,
+  setPna25Acknowledged,
 } from './utils';
 
 export function ToastMaster({ location } = {}) {
@@ -129,6 +132,7 @@ export function ToastMaster({ location } = {}) {
         )}
         <SurveyToastMayDelete />
         <PrivacyPolicyToast />
+        <Pna25Banner />
         <NftEnablementToast />
         <PermittedNetworkToast />
         <NewSrpAddedToast />
@@ -749,3 +753,39 @@ function ShieldEndingToast() {
     )
   );
 }
+
+function Pna25Banner() {
+  const t = useI18nContext();
+
+  const showPna25Banner = useSelector(selectShowPna25Banner);
+
+  const handleLearnMore = () => {
+    // Open MetaMetrics settings help page and acknowledge
+    global.platform.openTab({
+      url: METAMETRICS_SETTINGS_LINK,
+    });
+    setPna25Acknowledged(true);
+  };
+
+  const handleClose = () => {
+    // Just acknowledge without opening link
+    setPna25Acknowledged(true);
+  };
+
+  return (
+    showPna25Banner && (
+      <Toast
+        key="pna25-banner"
+        dataTestId="pna25-banner"
+        startAdornment={
+          <Icon name={IconName.Info} color={IconColor.infoDefault} />
+        }
+        text={t('pna25BannerTitle')}
+        textVariant={TextVariant.bodySm}
+        actionText={t('learnMoreUpperCase')}
+        onActionClick={handleLearnMore}
+        onClose={handleClose}
+      />
+    )
+  );
+}

ui/components/app/toast-master/utils.ts

@@ -117,3 +117,7 @@ export function setShieldEndingToastLastClickedOrClosed(time: number) {
     time,
   ]);
 }
+
+export function setPna25Acknowledged(acknowledged: boolean) {
+  submitRequestToBackgroundAndCatch('setPna25Acknowledged', [acknowledged]);
+}

ui/pages/onboarding-flow/metametrics/metametrics.js

@@ -29,6 +29,7 @@ import {
   getIsParticipateInMetaMetricsSet,
   getParticipateInMetaMetrics,
 } from '../../../selectors';
+import { getRemoteFeatureFlags } from '../../../selectors/remote-feature-flags';
 
 import {
   MetaMetricsEventCategory,
@@ -50,6 +51,7 @@ import {
 } from '../../../components/component-library';
 import { FirstTimeFlowType } from '../../../../shared/constants/onboarding';
 import { getBrowserName } from '../../../../shared/modules/browser-runtime.utils';
+import { submitRequestToBackgroundAndCatch } from '../../../components/app/toast-master/utils';
 
 const isFirefox = getBrowserName() === PLATFORM_FIREFOX;
 
@@ -65,6 +67,11 @@ export default function OnboardingMetametrics() {
   );
   const participateInMetaMetrics = useSelector(getParticipateInMetaMetrics);
   const dataCollectionForMarketing = useSelector(getDataCollectionForMarketing);
+  const remoteFeatureFlags = useSelector(getRemoteFeatureFlags);
+
+  // Check if the PNA25 feature is enabled
+  // extension-ux-pna25 is a boolean LaunchDarkly flag
+  const isPna25Enabled = remoteFeatureFlags?.extensionUxPna25;
 
   const [
     isParticipateInMetaMetricsChecked,
@@ -135,6 +142,13 @@ export default function OnboardingMetametrics() {
         dispatch(setParticipateInMetaMetrics(false));
         dispatch(setDataCollectionForMarketing(false));
       }
+
+      // If LD flag is enabled, set pna25Acknowledged to true
+      // This means they saw the updated policy during onboarding (whether they opted in or out)
+      // No need to show banner to new users who already saw the updated message
+      if (isPna25Enabled) {
+        await submitRequestToBackgroundAndCatch('setPna25Acknowledged', [true]);
+      }
     } catch (error) {
       log.error('onConfirm::error', error);
     } finally {
@@ -229,7 +243,9 @@ export default function OnboardingMetametrics() {
           color={TextColor.textAlternative}
           textAlign={TextAlign.Left}
         >
-          {t('onboardingMetametricCheckboxDescriptionOne')}
+          {isPna25Enabled
+            ? t('onboardingMetametricCheckboxDescriptionOneUpdated')
+            : t('onboardingMetametricCheckboxDescriptionOne')}
         </Text>
       </Box>