feat: update MetaMask extension to v10.29.0 (#312)

* update `RECOMMENDED_METAMASK_VERSION` from `v10.25.0` to `v10.28.3` * fix MetaMask bootstrap steps * fix selectors and tests for latest mm * fix snaps manifest * fix testing snaps * update metamask to v10.29.0 * fix `tsconfig.json` files path * fix userData.spec.ts
ChainSafe · Apr 26, 2023 · b79ab4c · b79ab4c
1 parent a41e6dd
commit b79ab4c
Show file tree

Hide file tree

Showing 29 changed files with 23,037 additions and 13,913 deletions.
diff --git a/package.json b/package.json
@@ -61,8 +61,9 @@
     "@chainsafe/eslint-config": "^1.1.0",
     "@ganache/console.log": "^0.2.0",
     "@jest/types": "^27.1.1",
-    "@metamask/snap-types": "^0.23.0",
-    "@metamask/snaps-cli": "^0.22.0",
+    "@metamask/snaps-cli": "^0.30.0",
+    "@metamask/snaps-types": "^0.32.2",
+    "@metamask/snaps-ui": "^0.30.0",
     "@rushstack/eslint-patch": "^1.2.0",
     "@types/chai": "^4.2.22",
     "@types/chai-as-promised": "^7.1.5",

diff --git a/src/constants.ts b/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.25.0";
+export const RECOMMENDED_METAMASK_VERSION = "v10.29.0";
 
 export const DEFAULT_METAMASK_USERDATA = path.join(
   getDappateerPath(),

diff --git a/src/helpers/actions.ts b/src/helpers/actions.ts
@@ -1,9 +1,9 @@
 import { DappeteerElementHandle } from "../element";
 import { DappeteerPage } from "../page";
 import {
-  getAccountMenuButton,
   getButton,
   getElementByContent,
+  getElementByTestId,
   getInputByLabel,
   getSettingsSwitch,
 } from "./selectors";
@@ -71,11 +71,8 @@ export const profileDropdownClick = async (
 export const openAccountDropdown = async (
   page: DappeteerPage
 ): Promise<void> => {
-  const accMenu = await getAccountMenuButton(page);
-  await accMenu.click();
-  await page.waitForSelector(".menu__container.account-options-menu", {
-    visible: true,
-  });
+  await clickOnButton(page, "account-options-menu-button");
+  await getElementByTestId(page, "account-options-menu", { visible: true });
 };
 
 export const clickOnElement = async (
@@ -167,15 +164,15 @@ export const clickOnLittleDownArrowIfNeeded = async (
   page: DappeteerPage
 ): Promise<void> => {
   // wait for the signature page and content to be loaded
-  await page.waitForSelector('[data-testid="signature-cancel-button"]', {
+  await page.waitForSelector('[data-testid="page-container-footer-next"]', {
     visible: true,
   });
 
   // MetaMask requires users to read all the data
   // and scroll until the bottom of the message
   // before enabling the "Sign" button
   const isSignButtonDisabled = await page.$eval(
-    '[data-testid="signature-sign-button"]',
+    '[data-testid="page-container-footer-next"]',
     (button: HTMLButtonElement) => {
       return button.disabled;
     }

diff --git a/src/helpers/selectors.ts b/src/helpers/selectors.ts
@@ -77,6 +77,7 @@ export const getErrorMessage = async (
       page.waitForSelector(`span.error`, options),
       page.waitForSelector(`.typography--color-error-1`, options),
       page.waitForSelector(`.typography--color-error-default`, options),
+      page.waitForSelector(`.box--color-error-default`, options),
     ]).catch(() => null);
   if (!errorElement) return false;
   return page.evaluate(
@@ -85,13 +86,6 @@ export const getErrorMessage = async (
   );
 };
 
-export const getAccountMenuButton = (
-  page: DappeteerPage
-): Promise<DappeteerElementHandle | null> =>
-  page.waitForXPath(`//button[contains(@title,'Account options')]`, {
-    visible: true,
-  });
-
 export const getButton = async (
   page: DappeteerPage,
   text: string,
@@ -103,5 +97,6 @@ export const getButton = async (
   return await Promise.race([
     getElementByTestId(page, text, options),
     getElementByContent(page, text, "button", options),
+    getElementByContent(page, text, "span", options),
   ]);
 };
diff --git a/src/metamask/sign.ts b/src/metamask/sign.ts
@@ -26,8 +26,10 @@ export const sign =
 
     await clickOnButton(page, "Sign");
 
-    await page.waitForSelector(".signature-request-warning__content");
-    await clickOnButton(page, "Sign");
+    const warningSignButton = await page.waitForSelector(
+      ".signature-request-warning__footer__sign-button"
+    );
+    await warningSignButton.click();
 
     // wait for MM to be back in a stable state
     await page.waitForSelector(".app-header", {

diff --git a/src/setup/setupActions.ts b/src/setup/setupActions.ts
@@ -85,30 +85,8 @@ export const closePopup = async (page: DappeteerPage): Promise<void> => {
   await page.$eval(".popover-header__button", (node) => node.click());
 };
 
-export const closePortfolioTooltip = async (
-  page: DappeteerPage
-): Promise<void> => {
-  const closeButton = await page.waitForSelector(
-    `div.home__subheader-link--tooltip-content-header > button`,
-    {
-      timeout: 20000,
-    }
-  );
-  await closeButton.click();
-  await page.waitForTimeout(333);
-};
-
 export const closeWhatsNewModal = async (
   page: DappeteerPage
 ): Promise<void> => {
-  await page.reload();
-  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();
+  await clickOnButton(page, "popover-close");
 };
diff --git a/src/setup/setupMetaMask.ts b/src/setup/setupMetaMask.ts
@@ -6,8 +6,6 @@ import { Dappeteer, MetaMaskOptions } from "../types";
 import { retry, waitForOverlay } from "../helpers";
 import {
   acceptTheRisks,
-  closeNewModal,
-  closePortfolioTooltip,
   closeWhatsNewModal,
   enableEthSign,
   importAccount,
@@ -24,21 +22,16 @@ type Step<Options> = (
 
 const defaultMetaMaskSteps: Step<MetaMaskOptions>[] = [
   importAccount,
-  closeNewModal,
+  closeWhatsNewModal,
   showTestNets,
   enableEthSign,
-  closeWhatsNewModal,
-  closeWhatsNewModal,
 ];
 
 const flaskMetaMaskSteps: Step<MetaMaskOptions>[] = [
   acceptTheRisks,
   importAccount,
   showTestNets,
   enableEthSign,
-  closePortfolioTooltip,
-  closeWhatsNewModal,
-  closeWhatsNewModal,
 ];
 
 const MM_HOME_REGEX = "chrome-extension://[a-z]+/home.html";

diff --git a/src/snap/install.ts b/src/snap/install.ts
@@ -56,36 +56,34 @@ export const installSnap =
     await flaskPage.reload();
     await clickOnButton(flaskPage, "Connect");
 
+    await flaskPage.waitForSelector(".pulse-loader", { visible: false });
+    await flaskPage.waitForSelector(".snap-permissions-list");
+
+    await clickOnButton(flaskPage, "page-container-footer-next");
+
     const isAskingForPermissions = await isFirstElementAppearsFirst({
-      selectorOrXpath1: `//*[contains(text(), 'Approve & install')]`,
-      selectorOrXpath2: `//*[contains(text(), 'Install')]`,
+      selectorOrXpath1: `.checkbox-label`,
+      selectorOrXpath2: `.pulse-loader`,
       page: flaskPage,
     });
 
     if (isAskingForPermissions) {
-      await clickOnButton(flaskPage, "page-container-footer-next", {
+      await flaskPage.waitForSelector(".checkbox-label", {
         visible: false,
       });
-
-      const isShowingWarning = await isFirstElementAppearsFirst({
-        selectorOrXpath1: ".popover-wrap.snap-install-warning",
-        selectorOrXpath2: ".app-header__metafox-logo--icon",
-        page: flaskPage,
-      });
-
-      if (isShowingWarning) {
-        await flaskPage.waitForSelector(".checkbox-label", {
-          visible: false,
-        });
-        for await (const checkbox of await flaskPage.$$(".checkbox-label")) {
-          await checkbox.click();
-        }
-        await clickOnButton(flaskPage, "Confirm");
+      for await (const checkbox of await flaskPage.$$(".checkbox-label")) {
+        await checkbox.click();
       }
-    } else {
-      await clickOnButton(flaskPage, "Install");
+
+      await clickOnButton(flaskPage, "Confirm");
+      await flaskPage.waitForSelector(".pulse-loader", { visible: false });
     }
 
+    await flaskPage.waitForSelector(
+      '[data-testid="page-container-footer-next"]:not([disabled])'
+    );
+    await clickOnButton(flaskPage, "page-container-footer-next");
+
     for (const step of opts?.customSteps ?? []) {
       await step(flaskPage);
     }

diff --git a/test/basic.spec.ts b/test/basic.spec.ts
@@ -85,23 +85,6 @@ describe("basic interactions", function () {
     expect(sig).to.be.equal(EXPECTED_SHORT_TYPED_DATA_SIGNATURE);
   });
 
-  it("should switch network", async () => {
-    await metaMask.switchNetwork("localhost");
-
-    const selectedNetwork = await metaMaskPage.evaluate(
-      () =>
-        document.querySelector(".network-display > span:nth-child(2)").innerHTML
-    );
-    expect(selectedNetwork).to.be.equal("Localhost 8545");
-  });
-
-  it("should return eth balance", async () => {
-    await metaMask.switchNetwork("localhost");
-    const tokenBalance: number = await metaMask.helpers.getTokenBalance("ETH");
-    expect(tokenBalance).to.be.greaterThan(0);
-    await metaMask.switchNetwork("mainnet");
-  });
-
   it("should return 0 token balance when token not found", async () => {
     const tokenBalance: number = await metaMask.helpers.getTokenBalance(
       "FARTBUCKS"
@@ -137,6 +120,23 @@ describe("basic interactions", function () {
     expect(res).to.equal(true);
   });
 
+  it("should switch network", async () => {
+    await metaMask.switchNetwork("localhost");
+
+    const selectedNetwork = await metaMaskPage.evaluate(
+      () =>
+        document.querySelector(".network-display > span:nth-child(2)").innerHTML
+    );
+    expect(selectedNetwork).to.be.equal("Localhost 8545");
+  });
+
+  it("should return eth balance", async () => {
+    await metaMask.switchNetwork("localhost");
+    const tokenBalance: number = await metaMask.helpers.getTokenBalance("ETH");
+    expect(tokenBalance).to.be.greaterThan(0);
+    await metaMask.switchNetwork("mainnet");
+  });
+
   it("should import private key", async () => {
     const countAccounts = async (): Promise<number> => {
       await profileDropdownClick(metaMaskPage, false);
@@ -182,17 +182,18 @@ describe("basic interactions", function () {
   it("should create an account and switch back to the default", async () => {
     await metaMask.createAccount("Account 2");
     await metaMask.switchAccount(1);
+
     await profileDropdownClick(metaMaskPage);
-    await metaMaskPage.waitForSelector(".account-menu__check-mark svg");
+    await metaMaskPage.waitForSelector(".account-menu__check-mark span");
 
     const firstAccountSelected = await metaMaskPage.evaluate(() => {
       return !!document.querySelector(
-        ".account-menu__accounts .account-menu__account:nth-child(1) .account-menu__check-mark svg"
+        ".account-menu__accounts .account-menu__account:nth-child(1) .account-menu__check-mark span"
       );
     });
     const secondAccountSelected = await metaMaskPage.evaluate(() => {
       return !!document.querySelector(
-        ".account-menu__accounts .account-menu__account:nth-child(2) .account-menu__check-mark svg"
+        ".account-menu__accounts .account-menu__account:nth-child(2) .account-menu__check-mark span"
       );
     });
     expect((await metaMaskPage.$$(".account-menu__account")).length).to.eq(2);

diff --git a/test/flask/base-snap/package.json b/test/flask/base-snap/package.json
@@ -8,11 +8,12 @@
     "fix": "mm-snap manifest --fix"
   },
   "devDependencies": {
-    "@metamask/snaps-cli": "^0.22.0"
+    "@metamask/snaps-cli": "^0.30.0"
   },
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@metamask/snap-types": "^0.23.0"
+    "@metamask/snaps-types": "^0.32.2",
+    "@metamask/snaps-ui": "^0.30.0"
   }
 }
diff --git a/test/flask/base-snap/snap.manifest.json b/test/flask/base-snap/snap.manifest.json
@@ -3,7 +3,7 @@
   "description": "An example Snap written in TypeScript.",
   "proposedName": "Base Snap\n",
   "source": {
-    "shasum": "c3zJOCrroWks4m/x7cGUufmC/hlHwBtw8Pg52fvSVHA=",
+    "shasum": "0vyxxD4pWUxBD03/e+n9wOgm3Kqy+Sia9ZY79CyNFVs=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

diff --git a/test/flask/base-snap/src/index.ts b/test/flask/base-snap/src/index.ts
@@ -1,26 +1,17 @@
-import { OnRpcRequestHandler } from "@metamask/snap-types";
-
-declare const snap: {
-  request(param: {
-    method: string;
-    params: { type: "Confirmation"; content: Object };
-  }): Promise<unknown>;
-};
+import { OnRpcRequestHandler } from "@metamask/snaps-types";
+import { heading, panel, text } from "@metamask/snaps-ui";
 
 export const onRpcRequest: OnRpcRequestHandler = ({ origin, request }) => {
   switch (request.method) {
     case "hello":
       return snap.request({
         method: "snap_dialog",
         params: {
-          type: "Confirmation",
-          content: {
-            type: "panel",
-            children: [
-              { type: "heading", value: `Confirmation ${origin}` },
-              { type: "text", value: "Text here" },
-            ],
-          },
+          type: "confirmation",
+          content: panel([
+            heading(`Confirmation ${origin}`),
+            text("Text here"),
+          ]),
         },
       });
     default: