feat: show shield entry modal on settings

shared/lib/shield.ts

@@ -8,7 +8,7 @@ import { DAY } from '../constants/time';
 
 const SUBSCRIPTION_ENDING_SOON_DAYS = DAY;
 
-function getShieldSubscription(
+export function getShieldSubscription(
   subscriptions: Subscription | Subscription[],
 ): Subscription | undefined {
   let shieldSubscription: Subscription | undefined;

ui/components/app/shield-entry-modal/shield-entry-modal.tsx

@@ -38,7 +38,14 @@ import { getShouldSubmitEventsForShieldEntryModal } from '../../../selectors';
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
 // eslint-disable-next-line @typescript-eslint/naming-convention
-export default function ShieldEntryModal() {
+export default function ShieldEntryModal({
+  // Whether to skip event submission (e.g., when opened from a user action)
+  skipEventSubmission = false,
+  onClose,
+}: {
+  skipEventSubmission?: boolean;
+  onClose?: () => void;
+}) {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const navigate = useNavigate();
@@ -47,6 +54,10 @@ export default function ShieldEntryModal() {
   );
 
   const handleOnClose = () => {
+    if (skipEventSubmission) {
+      onClose?.();
+      return;
+    }
     if (shouldSubmitEvent) {
       dispatch(
         submitSubscriptionUserEvents({

ui/pages/settings/settings.component.js

@@ -62,6 +62,7 @@ import {
 import { SnapIcon } from '../../components/app/snaps/snap-icon';
 import { SnapSettingsRenderer } from '../../components/app/snaps/snap-settings-page';
 import PasswordOutdatedModal from '../../components/app/password-outdated-modal';
+import ShieldEntryModal from '../../components/app/shield-entry-modal';
 import SettingsTab from './settings-tab';
 import AdvancedTab from './advanced-tab';
 import InfoTab from './info-tab';
@@ -97,6 +98,7 @@ class SettingsPage extends PureComponent {
     backRoute: PropTypes.string,
     conversionDate: PropTypes.number,
     currentPath: PropTypes.string,
+    hasShieldSubscription: PropTypes.bool,
     isAddressEntryPage: PropTypes.bool,
     isMetaMaskShieldFeatureEnabled: PropTypes.bool,
     isPasswordChangePage: PropTypes.bool,
@@ -122,6 +124,7 @@ class SettingsPage extends PureComponent {
     lastFetchedConversionDate: null,
     searchResults: [],
     searchText: '',
+    showShieldEntryModal: false,
   };
 
   componentDidMount() {
@@ -184,6 +187,12 @@ class SettingsPage extends PureComponent {
           },
         )}
       >
+        {this.state.showShieldEntryModal && (
+          <ShieldEntryModal
+            skipEventSubmission
+            onClose={() => this.setState({ showShieldEntryModal: false })}
+          />
+        )}
         {isSeedlessPasswordOutdated && <PasswordOutdatedModal />}
         <Box
           className="settings-page__header"
@@ -377,6 +386,7 @@ class SettingsPage extends PureComponent {
       useExternalServices,
       settingsPageSnaps,
       isMetaMaskShieldFeatureEnabled,
+      hasShieldSubscription,
     } = this.props;
     const { t } = this.context;
 
@@ -472,11 +482,15 @@ class SettingsPage extends PureComponent {
           }
           return matchPath(key, currentPath);
         }}
-        onSelect={(key) =>
+        onSelect={(key) => {
+          if (key === TRANSACTION_SHIELD_ROUTE && !hasShieldSubscription) {
+            this.setState({ showShieldEntryModal: true });
+            return;
+          }
           navigate(key, {
             state: { fromPage: currentPath },
-          })
-        }
+          });
+        }}
       />
     );
   }

ui/pages/settings/settings.container.js

@@ -49,6 +49,7 @@ import { getSnapName } from '../../helpers/utils/util';
 import { decodeSnapIdFromPathname } from '../../helpers/utils/snaps';
 import { getIsSeedlessPasswordOutdated } from '../../ducks/metamask/metamask';
 import { getIsMetaMaskShieldFeatureEnabled } from '../../../shared/modules/environment';
+import { getHasShieldSubscription } from '../../selectors/subscription/subscription';
 import Settings from './settings.component';
 
 const ROUTES_TO_I18N_KEYS = {
@@ -176,6 +177,7 @@ const mapStateToProps = (state, ownProps) => {
     backRoute,
     conversionDate,
     currentPath: pathname,
+    hasShieldSubscription: getHasShieldSubscription(state),
     isAddressEntryPage,
     isMetaMaskShieldFeatureEnabled: getIsMetaMaskShieldFeatureEnabled(),
     isPasswordChangePage,

ui/selectors/subscription/subscription.ts

@@ -6,7 +6,10 @@ import {
   Subscription,
   SubscriptionControllerState,
 } from '@metamask/subscription-controller';
-import { getIsShieldSubscriptionActive } from '../../../shared/lib/shield';
+import {
+  getIsShieldSubscriptionActive,
+  getShieldSubscription,
+} from '../../../shared/lib/shield';
 
 export type SubscriptionState = {
   metamask: SubscriptionControllerState & {
@@ -49,3 +52,10 @@ export function getLastUsedShieldSubscriptionPaymentDetails(
 ): CachedLastSelectedPaymentMethod | undefined {
   return state.metamask.lastSelectedPaymentMethod?.[PRODUCT_TYPES.SHIELD];
 }
+
+export function getHasShieldSubscription(state: SubscriptionState): boolean {
+  const shieldSubscription = getShieldSubscription(
+    state.metamask.subscriptions,
+  );
+  return Boolean(shieldSubscription);
+}