feat: Integrate JSX into snap notifications

app/scripts/metamask-controller.js

@@ -1461,12 +1461,19 @@ export default class MetamaskController extends EventEmitter {
         },
         showInAppNotification: {
           method: (origin, args) => {
-            const { message } = args;
+            const { message, title, footerLink, interfaceId } = args;
+
+            const detailedView = {
+              title,
+              ...(footerLink ? { footerLink } : {}),
+              interfaceId,
+            };
 
             const notification = {
               data: {
                 message,
                 origin,
+                ...(interfaceId ? { detailedView } : {}),
               },
               type: TRIGGER_TYPES.SNAP,
               readDate: null,
@@ -2866,14 +2873,22 @@ export default class MetamaskController extends EventEmitter {
               origin,
               args.message,
             ),
-          showInAppNotification: (origin, args) =>
+          showInAppNotification: (origin, args) => {
+            const { message, title, footerLink } = args;
+            const notificationArgs = {
+              interfaceId: args.content,
+              message,
+              title,
+              footerLink,
+            };
             this.controllerMessenger.call(
               'RateLimitController:call',
               origin,
               'showInAppNotification',
               origin,
-              args,
-            ),
+              notificationArgs,
+            );
+          },
           updateSnapState: this.controllerMessenger.call.bind(
             this.controllerMessenger,
             'SnapController:updateSnapState',

ui/components/app/permission-cell/permission-cell-status.js

@@ -21,7 +21,7 @@ import {
   TextVariant,
 } from '../../../helpers/constants/design-system';
 import Tooltip from '../../ui/tooltip';
-import { AvatarGroup } from '../../multichain';
+import { AvatarGroup } from '../../multichain/avatar-group';
 import { AvatarType } from '../../multichain/avatar-group/avatar-group.types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { formatDate } from '../../../helpers/utils/util';

ui/components/multichain/account-list-item-menu/account-list-item-menu.js

@@ -39,7 +39,7 @@ import {
 } from '../../../store/actions';
 import { TextVariant } from '../../../helpers/constants/design-system';
 import { formatAccountType } from '../../../helpers/utils/metrics';
-import { AccountDetailsMenuItem, ViewExplorerMenuItem } from '..';
+import { AccountDetailsMenuItem, ViewExplorerMenuItem } from '../menu-items';
 
 const METRICS_LOCATION = 'Account Options';
 

ui/components/multichain/account-list-item/account-list-item.js

@@ -6,7 +6,8 @@ import { useSelector } from 'react-redux';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { shortenAddress } from '../../../helpers/utils/util';
 
-import { AccountListItemMenu, AvatarGroup } from '..';
+import { AccountListItemMenu } from '../account-list-item-menu';
+import { AvatarGroup } from '../avatar-group';
 import { ConnectedAccountsMenu } from '../connected-accounts-menu';
 import {
   AvatarAccount,

ui/components/multichain/account-list-menu/account-list-menu.tsx

@@ -43,12 +43,9 @@ import {
 import { ModalContent } from '../../component-library/modal-content/deprecated';
 import { ModalHeader } from '../../component-library/modal-header';
 import { TextFieldSearch } from '../../component-library/text-field-search/deprecated';
-import {
-  AccountListItem,
-  AccountListItemMenuTypes,
-  CreateEthAccount,
-  ImportAccount,
-} from '..';
+import { AccountListItem } from '../account-list-item';
+import { AccountListItemMenuTypes } from '../account-list-item/account-list-item.types';
+
 import {
   AlignItems,
   BlockSize,
@@ -130,6 +127,8 @@ import {
   ACCOUNT_OVERVIEW_TAB_KEY_TO_TRACE_NAME_MAP,
   AccountOverviewTabKey,
 } from '../../../../shared/constants/app-state';
+import { CreateEthAccount } from '../create-eth-account';
+import { ImportAccount } from '../import-account';
 ///: BEGIN:ONLY_INCLUDE_IF(solana)
 import {
   SOLANA_WALLET_NAME,

ui/components/multichain/account-list-menu/hidden-account-list.js

@@ -34,8 +34,10 @@ import {
   IconSize,
   Text,
 } from '../../component-library';
-import { AccountListItem } from '../account-list-item';
-import { AccountListItemMenuTypes } from '..';
+import {
+  AccountListItem,
+  AccountListItemMenuTypes,
+} from '../account-list-item';
 import { mergeAccounts } from './account-list-menu';
 
 export const HiddenAccountList = ({ onClose }) => {

ui/components/multichain/create-eth-account/create-eth-account.js

@@ -7,7 +7,7 @@ import {
   setAccountLabel,
   getNextAvailableAccountName as getNextAvailableAccountNameFromController,
 } from '../../../store/actions';
-import { CreateAccount } from '..';
+import { CreateAccount } from '../create-account';
 
 export const CreateEthAccount = ({ onActionComplete }) => {
   const dispatch = useDispatch();

ui/components/multichain/notification-detail-block-explorer-button/notification-detail-block-explorer-button.test.tsx

@@ -46,6 +46,16 @@ const mockNotification = {
   type: 'ERC20_RECEIVED',
 };
 
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+  return {
+    ...original,
+    useHistory: () => ({
+      push: jest.fn(),
+    }),
+  };
+});
+
 describe('NotificationDetailBlockExplorerButton', () => {
   it('renders correctly with a valid block explorer URL', () => {
     render(

ui/components/multichain/notification-detail-button/notification-detail-button.test.tsx

@@ -8,6 +8,16 @@ const { TRIGGER_TYPES } = NotificationServicesController.Constants;
 
 type Notification = NotificationServicesController.Types.INotification;
 
+jest.mock('react-router-dom', () => {
+  const original = jest.requireActual('react-router-dom');
+  return {
+    ...original,
+    useHistory: () => ({
+      push: jest.fn(),
+    }),
+  };
+});
+
 describe('NotificationDetailButton', () => {
   const defaultProps = {
     variant: ButtonVariant.Primary,

ui/components/multichain/notification-detail-button/notification-detail-button.tsx

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import { NotificationServicesController } from '@metamask/notification-services-controller';
 import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   MetaMetricsEventCategory,
@@ -12,8 +11,9 @@ import {
   IconName,
 } from '../../component-library';
 import { BlockSize } from '../../../helpers/constants/design-system';
-
-type Notification = NotificationServicesController.Types.INotification;
+import { TRIGGER_TYPES } from '../../../pages/notifications/notification-components';
+import useSnapNavigation from '../../../hooks/snaps/useSnapNavigation';
+import { type Notification } from '../../../pages/notifications/notification-components/types/notifications/notifications';
 
 type NotificationDetailButtonProps = {
   notification: Notification;
@@ -35,6 +35,16 @@ export const NotificationDetailButton = ({
   endIconName = true,
 }: NotificationDetailButtonProps) => {
   const trackEvent = useContext(MetaMetricsContext);
+  const { navigate } = useSnapNavigation();
+  const isMetaMaskUrl = href.startsWith('metamask:');
+
+  // this logic can be expanded once this detail button is used outside of the current use cases
+  const getClickedItem = () => {
+    if (notification.type === TRIGGER_TYPES.FEATURES_ANNOUNCEMENT) {
+      return 'block_explorer';
+    }
+    return isExternal ? 'external_link' : 'internal_link';
+  };
 
   const onClick = () => {
     trackEvent({
@@ -46,17 +56,21 @@ export const NotificationDetailButton = ({
         ...('chain_id' in notification && {
           chain_id: notification.chain_id,
         }),
-        clicked_item: 'block_explorer',
+        clicked_item: getClickedItem(),
       },
     });
+
+    if (notification.type === TRIGGER_TYPES.SNAP && isMetaMaskUrl) {
+      navigate(href);
+    }
   };
 
   return (
     <Button
       key={id}
-      href={href}
+      href={!isMetaMaskUrl && href ? href : undefined}
       variant={variant}
-      externalLink={isExternal}
+      externalLink={!isMetaMaskUrl}
       size={ButtonSize.Lg}
       width={BlockSize.Full}
       endIconName={endIconName ? IconName.Arrow2UpRight : undefined}

ui/contexts/metamask-notifications/metamask-notifications.tsx

@@ -1,14 +1,12 @@
 import React, { createContext, useContext, useEffect, useMemo } from 'react';
 import { useSelector } from 'react-redux';
-import type { NotificationServicesController } from '@metamask/notification-services-controller';
 import { useListNotifications } from '../../hooks/metamask-notifications/useNotifications';
 import { useAccountSyncingEffect } from '../../hooks/metamask-notifications/useProfileSyncing';
 import { selectIsProfileSyncingEnabled } from '../../selectors/metamask-notifications/profile-syncing';
 import { selectIsMetamaskNotificationsEnabled } from '../../selectors/metamask-notifications/metamask-notifications';
 import { getUseExternalServices } from '../../selectors';
 import { getIsUnlocked } from '../../ducks/metamask/metamask';
-
-type Notification = NotificationServicesController.Types.INotification;
+import { type Notification } from '../../pages/notifications/notification-components/types/notifications/notifications';
 
 type MetamaskNotificationsContextType = {
   listNotifications: () => void;

ui/hooks/metamask-notifications/useNotifications.ts

@@ -1,20 +1,17 @@
 import { useState, useCallback } from 'react';
 import { useDispatch } from 'react-redux';
 import type { InternalAccount } from '@metamask/keyring-api';
-import type { NotificationServicesController } from '@metamask/notification-services-controller';
 import log from 'loglevel';
 
+import { type MarkAsReadNotificationsParam } from '@metamask/notification-services-controller/notification-services';
 import {
   createOnChainTriggers,
   fetchAndUpdateMetamaskNotifications,
   markMetamaskNotificationsAsRead,
   enableMetamaskNotifications,
   disableMetamaskNotifications,
 } from '../../store/actions';
-
-type Notification = NotificationServicesController.Types.INotification;
-type MarkAsReadNotificationsParam =
-  NotificationServicesController.Types.MarkAsReadNotificationsParam;
+import { type Notification } from '../../pages/notifications/notification-components/types/notifications/notifications';
 
 // Define KeyringType interface
 type KeyringType = {

ui/pages/confirmations/components/snap-account-success-message/SnapAccountSuccessMessage.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { Text } from '../../../../components/component-library';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { SnapAccountCard } from '../../../remove-snap-account';
+import { SnapAccountCard } from '../../../remove-snap-account/snap-account-card';
 
 const SnapAccountSuccessMessage = ({
   message,

ui/pages/notification-details/notification-details-body/notification-details-body.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import type { NotificationServicesController } from '@metamask/notification-services-controller';
 import { Box } from '../../../components/component-library';
 import {
   Display,
   FlexDirection,
 } from '../../../helpers/constants/design-system';
-import type { NotificationComponent } from '../../notifications/notification-components/types/notifications/notifications';
-
-type Notification = NotificationServicesController.Types.INotification;
+import {
+  Notification,
+  NotificationComponentType,
+  type NotificationComponent,
+} from '../../notifications/notification-components/types/notifications/notifications';
 
 type NotificationDetailsBodyProps = {
   body: NotificationComponent['details']['body'];
@@ -24,13 +25,13 @@ export const NotificationDetailsBody = ({
       flexDirection={FlexDirection.Column}
       padding={0}
     >
-      {body.type === 'body_feature_announcement' && (
+      {body.type === NotificationComponentType.AnnouncementBody && (
         <>
           <body.Image notification={notification} />
           <body.Description notification={notification} />
         </>
       )}
-      {body.type === 'body_onchain_notification' && (
+      {body.type === NotificationComponentType.OnChainBody && (
         <>
           {body.Image && <body.Image notification={notification} />}
           {body.From && <body.From notification={notification} />}
@@ -47,6 +48,9 @@ export const NotificationDetailsBody = ({
           {body.NetworkFee && <body.NetworkFee notification={notification} />}
         </>
       )}
+      {body.type === NotificationComponentType.SnapBody && (
+        <body.Content notification={notification} />
+      )}
     </Box>
   );
 };

ui/pages/notification-details/notification-details-footer/notification-details-footer.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import type { NotificationServicesController } from '@metamask/notification-services-controller';
 import { Box } from '../../../components/component-library';
 import {
   BlockSize,
   Display,
   FlexDirection,
   JustifyContent,
 } from '../../../helpers/constants/design-system';
-import type { NotificationComponent } from '../../notifications/notification-components/types/notifications/notifications';
-
-type Notification = NotificationServicesController.Types.INotification;
+import {
+  Notification,
+  NotificationComponentType,
+  type NotificationComponent,
+} from '../../notifications/notification-components/types/notifications/notifications';
 
 type NotificationDetailsFooterProps = {
   footer: NotificationComponent['footer'];
@@ -29,21 +30,14 @@ export const NotificationDetailsFooter = ({
       padding={4}
       gap={4}
     >
-      {footer.type === 'footer_onchain_notification' && (
-        <>
-          <footer.ScanLink notification={notification} />
-        </>
+      {footer.type === NotificationComponentType.OnChainFooter && (
+        <footer.ScanLink notification={notification} />
+      )}
+      {footer.type === NotificationComponentType.AnnouncementFooter && (
+        <footer.ExtensionLink notification={notification} />
       )}
-      {footer.type === 'footer_feature_announcement' && (
-        <Box
-          display={Display.Flex}
-          gap={4}
-          flexDirection={FlexDirection.Row}
-          width={BlockSize.Full}
-        >
-          <footer.ExternalLink notification={notification} />
-          <footer.ExtensionLink notification={notification} />
-        </Box>
+      {footer.type === NotificationComponentType.SnapFooter && (
+        <footer.Link notification={notification} />
       )}
     </Box>
   );