w3wallets 0.1.2 → 0.2.0

package/README.md

@@ -2,6 +2,7 @@
 
 ![License](https://img.shields.io/badge/License-MIT-yellow.svg)
 [![npm version](https://img.shields.io/npm/v/w3wallets.svg)](https://www.npmjs.com/package/w3wallets)
+![CodeQL](https://github.com/Maksandre/w3wallets/actions/workflows/github-code-scanning/codeql/badge.svg?branch=main)
 
 Web3 wallets for Playwright.
 
@@ -13,17 +14,15 @@ npm install -D w3wallets
 
 ## Getting Started
 
-Only the `Backpack` wallet is supported at this point.
+The `Backpack` and the `Polkadot{.js}` wallets are currently supported.
 
-#### 1. Download Backpack
+#### 1. Download wallets
 
-Currently, you need to download the extension manually. You can use [Chrome extension source viewer](https://chromewebstore.google.com/detail/chrome-extension-source-v/jifpbeccnghkjeaalbbjmodiffmgedin).
-
-Put the unzipped files to the root of your Playwright project `wallets/backpack`.
+```sh
+npx w3wallets backpack polkadotJS
+```
 
-<!-- ```sh
-npx w3wallets
-``` -->
+The unzipped files should be stored in the `.w3wallets/<wallet-name>` directory. Add them to `.gitignore`.
 
 #### 2. Wrap your fixture `withWallets`
 
@@ -31,7 +30,8 @@ npx w3wallets
 import { test as base } from "@playwright/test";
 import { withWallets } from "../src/withWallets";
 
-const test = withWallets(base, { backpack: true });
+// Specify one or many wallets that should be installed in the browser
+const test = withWallets(base, "backpack", "polkadotJS");
 
 test("has title", async ({ page, backpack }) => {
   await page.goto("https://playwright.dev/");
@@ -42,3 +42,38 @@ test("has title", async ({ page, backpack }) => {
   await backpack.onboard("Eclipse", privateKey);
 });
 ```
+
+## Run tests
+
+To work on this project in VS Code, make sure you open the project's root directory.
+
+0. Create the `.env` using `.env.example` as a reference.
+1. Install dependencies
+
+```sh
+yarn
+```
+
+2. Install Chrome browser
+
+```sh
+npx playwright install chromium
+```
+
+3. Download wallet extensions
+
+```sh
+npx w3wallets backpack polkadotJS
+```
+
+4. Start UI
+
+```sh
+yarn start:ui
+```
+
+5. Run Tests with Playwright
+
+```sh
+yarn test
+```

package/dist/index.d.mts

@@ -1,13 +1,27 @@
 import * as playwright_test from 'playwright/test';
 import { Page, test, BrowserContext } from '@playwright/test';
 
-type BackPackNetwork = "Eclipse" | "Ethereum";
+/**
+ * Represents the supported network types for the BackPack application.
+ */
+type BackPackNetwork = "Solana" | "Eclipse" | "Ethereum" | "Polygon" | "Base" | "Arbitrum" | "Optimism";
 
-declare class Backpack {
-    private page;
-    private extensionId;
-    private defaultPassword;
+type WalletName = "backpack" | "polkadotJS";
+type NoDuplicates<T extends readonly unknown[], Acc extends readonly unknown[] = []> = T extends [infer Head, ...infer Tail] ? Head extends Acc[number] ? never : [Head, ...NoDuplicates<Tail, [...Acc, Head]>] : T;
+interface IWallet {
+    gotoOnboardPage(): Promise<void>;
+}
+
+declare abstract class Wallet implements IWallet {
+    protected page: Page;
+    protected extensionId: string;
     constructor(page: Page, extensionId: string);
+    abstract gotoOnboardPage(): Promise<void>;
+}
+
+declare class Backpack extends Wallet {
+    private defaultPassword;
+    gotoOnboardPage(): Promise<void>;
     onboard(network: BackPackNetwork, privateKey: string): Promise<void>;
     unlock(): Promise<void>;
     goToSettings(accountName?: string): Promise<void>;
@@ -17,13 +31,22 @@ declare class Backpack {
     deny(): Promise<void>;
 }
 
-type Config = {
-    backpack: boolean;
-};
-declare function withWallets(test: typeof test, config: Config): playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & {
+declare class PolkadotJS extends Wallet {
+    private defaultPassword;
+    gotoOnboardPage(): Promise<void>;
+    onboard(seed: string, password?: string, name?: string): Promise<void>;
+    selectAllAccounts(): Promise<void>;
+    selectAccount(accountId: string): Promise<void>;
+    enterPassword(password?: string): Promise<void>;
+    approve(): Promise<void>;
+    deny(): Promise<void>;
+    private _getLabeledInput;
+}
+
+declare function withWallets<T extends readonly WalletName[]>(test: typeof test, ...config: NoDuplicates<T>): playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & {
     context: BrowserContext;
     backpack: Backpack;
-    extensionId: string;
+    polkadotJS: PolkadotJS;
 }, playwright_test.PlaywrightWorkerArgs & playwright_test.PlaywrightWorkerOptions>;
 
 export { withWallets };

package/dist/index.d.ts

@@ -1,13 +1,27 @@
 import * as playwright_test from 'playwright/test';
 import { Page, test, BrowserContext } from '@playwright/test';
 
-type BackPackNetwork = "Eclipse" | "Ethereum";
+/**
+ * Represents the supported network types for the BackPack application.
+ */
+type BackPackNetwork = "Solana" | "Eclipse" | "Ethereum" | "Polygon" | "Base" | "Arbitrum" | "Optimism";
 
-declare class Backpack {
-    private page;
-    private extensionId;
-    private defaultPassword;
+type WalletName = "backpack" | "polkadotJS";
+type NoDuplicates<T extends readonly unknown[], Acc extends readonly unknown[] = []> = T extends [infer Head, ...infer Tail] ? Head extends Acc[number] ? never : [Head, ...NoDuplicates<Tail, [...Acc, Head]>] : T;
+interface IWallet {
+    gotoOnboardPage(): Promise<void>;
+}
+
+declare abstract class Wallet implements IWallet {
+    protected page: Page;
+    protected extensionId: string;
     constructor(page: Page, extensionId: string);
+    abstract gotoOnboardPage(): Promise<void>;
+}
+
+declare class Backpack extends Wallet {
+    private defaultPassword;
+    gotoOnboardPage(): Promise<void>;
     onboard(network: BackPackNetwork, privateKey: string): Promise<void>;
     unlock(): Promise<void>;
     goToSettings(accountName?: string): Promise<void>;
@@ -17,13 +31,22 @@ declare class Backpack {
     deny(): Promise<void>;
 }
 
-type Config = {
-    backpack: boolean;
-};
-declare function withWallets(test: typeof test, config: Config): playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & {
+declare class PolkadotJS extends Wallet {
+    private defaultPassword;
+    gotoOnboardPage(): Promise<void>;
+    onboard(seed: string, password?: string, name?: string): Promise<void>;
+    selectAllAccounts(): Promise<void>;
+    selectAccount(accountId: string): Promise<void>;
+    enterPassword(password?: string): Promise<void>;
+    approve(): Promise<void>;
+    deny(): Promise<void>;
+    private _getLabeledInput;
+}
+
+declare function withWallets<T extends readonly WalletName[]>(test: typeof test, ...config: NoDuplicates<T>): playwright_test.TestType<playwright_test.PlaywrightTestArgs & playwright_test.PlaywrightTestOptions & {
     context: BrowserContext;
     backpack: Backpack;
-    extensionId: string;
+    polkadotJS: PolkadotJS;
 }, playwright_test.PlaywrightWorkerArgs & playwright_test.PlaywrightWorkerOptions>;
 
 export { withWallets };

package/dist/index.js

@@ -37,17 +37,33 @@ module.exports = __toCommonJS(index_exports);
 // src/withWallets.ts
 var import_path = __toESM(require("path"));
 var import_fs = __toESM(require("fs"));
-var import_test2 = require("@playwright/test");
+
+// tests/utils/sleep.ts
+var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// src/withWallets.ts
 var import_test3 = require("@playwright/test");
 
 // src/backpack/backpack.ts
 var import_test = require("@playwright/test");
-var Backpack = class {
+
+// src/wallet.ts
+var Wallet = class {
   constructor(page, extensionId) {
     this.page = page;
     this.extensionId = extensionId;
   }
+};
+
+// src/backpack/backpack.ts
+var Backpack = class extends Wallet {
   defaultPassword = "11111111";
+  async gotoOnboardPage() {
+    await this.page.goto(
+      `chrome-extension://${this.extensionId}/options.html?onboarding=true`
+    );
+    await (0, import_test.expect)(this.page.getByText("Welcome to Backpack")).toBeVisible();
+  }
   async onboard(network, privateKey) {
     await this.page.getByRole("button", { name: "Import wallet" }).click();
     await this.page.getByRole("button", { name: network }).click();
@@ -89,51 +105,164 @@ var Backpack = class {
   }
 };
 
+// src/polkadotJS/polkadotJS.ts
+var import_test2 = require("@playwright/test");
+var PolkadotJS = class extends Wallet {
+  defaultPassword = "11111111";
+  async gotoOnboardPage() {
+    await this.page.goto(`chrome-extension://${this.extensionId}/index.html`);
+    await (0, import_test2.expect)(
+      this.page.getByText("Before we start, just a couple of notes")
+    ).toBeVisible();
+  }
+  async onboard(seed, password, name) {
+    await this.page.getByRole("button", { name: "Understood, let me continue" }).click();
+    await this.page.locator(".popupToggle").first().click();
+    await this.page.getByText("Import account from pre-existing seed").click();
+    await this.page.locator(".seedInput").getByRole("textbox").fill(seed);
+    await this.page.getByRole("button", { name: "Next" }).click();
+    await this._getLabeledInput("A descriptive name for your account").fill(
+      name ?? "Test"
+    );
+    await this._getLabeledInput("A new password for this account").fill(
+      password ?? this.defaultPassword
+    );
+    await this._getLabeledInput("Repeat password for verification").fill(
+      password ?? this.defaultPassword
+    );
+    await this.page.getByRole("button", { name: "Add the account with the supplied seed" }).click();
+  }
+  async selectAllAccounts() {
+    await this.page.getByText("Select all").click();
+  }
+  async selectAccount(accountId) {
+    await this.page.locator(".accountWichCheckbox").filter({ hasText: accountId }).locator(".accountTree-checkbox").locator("span").check();
+  }
+  async enterPassword(password) {
+    await this._getLabeledInput("Password for this account").fill(
+      password ?? this.defaultPassword
+    );
+  }
+  async approve() {
+    const connect = this.page.getByRole("button", { name: "Connect" });
+    const signTransaction = this.page.getByRole("button", {
+      name: "Sign the transaction"
+    });
+    await connect.or(signTransaction).click();
+  }
+  async deny() {
+    const reject = this.page.getByRole("button", { name: "Reject" });
+    const cancel = this.page.getByRole("link", { name: "Cancel" });
+    await reject.or(cancel).click();
+  }
+  _getLabeledInput(label) {
+    return this.page.locator(
+      `//label[text()="${label}"]/following-sibling::input`
+    );
+  }
+};
+
 // src/withWallets.ts
-function withWallets(test, config) {
-  const backpack = import_path.default.join(process.cwd(), "wallets", "backpack");
+var w3walletsDir = ".w3wallets";
+function withWallets(test, ...config) {
+  const withBackpack = config.includes("backpack");
+  const withPolkadotJS = config.includes("polkadotJS");
+  const backpackPath = import_path.default.join(process.cwd(), w3walletsDir, "backpack");
+  const polkadotJSPath = import_path.default.join(process.cwd(), w3walletsDir, "polkadotJS");
   return test.extend({
-    backpack: async ({ context, extensionId }, use) => {
-      const page = context.pages()[0];
-      if (!page) throw Error("No pages in context");
-      const backpack2 = new Backpack(page, extensionId);
-      await page.goto(
-        `chrome-extension://${extensionId}/options.html?onboarding=true`
-      );
-      await use(backpack2);
-    },
+    /**
+     * Sets up a persistent browser context with the requested extensions loaded.
+     */
     context: async ({}, use, testInfo) => {
       const userDataDir = import_path.default.join(
         process.cwd(),
         ".w3wallets",
+        ".context",
         testInfo.testId
       );
-      if (import_fs.default.existsSync(userDataDir))
-        import_fs.default.rmSync(userDataDir, { recursive: true });
-      const backpackDownloaded = import_fs.default.existsSync(
-        import_path.default.join(backpack, "manifest.json")
-      );
-      if (!backpackDownloaded)
-        throw Error("Cannot find Backpack. download it `npx w3wallets`");
+      cleanUserDataDir(userDataDir);
+      const extensionPaths = [];
+      if (withBackpack) {
+        ensureWalletExtensionExists(backpackPath, "backpack");
+        extensionPaths.push(backpackPath);
+      }
+      if (withPolkadotJS) {
+        ensureWalletExtensionExists(polkadotJSPath, "polkadotJS");
+        extensionPaths.push(polkadotJSPath);
+      }
       const context = await import_test3.chromium.launchPersistentContext(userDataDir, {
         headless: false,
         args: [
-          `--disable-extensions-except=${backpack}`,
-          `--load-extension=${backpack}`
+          `--disable-extensions-except=${extensionPaths.join(",")}`,
+          `--load-extension=${extensionPaths.join(",")}`
         ]
       });
+      await context.waitForEvent("serviceworker");
+      while (context.serviceWorkers().length < extensionPaths.length) {
+        await sleep(1e3);
+      }
       await use(context);
       await context.close();
     },
-    extensionId: async ({ context }, use) => {
-      let [background] = context.serviceWorkers();
-      if (!background) background = await context.waitForEvent("serviceworker");
-      const extensionId = background.url().split("/")[2];
-      if (!extensionId) throw Error("No extension id");
-      await use(extensionId);
+    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);
     }
   });
 }
+function cleanUserDataDir(userDataDir) {
+  if (import_fs.default.existsSync(userDataDir)) {
+    import_fs.default.rmSync(userDataDir, { recursive: true });
+  }
+}
+function ensureWalletExtensionExists(walletPath, walletName) {
+  if (!import_fs.default.existsSync(import_path.default.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);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   withWallets

package/dist/index.mjs

@@ -1,17 +1,35 @@
 // src/withWallets.ts
 import path from "path";
 import fs from "fs";
-import "@playwright/test";
-import { chromium } from "@playwright/test";
+
+// tests/utils/sleep.ts
+var sleep = (ms) => new Promise((r) => setTimeout(r, ms));
+
+// src/withWallets.ts
+import {
+  chromium
+} from "@playwright/test";
 
 // src/backpack/backpack.ts
 import { expect } from "@playwright/test";
-var Backpack = class {
+
+// src/wallet.ts
+var Wallet = class {
   constructor(page, extensionId) {
     this.page = page;
     this.extensionId = extensionId;
   }
+};
+
+// src/backpack/backpack.ts
+var Backpack = class extends Wallet {
   defaultPassword = "11111111";
+  async gotoOnboardPage() {
+    await this.page.goto(
+      `chrome-extension://${this.extensionId}/options.html?onboarding=true`
+    );
+    await expect(this.page.getByText("Welcome to Backpack")).toBeVisible();
+  }
   async onboard(network, privateKey) {
     await this.page.getByRole("button", { name: "Import wallet" }).click();
     await this.page.getByRole("button", { name: network }).click();
@@ -53,51 +71,164 @@ var Backpack = class {
   }
 };
 
+// src/polkadotJS/polkadotJS.ts
+import { expect as expect2 } from "@playwright/test";
+var PolkadotJS = class extends Wallet {
+  defaultPassword = "11111111";
+  async gotoOnboardPage() {
+    await this.page.goto(`chrome-extension://${this.extensionId}/index.html`);
+    await expect2(
+      this.page.getByText("Before we start, just a couple of notes")
+    ).toBeVisible();
+  }
+  async onboard(seed, password, name) {
+    await this.page.getByRole("button", { name: "Understood, let me continue" }).click();
+    await this.page.locator(".popupToggle").first().click();
+    await this.page.getByText("Import account from pre-existing seed").click();
+    await this.page.locator(".seedInput").getByRole("textbox").fill(seed);
+    await this.page.getByRole("button", { name: "Next" }).click();
+    await this._getLabeledInput("A descriptive name for your account").fill(
+      name ?? "Test"
+    );
+    await this._getLabeledInput("A new password for this account").fill(
+      password ?? this.defaultPassword
+    );
+    await this._getLabeledInput("Repeat password for verification").fill(
+      password ?? this.defaultPassword
+    );
+    await this.page.getByRole("button", { name: "Add the account with the supplied seed" }).click();
+  }
+  async selectAllAccounts() {
+    await this.page.getByText("Select all").click();
+  }
+  async selectAccount(accountId) {
+    await this.page.locator(".accountWichCheckbox").filter({ hasText: accountId }).locator(".accountTree-checkbox").locator("span").check();
+  }
+  async enterPassword(password) {
+    await this._getLabeledInput("Password for this account").fill(
+      password ?? this.defaultPassword
+    );
+  }
+  async approve() {
+    const connect = this.page.getByRole("button", { name: "Connect" });
+    const signTransaction = this.page.getByRole("button", {
+      name: "Sign the transaction"
+    });
+    await connect.or(signTransaction).click();
+  }
+  async deny() {
+    const reject = this.page.getByRole("button", { name: "Reject" });
+    const cancel = this.page.getByRole("link", { name: "Cancel" });
+    await reject.or(cancel).click();
+  }
+  _getLabeledInput(label) {
+    return this.page.locator(
+      `//label[text()="${label}"]/following-sibling::input`
+    );
+  }
+};
+
 // src/withWallets.ts
-function withWallets(test, config) {
-  const backpack = path.join(process.cwd(), "wallets", "backpack");
+var w3walletsDir = ".w3wallets";
+function withWallets(test, ...config) {
+  const withBackpack = config.includes("backpack");
+  const withPolkadotJS = config.includes("polkadotJS");
+  const backpackPath = path.join(process.cwd(), w3walletsDir, "backpack");
+  const polkadotJSPath = path.join(process.cwd(), w3walletsDir, "polkadotJS");
   return test.extend({
-    backpack: async ({ context, extensionId }, use) => {
-      const page = context.pages()[0];
-      if (!page) throw Error("No pages in context");
-      const backpack2 = new Backpack(page, extensionId);
-      await page.goto(
-        `chrome-extension://${extensionId}/options.html?onboarding=true`
-      );
-      await use(backpack2);
-    },
+    /**
+     * 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
       );
-      if (fs.existsSync(userDataDir))
-        fs.rmSync(userDataDir, { recursive: true });
-      const backpackDownloaded = fs.existsSync(
-        path.join(backpack, "manifest.json")
-      );
-      if (!backpackDownloaded)
-        throw Error("Cannot find Backpack. download it `npx w3wallets`");
+      cleanUserDataDir(userDataDir);
+      const extensionPaths = [];
+      if (withBackpack) {
+        ensureWalletExtensionExists(backpackPath, "backpack");
+        extensionPaths.push(backpackPath);
+      }
+      if (withPolkadotJS) {
+        ensureWalletExtensionExists(polkadotJSPath, "polkadotJS");
+        extensionPaths.push(polkadotJSPath);
+      }
       const context = await chromium.launchPersistentContext(userDataDir, {
         headless: false,
         args: [
-          `--disable-extensions-except=${backpack}`,
-          `--load-extension=${backpack}`
+          `--disable-extensions-except=${extensionPaths.join(",")}`,
+          `--load-extension=${extensionPaths.join(",")}`
         ]
       });
+      await context.waitForEvent("serviceworker");
+      while (context.serviceWorkers().length < extensionPaths.length) {
+        await sleep(1e3);
+      }
       await use(context);
       await context.close();
     },
-    extensionId: async ({ context }, use) => {
-      let [background] = context.serviceWorkers();
-      if (!background) background = await context.waitForEvent("serviceworker");
-      const extensionId = background.url().split("/")[2];
-      if (!extensionId) throw Error("No extension id");
-      await use(extensionId);
+    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);
     }
   });
 }
+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);
+}
 export {
   withWallets
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "w3wallets",
   "description": "browser wallets for playwright",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "homepage": "https://github.com/Maksandre/w3wallets",
@@ -13,6 +13,15 @@
     "type": "git",
     "url": "git+https://github.com/Maksandre/w3wallets.git"
   },
+  "keywords": [
+    "e2e",
+    "playwright",
+    "backpack",
+    "testing",
+    "ethereum",
+    "polkadot",
+    "eclipse"
+  ],
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -22,6 +31,8 @@
   ],
   "bin": "./src/scripts/download.js",
   "scripts": {
+    "start:ui": "yarn workspace @w3wallets/test-app dev",
+    "test": "npx playwright test",
     "build": "tsup",
     "clean": "rm -rf dist",
     "check-format": "prettier --check .",
@@ -33,20 +44,21 @@
     "local-release": "changeset version && changeset publish"
   },
   "dependencies": {
-    "adm-zip": "^0.5.16",
-    "follow-redirects": "^1.15.9"
+    "follow-redirects": "^1.15.9",
+    "unzip-crx": "^0.2.0"
   },
   "devDependencies": {
     "@arethetypeswrong/cli": "^0.17.2",
     "@changesets/cli": "^2.27.11",
-    "@playwright/test": "^1.49.1",
+    "@playwright/test": "^1.50.1",
     "@types/node": "^22.10.5",
+    "dotenv": "^16.4.7",
     "prettier": "^3.4.2",
     "standard-version": "^9.5.0",
     "tsup": "^8.3.5",
     "typescript": "^5.7.2"
   },
   "peerDependencies": {
-    "@playwright/test": "^1.49.1"
+    "@playwright/test": "^1.50.1"
   }
 }

package/src/scripts/download.js

@@ -1,79 +1,307 @@
 #!/usr/bin/env node
 
+/**
+ *
+ * Downloads and extracts Chrome extensions by alias ("backpack" and "metamask")
+ *
+ * Usage:
+ *    npx w3wallets backpack
+ *    npx w3wallets metamask
+ *    npx w3wallets backpack metamask
+ */
+
 const fs = require("fs");
+const https = require("https");
 const path = require("path");
-const { https } = require("follow-redirects");
-const AdmZip = require("adm-zip");
-
-const args = process.argv.slice(2);
-
-// Default configurations
-const DEFAULT_WALLET = "backpack";
-const DEFAULT_DOWNLOAD_LINK =
-  "https://github.com/coral-xyz/backpack/releases/download/0.10.1-latest-4/build-beta-4.zip";
-
-// Parse arguments
-const walletArg = args.find((arg) => arg.startsWith("--wallet="));
-const downloadArg = args.find((arg) => arg.startsWith("--version="));
-
-const wallet = walletArg ? walletArg.split("=")[1] : DEFAULT_WALLET;
-const downloadLink = downloadArg
-  ? downloadArg.split("=")[1]
-  : DEFAULT_DOWNLOAD_LINK;
-const outputDir = path.resolve(`extensions/${wallet}`);
-const zipPath = path.resolve(outputDir, `${wallet}.zip`);
-
-console.log(`Fetching ${wallet}...`);
-
-// Ensure the output directory exists
-fs.mkdirSync(outputDir, { recursive: true });
-
-// Download the zip file
-https
-  .get(downloadLink, (response) => {
-    if (response.statusCode !== 200) {
-      console.error(
-        `Failed to download file. Status Code: ${response.statusCode}`,
-      );
-      return;
+const url = require("url");
+const zlib = require("zlib");
+
+// ---------------------------------------------------------------------
+// 1. Known aliases -> extension IDs
+// ---------------------------------------------------------------------
+const ALIASES = {
+  backpack: "aflkmfhebedbjioipglgcbcmnbpgliof",
+  metamask: "nkbihfbeogaeaoehlefnkodbefgpgknn",
+  polkadotJS: "mopnmbcafieddcagagdcbnhejhlodfdd",
+};
+
+// ---------------------------------------------------------------------
+// 2. Read aliases from CLI
+// ---------------------------------------------------------------------
+const inputAliases = process.argv.slice(2);
+
+if (!inputAliases.length) {
+  console.error("Usage: npx w3wallets <aliases...>");
+  console.error("Available aliases:", Object.keys(ALIASES).join(", "));
+  process.exit(1);
+}
+
+for (const alias of inputAliases) {
+  if (!ALIASES[alias]) {
+    console.error(
+      `Unknown alias "${alias}". Must be one of: ${Object.keys(ALIASES).join(", ")}`,
+    );
+    process.exit(1);
+  }
+}
+
+// ---------------------------------------------------------------------
+// 3. Main: download and extract each requested alias
+// ---------------------------------------------------------------------
+(async function main() {
+  for (const alias of inputAliases) {
+    const extensionId = ALIASES[alias];
+    console.log(`\n=== Processing alias: "${alias}" (ID: ${extensionId}) ===`);
+
+    try {
+      // 1) Download CRX
+      const crxBuffer = await downloadCrx(extensionId);
+      console.log(`Got CRX data for "${alias}"! ${crxBuffer.length} bytes`);
+
+      // 2) Save raw CRX to disk
+      const outDir = path.join(".w3wallets", alias);
+      fs.mkdirSync(outDir, { recursive: true });
+
+      const debugPath = path.join(outDir, `debug-${alias}.crx`);
+      fs.writeFileSync(debugPath, crxBuffer);
+      console.log(`Saved ${debugPath}`);
+
+      // 3) Extract CRX into "wallets/<alias>"
+      extractCrxToFolder(crxBuffer, outDir);
+      console.log(`Extraction complete! See folder: ${outDir}`);
+    } catch (err) {
+      console.error(`Failed to process "${alias}":`, err.message);
+      process.exit(1);
+    }
+  }
+})();
+
+// ---------------------------------------------------------------------
+// downloadCrx: Build CRX URL and fetch it
+// ---------------------------------------------------------------------
+async function downloadCrx(extensionId) {
+  const downloadUrl =
+    "https://clients2.google.com/service/update2/crx" +
+    "?response=redirect" +
+    "&prod=chrome" +
+    "&prodversion=9999" +
+    "&acceptformat=crx2,crx3" +
+    `&x=id%3D${extensionId}%26uc`;
+
+  console.log("Requesting:", downloadUrl);
+
+  const crxBuffer = await fetchUrl(downloadUrl);
+  return crxBuffer;
+}
+
+// ---------------------------------------------------------------------
+// fetchUrl: minimal GET + redirect handling
+// ---------------------------------------------------------------------
+function fetchUrl(
+  targetUrl,
+  options = {},
+  redirectCount = 0,
+  maxRedirects = 10,
+) {
+  return new Promise((resolve, reject) => {
+    if (redirectCount > maxRedirects) {
+      return reject(new Error("Too many redirects"));
     }
 
-    const fileStream = fs.createWriteStream(zipPath);
-    response.pipe(fileStream);
-
-    fileStream.on("finish", () => {
-      fileStream.close();
-      console.log(`Downloaded to ${zipPath}`);
-
-      // Unzip the file
-      console.log("Unzipping...");
-      const zip = new AdmZip(zipPath);
-      zip.extractAllTo(outputDir, true);
-      console.log(`Extracted to ${outputDir}`);
-
-      fs.unlinkSync(zipPath);
-
-      // Check if the result is a single directory with manifest.json inside
-      const files = fs.readdirSync(outputDir);
-      if (files.length === 1) {
-        const singleDirPath = path.join(outputDir, files[0]);
-        if (
-          fs.lstatSync(singleDirPath).isDirectory() &&
-          fs.existsSync(path.join(singleDirPath, "manifest.json"))
-        ) {
-          // Move all files from the directory to the outputDir
-          const nestedFiles = fs.readdirSync(singleDirPath);
-          nestedFiles.forEach((file) => {
-            const srcPath = path.join(singleDirPath, file);
-            const destPath = path.join(outputDir, file);
-            fs.renameSync(srcPath, destPath);
-          });
-        } else {
-          throw Error("Cannot find the manifest.json file");
-        }
+    const req = https.get(targetUrl, options, (res) => {
+      const { statusCode, headers } = res;
+
+      // Follow redirects
+      if ([301, 302, 303, 307, 308].includes(statusCode) && headers.location) {
+        const newUrl = url.resolve(targetUrl, headers.location);
+        res.resume(); // discard body
+        return resolve(
+          fetchUrl(newUrl, options, redirectCount + 1, maxRedirects),
+        );
+      }
+
+      if (statusCode !== 200) {
+        res.resume();
+        return reject(
+          new Error(`Request failed with status code ${statusCode}`),
+        );
       }
+
+      const dataChunks = [];
+      res.on("data", (chunk) => dataChunks.push(chunk));
+      res.on("end", () => resolve(Buffer.concat(dataChunks)));
     });
-  })
-  .on("error", (err) => {
-    console.error(`Error downloading the file: ${err.message}`);
+
+    req.on("error", (err) => reject(err));
   });
+}
+
+// ---------------------------------------------------------------------
+// extractCrxToFolder
+//   1) Checks "Cr24" magic
+//   2) Reads version (2 or 3/4) to find the ZIP start
+//   3) Uses parseZipCentralDirectory() to extract files properly
+// ---------------------------------------------------------------------
+function extractCrxToFolder(crxBuffer, outFolder) {
+  if (crxBuffer.toString("utf8", 0, 4) !== "Cr24") {
+    throw new Error("Not a valid CRX file (missing Cr24 magic).");
+  }
+
+  const version = crxBuffer.readUInt32LE(4);
+  let zipStartOffset = 0;
+  if (version === 2) {
+    const pkLen = crxBuffer.readUInt32LE(8);
+    const sigLen = crxBuffer.readUInt32LE(12);
+    zipStartOffset = 16 + pkLen + sigLen;
+  } else if (version === 3 || version === 4) {
+    const headerSize = crxBuffer.readUInt32LE(8);
+    zipStartOffset = 12 + headerSize;
+  } else {
+    throw new Error(
+      `Unsupported CRX version (${version}). Only v2, v3, or v4 are supported.`,
+    );
+  }
+
+  if (zipStartOffset >= crxBuffer.length) {
+    throw new Error("Malformed CRX: header size exceeds file length.");
+  }
+
+  const zipBuffer = crxBuffer.slice(zipStartOffset);
+
+  // Parse that ZIP via the central directory approach
+  parseZipCentralDirectory(zipBuffer, outFolder);
+}
+
+// ---------------------------------------------------------------------
+// parseZipCentralDirectory(buffer, outFolder)
+//   1) Finds End of Central Directory (EOCD) record (0x06054b50).
+//   2) Reads central directory for file metadata
+//   3) For each file, decompress into outFolder
+// ---------------------------------------------------------------------
+function parseZipCentralDirectory(zipBuffer, outFolder) {
+  const eocdSig = 0x06054b50;
+  let eocdPos = -1;
+  const minPos = Math.max(0, zipBuffer.length - 65557);
+  for (let i = zipBuffer.length - 4; i >= minPos; i--) {
+    if (zipBuffer.readUInt32LE(i) === eocdSig) {
+      eocdPos = i;
+      break;
+    }
+  }
+  if (eocdPos < 0) {
+    throw new Error("Could not find End of Central Directory (EOCD) in ZIP.");
+  }
+
+  const totalCD = zipBuffer.readUInt16LE(eocdPos + 10);
+  const cdSize = zipBuffer.readUInt32LE(eocdPos + 12);
+  const cdOffset = zipBuffer.readUInt32LE(eocdPos + 16);
+
+  if (cdOffset + cdSize > zipBuffer.length) {
+    throw new Error("Central directory offset/size out of range.");
+  }
+
+  let ptr = cdOffset;
+  const files = [];
+  for (let i = 0; i < totalCD; i++) {
+    const sig = zipBuffer.readUInt32LE(ptr);
+    if (sig !== 0x02014b50) {
+      throw new Error(`Central directory signature mismatch at ${ptr}`);
+    }
+    ptr += 4;
+
+    /* const verMade   = */ zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    const verNeed = zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    const flags = zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    const method = zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    /* const modTime   = */ zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    /* const modDate   = */ zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    const crc32 = zipBuffer.readUInt32LE(ptr);
+    ptr += 4;
+    const compSize = zipBuffer.readUInt32LE(ptr);
+    ptr += 4;
+    const unCompSize = zipBuffer.readUInt32LE(ptr);
+    ptr += 4;
+    const fLen = zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    const xLen = zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    const cLen = zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    /* const diskNo    = */ zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    /* const intAttr   = */ zipBuffer.readUInt16LE(ptr);
+    ptr += 2;
+    /* const extAttr   = */ zipBuffer.readUInt32LE(ptr);
+    ptr += 4;
+    const localHeaderOffset = zipBuffer.readUInt32LE(ptr);
+    ptr += 4;
+
+    const filename = zipBuffer.toString("utf8", ptr, ptr + fLen);
+    ptr += fLen + xLen + cLen; // skip the extra + comment
+
+    files.push({
+      filename,
+      method,
+      compSize,
+      unCompSize,
+      flags,
+      localHeaderOffset,
+      crc32,
+      verNeed,
+    });
+  }
+
+  fs.mkdirSync(outFolder, { recursive: true });
+
+  for (const file of files) {
+    const { filename, method, compSize, localHeaderOffset } = file;
+
+    if (filename.endsWith("/")) {
+      fs.mkdirSync(path.join(outFolder, filename), { recursive: true });
+      continue;
+    }
+
+    let lhPtr = localHeaderOffset;
+    const localSig = zipBuffer.readUInt32LE(lhPtr);
+    if (localSig !== 0x04034b50) {
+      throw new Error(`Local file header mismatch at ${lhPtr} for ${filename}`);
+    }
+    lhPtr += 4;
+
+    lhPtr += 2; // version needed
+    lhPtr += 2; // flags
+    lhPtr += 2; // method
+    lhPtr += 2; // mod time
+    lhPtr += 2; // mod date
+    lhPtr += 4; // crc32
+    lhPtr += 4; // comp size
+    lhPtr += 4; // uncomp size
+    const lhFNameLen = zipBuffer.readUInt16LE(lhPtr);
+    lhPtr += 2;
+    const lhXLen = zipBuffer.readUInt16LE(lhPtr);
+    lhPtr += 2;
+
+    lhPtr += lhFNameLen + lhXLen;
+    const fileData = zipBuffer.slice(lhPtr, lhPtr + compSize);
+
+    const outPath = path.join(outFolder, filename);
+    fs.mkdirSync(path.dirname(outPath), { recursive: true });
+
+    if (method === 0) {
+      fs.writeFileSync(outPath, fileData);
+    } else if (method === 8) {
+      const unzipped = zlib.inflateRawSync(fileData);
+      fs.writeFileSync(outPath, unzipped);
+    } else {
+      throw new Error(
+        `Unsupported compression method (${method}) for file ${filename}`,
+      );
+    }
+  }
+}