feat: snap notifications 137

package.json

@@ -43,7 +43,8 @@
   "dependencies": {
     "@metamask/providers": "^9.1.0",
     "node-stream-zip": "^1.13.0",
-    "serve-handler": "5.0.8"
+    "serve-handler": "5.0.8",
+    "strict-event-emitter": "^0.2.8"
   },
   "devDependencies": {
     "@chainsafe/eslint-config": "^1.0.0",
@@ -70,8 +71,8 @@
     "web3": "1.3.4"
   },
   "peerDependencies": {
-    "puppeteer": ">13",
-    "playwright": ">=1"
+    "playwright": ">=1",
+    "puppeteer": ">13"
   },
   "peerDependenciesMeta": {
     "soy-puppeteer": {
@@ -81,4 +82,4 @@
       "optional": true
     }
   }
-}
+}

src/metamask/index.ts

@@ -1,7 +1,6 @@
 import { Dappeteer } from "..";
 import { DappeteerBrowser } from "../browser";
 import { DappeteerPage } from "../page";
-
 import { acceptDialog } from "../snap/acceptDialog";
 import { rejectDialog } from "../snap/rejectDialog";
 import { getAllNotifications, installSnap, invokeSnap } from "../snap";
@@ -59,10 +58,10 @@ export const getMetaMask = (page: DappeteerPage): Promise<Dappeteer> => {
         deleteNetwork: deleteNetwork(page),
       },
       snaps: {
+        invokeSnap,
         getAllNotifications: getAllNotifications(page),
         acceptDialog: acceptDialog(page),
         rejectDialog: rejectDialog(page),
-        invokeSnap,
         installSnap: installSnap(page),
       },
       page,

src/page.ts

@@ -1,52 +1,80 @@
-import { DappeteerBrowser } from "./browser";
 import { DappeteerElementHandle } from "./element";
+import { DappeteerBrowser } from "./browser";
 
 export interface DappeteerPage<P = unknown> {
   $(selector: string): Promise<DappeteerElementHandle | null>;
+
   $eval<T>(
     selector: string,
     evalFn: (e: HTMLElement) => Promise<T> | T
   ): Promise<T>;
+
   $$eval<T>(
     selector: string,
     evalFn: (e: HTMLElement[]) => Promise<T[]> | T[]
   ): Promise<T[]>;
+
   $$(selector: string): Promise<DappeteerElementHandle[]>;
+
   getSource(): P;
+
   url(): string;
+
   browser(): DappeteerBrowser;
+
   bringToFront(): Promise<void>;
+
   goto(
     url: string,
     options?: {
       timeout?: number;
       waitUntil?: "load" | "domcontentloaded" | "networkidle" | "commit";
     }
   ): Promise<void>;
+
   title(): Promise<string>;
+
   close(options?: { runBeforeUnload?: boolean }): Promise<void>;
+
   reload(): Promise<void>;
+
   setViewport(opts: { height: number; width: number }): Promise<void>;
+
   waitForResponse(
     urlOrPredicate: string | ((res: Response) => boolean | Promise<boolean>),
     options?: {
       timeout?: number;
     }
   ): Promise<Response>;
+
   waitForSelector(
     selector: string,
     opts?: Partial<{ visible: boolean; timeout: number; hidden: boolean }>
   ): Promise<DappeteerElementHandle>;
+
   waitForXPath(
     xpath: string,
     opts?: Partial<{ visible: boolean; timeout: number }>
   ): Promise<DappeteerElementHandle>;
+
   waitForTimeout(timeout: number): Promise<void>;
+
   evaluate<Params extends Serializable, Result>(
     evaluateFn: (params: Unboxed<Params>) => Result,
     params?: Params
   ): Promise<Result>;
+
   screenshot(path: string): Promise<void>;
+
+  waitForFunction<Params extends Serializable>(
+    pageFunction: Function | string,
+    params?: Params
+  ): Promise<void>;
+
+  exposeFunction(
+    name: string,
+    callback: Function | { default: Function }
+  ): Promise<void>;
 }
 
 export type Unboxed<Arg> = Arg extends DappeteerElementHandle<any, infer T>

src/playwright/page.ts

@@ -104,14 +104,30 @@ export class DPlaywrightPage implements DappeteerPage<Page> {
   ): Promise<DappeteerElementHandle<ElementHandle>> {
     return this.waitForSelector(xpath, opts);
   }
+
   waitForTimeout(timeout: number): Promise<void> {
     return this.page.waitForTimeout(timeout);
   }
+
   evaluate<Params, Result>(
     evaluateFn: (params?: Unboxed<Params>) => Result | Promise<Result>,
     params?: Params
   ): Promise<Result> {
     //@ts-expect-error
     return this.page.evaluate(evaluateFn, params);
   }
+
+  async waitForFunction<Args>(
+    pageFunction: (params?: Unboxed<Args>) => void | string,
+    params?: Args
+  ): Promise<void> {
+    await this.page.waitForFunction(pageFunction, {}, params);
+  }
+
+  exposeFunction(
+    name: string,
+    callback: Function | { default: Function }
+  ): Promise<void> {
+    return this.page.exposeFunction(name, <Function>callback);
+  }
 }

src/puppeteer/page.ts

@@ -119,9 +119,11 @@ export class DPupeteerPage implements DappeteerPage<Page> {
       await this.page.waitForXPath(xpath, opts)
     );
   }
+
   waitForTimeout(timeout: number): Promise<void> {
     return this.page.waitForTimeout(timeout);
   }
+
   evaluate<Params extends Serializable, Result>(
     evaluateFn: (params?: Unboxed<Params>) => Result | Promise<Result>,
     params?: Params
@@ -131,4 +133,15 @@ export class DPupeteerPage implements DappeteerPage<Page> {
       params
     ) as Promise<Result>;
   }
+
+  async waitForFunction<Params extends Serializable>(
+    pageFunction: (params?: Unboxed<Params>) => void | string,
+    params?: Params
+  ): Promise<void> {
+    await this.page.waitForFunction(pageFunction, {}, params);
+  }
+
+  exposeFunction(name: string, callback: Function): Promise<void> {
+    return this.page.exposeFunction(name, callback);
+  }
 }

src/snap/NotificationsEmitter.ts

@@ -0,0 +1,83 @@
+import { StrictEventEmitter } from "strict-event-emitter";
+import { DappeteerPage } from "../page";
+import * as dappeteer from "../../src";
+import { clickOnElement, profileDropdownClick } from "../helpers";
+import { NotificationItem, NotificationList } from "./types";
+
+interface EventsMap {
+  notification: (notification: NotificationItem) => void;
+}
+
+class NotificationsEmitter extends StrictEventEmitter<EventsMap> {
+  private notificationsTab: DappeteerPage;
+  private readonly page: DappeteerPage;
+
+  constructor(
+    protected metamask: dappeteer.Dappeteer,
+    private notificationTimeout: number = 30000
+  ) {
+    super();
+    this.page = metamask.page;
+  }
+
+  private async exposeEmitNotificationToWindow(): Promise<void> {
+    await this.notificationsTab.exposeFunction(
+      "emitNotification",
+      (notification: NotificationItem) => {
+        this.emit("notification", notification);
+      }
+    );
+  }
+
+  private async openNotificationPage(): Promise<void> {
+    await this.page.bringToFront();
+    await profileDropdownClick(this.page);
+    await clickOnElement(this.page, "Notifications");
+
+    const newPage = await this.page.browser().newPage();
+    await newPage.goto(this.page.url());
+
+    await newPage.waitForSelector(".notifications__container", {
+      timeout: this.notificationTimeout,
+    });
+    this.notificationsTab = newPage;
+  }
+
+  private async observeNotificationsMutation(): Promise<void> {
+    await this.notificationsTab.evaluate(() => {
+      const observer = new MutationObserver((mutations) => {
+        for (const mutation of mutations) {
+          if (mutation.addedNodes.length) {
+            const element = mutation.addedNodes[0] as HTMLElement;
+            window.emitNotification({ message: element.innerText });
+            observer.disconnect();
+          }
+        }
+      });
+      observer.observe(document.querySelector(".notifications__container"), {
+        childList: true,
+      });
+    });
+  }
+
+  public async setup(): Promise<void> {
+    await this.openNotificationPage();
+    await this.exposeEmitNotificationToWindow();
+    await this.observeNotificationsMutation();
+  }
+
+  public async cleanup(): Promise<void> {
+    this.removeAllListeners("notification");
+    await this.notificationsTab.close();
+  }
+
+  public async waitForNotification(): Promise<void> {
+    await NotificationsEmitter.once(this, "notification");
+  }
+
+  public async getAllNotifications(): Promise<NotificationList> {
+    return await this.metamask.snaps.getAllNotifications();
+  }
+}
+
+export default NotificationsEmitter;

src/snap/types.ts

@@ -19,4 +19,5 @@ export interface InstallSnapResult {
   };
 }
 
-export type NotificationList = { message: string }[];
+export type NotificationItem = { message: string };
+export type NotificationList = NotificationItem[];

src/types.ts

@@ -4,7 +4,7 @@ import type { launch as puppeteerLaunch } from "puppeteer";
 import { DappeteerPage, Serializable } from "./page";
 import { Path } from "./setup/utils/metaMaskDownloader";
 import { InstallStep } from "./snap/install";
-import { NotificationList } from "./snap/types";
+import { NotificationItem, NotificationList } from "./snap/types";
 import { RECOMMENDED_METAMASK_VERSION } from "./index";
 
 export type DappeteerLaunchOptions = {
@@ -27,6 +27,7 @@ export type DappeteerLaunchOptions = {
 declare global {
   interface Window {
     ethereum: MetaMaskInpageProvider;
+    emitNotification: (notification: NotificationItem) => void;
   }
 }
 
@@ -64,7 +65,7 @@ export type Dappeteer = {
   page: DappeteerPage;
   snaps: {
     /**
-     * Returns all notifications in Metamask notifications page
+     * Returns all notifications in Metamask notifications page and go back to main page
      */
     getAllNotifications: () => Promise<NotificationList>;
     /**
@@ -73,7 +74,7 @@ export type Dappeteer = {
      * @param page Browser page where injected Metamask provider will be available.
      * For most snaps, openning google.com will suffice.
      * @param snapId id of your installed snap (result of invoking `installSnap` method)
-     * @param method snap method you wan't to invoke
+     * @param method snap method you want to invoke
      * @param params required parameters of snap method
      */
     invokeSnap: <Result = unknown, Params extends Serializable = Serializable>(
@@ -82,12 +83,11 @@ export type Dappeteer = {
       method: string,
       params?: Params
     ) => Promise<Partial<Result>>;
-
     /**
      * Installs snap. Function will throw if there is an error while installing snap.
      * @param snapIdOrLocation either pass in snapId or full path to your snap directory
      * where we can find bundled snap (you need to ensure snap is built)
-     * @param opts {Object} snap method you wan't to invoke
+     * @param opts {Object} snap method you want to invoke
      * @param opts.hasPermissions Set to true if snap uses some permissions
      * @param opts.hasKeyPermissions Set to true if snap uses key permissions
      * @param installationSnapUrl url of your dapp. Defaults to google.com

test/basic.spec.ts

@@ -1,10 +1,8 @@
 import { expect, use } from "chai";
 import chaiAsPromised from "chai-as-promised";
-
 import * as dappeteer from "../src";
 import { profileDropdownClick } from "../src/helpers";
-import { DappeteerPage } from "../src/page";
-
+import { DappeteerPage } from "../src";
 import { PASSWORD, TestContext } from "./constant";
 import { clickElement } from "./utils/utils";
 

test/flask/methods-snap/snap.manifest.json

@@ -3,7 +3,7 @@
   "description": "An example Snap written in TypeScript.",
   "proposedName": "Methods Snap\n",
   "source": {
-    "shasum": "xxu7kMfZ4zKgviSZ5K4gZKSDDGEYi2VqOK5bKAqoybo=",
+    "shasum": "65ylJ5v6kEUqE7jJEezI49brIzKhs3dSY8Y2uRxIIEY=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

test/flask/methods-snap/src/index.ts

@@ -25,7 +25,7 @@ export const onRpcRequest: OnRpcRequestHandler = async ({
           params: [
             {
               type: "inApp",
-              message: `Hello, in App notification`,
+              message: `Hello from methods snap in App notification`,
             },
           ],
         });

test/flask/permissions-snap/snap.manifest.json

@@ -3,7 +3,7 @@
   "description": "An example Snap written in TypeScript.",
   "proposedName": "Permissions Snap\n",
   "source": {
-    "shasum": "sApNS/DJjjs8psniSQzWlOdkzJ75IsbtlpdipfKarRI=",
+    "shasum": "LSrgdJ2wzwzWkfVsqwATqBpEFxjjanFr9JdZHu0DmdU=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

test/flask/permissions-snap/src/index.ts

@@ -15,6 +15,17 @@ export const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => {
           },
         ],
       });
+    case "notify_inApp": {
+      return wallet.request({
+        method: "snap_notify",
+        params: [
+          {
+            type: "inApp",
+            message: `Hello from permissions snap in App notification`,
+          },
+        ],
+      });
+    }
     default:
       throw new Error("Method not found.");
   }