Snaps: Update snap_notify to include expanded view (#1774)

* Update snap_notify method reference

* Update snaps/reference/snaps-api.md

Co-authored-by: Byron Gravenorst <[email protected]>

* Expanded view docs cleanup

* Add multiple notification examples

* Add to what's new

* Fix lint spelling

* Fix header level for expanded view

* Update snaps/features/notifications.md

---------

Co-authored-by: Byron Gravenorst <[email protected]>

Author: Montoya

docs/whats-new.md

@@ -11,6 +11,8 @@ of the [MetaMask developer page](https://metamask.io/developer/).
 
 ## December 2024
 
+- Documented [Snap Notifications Expanded View](/snaps/features/notifications/#expanded-view). 
+  ([#1774](https://github.com/MetaMask/metamask-docs/pull/1774))
 - Documented [`snap_getInterfaceContext`](/snaps/reference/snaps-api/#snap_getinterfacecontext).
   ([#1772](https://github.com/MetaMask/metamask-docs/pull/1772))
 

snaps/features/custom-ui/index.md

@@ -16,6 +16,7 @@ implementing the following features:
 - [Home pages](home-pages.md)
 - [Transaction insights](../transaction-insights.md)
 - [Signature insights](../signature-insights.md)
+- [Notifications (Expanded View)](../notifications.md#expanded-view)
 
 :::note
 JSX is supported in the MetaMask extension and Flask version 12 and later. 

snaps/features/notifications.md

@@ -63,6 +63,32 @@ Each Snap can trigger up to:
 - Two native notifications per five minutes.
   :::
 
+## Expanded view
+
+In-app notifications can include an optional expanded view that will be displayed when the user clicks on the notification. The expanded view includes a title, content, and an optional footer link. 
+
+The following example displays a notification in MetaMask, with the message "Hello, world!" When the user clicks on the notification, the expanded view displays a page with a title, a paragraph, and a link to the MetaMask Snaps directory:
+
+```javascript title="index.js"
+await snap.request({
+  method: "snap_notify",
+  params: {
+    type: "inApp",
+    message: "Hello, world!",
+    title: "Hello",
+    content: ( 
+      <Box>
+        <Text>Did you know you can find more Snaps in the MetaMask Snaps Directory?</Text>
+      </Box>
+    ),
+    footerLink: {
+      text: "Visit the directory",
+      href: "https://snaps.metamask.io"
+    }
+  },
+})
+```
+
 ## Example
 
 See the

snaps/reference/snaps-api.md

@@ -864,7 +864,9 @@ await snap.request({
 ## `snap_notify`
 
 Displays a [notification](../features/notifications.md) in MetaMask or natively in the OS.
-Snaps can trigger a short notification text for actionable or time sensitive information.
+Snaps can trigger a short (up to 80 characters) notification message for actionable or time sensitive information. 
+`inApp` notifications can also include an optional [expanded view](../features/notifications.md#expanded-view). 
+The expanded view has a title, content, and optional footer link shown when a user clicks on the notification.
 
 #### Parameters
 
@@ -874,8 +876,21 @@ An object containing the contents of the notification:
   We recommend using `type: "inApp"` because there's no guarantee that native notifications are
   displayed to the user.
 - `message` - A message to show in the notification.
+- Optional expanded view parameters
+  - `title` - The title of the expanded view, shown when a user expands the notification.
+  - `content` - A custom Snap UI shown in the expanded view
+  - `footerLink` (optional) - A custom footer object with `text` and `href`, displayed as an action button 
+  in the footer of the expanded view.
 
-#### Example
+:::caution
+Expanded view can only be used with notifications of type `inApp`. 
+Expanded view must have at least a `title` and `content`. 
+:::
+
+#### Examples
+
+<Tabs>
+<TabItem value="In-app">
 
 ```javascript title="index.js"
 await snap.request({
@@ -887,6 +902,46 @@ await snap.request({
 })
 ```
 
+</TabItem>
+<TabItem value="In-app with Expanded View">
+
+```javascript title="index.js"
+await snap.request({
+  method: "snap_notify",
+  params: {
+    type: "inApp",
+    message: "Hello, world!",
+    title: "Hello from a Snap",
+    content: (
+      <Box>
+        <Heading>Hello, world!</Heading>
+        <Text>This is a notification sent from a Snap.</Text>
+      </Box>
+    ),
+    footerLink: { 
+      href: "https://snaps.metamask.io",
+      text: "Find more Snaps",
+    },
+  },
+})
+```
+
+</TabItem>
+<TabItem value="Native">
+
+```javascript title="index.js"
+await snap.request({
+  method: "snap_notify",
+  params: {
+    type: "native",
+    message: "Hello, world!",
+  },
+})
+```
+
+</TabItem>
+</Tabs>
+
 ## Interactive UI methods
 
 The following methods are used in [interactive UI](../features/custom-ui/interactive-ui.md).