added pna-25 banner

Author: NidhiKJha

app/_locales/en/messages.json

@@ -101,6 +101,8 @@ export type AppStateControllerState = {
   networkConnectionBanner: NetworkConnectionBanner;
   newPrivacyPolicyToastClickedOrClosed: boolean | null;
   newPrivacyPolicyToastShownDate: number | null;
+  pna25BannerClickedOrClosed: boolean | null;
+  pna25BannerDismissedDate: number | null;
   nftsDetectionNoticeDismissed: boolean;
   nftsDropdownState: Json;
   notificationGasPollTokens: string[];
@@ -269,6 +271,8 @@ const getDefaultAppStateControllerState = (): AppStateControllerState => ({
   lastViewedUserSurvey: null,
   newPrivacyPolicyToastClickedOrClosed: null,
   newPrivacyPolicyToastShownDate: null,
+  pna25BannerClickedOrClosed: null,
+  pna25BannerDismissedDate: null,
   nftsDetectionNoticeDismissed: false,
   notificationGasPollTokens: [],
   onboardingDate: null,
@@ -466,6 +470,18 @@ const controllerMetadata: StateMetadata<AppStateControllerState> = {
     includeInDebugSnapshot: true,
     usedInUi: true,
   },
+  pna25BannerClickedOrClosed: {
+    includeInStateLogs: true,
+    persist: true,
+    includeInDebugSnapshot: true,
+    usedInUi: true,
+  },
+  pna25BannerDismissedDate: {
+    includeInStateLogs: true,
+    persist: true,
+    includeInDebugSnapshot: true,
+    usedInUi: true,
+  },
   nftsDetectionNoticeDismissed: {
     includeInStateLogs: true,
     persist: true,
@@ -874,6 +890,18 @@ export class AppStateController extends BaseController<
     });
   }
 
+  setPna25BannerClickedOrClosed(): void {
+    this.update((state) => {
+      state.pna25BannerClickedOrClosed = true;
+    });
+  }
+
+  setPna25BannerDismissedDate(time: number): void {
+    this.update((state) => {
+      state.pna25BannerDismissedDate = time;
+    });
+  }
+
   setShieldPausedToastLastClickedOrClosed(time: number): void {
     this.update((state) => {
       state.shieldPausedToastLastClickedOrClosed = time;

app/_locales/en_GB/messages.json

@@ -17,6 +17,7 @@ import {
   getPermissions,
   isSolanaAccount,
 } from '../../../selectors';
+import { getRemoteFeatureFlags } from '../../../selectors/remote-feature-flags';
 import { MetaMaskReduxState } from '../../../store/store';
 import {
   PasswordChangeToastType,
@@ -47,6 +48,9 @@ type State = {
       | 'surveyLinkLastClickedOrClosed'
       | 'shieldEndingToastLastClickedOrClosed'
       | 'shieldPausedToastLastClickedOrClosed'
+      | 'pna25BannerClickedOrClosed'
+      | 'participateInMetaMetrics'
+      | 'remoteFeatureFlags'
     >
   >;
 };
@@ -234,3 +238,51 @@ export function selectShowShieldEndingToast(
 ): boolean {
   return !state.metamask.shieldEndingToastLastClickedOrClosed;
 }
+
+/**
+ * Determines if the PNA25 banner should be shown based on:
+ * - LaunchDarkly feature flag (extension-ux-pna25) is enabled
+ * - User has opted into metrics (participateInMetaMetrics === true)
+ * - User onboarded before the PNA25 release date
+ * - User hasn't dismissed the banner
+ *
+ * @param state - The application state containing PNA25 banner data.
+ * @returns Object with showPna25Banner boolean and pna25BannerShownDate
+ */
+export function selectShowPna25Banner(state: Pick<State, 'metamask'>): boolean {
+  const {
+    pna25BannerClickedOrClosed,
+    onboardingDate,
+    participateInMetaMetrics,
+  } = state.metamask || {};
+
+  // Get the feature flag from LaunchDarkly
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const remoteFeatureFlags = getRemoteFeatureFlags(state as any);
+  const pna25Timestamp = remoteFeatureFlags?.['extension-ux-pna25'];
+
+  const currentDate = Date.now();
+
+  // Check all conditions
+  if (!pna25Timestamp || typeof pna25Timestamp !== 'number') {
+    return false; // LD flag not set or invalid
+  }
+
+  if (participateInMetaMetrics !== true) {
+    return false; // User hasn't opted into metrics
+  }
+
+  if (pna25BannerClickedOrClosed) {
+    return false; // User already dismissed banner
+  }
+
+  if (currentDate < pna25Timestamp) {
+    return false; // PNA25 date hasn't passed yet
+  }
+
+  if (!onboardingDate || onboardingDate >= pna25Timestamp) {
+    return false; // User onboarded after PNA25 or no onboarding date
+  }
+
+  return true;
+}

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

@@ -94,6 +94,7 @@ import {
   selectClaimSubmitToast,
   selectShowShieldPausedToast,
   selectShowShieldEndingToast,
+  selectShowPna25Banner,
 } from './selectors';
 import {
   setNewPrivacyPolicyToastClickedOrClosed,
@@ -106,6 +107,8 @@ import {
   setShowClaimSubmitToast,
   setShieldPausedToastLastClickedOrClosed,
   setShieldEndingToastLastClickedOrClosed,
+  setPna25BannerClickedOrClosed,
+  setPna25BannerDismissedDate,
 } from './utils';
 
 export function ToastMaster({ location } = {}) {
@@ -129,6 +132,7 @@ export function ToastMaster({ location } = {}) {
         )}
         <SurveyToastMayDelete />
         <PrivacyPolicyToast />
+        <Pna25Banner />
         <NftEnablementToast />
         <PermittedNetworkToast />
         <NewSrpAddedToast />
@@ -749,3 +753,35 @@ function ShieldEndingToast() {
     )
   );
 }
+
+function Pna25Banner() {
+  const t = useI18nContext();
+
+  const showPna25Banner = useSelector(selectShowPna25Banner);
+
+  const handleDismiss = () => {
+    setPna25BannerClickedOrClosed();
+    setPna25BannerDismissedDate(Date.now());
+  };
+
+  return (
+    showPna25Banner && (
+      <Toast
+        key="pna25-banner"
+        dataTestId="pna25-banner"
+        startAdornment={
+          <Icon name={IconName.Info} color={IconColor.infoDefault} />
+        }
+        text={t('pna25BannerTitle')}
+        actionText={t('pna25BannerActionButton')}
+        onActionClick={() => {
+          global.platform.openTab({
+            url: PRIVACY_POLICY_LINK,
+          });
+          handleDismiss();
+        }}
+        onClose={handleDismiss}
+      />
+    )
+  );
+}

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

@@ -117,3 +117,11 @@ export function setShieldEndingToastLastClickedOrClosed(time: number) {
     time,
   ]);
 }
+
+export function setPna25BannerClickedOrClosed() {
+  submitRequestToBackgroundAndCatch('setPna25BannerClickedOrClosed');
+}
+
+export function setPna25BannerDismissedDate(time: number) {
+  submitRequestToBackgroundAndCatch('setPna25BannerDismissedDate', [time]);
+}