From 4a134df1548ea40bb0630f6da7422c014b0223e9 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Sat, 14 Dec 2024 13:10:16 -0500
Subject: [PATCH 01/16] update notification example snap and test-snaps

---
 .../notifications/src/{index.ts => index.tsx} | 23 +++++++++++++++++++
 .../snaps/notifications/Notifications.tsx     |  9 ++++++--
 2 files changed, 30 insertions(+), 2 deletions(-)
 rename packages/examples/packages/notifications/src/{index.ts => index.tsx} (70%)

diff --git a/packages/examples/packages/notifications/src/index.ts b/packages/examples/packages/notifications/src/index.tsx
similarity index 70%
rename from packages/examples/packages/notifications/src/index.ts
rename to packages/examples/packages/notifications/src/index.tsx
index 03cb37a4be..399b562a9a 100644
--- a/packages/examples/packages/notifications/src/index.ts
+++ b/packages/examples/packages/notifications/src/index.tsx
@@ -1,5 +1,6 @@
 import { MethodNotFoundError, NotificationType } from '@metamask/snaps-sdk';
 import type { OnRpcRequestHandler } from '@metamask/snaps-sdk';
+import { Box, Row, Address } from '@metamask/snaps-sdk/jsx';
 
 /**
  * Handle incoming JSON-RPC requests from the dapp, sent through the
@@ -39,6 +40,28 @@ export const onRpcRequest: OnRpcRequestHandler = async ({ request }) => {
         },
       });
 
+    case 'inApp-expanded':
+      return await snap.request({
+        method: 'snap_notify',
+        params: {
+          type: NotificationType.InApp,
+          message: 'Hello from MetaMask, click here for an expanded view!',
+          title: 'Hello World!',
+          content: (
+            <Box>
+              <Row
+                label="From"
+                variant="warning"
+                tooltip="This address has been deemed dangerous."
+              >
+                <Address address="0x1234567890123456789012345678901234567890" />
+              </Row>
+            </Box>
+          ),
+          footerLink: { text: 'Go home', href: 'metamask://client/' },
+        },
+      });
+
     default:
       // eslint-disable-next-line @typescript-eslint/no-throw-literal
       throw new MethodNotFoundError({ method: request.method });
diff --git a/packages/test-snaps/src/features/snaps/notifications/Notifications.tsx b/packages/test-snaps/src/features/snaps/notifications/Notifications.tsx
index 3fcd0a8938..4d3aa343b6 100644
--- a/packages/test-snaps/src/features/snaps/notifications/Notifications.tsx
+++ b/packages/test-snaps/src/features/snaps/notifications/Notifications.tsx
@@ -31,7 +31,6 @@ export const Notifications: FunctionComponent = () => {
     >
       <ButtonGroup>
         <Button
-          variant="primary"
           id="sendInAppNotification"
           disabled={isLoading}
           onClick={handleClick('inApp')}
@@ -39,7 +38,13 @@ export const Notifications: FunctionComponent = () => {
           Send In-App Notification
         </Button>
         <Button
-          variant="secondary"
+          id="sendExpandedViewNotification"
+          disabled={isLoading}
+          onClick={handleClick('inApp-extended')}
+        >
+          Send In-App Notification With Expanded View
+        </Button>
+        <Button
           id="sendNativeNotification"
           disabled={isLoading}
           onClick={handleClick('native')}

From eb9a0aabc05cbd8b193b9cd9940e05b4630e2e7c Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 16 Dec 2024 08:43:56 -0500
Subject: [PATCH 02/16] update struct

---
 packages/snaps-simulation/src/structs.ts | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/snaps-simulation/src/structs.ts b/packages/snaps-simulation/src/structs.ts
index de055ed215..29ee43b4d8 100644
--- a/packages/snaps-simulation/src/structs.ts
+++ b/packages/snaps-simulation/src/structs.ts
@@ -1,4 +1,8 @@
-import { NotificationType, enumValue } from '@metamask/snaps-sdk';
+import {
+  ComponentOrElementStruct,
+  NotificationType,
+  enumValue,
+} from '@metamask/snaps-sdk';
 import { JSXElementStruct } from '@metamask/snaps-sdk/jsx';
 import {
   array,
@@ -255,6 +259,14 @@ export const SnapResponseWithoutInterfaceStruct = object({
         enumValue(NotificationType.InApp),
         enumValue(NotificationType.Native),
       ]),
+      title: optional(string()),
+      content: optional(ComponentOrElementStruct),
+      footerLink: optional(
+        object({
+          href: string(),
+          text: string(),
+        }),
+      ),
     }),
   ),
 });

From c2d9d0621829fdc7ea253ddc37a6513386fa7ac0 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 16 Dec 2024 08:45:45 -0500
Subject: [PATCH 03/16] update notification validator

---
 packages/snaps-jest/src/matchers.ts | 35 ++++++++++++++++++++++++-----
 1 file changed, 29 insertions(+), 6 deletions(-)

diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index b4d8898430..06a218a31d 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -164,15 +164,38 @@ export const toRespondWithError: MatcherFunction<[expected: Json]> = function (
  */
 export const toSendNotification: MatcherFunction<
   [expected: string, type?: EnumToUnion<NotificationType> | undefined]
-> = function (actual, expected, type) {
+> = function (
+  actual,
+  expectedMessage,
+  expectedType,
+  expectedTitle,
+  expectedContent,
+  expectedFooterLink,
+) {
   assertActualIsSnapResponse(actual, 'toSendNotification');
 
   const { notifications } = actual;
-  const pass = notifications.some(
-    (notification) =>
-      this.equals(notification.message, expected) &&
-      (type === undefined || notification.type === type),
-  );
+  const pass = notifications.some((notification) => {
+    const { type, message, title, content, footerLink } = notification;
+    const hasExpectedTitle = expectedTitle !== undefined;
+    const hasExpectedContent = expectedContent !== undefined;
+    const hasExpectedFooterLink = expectedFooterLink !== undefined;
+    if (type !== undefined && type !== expectedType) {
+      return false;
+    }
+    if (!this.equals(message, expectedMessage)) {
+      return false;
+    }
+    if (hasExpectedTitle && !this.equals(title, expectedTitle)) {
+      return false;
+    }
+    if (hasExpectedContent && !this.equals(content, expectedContent)) {
+      return false;
+    }
+    if (hasExpectedFooterLink && !this.equals(footerLink, expectedFooterLink)) {
+      return false;
+    }
+  });
 
   const message = pass
     ? () =>

From 0297ea92aed997ddba934a192fb3f15e51320592 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Tue, 17 Dec 2024 17:17:08 -0500
Subject: [PATCH 04/16] add snaps jest support for expanded notifications,
 update example snap

---
 .../packages/notifications/snap.config.ts     |  2 +-
 .../packages/notifications/snap.manifest.json |  2 +-
 .../src/{index.test.ts => index.test.tsx}     | 19 +++++
 packages/snaps-jest/src/global.ts             |  2 +
 packages/snaps-jest/src/matchers.ts           | 76 +++++++++++++------
 .../src/methods/hooks/notifications.ts        | 23 +++++-
 .../src/store/notifications.ts                |  6 ++
 packages/snaps-simulation/src/structs.ts      |  8 +-
 packages/snaps-simulation/src/types.ts        |  3 +
 9 files changed, 109 insertions(+), 32 deletions(-)
 rename packages/examples/packages/notifications/src/{index.test.ts => index.test.tsx} (73%)

diff --git a/packages/examples/packages/notifications/snap.config.ts b/packages/examples/packages/notifications/snap.config.ts
index fdc400ca35..a48618dfa8 100644
--- a/packages/examples/packages/notifications/snap.config.ts
+++ b/packages/examples/packages/notifications/snap.config.ts
@@ -1,7 +1,7 @@
 import type { SnapConfig } from '@metamask/snaps-cli';
 
 const config: SnapConfig = {
-  input: './src/index.ts',
+  input: './src/index.tsx',
   server: {
     port: 8016,
   },
diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json
index 568d3165ea..80ee488bb4 100644
--- a/packages/examples/packages/notifications/snap.manifest.json
+++ b/packages/examples/packages/notifications/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "M4hanawafBYKNQW9wA4Cefir4vyqGOEo8Y4dQznfyJg=",
+    "shasum": "QP2moPTr2ZQN3BusYl7SkJqrZJ8AO0HsvjT+sV8aILA=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",
diff --git a/packages/examples/packages/notifications/src/index.test.ts b/packages/examples/packages/notifications/src/index.test.tsx
similarity index 73%
rename from packages/examples/packages/notifications/src/index.test.ts
rename to packages/examples/packages/notifications/src/index.test.tsx
index 950bdddb79..f4ad32028d 100644
--- a/packages/examples/packages/notifications/src/index.test.ts
+++ b/packages/examples/packages/notifications/src/index.test.tsx
@@ -38,6 +38,25 @@ describe('onRpcRequest', () => {
     });
   });
 
+  describe('inApp-expanded', () => {
+    it('sends an expanded view notification', async () => {
+      const { request } = await installSnap();
+
+      const response = await request({
+        method: 'inApp-expanded',
+        origin: 'Jest',
+      });
+
+      expect(response).toRespondWith(null);
+      expect(response).toSendNotification(
+        'Hello from MetaMask, click here for an expanded view!',
+        NotificationType.InApp,
+        'Hello World!',
+        { text: 'Go home', href: 'metamask://client/' },
+      );
+    });
+  });
+
   describe('native', () => {
     it('sends a native notification', async () => {
       const { request } = await installSnap();
diff --git a/packages/snaps-jest/src/global.ts b/packages/snaps-jest/src/global.ts
index 288f675efa..99bfec2cfd 100644
--- a/packages/snaps-jest/src/global.ts
+++ b/packages/snaps-jest/src/global.ts
@@ -52,6 +52,8 @@ interface SnapsMatchers {
   toSendNotification(
     message: string,
     type?: EnumToUnion<NotificationType>,
+    title?: string,
+    footerLink?: { text: string; href: string },
   ): void;
 
   /**
diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 06a218a31d..7f83aac752 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -6,11 +6,11 @@
 import type { MatcherFunction } from '@jest/expect';
 import { expect } from '@jest/globals';
 import type {
-  NotificationType,
   EnumToUnion,
   ComponentOrElement,
   Component,
 } from '@metamask/snaps-sdk';
+import { NotificationType } from '@metamask/snaps-sdk';
 import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { SnapResponse } from '@metamask/snaps-simulation';
@@ -158,55 +158,87 @@ export const toRespondWithError: MatcherFunction<[expected: Json]> = function (
  * is intended to be used with the `expect` global.
  *
  * @param actual - The actual response.
- * @param expected - The expected notification message.
- * @param type - The expected notification type.
+ * @param expectedMessage - The expected notification message.
+ * @param expectedType - The expected notification type.
+ * @param expectedTitle - The expected notification title.
+ * @param expectedFooterLink - The expected footer link object.
  * @returns The status and message.
  */
 export const toSendNotification: MatcherFunction<
-  [expected: string, type?: EnumToUnion<NotificationType> | undefined]
+  [
+    expectedMessage: string,
+    expectedType?: EnumToUnion<NotificationType> | undefined,
+    expectedTitle?: string | undefined,
+    expectedFooterLink?: { text: string; href: string } | undefined,
+  ]
 > = function (
   actual,
   expectedMessage,
   expectedType,
   expectedTitle,
-  expectedContent,
   expectedFooterLink,
 ) {
   assertActualIsSnapResponse(actual, 'toSendNotification');
 
-  const { notifications } = actual;
-  const pass = notifications.some((notification) => {
+  const notificationValidator = (
+    notification: SnapResponse['notifications'][number],
+  ) => {
     const { type, message, title, content, footerLink } = notification;
+    const hasExpectedType = expectedType !== undefined;
     const hasExpectedTitle = expectedTitle !== undefined;
-    const hasExpectedContent = expectedContent !== undefined;
     const hasExpectedFooterLink = expectedFooterLink !== undefined;
-    if (type !== undefined && type !== expectedType) {
-      return false;
-    }
+
     if (!this.equals(message, expectedMessage)) {
       return false;
     }
-    if (hasExpectedTitle && !this.equals(title, expectedTitle)) {
-      return false;
-    }
-    if (hasExpectedContent && !this.equals(content, expectedContent)) {
+
+    if (hasExpectedType && type !== expectedType) {
       return false;
     }
-    if (hasExpectedFooterLink && !this.equals(footerLink, expectedFooterLink)) {
-      return false;
+
+    if (type === NotificationType.InApp) {
+      if (hasExpectedTitle && !this.equals(title, expectedTitle)) {
+        return false;
+      }
+
+      if (content !== undefined && typeof content !== 'string') {
+        return false;
+      }
+
+      if (
+        hasExpectedFooterLink &&
+        !this.equals(footerLink, expectedFooterLink)
+      ) {
+        return false;
+      }
     }
-  });
+
+    return true;
+  };
+
+  const { notifications } = actual;
+  const pass = notifications.some(notificationValidator);
 
   const message = pass
     ? () =>
         `${this.utils.matcherHint('.not.toSendNotification')}\n\n` +
-        `Expected: ${this.utils.printExpected(expected)}\n` +
-        `Expected type: ${this.utils.printExpected(type)}\n` +
+        `Expected message: ${this.utils.printExpected(expectedMessage)}\n` +
+        `Expected type: ${this.utils.printExpected(expectedType)}\n` +
+        `Expected title: ${this.utils.printExpected(expectedTitle)}\n` +
+        `Expected footer link: ${this.utils.printExpected(
+          expectedFooterLink,
+        )}\n` +
+        `Expected content id type: ${this.utils.printExpected('String')}\n` +
         `Received: ${this.utils.printReceived(notifications)}`
     : () =>
         `${this.utils.matcherHint('.toSendNotification')}\n\n` +
-        `Expected: ${this.utils.printExpected(expected)}\n` +
-        `Expected type: ${this.utils.printExpected(type)}\n` +
+        `Expected message: ${this.utils.printExpected(expectedMessage)}\n` +
+        `Expected type: ${this.utils.printExpected(expectedType)}\n` +
+        `Expected title: ${this.utils.printExpected(expectedTitle)}\n` +
+        `Expected footer link: ${this.utils.printExpected(
+          expectedFooterLink,
+        )}\n` +
+        `Expected content id type: ${this.utils.printExpected('String')}\n` +
         `Received: ${this.utils.printReceived(notifications)}`;
 
   return { message, pass };
diff --git a/packages/snaps-simulation/src/methods/hooks/notifications.ts b/packages/snaps-simulation/src/methods/hooks/notifications.ts
index be6960148b..17d051c5da 100644
--- a/packages/snaps-simulation/src/methods/hooks/notifications.ts
+++ b/packages/snaps-simulation/src/methods/hooks/notifications.ts
@@ -52,15 +52,34 @@ export function getShowNativeNotificationImplementation(
  * @param _snapId - The ID of the Snap that created the notification.
  * @param options - The notification options.
  * @param options.message - The message to show in the notification.
+ * @param options.title - The title to show in the notification.
+ * @param options.content - The JSX content to show in the notification.
+ * @param options.footerLink - The footer to show in the notification.
  * @yields Adds the notification to the store.
  * @returns `null`.
  */
 function* showInAppNotificationImplementation(
   _snapId: string,
-  { message }: NotifyParams,
+  {
+    message,
+    title,
+    content,
+    footerLink,
+  }: NotifyParams & {
+    title?: string;
+    content?: string;
+    footerLink?: { text: string; href: string };
+  },
 ): SagaIterator<null> {
   yield put(
-    addNotification({ id: nanoid(), type: NotificationType.InApp, message }),
+    addNotification({
+      id: nanoid(),
+      type: NotificationType.InApp,
+      message,
+      title,
+      content,
+      footerLink,
+    }),
   );
 
   return null;
diff --git a/packages/snaps-simulation/src/store/notifications.ts b/packages/snaps-simulation/src/store/notifications.ts
index bf14b8251b..bf8ac96061 100644
--- a/packages/snaps-simulation/src/store/notifications.ts
+++ b/packages/snaps-simulation/src/store/notifications.ts
@@ -10,11 +10,17 @@ import type { ApplicationState } from './store';
  * @property id - A unique ID for the notification.
  * @property message - The notification message.
  * @property type - The notification type.
+ * @property title - The notification title (expanded view).
+ * @property content - The notification JSX content (expanded view).
+ * @property footerLink - The notification footer (expanded view).
  */
 export type Notification = {
   id: string;
   message: string;
   type: NotificationType;
+  title?: string;
+  content?: string;
+  footerLink?: { text: string; href: string };
 };
 
 /**
diff --git a/packages/snaps-simulation/src/structs.ts b/packages/snaps-simulation/src/structs.ts
index 29ee43b4d8..6e90495006 100644
--- a/packages/snaps-simulation/src/structs.ts
+++ b/packages/snaps-simulation/src/structs.ts
@@ -1,8 +1,4 @@
-import {
-  ComponentOrElementStruct,
-  NotificationType,
-  enumValue,
-} from '@metamask/snaps-sdk';
+import { NotificationType, enumValue } from '@metamask/snaps-sdk';
 import { JSXElementStruct } from '@metamask/snaps-sdk/jsx';
 import {
   array,
@@ -260,7 +256,7 @@ export const SnapResponseWithoutInterfaceStruct = object({
         enumValue(NotificationType.Native),
       ]),
       title: optional(string()),
-      content: optional(ComponentOrElementStruct),
+      content: optional(string()),
       footerLink: optional(
         object({
           href: string(),
diff --git a/packages/snaps-simulation/src/types.ts b/packages/snaps-simulation/src/types.ts
index 21bc37c7ea..c63ce3a629 100644
--- a/packages/snaps-simulation/src/types.ts
+++ b/packages/snaps-simulation/src/types.ts
@@ -501,6 +501,9 @@ export type SnapResponseWithInterface = {
     id: string;
     message: string;
     type: EnumToUnion<NotificationType>;
+    title?: string | undefined;
+    content?: string;
+    footerLink?: { text: string; href: string } | undefined;
   }[];
   getInterface(): SnapHandlerInterface;
 };

From 2320d5c6e10f529b0c65ffcb775e78ad1107a01e Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Tue, 17 Dec 2024 18:34:40 -0500
Subject: [PATCH 05/16] update matchers & test

---
 packages/snaps-jest/src/matchers.test.tsx | 107 +++++++++++++++++++++-
 packages/snaps-jest/src/matchers.ts       |   2 +-
 2 files changed, 103 insertions(+), 6 deletions(-)

diff --git a/packages/snaps-jest/src/matchers.test.tsx b/packages/snaps-jest/src/matchers.test.tsx
index 6adecea449..89bd27e5aa 100644
--- a/packages/snaps-jest/src/matchers.test.tsx
+++ b/packages/snaps-jest/src/matchers.test.tsx
@@ -1,5 +1,5 @@
 import { expect } from '@jest/globals';
-import { panel, text } from '@metamask/snaps-sdk';
+import { NotificationType, panel, text } from '@metamask/snaps-sdk';
 import { Box, Text } from '@metamask/snaps-sdk/jsx';
 
 import {
@@ -160,13 +160,13 @@ describe('toRespondWithError', () => {
 });
 
 describe('toSendNotification', () => {
-  it('passes when the notification is correct', () => {
+  it('passes when a notification is correct', () => {
     expect(
       getMockResponse({
         notifications: [
           {
             id: '1',
-            type: 'native',
+            type: NotificationType.Native,
             message: 'foo',
           },
         ],
@@ -174,13 +174,49 @@ describe('toSendNotification', () => {
     ).toSendNotification('foo');
   });
 
+  it('passes when an expanded view notification is correct', () => {
+    expect(
+      getMockResponse({
+        notifications: [
+          {
+            id: '1',
+            type: NotificationType.InApp,
+            message: 'foo',
+            title: 'bar',
+            content: 'abcd',
+            footerLink: { text: 'foo', href: 'https://metamask.io' },
+          },
+        ],
+      }),
+    ).toSendNotification('foo', 'inApp', 'bar', {
+      text: 'foo',
+      href: 'https://metamask.io',
+    });
+  });
+
+  it('passes when an expanded view notification without footer is correct', () => {
+    expect(
+      getMockResponse({
+        notifications: [
+          {
+            id: '1',
+            type: NotificationType.InApp,
+            message: 'foo',
+            title: 'bar',
+            content: 'abcd',
+          },
+        ],
+      }),
+    ).toSendNotification('foo', 'inApp', 'bar');
+  });
+
   it('passes when the notification is correct with a type', () => {
     expect(
       getMockResponse({
         notifications: [
           {
             id: '1',
-            type: 'native',
+            type: NotificationType.Native,
             message: 'foo',
           },
         ],
@@ -188,7 +224,7 @@ describe('toSendNotification', () => {
     ).toSendNotification('foo', 'native');
   });
 
-  it('fails when the notification is incorrect', () => {
+  it('fails when a notification is incorrect', () => {
     expect(() =>
       expect(
         getMockResponse({
@@ -204,6 +240,67 @@ describe('toSendNotification', () => {
     ).toThrow('Received:');
   });
 
+  it("fails when an expanded view notification's title is incorrect", () => {
+    expect(() =>
+      expect(
+        getMockResponse({
+          notifications: [
+            {
+              id: '1',
+              type: 'inApp',
+              message: 'foo',
+              title: 'bar',
+              content: 'abcd',
+            },
+          ],
+        }),
+      ).toSendNotification('foo', 'inApp', 'baz'),
+    ).toThrow('Received:');
+  });
+
+  it("fails when an expanded view notification's footerLink is incorrect", () => {
+    expect(() =>
+      expect(
+        getMockResponse({
+          notifications: [
+            {
+              id: '1',
+              type: 'inApp',
+              message: 'foo',
+              title: 'bar',
+              content: 'abcd',
+              footerLink: { text: 'Leave site', href: 'https://metamask.io' },
+            },
+          ],
+        }),
+      ).toSendNotification('foo', 'inApp', 'bar', {
+        text: 'Go back',
+        href: 'metamask://client/',
+      }),
+    ).toThrow('Received:');
+  });
+
+  it("fails when an expanded view notification's content is missing", () => {
+    expect(() =>
+      expect(
+        getMockResponse({
+          notifications: [
+            {
+              id: '1',
+              type: 'inApp',
+              message: 'foo',
+              title: 'bar',
+              footerLink: { text: 'Leave site', href: 'https://metamask.io' },
+            },
+          ],
+        }),
+      ).toSendNotification('foo', 'inApp', 'bar', {
+        text: 'Leave site',
+        href: 'https://metamask.io',
+      }),
+    ).toThrow('Received:');
+  });
+
   it('fails when the notification is incorrect with a type', () => {
     expect(() =>
       expect(
diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 7f83aac752..920d1dfaf4 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -201,7 +201,7 @@ export const toSendNotification: MatcherFunction<
         return false;
       }
 
-      if (content !== undefined && typeof content !== 'string') {
+      if (title && !content) {
         return false;
       }
 

From 5038962abe8b99509454fe7e7aad9eafaf63261c Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Tue, 17 Dec 2024 18:43:50 -0500
Subject: [PATCH 06/16] fix test

---
 .../snaps-simulation/src/methods/hooks/notifications.test.ts   | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/snaps-simulation/src/methods/hooks/notifications.test.ts b/packages/snaps-simulation/src/methods/hooks/notifications.test.ts
index 09c430c4a2..3f268e310d 100644
--- a/packages/snaps-simulation/src/methods/hooks/notifications.test.ts
+++ b/packages/snaps-simulation/src/methods/hooks/notifications.test.ts
@@ -46,6 +46,9 @@ describe('getShowInAppNotificationImplementation', () => {
         id: expect.any(String),
         type: NotificationType.InApp,
         message: 'message',
+        content: undefined,
+        title: undefined,
+        footerLink: undefined,
       },
     ]);
   });

From 7b415bce42b2d55857de2dc8ef28e7bbf269c966 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Tue, 17 Dec 2024 18:51:29 -0500
Subject: [PATCH 07/16] update manifest

---
 packages/examples/packages/notifications/snap.manifest.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/examples/packages/notifications/snap.manifest.json b/packages/examples/packages/notifications/snap.manifest.json
index 8728ee3767..30f344f95f 100644
--- a/packages/examples/packages/notifications/snap.manifest.json
+++ b/packages/examples/packages/notifications/snap.manifest.json
@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "QP2moPTr2ZQN3BusYl7SkJqrZJ8AO0HsvjT+sV8aILA=",
+    "shasum": "Eb+BA76BVAepPArIg/rG5eUOOHDm4mbiHE/GzpFOeHo=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

From 2cb571fd0f7c0ae28446286cd74924cfdefc957e Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Wed, 18 Dec 2024 16:31:05 -0500
Subject: [PATCH 08/16] fix matchers to also include param for content

---
 .../packages/notifications/src/index.test.tsx | 10 +++
 .../packages/notifications/tsconfig.json      |  5 +-
 packages/snaps-jest/src/global.ts             |  2 +
 packages/snaps-jest/src/matchers.ts           | 82 +++++++++++++------
 packages/snaps-simulation/src/interface.ts    |  9 +-
 .../src/methods/hooks/notifications.ts        |  6 +-
 packages/snaps-simulation/src/request.ts      |  3 +
 packages/snaps-simulation/src/store/ui.ts     |  2 +-
 8 files changed, 88 insertions(+), 31 deletions(-)

diff --git a/packages/examples/packages/notifications/src/index.test.tsx b/packages/examples/packages/notifications/src/index.test.tsx
index f4ad32028d..d796688dda 100644
--- a/packages/examples/packages/notifications/src/index.test.tsx
+++ b/packages/examples/packages/notifications/src/index.test.tsx
@@ -1,6 +1,7 @@
 import { expect } from '@jest/globals';
 import { installSnap } from '@metamask/snaps-jest';
 import { NotificationType } from '@metamask/snaps-sdk';
+import { Address, Box, Row } from '@metamask/snaps-sdk/jsx';
 
 describe('onRpcRequest', () => {
   it('throws an error if the requested method does not exist', async () => {
@@ -52,6 +53,15 @@ describe('onRpcRequest', () => {
         'Hello from MetaMask, click here for an expanded view!',
         NotificationType.InApp,
         'Hello World!',
+        <Box>
+          <Row
+            label="From"
+            variant="warning"
+            tooltip="This address has been deemed dangerous."
+          >
+            <Address address="0x1234567890123456789012345678901234567890" />
+          </Row>
+        </Box>,
         { text: 'Go home', href: 'metamask://client/' },
       );
     });
diff --git a/packages/examples/packages/notifications/tsconfig.json b/packages/examples/packages/notifications/tsconfig.json
index 17a40a6a74..a366eceea4 100644
--- a/packages/examples/packages/notifications/tsconfig.json
+++ b/packages/examples/packages/notifications/tsconfig.json
@@ -1,8 +1,9 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "composite": false,
-    "baseUrl": "./"
+    "baseUrl": "./",
+    "jsx": "react-jsxdev",
+    "composite": false
   },
   "include": ["src", "snap.config.ts"]
 }
diff --git a/packages/snaps-jest/src/global.ts b/packages/snaps-jest/src/global.ts
index 99bfec2cfd..d28e596773 100644
--- a/packages/snaps-jest/src/global.ts
+++ b/packages/snaps-jest/src/global.ts
@@ -5,6 +5,7 @@ import type {
   NotificationType,
   ComponentOrElement,
 } from '@metamask/snaps-sdk';
+import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 
 interface SnapsMatchers {
   /**
@@ -53,6 +54,7 @@ interface SnapsMatchers {
     message: string,
     type?: EnumToUnion<NotificationType>,
     title?: string,
+    content?: JSXElement,
     footerLink?: { text: string; href: string },
   ): void;
 
diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 920d1dfaf4..204f2b7585 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -13,7 +13,7 @@ import type {
 import { NotificationType } from '@metamask/snaps-sdk';
 import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
-import type { SnapResponse } from '@metamask/snaps-simulation';
+import type { SnapInterface, SnapResponse } from '@metamask/snaps-simulation';
 import {
   InterfaceStruct,
   SnapResponseStruct,
@@ -161,6 +161,7 @@ export const toRespondWithError: MatcherFunction<[expected: Json]> = function (
  * @param expectedMessage - The expected notification message.
  * @param expectedType - The expected notification type.
  * @param expectedTitle - The expected notification title.
+ * @param expectedContent - The expected notification JSX content.
  * @param expectedFooterLink - The expected footer link object.
  * @returns The status and message.
  */
@@ -169,24 +170,35 @@ export const toSendNotification: MatcherFunction<
     expectedMessage: string,
     expectedType?: EnumToUnion<NotificationType> | undefined,
     expectedTitle?: string | undefined,
+    expectedContent?: ComponentOrElement,
     expectedFooterLink?: { text: string; href: string } | undefined,
   ]
-> = function (
+> = async function (
   actual,
   expectedMessage,
   expectedType,
   expectedTitle,
+  expectedContent,
   expectedFooterLink,
 ) {
   assertActualIsSnapResponse(actual, 'toSendNotification');
 
-  const notificationValidator = (
+  const { notifications } = actual;
+  let jsxContent: ComponentOrElement;
+
+  if (hasProperty(actual, 'getInterface')) {
+    jsxContent = (await (actual.getInterface as () => Promise<SnapInterface>)())
+      .content;
+  }
+
+  const notificationValidator = async (
     notification: SnapResponse['notifications'][number],
   ) => {
-    const { type, message, title, content, footerLink } = notification;
+    const { type, message, title, footerLink } = notification;
     const hasExpectedType = expectedType !== undefined;
     const hasExpectedTitle = expectedTitle !== undefined;
     const hasExpectedFooterLink = expectedFooterLink !== undefined;
+    const hasContent = expectedContent !== undefined;
 
     if (!this.equals(message, expectedMessage)) {
       return false;
@@ -201,7 +213,7 @@ export const toSendNotification: MatcherFunction<
         return false;
       }
 
-      if (title && !content) {
+      if (hasContent && !this.equals(jsxContent, expectedContent)) {
         return false;
       }
 
@@ -216,30 +228,48 @@ export const toSendNotification: MatcherFunction<
     return true;
   };
 
-  const { notifications } = actual;
   const pass = notifications.some(notificationValidator);
 
-  const message = pass
-    ? () =>
-        `${this.utils.matcherHint('.not.toSendNotification')}\n\n` +
-        `Expected message: ${this.utils.printExpected(expectedMessage)}\n` +
-        `Expected type: ${this.utils.printExpected(expectedType)}\n` +
-        `Expected title: ${this.utils.printExpected(expectedTitle)}\n` +
-        `Expected footer link: ${this.utils.printExpected(
-          expectedFooterLink,
-        )}\n` +
-        `Expected content id type: ${this.utils.printExpected('String')}\n` +
-        `Received: ${this.utils.printReceived(notifications)}`
-    : () =>
-        `${this.utils.matcherHint('.toSendNotification')}\n\n` +
-        `Expected message: ${this.utils.printExpected(expectedMessage)}\n` +
-        `Expected type: ${this.utils.printExpected(expectedType)}\n` +
-        `Expected title: ${this.utils.printExpected(expectedTitle)}\n` +
-        `Expected footer link: ${this.utils.printExpected(
+  const transformedNotifications = notifications.map((notification) => {
+    return {
+      ...notification,
+      content: jsxContent,
+    };
+  });
+
+  const message = () => {
+    let testMessage = pass
+      ? `${this.utils.matcherHint('.not.toSendNotification')}\n\n`
+      : `${this.utils.matcherHint('.toSendNotification')}\n\n`;
+
+    testMessage += `Expected message: ${this.utils.printExpected(
+      expectedMessage,
+    )}\n`;
+
+    testMessage += expectedType
+      ? `Expected type: ${this.utils.printExpected(expectedType)}\n`
+      : ``;
+
+    testMessage += expectedTitle
+      ? `Expected type: ${this.utils.printExpected(expectedType)}\n`
+      : ``;
+
+    testMessage += expectedContent
+      ? `Expected content: ${this.utils.printExpected(jsxContent)}\n`
+      : ``;
+
+    testMessage += expectedFooterLink
+      ? `Expected footer link: ${this.utils.printExpected(
           expectedFooterLink,
-        )}\n` +
-        `Expected content id type: ${this.utils.printExpected('String')}\n` +
-        `Received: ${this.utils.printReceived(notifications)}`;
+        )}\n`
+      : ``;
+
+    testMessage += `Received: ${this.utils.printReceived(
+      transformedNotifications,
+    )}`;
+
+    return testMessage;
+  };
 
   return { message, pass };
 };
diff --git a/packages/snaps-simulation/src/interface.ts b/packages/snaps-simulation/src/interface.ts
index 1c9aee7c28..d3c4872f56 100644
--- a/packages/snaps-simulation/src/interface.ts
+++ b/packages/snaps-simulation/src/interface.ts
@@ -51,7 +51,7 @@ const MAX_FILE_SIZE = 10_000_000; // 10 MB
  */
 export function getInterfaceResponse(
   runSaga: RunSagaFunction,
-  type: DialogApprovalTypes[DialogType | 'default'],
+  type: DialogApprovalTypes[DialogType | 'default'] | 'Notification',
   content: JSXElement,
   interfaceActions: SnapInterfaceActions,
 ): SnapInterface {
@@ -115,6 +115,13 @@ export function getInterfaceResponse(
       };
     }
 
+    case 'Notification': {
+      return {
+        ...interfaceActions,
+        content,
+      };
+    }
+
     default:
       throw new Error(`Unknown or unsupported dialog type: "${String(type)}".`);
   }
diff --git a/packages/snaps-simulation/src/methods/hooks/notifications.ts b/packages/snaps-simulation/src/methods/hooks/notifications.ts
index 17d051c5da..c09aba542a 100644
--- a/packages/snaps-simulation/src/methods/hooks/notifications.ts
+++ b/packages/snaps-simulation/src/methods/hooks/notifications.ts
@@ -5,7 +5,7 @@ import type { SagaIterator } from 'redux-saga';
 import { put } from 'redux-saga/effects';
 
 import type { RunSagaFunction } from '../../store';
-import { addNotification } from '../../store';
+import { addNotification, setInterface } from '../../store';
 
 /**
  * Show a native notification to the user.
@@ -71,6 +71,10 @@ function* showInAppNotificationImplementation(
     footerLink?: { text: string; href: string };
   },
 ): SagaIterator<null> {
+  if (content) {
+    yield put(setInterface({ type: 'Notification', id: content }));
+  }
+
   yield put(
     addNotification({
       id: nanoid(),
diff --git a/packages/snaps-simulation/src/request.ts b/packages/snaps-simulation/src/request.ts
index 1436fbcfe6..15b15997fc 100644
--- a/packages/snaps-simulation/src/request.ts
+++ b/packages/snaps-simulation/src/request.ts
@@ -172,6 +172,9 @@ export async function getInterfaceFromResult(
   }
 
   if (isPlainObject(result) && hasProperty(result, 'content')) {
+    if (typeof result.content === 'string') {
+      return result.content;
+    }
     assert(
       is(result.content, ComponentOrElementStruct),
       'The Snap returned an invalid interface.',
diff --git a/packages/snaps-simulation/src/store/ui.ts b/packages/snaps-simulation/src/store/ui.ts
index e1f4d85829..db9f1e9dab 100644
--- a/packages/snaps-simulation/src/store/ui.ts
+++ b/packages/snaps-simulation/src/store/ui.ts
@@ -6,7 +6,7 @@ import { createAction, createSelector, createSlice } from '@reduxjs/toolkit';
 import type { ApplicationState } from './store';
 
 export type Interface = {
-  type: DialogApprovalTypes[DialogType | 'default'];
+  type: DialogApprovalTypes[DialogType | 'default'] | 'Notification';
   id: string;
 };
 

From b19d893d78bffc5298957bd3e58727aaba732d9a Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Wed, 18 Dec 2024 23:19:05 -0500
Subject: [PATCH 09/16] clean up notification matcher

---
 packages/snaps-jest/src/matchers.ts      | 78 ++++++++++++++----------
 packages/snaps-simulation/src/request.ts | 12 +++-
 2 files changed, 55 insertions(+), 35 deletions(-)

diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 204f2b7585..7c149b1cfc 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -9,9 +9,9 @@ import type {
   EnumToUnion,
   ComponentOrElement,
   Component,
+  NotificationType,
 } from '@metamask/snaps-sdk';
-import { NotificationType } from '@metamask/snaps-sdk';
-import type { JSXElement } from '@metamask/snaps-sdk/jsx';
+import type { JSXElement, SnapNode } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
 import type { SnapInterface, SnapResponse } from '@metamask/snaps-simulation';
 import {
@@ -170,10 +170,10 @@ export const toSendNotification: MatcherFunction<
     expectedMessage: string,
     expectedType?: EnumToUnion<NotificationType> | undefined,
     expectedTitle?: string | undefined,
-    expectedContent?: ComponentOrElement,
+    expectedContent?: JSXElement,
     expectedFooterLink?: { text: string; href: string } | undefined,
   ]
-> = async function (
+> = function (
   actual,
   expectedMessage,
   expectedType,
@@ -184,43 +184,35 @@ export const toSendNotification: MatcherFunction<
   assertActualIsSnapResponse(actual, 'toSendNotification');
 
   const { notifications } = actual;
-  let jsxContent: ComponentOrElement;
+  let jsxContent: JSXElement;
 
   if (hasProperty(actual, 'getInterface')) {
-    jsxContent = (await (actual.getInterface as () => Promise<SnapInterface>)())
-      .content;
+    jsxContent = (actual.getInterface as () => SnapInterface)().content;
   }
 
-  const notificationValidator = async (
+  const notificationValidator = (
     notification: SnapResponse['notifications'][number],
   ) => {
     const { type, message, title, footerLink } = notification;
-    const hasExpectedType = expectedType !== undefined;
-    const hasExpectedTitle = expectedTitle !== undefined;
-    const hasExpectedFooterLink = expectedFooterLink !== undefined;
-    const hasContent = expectedContent !== undefined;
 
     if (!this.equals(message, expectedMessage)) {
       return false;
     }
 
-    if (hasExpectedType && type !== expectedType) {
+    if (type !== expectedType) {
       return false;
     }
 
-    if (type === NotificationType.InApp) {
-      if (hasExpectedTitle && !this.equals(title, expectedTitle)) {
+    if (title) {
+      if (!this.equals(title, expectedTitle)) {
         return false;
       }
 
-      if (hasContent && !this.equals(jsxContent, expectedContent)) {
+      if (!this.equals(jsxContent, expectedContent)) {
         return false;
       }
 
-      if (
-        hasExpectedFooterLink &&
-        !this.equals(footerLink, expectedFooterLink)
-      ) {
+      if (!this.equals(footerLink, expectedFooterLink)) {
         return false;
       }
     }
@@ -233,7 +225,7 @@ export const toSendNotification: MatcherFunction<
   const transformedNotifications = notifications.map((notification) => {
     return {
       ...notification,
-      content: jsxContent,
+      content: serialiseJsx(jsxContent),
     };
   });
 
@@ -242,31 +234,53 @@ export const toSendNotification: MatcherFunction<
       ? `${this.utils.matcherHint('.not.toSendNotification')}\n\n`
       : `${this.utils.matcherHint('.toSendNotification')}\n\n`;
 
+    const {
+      title,
+      type,
+      message: notifMessage,
+      footerLink,
+      content,
+    } = transformedNotifications[0];
+
     testMessage += `Expected message: ${this.utils.printExpected(
       expectedMessage,
     )}\n`;
 
-    testMessage += expectedType
-      ? `Expected type: ${this.utils.printExpected(expectedType)}\n`
-      : ``;
+    testMessage += `Expected type: ${this.utils.printExpected(expectedType)}\n`;
 
-    testMessage += expectedTitle
-      ? `Expected type: ${this.utils.printExpected(expectedType)}\n`
+    testMessage += title
+      ? `Expected title: ${this.utils.printExpected(expectedTitle)}\n`
       : ``;
 
-    testMessage += expectedContent
-      ? `Expected content: ${this.utils.printExpected(jsxContent)}\n`
+    testMessage += title
+      ? `Expected content: ${this.utils.printExpected(
+          serialiseJsx(expectedContent as SnapNode),
+        )}\n`
       : ``;
 
-    testMessage += expectedFooterLink
+    testMessage += footerLink
       ? `Expected footer link: ${this.utils.printExpected(
           expectedFooterLink,
         )}\n`
       : ``;
 
-    testMessage += `Received: ${this.utils.printReceived(
-      transformedNotifications,
-    )}`;
+    testMessage += `Received message: ${this.utils.printExpected(
+      notifMessage,
+    )}\n`;
+
+    testMessage += `Received type: ${this.utils.printReceived(type)}\n`;
+
+    testMessage += title
+      ? `Received title: ${this.utils.printReceived(title)}\n`
+      : ``;
+
+    testMessage += title
+      ? `Received content: ${this.utils.printReceived(serialiseJsx(content))}\n`
+      : ``;
+
+    testMessage += footerLink
+      ? `Expected footer link: ${this.utils.printReceived(footerLink)}\n`
+      : ``;
 
     return testMessage;
   };
diff --git a/packages/snaps-simulation/src/request.ts b/packages/snaps-simulation/src/request.ts
index 15b15997fc..b53d70cf2e 100644
--- a/packages/snaps-simulation/src/request.ts
+++ b/packages/snaps-simulation/src/request.ts
@@ -84,6 +84,7 @@ export function handleRequest({
     })
     .then(async (result) => {
       const notifications = getNotifications(store.getState());
+      const interfaceId = notifications[0].content;
       store.dispatch(clearNotifications());
 
       try {
@@ -91,6 +92,7 @@ export function handleRequest({
           result,
           snapId,
           controllerMessenger,
+          interfaceId,
         );
 
         return {
@@ -198,12 +200,14 @@ export async function getInterfaceFromResult(
  * @param result - The handler result object.
  * @param snapId - The Snap ID.
  * @param controllerMessenger - The controller messenger.
+ * @param contentId - The id of the interface if it exists outside of the result.
  * @returns The content components if any.
  */
 export async function getInterfaceApi(
   result: unknown,
   snapId: SnapId,
   controllerMessenger: RootControllerMessenger,
+  contentId?: string,
 ): Promise<(() => SnapHandlerInterface) | undefined> {
   const interfaceId = await getInterfaceFromResult(
     result,
@@ -211,16 +215,18 @@ export async function getInterfaceApi(
     controllerMessenger,
   );
 
-  if (interfaceId) {
+  const id = interfaceId || contentId;
+
+  if (id) {
     return () => {
       const { content } = controllerMessenger.call(
         'SnapInterfaceController:getInterface',
         snapId,
-        interfaceId,
+        id,
       );
 
       const actions = getInterfaceActions(snapId, controllerMessenger, {
-        id: interfaceId,
+        id,
         content,
       });
 

From 2e483dc32f08b24b8f1c9e4ad7cbf7982b90640e Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 23 Dec 2024 15:30:56 -0500
Subject: [PATCH 10/16] more fixes

---
 packages/snaps-jest/src/global.ts             |   8 +-
 packages/snaps-jest/src/matchers.test.tsx     | 253 +++++++++++++-----
 packages/snaps-jest/src/matchers.ts           |  70 ++---
 .../snaps-jest/src/test-utils/response.ts     |   6 +-
 .../snaps-simulation/src/interface.test.tsx   |  27 ++
 .../src/methods/hooks/notifications.test.ts   |  49 ++--
 .../src/methods/hooks/notifications.ts        |  19 +-
 packages/snaps-simulation/src/request.ts      |   6 +-
 packages/snaps-simulation/src/types.ts        |   2 +-
 9 files changed, 302 insertions(+), 138 deletions(-)

diff --git a/packages/snaps-jest/src/global.ts b/packages/snaps-jest/src/global.ts
index d28e596773..979a164471 100644
--- a/packages/snaps-jest/src/global.ts
+++ b/packages/snaps-jest/src/global.ts
@@ -43,8 +43,10 @@ interface SnapsMatchers {
    * `expect(response.notifications).toContainEqual({ message, type })`.
    *
    * @param message - The expected notification message.
-   * @param type - The expected notification type, i.e., 'inApp' or 'native'. If
-   * not provided, the type will be ignored.
+   * @param type - The expected notification type, i.e., 'inApp' or 'native'.
+   * @param title - The title of an expanded notification.
+   * @param content - The content of an expanded notification.
+   * @param footerLink - The footer link of an expanded notification (if it exists).
    * @throws If the snap did not send a notification with the expected message.
    * @example
    * const response = await request({ method: 'foo' });
@@ -52,7 +54,7 @@ interface SnapsMatchers {
    */
   toSendNotification(
     message: string,
-    type?: EnumToUnion<NotificationType>,
+    type: EnumToUnion<NotificationType>,
     title?: string,
     content?: JSXElement,
     footerLink?: { text: string; href: string },
diff --git a/packages/snaps-jest/src/matchers.test.tsx b/packages/snaps-jest/src/matchers.test.tsx
index 89bd27e5aa..41f917afbd 100644
--- a/packages/snaps-jest/src/matchers.test.tsx
+++ b/packages/snaps-jest/src/matchers.test.tsx
@@ -1,6 +1,9 @@
 import { expect } from '@jest/globals';
 import { NotificationType, panel, text } from '@metamask/snaps-sdk';
 import { Box, Text } from '@metamask/snaps-sdk/jsx';
+import { getInterfaceActions } from '@metamask/snaps-simulation';
+import type { RootControllerMessenger } from '@metamask/snaps-simulation';
+import { MOCK_SNAP_ID } from '@metamask/snaps-utils/test-utils';
 
 import {
   toRender,
@@ -8,7 +11,11 @@ import {
   toRespondWithError,
   toSendNotification,
 } from './matchers';
-import { getMockInterfaceResponse, getMockResponse } from './test-utils';
+import {
+  getMockInterfaceResponse,
+  getMockResponse,
+  getRootControllerMessenger,
+} from './test-utils';
 
 expect.extend({
   toRespondWith,
@@ -171,10 +178,23 @@ describe('toSendNotification', () => {
           },
         ],
       }),
-    ).toSendNotification('foo');
+    ).toSendNotification('foo', 'native');
   });
 
   it('passes when an expanded view notification is correct', () => {
+    const controllerMessenger = getRootControllerMessenger();
+    const actions = getInterfaceActions(
+      MOCK_SNAP_ID,
+      controllerMessenger as unknown as RootControllerMessenger,
+      {
+        content: (
+          <Box>
+            <Text>Foo</Text>
+          </Box>
+        ),
+        id: 'abcd',
+      },
+    );
     expect(
       getMockResponse({
         notifications: [
@@ -187,14 +207,45 @@ describe('toSendNotification', () => {
             footerLink: { text: 'foo', href: 'https://metamask.io' },
           },
         ],
+        getInterface: () => {
+          return {
+            content: (
+              <Box>
+                <Text>Foo</Text>
+              </Box>
+            ),
+            ...actions,
+          };
+        },
       }),
-    ).toSendNotification('foo', 'inApp', 'bar', {
-      text: 'foo',
-      href: 'https://metamask.io',
-    });
+    ).toSendNotification(
+      'foo',
+      'inApp',
+      'bar',
+      <Box>
+        <Text>Foo</Text>
+      </Box>,
+      {
+        text: 'foo',
+        href: 'https://metamask.io',
+      },
+    );
   });
 
   it('passes when an expanded view notification without footer is correct', () => {
+    const controllerMessenger = getRootControllerMessenger();
+    const actions = getInterfaceActions(
+      MOCK_SNAP_ID,
+      controllerMessenger as unknown as RootControllerMessenger,
+      {
+        content: (
+          <Box>
+            <Text>Foo</Text>
+          </Box>
+        ),
+        id: 'abcd',
+      },
+    );
     expect(
       getMockResponse({
         notifications: [
@@ -206,8 +257,25 @@ describe('toSendNotification', () => {
             content: 'abcd',
           },
         ],
+        getInterface: () => {
+          return {
+            content: (
+              <Box>
+                <Text>Foo</Text>
+              </Box>
+            ),
+            ...actions,
+          };
+        },
       }),
-    ).toSendNotification('foo', 'inApp', 'bar');
+    ).toSendNotification(
+      'foo',
+      'inApp',
+      'bar',
+      <Box>
+        <Text>Foo</Text>
+      </Box>,
+    );
   });
 
   it('passes when the notification is correct with a type', () => {
@@ -224,7 +292,7 @@ describe('toSendNotification', () => {
     ).toSendNotification('foo', 'native');
   });
 
-  it('fails when a notification is incorrect', () => {
+  it('fails when a notification message is incorrect', () => {
     expect(() =>
       expect(
         getMockResponse({
@@ -236,29 +304,40 @@ describe('toSendNotification', () => {
             },
           ],
         }),
-      ).toSendNotification('bar'),
-    ).toThrow('Received:');
+      ).toSendNotification('bar', 'native'),
+    ).toThrow('Received');
   });
 
-  it("fails when an expanded view notification's title is incorrect", () => {
+  it('fails when a notification type is incorrect', () => {
     expect(() =>
       expect(
         getMockResponse({
           notifications: [
             {
               id: '1',
-              type: 'inApp',
+              type: 'native',
               message: 'foo',
-              title: 'bar',
-              content: 'abcd',
             },
           ],
         }),
-      ).toSendNotification('foo', 'inApp', 'baz'),
-    ).toThrow('Received:');
+      ).toSendNotification('foo', 'inApp'),
+    ).toThrow('Received');
   });
 
-  it("fails when an expanded view notification's footerLink is incorrect", () => {
+  it("fails when an expanded view notification's title is incorrect", () => {
+    const controllerMessenger = getRootControllerMessenger();
+    const actions = getInterfaceActions(
+      MOCK_SNAP_ID,
+      controllerMessenger as unknown as RootControllerMessenger,
+      {
+        content: (
+          <Box>
+            <Text>Foo</Text>
+          </Box>
+        ),
+        id: 'abcd',
+      },
+    );
     expect(() =>
       expect(
         getMockResponse({
@@ -269,18 +348,44 @@ describe('toSendNotification', () => {
               message: 'foo',
               title: 'bar',
               content: 'abcd',
-              footerLink: { text: 'Leave site', href: 'https://metamask.io' },
             },
           ],
+          getInterface: () => {
+            return {
+              content: (
+                <Box>
+                  <Text>Foo</Text>
+                </Box>
+              ),
+              ...actions,
+            };
+          },
         }),
-      ).toSendNotification('foo', 'inApp', 'bar', {
-        text: 'Go back',
-        href: 'metamask://client/',
-      }),
-    ).toThrow('Received:');
+      ).toSendNotification(
+        'foo',
+        'inApp',
+        'baz',
+        <Box>
+          <Text>Foo</Text>
+        </Box>,
+      ),
+    ).toThrow('Received');
   });
 
-  it("fails when an expanded view notification's content is missing", () => {
+  it("fails when an expanded view notification's footerLink is incorrect", () => {
+    const controllerMessenger = getRootControllerMessenger();
+    const actions = getInterfaceActions(
+      MOCK_SNAP_ID,
+      controllerMessenger as unknown as RootControllerMessenger,
+      {
+        content: (
+          <Box>
+            <Text>Foo</Text>
+          </Box>
+        ),
+        id: 'abcd',
+      },
+    );
     expect(() =>
       expect(
         getMockResponse({
@@ -290,31 +395,79 @@ describe('toSendNotification', () => {
               type: 'inApp',
               message: 'foo',
               title: 'bar',
+              content: 'abcd',
               footerLink: { text: 'Leave site', href: 'https://metamask.io' },
             },
           ],
+          getInterface: () => {
+            return {
+              content: (
+                <Box>
+                  <Text>Foo</Text>
+                </Box>
+              ),
+              ...actions,
+            };
+          },
         }),
-      ).toSendNotification('foo', 'inApp', 'bar', {
-        text: 'Leave site',
-        href: 'https://metamask.io',
-      }),
-    ).toThrow('Received:');
+      ).toSendNotification(
+        'foo',
+        'inApp',
+        'bar',
+        <Box>
+          <Text>Foo</Text>
+        </Box>,
+        {
+          text: 'Go back',
+          href: 'metamask://client/',
+        },
+      ),
+    ).toThrow('Received');
   });
 
-  it('fails when the notification is incorrect with a type', () => {
+  it("fails when an expanded view notification's content is missing", () => {
+    const controllerMessenger = getRootControllerMessenger();
+    const actions = getInterfaceActions(
+      MOCK_SNAP_ID,
+      controllerMessenger as unknown as RootControllerMessenger,
+      {
+        content: (
+          <Box>
+            <Text>Foo</Text>
+          </Box>
+        ),
+        id: 'abcd',
+      },
+    );
     expect(() =>
       expect(
         getMockResponse({
           notifications: [
             {
               id: '1',
-              type: 'native',
+              type: 'inApp',
               message: 'foo',
+              title: 'bar',
+              content: 'abcd',
+              footerLink: { text: 'Leave site', href: 'https://metamask.io' },
             },
           ],
+          getInterface: () => {
+            return {
+              content: (
+                <Box>
+                  <Text>Foo</Text>
+                </Box>
+              ),
+              ...actions,
+            };
+          },
         }),
-      ).toSendNotification('foo', 'inApp'),
-    ).toThrow('Received:');
+      ).toSendNotification('foo', 'inApp', 'bar', undefined, {
+        text: 'Leave site',
+        href: 'https://metamask.io',
+      }),
+    ).toThrow('Received');
   });
 
   describe('not', () => {
@@ -329,40 +482,10 @@ describe('toSendNotification', () => {
             },
           ],
         }),
-      ).not.toSendNotification('bar');
-    });
-
-    it('passes when the notification is correct with a type', () => {
-      expect(
-        getMockResponse({
-          notifications: [
-            {
-              id: '1',
-              type: 'native',
-              message: 'foo',
-            },
-          ],
-        }),
-      ).not.toSendNotification('foo', 'inApp');
+      ).not.toSendNotification('bar', 'native');
     });
 
     it('fails when the notification is incorrect', () => {
-      expect(() =>
-        expect(
-          getMockResponse({
-            notifications: [
-              {
-                id: '1',
-                type: 'native',
-                message: 'foo',
-              },
-            ],
-          }),
-        ).not.toSendNotification('foo'),
-      ).toThrow('Received:');
-    });
-
-    it('fails when the notification is incorrect with a type', () => {
       expect(() =>
         expect(
           getMockResponse({
@@ -375,7 +498,7 @@ describe('toSendNotification', () => {
             ],
           }),
         ).not.toSendNotification('foo', 'native'),
-      ).toThrow('Received:');
+      ).toThrow('Received');
     });
   });
 });
diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 7c149b1cfc..2229b0f8c8 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -193,7 +193,10 @@ export const toSendNotification: MatcherFunction<
   const notificationValidator = (
     notification: SnapResponse['notifications'][number],
   ) => {
-    const { type, message, title, footerLink } = notification;
+    const { type, message, title, footerLink } = notification as Record<
+      string,
+      any
+    >;
 
     if (!this.equals(message, expectedMessage)) {
       return false;
@@ -203,18 +206,16 @@ export const toSendNotification: MatcherFunction<
       return false;
     }
 
-    if (title) {
-      if (!this.equals(title, expectedTitle)) {
-        return false;
-      }
+    if (title && !this.equals(title, expectedTitle)) {
+      return false;
+    }
 
-      if (!this.equals(jsxContent, expectedContent)) {
-        return false;
-      }
+    if (jsxContent && !this.equals(jsxContent, expectedContent)) {
+      return false;
+    }
 
-      if (!this.equals(footerLink, expectedFooterLink)) {
-        return false;
-      }
+    if (footerLink && !this.equals(footerLink, expectedFooterLink)) {
+      return false;
     }
 
     return true;
@@ -248,21 +249,21 @@ export const toSendNotification: MatcherFunction<
 
     testMessage += `Expected type: ${this.utils.printExpected(expectedType)}\n`;
 
-    testMessage += title
-      ? `Expected title: ${this.utils.printExpected(expectedTitle)}\n`
-      : ``;
+    if (title) {
+      testMessage += `Expected title: ${this.utils.printExpected(
+        expectedTitle,
+      )}\n`;
 
-    testMessage += title
-      ? `Expected content: ${this.utils.printExpected(
-          serialiseJsx(expectedContent as SnapNode),
-        )}\n`
-      : ``;
+      testMessage += `Expected content: ${this.utils.printExpected(
+        serialiseJsx(expectedContent as SnapNode),
+      )}\n`;
+    }
 
-    testMessage += footerLink
-      ? `Expected footer link: ${this.utils.printExpected(
-          expectedFooterLink,
-        )}\n`
-      : ``;
+    if (footerLink) {
+      testMessage += `Expected footer link: ${this.utils.printExpected(
+        expectedFooterLink,
+      )}\n`;
+    }
 
     testMessage += `Received message: ${this.utils.printExpected(
       notifMessage,
@@ -270,17 +271,18 @@ export const toSendNotification: MatcherFunction<
 
     testMessage += `Received type: ${this.utils.printReceived(type)}\n`;
 
-    testMessage += title
-      ? `Received title: ${this.utils.printReceived(title)}\n`
-      : ``;
-
-    testMessage += title
-      ? `Received content: ${this.utils.printReceived(serialiseJsx(content))}\n`
-      : ``;
+    if (title) {
+      testMessage += `Received title: ${this.utils.printReceived(title)}\n`;
+      testMessage += `Received content: ${this.utils.printReceived(
+        serialiseJsx(content),
+      )}\n`;
+    }
 
-    testMessage += footerLink
-      ? `Expected footer link: ${this.utils.printReceived(footerLink)}\n`
-      : ``;
+    if (footerLink) {
+      testMessage += `Received footer link: ${this.utils.printReceived(
+        footerLink,
+      )}\n`;
+    }
 
     return testMessage;
   };
diff --git a/packages/snaps-jest/src/test-utils/response.ts b/packages/snaps-jest/src/test-utils/response.ts
index cf71d8bacf..d525f9d48a 100644
--- a/packages/snaps-jest/src/test-utils/response.ts
+++ b/packages/snaps-jest/src/test-utils/response.ts
@@ -2,6 +2,7 @@ import type { JSXElement } from '@metamask/snaps-sdk/jsx';
 import type {
   SnapHandlerInterface,
   SnapResponse,
+  SnapResponseWithInterface,
 } from '@metamask/snaps-simulation';
 
 /**
@@ -11,6 +12,7 @@ import type {
  * @param options.id - The ID to use.
  * @param options.response - The response to use.
  * @param options.notifications - The notifications to use.
+ * @param options.getInterface - The `getInterface` function to use.
  * @returns The mock response.
  */
 export function getMockResponse({
@@ -19,11 +21,13 @@ export function getMockResponse({
     result: 'foo',
   },
   notifications = [],
-}: Partial<SnapResponse>): SnapResponse {
+  getInterface,
+}: Partial<SnapResponseWithInterface>): SnapResponse {
   return {
     id,
     response,
     notifications,
+    ...(getInterface ? { getInterface } : {}),
   };
 }
 
diff --git a/packages/snaps-simulation/src/interface.test.tsx b/packages/snaps-simulation/src/interface.test.tsx
index 02368bfaed..43cbd78f99 100644
--- a/packages/snaps-simulation/src/interface.test.tsx
+++ b/packages/snaps-simulation/src/interface.test.tsx
@@ -386,6 +386,33 @@ describe('getInterfaceResponse', () => {
     });
   });
 
+  it('returns the interface actions and content for a Notification', () => {
+    const { runSaga } = createStore(getMockOptions());
+    const response = getInterfaceResponse(
+      runSaga,
+      'Notification',
+      <Box>
+        <Text>Foo</Text>
+      </Box>,
+      interfaceActions,
+    );
+
+    expect(response).toStrictEqual({
+      content: (
+        <Box>
+          <Text>Foo</Text>
+        </Box>
+      ),
+      clickElement: expect.any(Function),
+      typeInField: expect.any(Function),
+      selectInDropdown: expect.any(Function),
+      selectFromRadioGroup: expect.any(Function),
+      selectFromSelector: expect.any(Function),
+      uploadFile: expect.any(Function),
+      waitForUpdate: expect.any(Function),
+    });
+  });
+
   it('throws an error for unknown dialog types', () => {
     const { runSaga } = createStore(getMockOptions());
 
diff --git a/packages/snaps-simulation/src/methods/hooks/notifications.test.ts b/packages/snaps-simulation/src/methods/hooks/notifications.test.ts
index 3f268e310d..0288eb90dd 100644
--- a/packages/snaps-simulation/src/methods/hooks/notifications.test.ts
+++ b/packages/snaps-simulation/src/methods/hooks/notifications.test.ts
@@ -30,26 +30,35 @@ describe('getShowNativeNotificationImplementation', () => {
 });
 
 describe('getShowInAppNotificationImplementation', () => {
-  it('returns the implementation of the `showInAppNotification` hook', async () => {
-    const { store, runSaga } = createStore(getMockOptions());
-    const fn = getShowInAppNotificationImplementation(runSaga);
+  const baseRequest = {
+    title: undefined,
+    content: undefined,
+    footerLink: undefined,
+  };
 
-    expect(
-      await fn('snap-id', {
-        type: NotificationType.InApp,
-        message: 'message',
-      }),
-    ).toBeNull();
+  it.each([
+    { type: NotificationType.InApp, message: 'message' },
+    {
+      type: NotificationType.InApp,
+      content: 'abcd',
+      title: 'foo',
+      message: 'bar',
+    },
+  ])(
+    'returns the implementation of the `showInAppNotification` hook',
+    async (request) => {
+      const { store, runSaga } = createStore(getMockOptions());
+      const fn = getShowInAppNotificationImplementation(runSaga);
 
-    expect(store.getState().notifications.notifications).toStrictEqual([
-      {
-        id: expect.any(String),
-        type: NotificationType.InApp,
-        message: 'message',
-        content: undefined,
-        title: undefined,
-        footerLink: undefined,
-      },
-    ]);
-  });
+      expect(await fn('snap-id', request)).toBeNull();
+
+      expect(store.getState().notifications.notifications).toStrictEqual([
+        {
+          ...baseRequest,
+          ...request,
+          id: expect.any(String),
+        },
+      ]);
+    },
+  );
 });
diff --git a/packages/snaps-simulation/src/methods/hooks/notifications.ts b/packages/snaps-simulation/src/methods/hooks/notifications.ts
index c09aba542a..8645dedcb8 100644
--- a/packages/snaps-simulation/src/methods/hooks/notifications.ts
+++ b/packages/snaps-simulation/src/methods/hooks/notifications.ts
@@ -46,6 +46,14 @@ export function getShowNativeNotificationImplementation(
   };
 }
 
+type InAppNotificationParams = {
+  type: NotificationType;
+  message: string;
+  title?: string | undefined;
+  content?: string | undefined;
+  footerLink?: { text: string; href: string } | undefined;
+};
+
 /**
  * Show an in-app notification to the user.
  *
@@ -60,16 +68,7 @@ export function getShowNativeNotificationImplementation(
  */
 function* showInAppNotificationImplementation(
   _snapId: string,
-  {
-    message,
-    title,
-    content,
-    footerLink,
-  }: NotifyParams & {
-    title?: string;
-    content?: string;
-    footerLink?: { text: string; href: string };
-  },
+  { message, title, content, footerLink }: InAppNotificationParams,
 ): SagaIterator<null> {
   if (content) {
     yield put(setInterface({ type: 'Notification', id: content }));
diff --git a/packages/snaps-simulation/src/request.ts b/packages/snaps-simulation/src/request.ts
index b53d70cf2e..b65f281c76 100644
--- a/packages/snaps-simulation/src/request.ts
+++ b/packages/snaps-simulation/src/request.ts
@@ -84,7 +84,7 @@ export function handleRequest({
     })
     .then(async (result) => {
       const notifications = getNotifications(store.getState());
-      const interfaceId = notifications[0].content;
+      const interfaceId = notifications[0]?.content;
       store.dispatch(clearNotifications());
 
       try {
@@ -174,13 +174,11 @@ export async function getInterfaceFromResult(
   }
 
   if (isPlainObject(result) && hasProperty(result, 'content')) {
-    if (typeof result.content === 'string') {
-      return result.content;
-    }
     assert(
       is(result.content, ComponentOrElementStruct),
       'The Snap returned an invalid interface.',
     );
+
     const id = await controllerMessenger.call(
       'SnapInterfaceController:createInterface',
       snapId,
diff --git a/packages/snaps-simulation/src/types.ts b/packages/snaps-simulation/src/types.ts
index a9fc5ee81f..2c3a6710d4 100644
--- a/packages/snaps-simulation/src/types.ts
+++ b/packages/snaps-simulation/src/types.ts
@@ -514,7 +514,7 @@ export type SnapResponseWithInterface = {
     message: string;
     type: EnumToUnion<NotificationType>;
     title?: string | undefined;
-    content?: string;
+    content?: string | undefined;
     footerLink?: { text: string; href: string } | undefined;
   }[];
   getInterface(): SnapHandlerInterface;

From 692bb093020ee3e12a025c1f5361fa3731774c54 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 23 Dec 2024 15:38:04 -0500
Subject: [PATCH 11/16] fix type

---
 packages/snaps-jest/src/matchers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 2229b0f8c8..e1df05b917 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -168,7 +168,7 @@ export const toRespondWithError: MatcherFunction<[expected: Json]> = function (
 export const toSendNotification: MatcherFunction<
   [
     expectedMessage: string,
-    expectedType?: EnumToUnion<NotificationType> | undefined,
+    expectedType: EnumToUnion<NotificationType>,
     expectedTitle?: string | undefined,
     expectedContent?: JSXElement,
     expectedFooterLink?: { text: string; href: string } | undefined,

From 325173082ad16c8b23264b421d8119a0d7e7dc69 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 23 Dec 2024 15:40:17 -0500
Subject: [PATCH 12/16] fix another type

---
 packages/snaps-jest/src/matchers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index e1df05b917..12adb83961 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -195,7 +195,7 @@ export const toSendNotification: MatcherFunction<
   ) => {
     const { type, message, title, footerLink } = notification as Record<
       string,
-      any
+      unknown
     >;
 
     if (!this.equals(message, expectedMessage)) {

From 30a2a51907a17f364a8fc31040f08941d56714a2 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 23 Dec 2024 15:48:15 -0500
Subject: [PATCH 13/16] fix type once more

---
 packages/snaps-jest/src/matchers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 12adb83961..90e642f7a5 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -170,7 +170,7 @@ export const toSendNotification: MatcherFunction<
     expectedMessage: string,
     expectedType: EnumToUnion<NotificationType>,
     expectedTitle?: string | undefined,
-    expectedContent?: JSXElement,
+    expectedContent?: JSXElement | undefined,
     expectedFooterLink?: { text: string; href: string } | undefined,
   ]
 > = function (

From d6ecb1ec54dd8e1ba3d0d25affca88147edcf1fb Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 23 Dec 2024 16:12:54 -0500
Subject: [PATCH 14/16] update formatting and types

---
 packages/snaps-jest/src/matchers.ts | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 90e642f7a5..c5bc1c26c2 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -36,6 +36,8 @@ import {
   RECEIVED_COLOR,
 } from 'jest-matcher-utils';
 
+import { ElementStruct } from '../../snaps-sdk/src/jsx/validation';
+
 /**
  * Ensure that the actual value is a response from the `request` function.
  *
@@ -184,7 +186,7 @@ export const toSendNotification: MatcherFunction<
   assertActualIsSnapResponse(actual, 'toSendNotification');
 
   const { notifications } = actual;
-  let jsxContent: JSXElement;
+  let jsxContent: JSXElement | undefined;
 
   if (hasProperty(actual, 'getInterface')) {
     jsxContent = (actual.getInterface as () => SnapInterface)().content;
@@ -226,7 +228,8 @@ export const toSendNotification: MatcherFunction<
   const transformedNotifications = notifications.map((notification) => {
     return {
       ...notification,
-      content: serialiseJsx(jsxContent),
+      // Ok to cast here as the function returns if the param is falsy
+      content: serialiseJsx(jsxContent as SnapNode),
     };
   });
 
@@ -254,9 +257,16 @@ export const toSendNotification: MatcherFunction<
         expectedTitle,
       )}\n`;
 
-      testMessage += `Expected content: ${this.utils.printExpected(
-        serialiseJsx(expectedContent as SnapNode),
-      )}\n`;
+      // We want to check if the expected content is actually JSX content, otherwise `serialiseJsx` won't return something useful.
+      if (is(expectedContent, ElementStruct)) {
+        testMessage += `Expected content: ${this.utils.printExpected(
+          serialiseJsx(expectedContent),
+        )}\n`;
+      } else {
+        testMessage += `Expected content: ${this.utils.printExpected(
+          expectedContent,
+        )}\n`;
+      }
     }
 
     if (footerLink) {

From 8a4f74ae75d7345054e47214709b5e514fd95590 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Mon, 23 Dec 2024 16:43:24 -0500
Subject: [PATCH 15/16] use correct struct

---
 packages/snaps-jest/src/matchers.ts | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index c5bc1c26c2..9357573ba9 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -12,7 +12,7 @@ import type {
   NotificationType,
 } from '@metamask/snaps-sdk';
 import type { JSXElement, SnapNode } from '@metamask/snaps-sdk/jsx';
-import { isJSXElementUnsafe } from '@metamask/snaps-sdk/jsx';
+import { isJSXElementUnsafe, JSXElementStruct } from '@metamask/snaps-sdk/jsx';
 import type { SnapInterface, SnapResponse } from '@metamask/snaps-simulation';
 import {
   InterfaceStruct,
@@ -36,8 +36,6 @@ import {
   RECEIVED_COLOR,
 } from 'jest-matcher-utils';
 
-import { ElementStruct } from '../../snaps-sdk/src/jsx/validation';
-
 /**
  * Ensure that the actual value is a response from the `request` function.
  *
@@ -258,7 +256,7 @@ export const toSendNotification: MatcherFunction<
       )}\n`;
 
       // We want to check if the expected content is actually JSX content, otherwise `serialiseJsx` won't return something useful.
-      if (is(expectedContent, ElementStruct)) {
+      if (is(expectedContent, JSXElementStruct)) {
         testMessage += `Expected content: ${this.utils.printExpected(
           serialiseJsx(expectedContent),
         )}\n`;

From 3c366a7ef129009034f36cfb1f2b7c2a7f782503 Mon Sep 17 00:00:00 2001
From: Hassan Malik <hbmalik88@gmail.com>
Date: Wed, 8 Jan 2025 08:47:44 -0500
Subject: [PATCH 16/16] apply code review

---
 packages/examples/packages/notifications/tsconfig.json | 1 -
 packages/snaps-jest/src/matchers.ts                    | 6 +++---
 packages/snaps-simulation/src/interface.test.tsx       | 2 +-
 packages/snaps-simulation/src/request.ts               | 2 +-
 4 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/examples/packages/notifications/tsconfig.json b/packages/examples/packages/notifications/tsconfig.json
index a366eceea4..2ee6d93be5 100644
--- a/packages/examples/packages/notifications/tsconfig.json
+++ b/packages/examples/packages/notifications/tsconfig.json
@@ -2,7 +2,6 @@
   "extends": "../../tsconfig.json",
   "compilerOptions": {
     "baseUrl": "./",
-    "jsx": "react-jsxdev",
     "composite": false
   },
   "include": ["src", "snap.config.ts"]
diff --git a/packages/snaps-jest/src/matchers.ts b/packages/snaps-jest/src/matchers.ts
index 9357573ba9..aa23e1fa36 100644
--- a/packages/snaps-jest/src/matchers.ts
+++ b/packages/snaps-jest/src/matchers.ts
@@ -13,7 +13,7 @@ import type {
 } from '@metamask/snaps-sdk';
 import type { JSXElement, SnapNode } from '@metamask/snaps-sdk/jsx';
 import { isJSXElementUnsafe, JSXElementStruct } from '@metamask/snaps-sdk/jsx';
-import type { SnapInterface, SnapResponse } from '@metamask/snaps-simulation';
+import type { SnapResponse } from '@metamask/snaps-simulation';
 import {
   InterfaceStruct,
   SnapResponseStruct,
@@ -186,8 +186,8 @@ export const toSendNotification: MatcherFunction<
   const { notifications } = actual;
   let jsxContent: JSXElement | undefined;
 
-  if (hasProperty(actual, 'getInterface')) {
-    jsxContent = (actual.getInterface as () => SnapInterface)().content;
+  if ('getInterface' in actual) {
+    jsxContent = actual.getInterface().content;
   }
 
   const notificationValidator = (
diff --git a/packages/snaps-simulation/src/interface.test.tsx b/packages/snaps-simulation/src/interface.test.tsx
index 43cbd78f99..3ad185e5d9 100644
--- a/packages/snaps-simulation/src/interface.test.tsx
+++ b/packages/snaps-simulation/src/interface.test.tsx
@@ -386,7 +386,7 @@ describe('getInterfaceResponse', () => {
     });
   });
 
-  it('returns the interface actions and content for a Notification', () => {
+  it('returns the interface actions and content for a notification', () => {
     const { runSaga } = createStore(getMockOptions());
     const response = getInterfaceResponse(
       runSaga,
diff --git a/packages/snaps-simulation/src/request.ts b/packages/snaps-simulation/src/request.ts
index b65f281c76..adf55c0b36 100644
--- a/packages/snaps-simulation/src/request.ts
+++ b/packages/snaps-simulation/src/request.ts
@@ -213,7 +213,7 @@ export async function getInterfaceApi(
     controllerMessenger,
   );
 
-  const id = interfaceId || contentId;
+  const id = interfaceId ?? contentId;
 
   if (id) {
     return () => {