w3wallets 0.10.2 → 1.0.0-beta.1

package/dist/index.mjs

@@ -1,19 +1,119 @@
 // src/withWallets.ts
 import path from "path";
 import fs from "fs";
-
-// tests/utils/sleep.ts
-var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-
-// src/withWallets.ts
+import crypto from "crypto";
 import {
   chromium
 } from "@playwright/test";
+var W3WALLETS_DIR = ".w3wallets";
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+function withWallets(test, ...wallets) {
+  const extensionInfo = wallets.map((w) => {
+    const extPath = path.join(process.cwd(), W3WALLETS_DIR, w.extensionDir);
+    ensureWalletExtensionExists(extPath, w.name);
+    const extensionId = w.extensionId ?? getExtensionId(extPath);
+    return { path: extPath, id: extensionId, name: w.name };
+  });
+  const extensionPaths = extensionInfo.map((e) => e.path);
+  const fixtures = {
+    context: async ({}, use, testInfo) => {
+      const userDataDir = path.join(
+        process.cwd(),
+        W3WALLETS_DIR,
+        ".context",
+        testInfo.testId
+      );
+      cleanUserDataDir(userDataDir);
+      const context = await chromium.launchPersistentContext(userDataDir, {
+        headless: testInfo.project.use.headless ?? true,
+        channel: "chromium",
+        args: [
+          `--disable-extensions-except=${extensionPaths.join(",")}`,
+          `--load-extension=${extensionPaths.join(",")}`
+        ]
+      });
+      while (context.serviceWorkers().length < extensionPaths.length) {
+        await sleep(1e3);
+      }
+      await Promise.all(context.pages().map((page) => page.close()));
+      await use(context);
+      await context.close();
+    }
+  };
+  for (let i = 0; i < wallets.length; i++) {
+    const wallet = wallets[i];
+    const info = extensionInfo[i];
+    fixtures[wallet.name] = async ({ context }, use) => {
+      const instance = await initializeExtension(
+        context,
+        wallet.WalletClass,
+        info.id,
+        wallet.name
+      );
+      await use(instance);
+    };
+  }
+  return test.extend(fixtures);
+}
+function cleanUserDataDir(userDataDir) {
+  if (fs.existsSync(userDataDir)) {
+    fs.rmSync(userDataDir, { recursive: true });
+  }
+}
+function ensureWalletExtensionExists(walletPath, walletName) {
+  if (!fs.existsSync(path.join(walletPath, "manifest.json"))) {
+    const cliAlias = walletName.toLowerCase();
+    throw new Error(
+      `Cannot find ${walletName}. Please download it via 'npx w3wallets ${cliAlias}'.`
+    );
+  }
+}
+function getExtensionId(extensionPath) {
+  const absolutePath = path.resolve(extensionPath);
+  const manifestPath = path.join(absolutePath, "manifest.json");
+  const manifest = JSON.parse(fs.readFileSync(manifestPath, "utf-8"));
+  let dataToHash;
+  if (manifest.key) {
+    dataToHash = Buffer.from(manifest.key, "base64");
+  } else {
+    dataToHash = Buffer.from(absolutePath);
+  }
+  const hash = crypto.createHash("sha256").update(dataToHash).digest();
+  const ALPHABET = "abcdefghijklmnop";
+  let extensionId = "";
+  for (let i = 0; i < 16; i++) {
+    const byte = hash[i];
+    extensionId += ALPHABET[byte >> 4 & 15];
+    extensionId += ALPHABET[byte & 15];
+  }
+  return extensionId;
+}
+async function initializeExtension(context, ExtensionClass, expectedExtensionId, walletName) {
+  const expectedUrl = `chrome-extension://${expectedExtensionId}/`;
+  const worker = context.serviceWorkers().find((w) => w.url().startsWith(expectedUrl));
+  if (!worker) {
+    const availableIds = context.serviceWorkers().map((w) => w.url().split("/")[2]).filter(Boolean);
+    throw new Error(
+      `Service worker for ${walletName} (ID: ${expectedExtensionId}) not found. Available extension IDs: [${availableIds.join(", ")}]`
+    );
+  }
+  const page = await context.newPage();
+  const extension = new ExtensionClass(page, expectedExtensionId);
+  await extension.gotoOnboardPage();
+  return extension;
+}
 
-// src/backpack/backpack.ts
+// src/core/types.ts
+function createWallet(config) {
+  return config;
+}
+
+// src/wallets/backpack/backpack.ts
 import { expect } from "@playwright/test";
 
-// src/wallet.ts
+// src/core/wallet.ts
 var Wallet = class {
   constructor(page, extensionId) {
     this.page = page;
@@ -21,7 +121,7 @@ var Wallet = class {
   }
 };
 
-// src/backpack/backpack.ts
+// src/wallets/backpack/backpack.ts
 var Backpack = class extends Wallet {
   defaultPassword = "11111111";
   currentAccountId = 0;
@@ -105,13 +205,146 @@ var Backpack = class extends Wallet {
   }
 };
 
-// src/polkadotJS/polkadotJS.ts
+// src/wallets/metamask/metamask.ts
 import { expect as expect2 } from "@playwright/test";
+var Metamask = class extends Wallet {
+  defaultPassword = "TestPassword123!";
+  async gotoOnboardPage() {
+    await this.page.goto(
+      `chrome-extension://${this.extensionId}/home.html#onboarding/welcome`
+    );
+    await expect2(
+      this.page.getByRole("button", { name: "I have an existing wallet" })
+    ).toBeVisible();
+  }
+  /**
+   * Onboard MetaMask with a mnemonic phrase
+   * @param mnemonic - 12 or 24 word recovery phrase
+   * @param password - Optional password (defaults to TestPassword123!)
+   */
+  async onboard(mnemonic, password) {
+    const pwd = password ?? this.defaultPassword;
+    await this.page.getByRole("button", { name: "I have an existing wallet" }).click();
+    await this.page.getByRole("button", { name: "Import using Secret Recovery Phrase" }).click();
+    const textbox = this.page.getByRole("textbox");
+    await textbox.click();
+    await this.page.keyboard.type(mnemonic, { delay: 5 });
+    const continueBtn = this.page.getByTestId("import-srp-confirm");
+    await continueBtn.click();
+    const passwordInputs = this.page.locator('input[type="password"]');
+    await passwordInputs.nth(0).fill(pwd);
+    await passwordInputs.nth(1).fill(pwd);
+    await this.page.getByRole("checkbox").click();
+    await this.page.getByRole("button", { name: "Create password" }).click();
+    const metametricsBtn = this.page.getByTestId("metametrics-i-agree");
+    await metametricsBtn.waitFor({ state: "visible", timeout: 3e4 });
+    await metametricsBtn.click();
+    const openWalletBtn = this.page.getByRole("button", {
+      name: /open wallet/i
+    });
+    await openWalletBtn.waitFor({ state: "visible", timeout: 3e4 });
+    await openWalletBtn.click();
+    await this.page.goto(
+      `chrome-extension://${this.extensionId}/sidepanel.html`
+    );
+    await this.page.getByTestId("account-options-menu-button").waitFor({ state: "visible", timeout: 3e4 });
+  }
+  async approve() {
+    await this.page.getByTestId("confirm-btn").or(this.page.getByTestId("confirm-footer-button")).or(this.page.getByTestId("page-container-footer-next")).or(this.page.getByRole("button", { name: /confirm/i })).click();
+    await this.page.getByTestId("account-options-menu-button").waitFor({ state: "visible", timeout: 3e4 });
+  }
+  async deny() {
+    const cancelBtn = this.page.getByTestId("cancel-btn").or(this.page.getByTestId("confirm-footer-cancel-button")).or(this.page.getByTestId("page-container-footer-cancel")).or(this.page.getByRole("button", { name: /cancel|reject/i }));
+    await cancelBtn.first().click();
+  }
+  /**
+   * Lock the MetaMask wallet
+   */
+  async lock() {
+    await this.page.getByTestId("account-options-menu-button").click();
+    await this.page.locator("text=Lock MetaMask").click();
+  }
+  /**
+   * Unlock MetaMask with password
+   */
+  async unlock(password) {
+    const pwd = password ?? this.defaultPassword;
+    const passwordInput = this.page.getByTestId("unlock-password");
+    await passwordInput.fill(pwd);
+    await this.page.getByTestId("unlock-submit").click();
+  }
+  /**
+   * Switch to an existing network in MetaMask
+   * @param networkName - Name of the network to switch to (e.g., "Ethereum Mainnet", "Sepolia")
+   */
+  async switchNetwork(networkName, networkType = "Popular") {
+    await this.page.getByTestId("sort-by-networks").click();
+    if (networkType === "Custom") {
+      await this.page.getByRole("tab", { name: "Custom" }).click();
+    }
+    await this.page.getByText(networkName).click();
+    await expect2(this.page.getByTestId("sort-by-networks")).toHaveText(
+      networkName
+    );
+  }
+  async switchAccount(accountName) {
+    await this.page.getByTestId("account-menu-icon").click();
+    await this.page.getByText(accountName, { exact: true }).click();
+  }
+  /**
+   * Add a custom network to MetaMask
+   */
+  async addNetwork(network) {
+    await this.page.goto(
+      `chrome-extension://${this.extensionId}/home.html#settings/networks/add-network`
+    );
+    await this.page.getByTestId("network-form-network-name").fill(network.name);
+    await this.page.getByTestId("network-form-rpc-url").fill(network.rpc);
+    await this.page.getByTestId("network-form-chain-id").fill(network.chainId.toString());
+    await this.page.getByTestId("network-form-ticker-input").fill(network.currencySymbol);
+    await this.page.getByRole("button", { name: /save/i }).click();
+  }
+  async addCustomNetwork(settings) {
+    await this.page.getByTestId("account-options-menu-button").click();
+    await this.page.getByTestId("global-menu-networks").click();
+    await this.page.getByRole("button", { name: "Add a custom network" }).click();
+    await this.page.getByTestId("network-form-network-name").fill(settings.name);
+    await this.page.getByTestId("network-form-chain-id").fill(settings.chainId.toString());
+    await this.page.getByTestId("network-form-ticker-input").fill(settings.currencySymbol);
+    await this.page.getByTestId("test-add-rpc-drop-down").click();
+    await this.page.getByRole("button", { name: "Add RPC URL" }).click();
+    await this.page.getByTestId("rpc-url-input-test").fill(settings.rpc);
+    await this.page.getByRole("button", { name: "Add URL" }).click();
+    await this.page.getByRole("button", { name: "Save" }).click();
+  }
+  async enableTestNetworks() {
+    await this.page.getByTestId("account-options-menu-button").click();
+    await this.page.getByTestId("global-menu-networks").click();
+    await this.page.locator("text=Show test networks >> xpath=following-sibling::label").click();
+    await this.page.keyboard.press("Escape");
+  }
+  async importAccount(privateKey) {
+    await this.page.getByTestId("account-menu-icon").click();
+    await this.page.getByTestId("account-list-add-wallet-button").click();
+    await this.page.getByTestId("add-wallet-modal-import-account").click();
+    await this.page.locator("#private-key-box").fill(privateKey);
+    await this.page.getByTestId("import-account-confirm-button").click();
+    await this.page.getByRole("button", { name: "Back" }).click();
+  }
+  async accountNameIs(accountName) {
+    await expect2(this.page.getByTestId("account-menu-icon")).toContainText(
+      accountName
+    );
+  }
+};
+
+// src/wallets/polkadot-js/polkadot-js.ts
+import { expect as expect3 } from "@playwright/test";
 var PolkadotJS = class extends Wallet {
   defaultPassword = "11111111";
   async gotoOnboardPage() {
     await this.page.goto(`chrome-extension://${this.extensionId}/index.html`);
-    await expect2(
+    await expect3(
       this.page.getByText("Before we start, just a couple of notes")
     ).toBeVisible();
   }
@@ -163,233 +396,29 @@ var PolkadotJS = class extends Wallet {
   }
 };
 
-// src/metamask/metamask.ts
-import { expect as expect3 } from "@playwright/test";
-var Metamask = class extends Wallet {
-  defaultPassword = "11111111";
-  async gotoOnboardPage() {
-    await this.page.goto(`chrome-extension://${this.extensionId}/home.html`);
-  }
-  /**
-   *
-   * @param mnemonic 12-word mnemonic seed phrase
-   */
-  async onboard(mnemonic, password = this.defaultPassword) {
-    await this.page.getByTestId("onboarding-import-wallet").click();
-    await this.page.getByTestId("onboarding-import-with-srp-button").click();
-    await this.page.getByTestId("srp-input-import__srp-note").pressSequentially(mnemonic, { delay: 5 });
-    await this.page.getByRole("button", { name: "Continue" }).click();
-    await this.page.getByTestId("create-password-new-input").fill(password);
-    await this.page.getByTestId("create-password-confirm-input").fill(password);
-    await this.page.getByTestId("create-password-terms").click();
-    await this.page.getByTestId("create-password-submit").click();
-    await this.page.getByTestId("metametrics-i-agree").click();
-    await this.page.getByTestId("onboarding-complete-done").click();
-    await this.clickTopRightCornerToCloseAllTheMarketingBullshit();
-  }
-  // async switchAccount(accountAddress: { address: string }): Promise<void>;
-  async switchAccount(accountNameOrAddress) {
-    await this.page.getByTestId("account-menu-icon").click();
-    await this.page.getByText(accountNameOrAddress.name, { exact: true }).click();
-  }
-  async importAccount(privateKey) {
-    await this.page.getByTestId("account-menu-icon").click();
-    await this.page.getByTestId("account-list-add-wallet-button").click();
-    await this.page.getByTestId("add-wallet-modal-import-account").click();
-    await this.page.locator("#private-key-box").fill(privateKey);
-    await this.page.getByTestId("import-account-confirm-button").click();
-    await this.page.getByRole("button", { name: "Back" }).click();
-  }
-  async addAccount(accountName) {
-    await this.page.getByTestId("account-menu-icon").click();
-    await this.page.getByTestId("multichain-account-menu-popover-action-button").click();
-    await this.page.getByTestId("multichain-account-menu-popover-add-account").click();
-    if (accountName) {
-      await this.page.locator("#account-name").fill(accountName);
-    }
-    await this.page.getByTestId("submit-add-account-with-name").click();
-  }
-  async getAccountName() {
-    const accountSelect = this.page.getByTestId("account-menu-icon");
-    await expect3(accountSelect).toBeVisible();
-    const text = await accountSelect.textContent();
-    if (!text) throw Error("Cannot get account name");
-    return text;
-  }
-  async connectToNetwork(networkName, networkType = "Popular") {
-    await this.page.getByTestId("sort-by-networks").click();
-    await this.page.getByRole("tab", { name: networkType, exact: true }).click();
-    const additionalNetwork = this.page.getByTestId("additional-network-item").getByText(networkName);
-    await this.page.getByText(networkName).click();
-  }
-  async addCustomNetwork(settings) {
-    await this.page.getByTestId("account-options-menu-button").click();
-    await this.page.getByTestId("global-menu-networks").click();
-    await this.page.getByRole("button", { name: "Add a custom network" }).click();
-    await this.page.getByTestId("network-form-network-name").fill(settings.name);
-    await this.page.getByTestId("network-form-chain-id").fill(settings.chainId.toString());
-    await this.page.getByTestId("network-form-ticker-input").fill(settings.currencySymbol);
-    await this.page.getByTestId("test-add-rpc-drop-down").click();
-    await this.page.getByRole("button", { name: "Add RPC URL" }).click();
-    await this.page.getByTestId("rpc-url-input-test").fill(settings.rpc);
-    await this.page.getByRole("button", { name: "Add URL" }).click();
-    await this.page.getByRole("button", { name: "Save" }).click();
-  }
-  async enableTestNetworks() {
-    await this.page.getByTestId("account-options-menu-button").click();
-    await this.page.getByTestId("global-menu-networks").click();
-    await this.page.locator("text=Show test networks >> xpath=following-sibling::label").click();
-    await this.page.keyboard.press("Escape");
-  }
-  async approve() {
-    const p = await this.page.context().newPage();
-    await p.goto(`chrome-extension://${this.extensionId}/notification.html`);
-    await p.locator(
-      '[data-testid="confirm-footer-button"], [data-testid="confirm-btn"], [data-testid="page-container-footer-next"], [data-testid="confirmation-submit-button"]'
-    ).click();
-    await p.waitForSelector(".multichain-app-header", {
-      timeout: 1e4
-    });
-    await p.close();
-  }
-  async deny() {
-    return this.usingNotificationPage(
-      (p) => p.getByTestId("cancel-btn").click()
-    );
-  }
-  async usingNotificationPage(action) {
-    const p = await this.page.context().newPage();
-    await p.goto(`chrome-extension://${this.extensionId}/notification.html`);
-    await action(p);
-    await p.close();
-  }
-  async clickTopRightCornerToCloseAllTheMarketingBullshit() {
-    await this.page.waitForTimeout(500);
-    await this.page.keyboard.press("Escape");
-    await this.page.mouse.click(1e3, 10);
-  }
-};
-
-// src/withWallets.ts
-var w3walletsDir = ".w3wallets";
-function withWallets(test, ...config) {
-  const withBackpack = config.includes("backpack");
-  const withPolkadotJS = config.includes("polkadotJS");
-  const withMetamask = config.includes("metamask");
-  const backpackPath = path.join(process.cwd(), w3walletsDir, "backpack");
-  const polkadotJSPath = path.join(process.cwd(), w3walletsDir, "polkadotJS");
-  const metamaskPath = path.join(process.cwd(), w3walletsDir, "metamask");
-  return test.extend({
-    /**
-     * Sets up a persistent browser context with the requested extensions loaded.
-     */
-    context: async ({}, use, testInfo) => {
-      const userDataDir = path.join(
-        process.cwd(),
-        ".w3wallets",
-        ".context",
-        testInfo.testId
-      );
-      cleanUserDataDir(userDataDir);
-      const extensionPaths = [];
-      if (withBackpack) {
-        ensureWalletExtensionExists(backpackPath, "backpack");
-        extensionPaths.push(backpackPath);
-      }
-      if (withPolkadotJS) {
-        ensureWalletExtensionExists(polkadotJSPath, "polkadotJS");
-        extensionPaths.push(polkadotJSPath);
-      }
-      if (withMetamask) {
-        ensureWalletExtensionExists(metamaskPath, "metamask");
-        extensionPaths.push(metamaskPath);
-      }
-      const context = await chromium.launchPersistentContext(userDataDir, {
-        headless: testInfo.project.use.headless ?? true,
-        channel: "chromium",
-        args: [
-          `--disable-extensions-except=${extensionPaths.join(",")}`,
-          `--load-extension=${extensionPaths.join(",")}`
-        ]
-      });
-      while (context.serviceWorkers().length < extensionPaths.length) {
-        await sleep(1e3);
-      }
-      await use(context);
-      await context.close();
-    },
-    backpack: async ({ context }, use) => {
-      if (!withBackpack) {
-        throw Error(
-          "The Backpack wallet hasn't been loaded. Add it to the withWallets function."
-        );
-      }
-      const backpack = await initializeExtension(
-        context,
-        Backpack,
-        "Backpack is not initialized"
-      );
-      await use(backpack);
-    },
-    polkadotJS: async ({ context }, use) => {
-      if (!withPolkadotJS) {
-        throw Error(
-          "The Polkadot{.js} wallet hasn't been loaded. Add it to the withWallets function."
-        );
-      }
-      const polkadotJS = await initializeExtension(
-        context,
-        PolkadotJS,
-        "Polkadot{.js} is not initialized"
-      );
-      await use(polkadotJS);
-    },
-    metamask: async ({ context }, use) => {
-      if (!withMetamask) {
-        throw Error(
-          "The Metamask wallet hasn't been loaded. Add it to the withWallets function."
-        );
-      }
-      const metamask = await initializeExtension(
-        context,
-        Metamask,
-        "Metamask is not initialized"
-      );
-      await use(metamask);
-    }
-  });
-}
-function cleanUserDataDir(userDataDir) {
-  if (fs.existsSync(userDataDir)) {
-    fs.rmSync(userDataDir, { recursive: true });
-  }
-}
-function ensureWalletExtensionExists(walletPath, walletName) {
-  if (!fs.existsSync(path.join(walletPath, "manifest.json"))) {
-    throw new Error(
-      `Cannot find ${walletName}. Please download it via 'npx w3wallets ${walletName}'.`
-    );
-  }
-}
-async function initializeExtension(context, ExtensionClass, notInitializedErrorMessage) {
-  const serviceWorkers = context.serviceWorkers();
-  let page = await context.newPage();
-  for (const worker of serviceWorkers) {
-    const extensionId = worker.url().split("/")[2];
-    if (!extensionId) {
-      continue;
-    }
-    const extension = new ExtensionClass(page, extensionId);
-    try {
-      await extension.gotoOnboardPage();
-      return extension;
-    } catch {
-      await page.close();
-      page = await context.newPage();
-    }
-  }
-  throw new Error(notInitializedErrorMessage);
-}
+// src/wallets/index.ts
+var backpack = createWallet({
+  name: "backpack",
+  extensionDir: "backpack",
+  WalletClass: Backpack
+});
+var metamask = createWallet({
+  name: "metamask",
+  extensionDir: "metamask",
+  WalletClass: Metamask
+});
+var polkadotJS = createWallet({
+  name: "polkadotJS",
+  extensionDir: "polkadotjs",
+  WalletClass: PolkadotJS
+});
 export {
+  Backpack,
+  Metamask,
+  PolkadotJS,
+  backpack,
+  createWallet,
+  metamask,
+  polkadotJS,
   withWallets
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "w3wallets",
   "description": "browser wallets for playwright",
-  "version": "0.10.2",
+  "version": "1.0.0-beta.1",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/Maksandre/w3wallets",
@@ -32,7 +32,7 @@
   ],
   "bin": "./src/scripts/download.js",
   "scripts": {
-    "start:ui": "yarn workspace @w3wallets/test-app buildAndStart",
+    "start:dapp": "yarn workspace @w3wallets/test-app start:all",
     "download-wallets": "npx w3wallets backpack polkadotJS metamask",
     "test": "npx playwright test --project=local --workers=2",
     "test:ci": "npx playwright test --project=ci",