feat: upgrade metamask version to 24 (#264)

* adjust code for metamask version24

* Fix install flask snap

* Fix install flask snap wip

* code cleanup

* code cleanup

* fix

* code improvements

* code cleanup

* fix lint

* refactoring

Author: Lykhoyda

package.json

@@ -60,7 +60,7 @@
     "@chainsafe/eslint-config": "^1.0.0",
     "@ganache/console.log": "^0.2.0",
     "@jest/types": "^27.1.1",
-    "@metamask/snap-types": "^0.22.0",
+    "@metamask/snap-types": "^0.23.0",
     "@metamask/snaps-cli": "^0.22.0",
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/chai": "^4.2.22",

src/constants.ts

@@ -3,7 +3,7 @@ import { getDappateerPath } from "./helpers/utils";
 
 export const EXAMPLE_WEBSITE = "http://example.org";
 
-export const RECOMMENDED_METAMASK_VERSION = "v10.23.0";
+export const RECOMMENDED_METAMASK_VERSION = "v10.24.2";
 
 export const DEFAULT_METAMASK_USERDATA = path.join(
   getDappateerPath(),

src/helpers/actions.ts

@@ -2,6 +2,7 @@ import { DappeteerElementHandle } from "../element";
 import { DappeteerPage } from "../page";
 import {
   getAccountMenuButton,
+  getButton,
   getElementByContent,
   getInputByLabel,
   getSettingsSwitch,
@@ -41,7 +42,7 @@ export const profileDropdownClick = async (
       timeout: 2000,
     });
     await accountSwitcher.click();
-    await page.waitForSelector(".account-menu__accounts", {
+    await page.waitForSelector(".account-menu", {
       hidden: expectToClose,
       timeout: 2000,
     });
@@ -70,19 +71,37 @@ export const clickOnElement = async (
 export const clickOnButton = async (
   page: DappeteerPage,
   text: string,
-  options?: { timeout?: number; visible?: boolean }
+  options?: {
+    timeout?: number;
+    visible?: boolean;
+  }
 ): Promise<void> => {
-  const button = await getElementByContent(page, text, "button", options);
+  const button = await getButton(page, text, options);
   await button.click();
 };
 
+export const clickOnNavigationButton = async (
+  metaMaskPage: DappeteerPage,
+  text: string
+): Promise<void> => {
+  const navigationButton = await getButton(metaMaskPage, text);
+  await Promise.all([
+    metaMaskPage.waitForNavigation(),
+    navigationButton.click(),
+  ]);
+};
+
 export const clickOnLogo = async (page: DappeteerPage): Promise<void> => {
   const header = await page.waitForSelector(".app-header__logo-container", {
     visible: true,
   });
   await header.click();
 };
 
+export const goToHomePage = async (page: DappeteerPage): Promise<void> => {
+  return await clickOnButton(page, "app-header-logo");
+};
+
 /**
  *
  * @param page

src/helpers/selectors.ts

@@ -14,6 +14,12 @@ export const getElementByContent = (
     ...options,
   });
 
+export const getElementByTestId = (
+  page: DappeteerPage,
+  testId: string
+): Promise<DappeteerElementHandle | null> =>
+  page.waitForSelector(`[data-testid="${testId}"]`);
+
 export const getInputByLabel = (
   page: DappeteerPage,
   text: string,
@@ -75,3 +81,17 @@ export const getAccountMenuButton = (
   page.waitForXPath(`//button[contains(@title,'Account options')]`, {
     visible: true,
   });
+
+export const getButton = async (
+  page: DappeteerPage,
+  text: string,
+  options?: {
+    timeout?: number;
+    visible?: boolean;
+  }
+): Promise<DappeteerElementHandle> => {
+  return await Promise.race([
+    getElementByTestId(page, text),
+    getElementByContent(page, text, "button", options),
+  ]);
+};

src/metamask/sign.ts

@@ -26,6 +26,9 @@ export const sign =
 
     await clickOnButton(page, "Sign");
 
+    await page.waitForSelector(".signature-request-warning__content");
+    await clickOnButton(page, "Sign");
+
     // wait for MM to be back in a stable state
     await page.waitForSelector(".app-header", {
       visible: true,

src/page.ts

@@ -86,6 +86,8 @@ export interface DappeteerPage<P = unknown> {
     callback: Function | { default: Function }
   ): Promise<void>;
 
+  waitForNavigation(options?: { timeout: number });
+
   type(
     selector: string,
     text: string,

src/playwright/browser.ts

@@ -19,6 +19,7 @@ export class DPlaywrightBrowser
     super();
     this.browser.on("page", (page) => this.emit("targetcreated", page));
   }
+
   wsEndpoint(): string {
     return "";
   }

src/playwright/page.ts

@@ -140,6 +140,12 @@ export class DPlaywrightPage implements DappeteerPage<Page> {
     return this.page.exposeFunction(name, <Function>callback);
   }
 
+  async waitForNavigation(options?: {
+    timeout: number;
+  }): Promise<Response | null> {
+    return this.page.waitForNavigation(options);
+  }
+
   type(
     selector: string,
     text: string,

src/puppeteer/page.ts

@@ -1,4 +1,4 @@
-import { Browser, ElementHandle, Page } from "puppeteer";
+import { Browser, ElementHandle, Page, WaitForOptions } from "puppeteer";
 import { DappeteerBrowser } from "../browser";
 import { DappeteerElementHandle } from "../element";
 import { DappeteerPage, Response, Serializable, Unboxed } from "../page";
@@ -155,6 +155,10 @@ export class DPupeteerPage implements DappeteerPage<Page> {
     return this.page.exposeFunction(name, callback);
   }
 
+  async waitForNavigation(options: WaitForOptions): Promise<Response | null> {
+    return this.page.waitForNavigation(options);
+  }
+
   type(
     selector: string,
     text: string,

src/setup/index.ts

@@ -61,7 +61,6 @@ export const initSnapEnv = async (
     showTestNets,
   });
   const metaMaskPage = metaMask.page;
-
   const snapId = await metaMask.snaps.installSnap(snapIdOrLocation, opts);
 
   return {

src/setup/playwright.ts

@@ -17,6 +17,7 @@ export async function launchPlaywright(
       headless: options.headless,
       args: [
         "--accept-lang=en",
+        "--window-size=1920,1080",
         `--disable-extensions-except=${metamaskPath}`,
         `--load-extension=${metamaskPath}`,
         ...(options.playwrightOptions?.args || []),

src/setup/puppeteer.ts

@@ -14,6 +14,7 @@ export async function launchPuppeteer(
     userDataDir,
     args: [
       "--accept-lang=en",
+      "--window-size=1920,1080",
       `--disable-extensions-except=${metamaskPath}`,
       `--load-extension=${metamaskPath}`,
       ...(options.puppeteerOptions?.args || []),

src/setup/setupActions.ts

@@ -2,9 +2,11 @@ import {
   clickOnButton,
   clickOnElement,
   clickOnLogo,
+  clickOnNavigationButton,
   clickOnSettingsSwitch,
   openNetworkDropdown,
   typeOnInputField,
+  waitForOverlay,
 } from "../helpers";
 import { DappeteerPage } from "../page";
 import { MetaMaskOptions } from "../types";
@@ -42,22 +44,29 @@ export async function importAccount(
     password = "password1234",
   }: MetaMaskOptions
 ): Promise<void> {
-  await clickOnButton(metaMaskPage, "Import wallet");
+  await clickOnButton(metaMaskPage, "onboarding-import-wallet");
+  await clickOnButton(metaMaskPage, "metametrics-i-agree");
 
   for (const [index, seedPart] of seed.split(" ").entries())
     await typeOnInputField(metaMaskPage, `${index + 1}.`, seedPart);
+  await clickOnButton(metaMaskPage, "Confirm Secret");
 
   await typeOnInputField(metaMaskPage, "New password", password);
   await typeOnInputField(metaMaskPage, "Confirm password", password);
 
-  // select checkbox "I have read and agree to the"
-  const acceptTerms = await metaMaskPage.waitForSelector(
-    ".create-new-vault__terms-label"
-  );
-  await acceptTerms.click();
+  // onboarding/create-password URL
+  await clickOnButton(metaMaskPage, "create-password-terms");
+  await clickOnNavigationButton(metaMaskPage, "create-password-import");
+  await waitForOverlay(metaMaskPage);
+
+  // onboarding/completion URL
+  await clickOnNavigationButton(metaMaskPage, "onboarding-complete-done");
 
-  await clickOnButton(metaMaskPage, "Import");
-  await clickOnButton(metaMaskPage, "All done");
+  // onboarding/pin-extension tab 1 URL
+  await clickOnButton(metaMaskPage, "pin-extension-next");
+
+  // onboarding/pin-extension tab 2 URL
+  await clickOnNavigationButton(metaMaskPage, "pin-extension-done");
 }
 
 export const closePopup = async (page: DappeteerPage): Promise<void> => {
@@ -87,3 +96,10 @@ export const closeWhatsNewModal = async (
   await clickOnLogo(page);
   await page.waitForTimeout(333);
 };
+
+export const closeNewModal = async (page: DappeteerPage): Promise<void> => {
+  const closeButton = await page.$(
+    ".home__subheader-link--tooltip-content-header-button"
+  );
+  await closeButton.click();
+};

src/setup/setupMetaMask.ts

@@ -3,13 +3,12 @@ import { getMetaMask } from "../metamask";
 import { DappeteerPage } from "../page";
 import { Dappeteer, MetaMaskOptions } from "../types";
 
-import { clickOnButton, retry, waitForOverlay } from "../helpers";
+import { retry, waitForOverlay } from "../helpers";
 import {
   acceptTheRisks,
+  closeNewModal,
   closePortfolioTooltip,
   closeWhatsNewModal,
-  confirmWelcomeScreen,
-  declineAnalytics,
   importAccount,
   showTestNets,
 } from "./setupActions";
@@ -21,15 +20,15 @@ type Step<Options> = (
   page: DappeteerPage,
   options?: Options
 ) => void | Promise<void>;
+
 const defaultMetaMaskSteps: Step<MetaMaskOptions>[] = [
-  confirmWelcomeScreen,
-  declineAnalytics,
   importAccount,
+  closeNewModal,
   showTestNets,
-  closePortfolioTooltip,
   closeWhatsNewModal,
   closeWhatsNewModal,
 ];
+
 const flaskMetaMaskSteps: Step<MetaMaskOptions>[] = [
   acceptTheRisks,
   importAccount,
@@ -41,17 +40,23 @@ const flaskMetaMaskSteps: Step<MetaMaskOptions>[] = [
 
 const MM_HOME_REGEX = "chrome-extension://[a-z]+/home.html";
 
+function getDefaultSteps(browser: DappeteerBrowser): Step<MetaMaskOptions>[] {
+  if (browser.isMetaMaskFlask()) {
+    return flaskMetaMaskSteps;
+  }
+
+  return defaultMetaMaskSteps;
+}
+
 export async function setupMetaMask<Options = MetaMaskOptions>(
   browser: DappeteerBrowser,
   options?: Options,
   steps?: Step<Options>[]
 ): Promise<Dappeteer> {
   const page = await getMetaMaskPage(browser);
-  steps = steps ?? defaultMetaMaskSteps;
-  if (browser.isMetaMaskFlask()) {
-    steps = flaskMetaMaskSteps;
-  }
-  await page.setViewport({ height: 1080, width: 1920 });
+  steps = steps ?? getDefaultSteps(browser);
+
+  await page.setViewport({ width: 1920, height: 1080 });
   // goes through the installation steps required by MetaMask
   for (const step of steps) {
     await step(page, options);
@@ -75,8 +80,6 @@ export async function setupBootstrappedMetaMask(
   if (browser.isMetaMaskFlask()) await waitForOverlay(page);
   await retry(() => metaMask.unlock(password), 3);
 
-  if (browser.isMetaMaskFlask()) await clickOnButton(page, "No");
-
   await waitForOverlay(page);
   return metaMask;
 }

src/snap/install.ts

@@ -42,14 +42,12 @@ export const installSnap =
     const installAction = installPage.evaluate(
       ({ snapId, version }: { snapId: string; version?: string }) =>
         window.ethereum.request<InstallSnapResult>({
-          method: "wallet_enable",
-          params: [
-            {
-              [`wallet_snap_${snapId}`]: {
-                version: version ?? "latest",
-              },
+          method: "wallet_requestSnaps",
+          params: {
+            [snapId]: {
+              version: version ?? "latest",
             },
-          ],
+          },
         }),
       { snapId: snapIdOrLocation, version: opts?.version }
     );
@@ -65,7 +63,9 @@ export const installSnap =
     });
 
     if (isAskingForPermissions) {
-      await clickOnButton(flaskPage, "Approve & install");
+      await clickOnButton(flaskPage, "page-container-footer-next", {
+        visible: false,
+      });
 
       const isShowingWarning = await isFirstElementAppearsFirst({
         selectorOrXpath1: ".popover-wrap.snap-install-warning",
@@ -75,7 +75,7 @@ export const installSnap =
 
       if (isShowingWarning) {
         await flaskPage.waitForSelector(".checkbox-label", {
-          visible: true,
+          visible: false,
         });
         for await (const checkbox of await flaskPage.$$(".checkbox-label")) {
           await checkbox.click();
@@ -93,7 +93,7 @@ export const installSnap =
     const result = await installAction;
     await installPage.waitForTimeout(1000);
     await installPage.close({ runBeforeUnload: true });
-    if (!(snapIdOrLocation in result.snaps)) {
+    if (!(snapIdOrLocation in result)) {
       throw new Error("Failed to install snap");
     }
     snapServer.close();

src/snap/invokeSnap.ts

@@ -11,18 +11,18 @@ export async function invokeSnap<
   params?: P
 ): ReturnType<typeof window.ethereum.request<R>> {
   flaskOnly(page);
+
   const result = await page.evaluate(
     async (opts: { snapId: string; method: string; params: Unboxed<P> }) => {
       try {
         return await window.ethereum.request<R>({
           method: "wallet_invokeSnap",
-          params: [
-            `${opts.snapId}`,
-            {
+          params: {
+            request: {
               method: opts.method,
-              params: opts.params,
             },
-          ],
+            snapId: opts.snapId,
+          },
         });
       } catch (e) {
         return e as Error;