@avalix/chroma 0.0.6 → 0.0.8

package/dist/index.js

@@ -1,140 +1,289 @@
 import { chromium, expect, test as test$1 } from "@playwright/test";
-import fs, { createWriteStream } from "node:fs";
+import fs from "node:fs";
 import path from "node:path";
 import process from "node:process";
-import { pipeline } from "node:stream/promises";
-import { Extract } from "unzipper";
 
-//#region src/context-playwright/download-polkadot-js.ts
-const POLKADOT_JS_EXTENSION = "https://github.com/polkadot-js/extension/releases/download/v0.61.7/master-chrome-build.zip";
-async function downloadAndExtractPolkadotExtension(targetDir) {
-	const extensionsDir = targetDir || path.resolve(process.cwd(), ".chroma");
-	const extensionDir = path.join(extensionsDir, "polkadot-extension-chrome");
-	const zipPath = path.join(extensionsDir, "polkadot-extension.zip");
-	await fs.promises.mkdir(extensionsDir, { recursive: true });
-	if (fs.existsSync(extensionDir) && fs.readdirSync(extensionDir).length > 0) {
-		console.log("✅ Polkadot extension already exists at:", extensionDir);
-		return extensionDir;
+//#region src/wallets/polkadot-js.ts
+const POLKADOT_JS_CONFIG = {
+	downloadUrl: "https://github.com/polkadot-js/extension/releases/download/v0.61.7/master-chrome-build.zip",
+	extensionName: "polkadot-extension-0.61.7"
+};
+async function findExtensionPopup$1(context, extensionId) {
+	const pages = context.pages();
+	for (const p of pages) if (p.url().includes(`chrome-extension://${extensionId}/`)) return p;
+	throw new Error(`Extension popup not found for ID: ${extensionId}`);
+}
+async function getPolkadotJSExtensionPath() {
+	const extensionsDir = path.resolve(process.cwd(), ".chroma");
+	const extensionDir = path.join(extensionsDir, POLKADOT_JS_CONFIG.extensionName);
+	if (!fs.existsSync(extensionDir) || fs.readdirSync(extensionDir).length === 0) throw new Error(`Polkadot-JS extension not found at: ${extensionDir}\n\nPlease download the extension first by running:\n  npx @avalix/chroma download-extensions\n\nOr if you're using this as a dependency:\n  npm run chroma:download\n`);
+	console.log(`✅ Found Polkadot-JS extension at: ${extensionDir}`);
+	return extensionDir;
+}
+async function importPolkadotJSAccount(page, { seed, name = "Test Account", password = "h3llop0lkadot!" }) {
+	const context = page.__extensionContext;
+	const extensionPopupUrl = `chrome-extension://${page.__extensionId}/index.html`;
+	const extensionPage = await context.newPage();
+	try {
+		await extensionPage.goto(extensionPopupUrl);
+		const understoodButton = extensionPage.getByRole("button", { name: "Understood, let me continue" });
+		if (await understoodButton.count() > 0) {
+			await understoodButton.click();
+			await extensionPage.waitForTimeout(100);
+		}
+		await extensionPage.goto(`${extensionPopupUrl}#/account/import-seed`);
+		await extensionPage.locator("textarea").fill(seed);
+		await extensionPage.locator("button:has-text(\"Next\")").click();
+		await extensionPage.locator("input[type=\"text\"]").fill(name);
+		await extensionPage.locator("input[type=\"password\"]").fill(password);
+		await extensionPage.locator("div").filter({ hasText: /^Repeat password for verification$/ }).getByRole("textbox").fill(password);
+		await extensionPage.getByRole("button", { name: "Add the account with the supplied seed" }).click();
+		console.log(`✅ Created Polkadot-JS wallet account: ${name}`);
+	} finally {
+		await extensionPage.close();
+	}
+}
+async function authorizePolkadotJS(page) {
+	const context = page.__extensionContext;
+	const extensionId = page.__extensionId;
+	await new Promise((resolve) => setTimeout(resolve, 1e3));
+	const extensionPopup = await findExtensionPopup$1(context, extensionId);
+	await extensionPopup.getByText("Select all").click();
+	await extensionPopup.getByRole("button", { name: /Connect \d+ account\(s\)/ }).click();
+	console.log("✅ Polkadot-JS wallet connected successfully");
+}
+async function approvePolkadotJSTx(page, options = {}) {
+	const { password = "h3llop0lkadot!" } = options;
+	const context = page.__extensionContext;
+	const extensionId = page.__extensionId;
+	await new Promise((resolve) => setTimeout(resolve, 1e3));
+	const extensionPopup = await findExtensionPopup$1(context, extensionId);
+	await extensionPopup.getByRole("textbox").fill(password);
+	await extensionPopup.getByRole("button", { name: "Sign the transaction" }).click();
+	console.log("✅ Polkadot-JS transaction signed successfully");
+}
+
+//#endregion
+//#region src/wallets/talisman.ts
+const TALISMAN_CONFIG = {
+	downloadUrl: "https://github.com/avalix-labs/polkadot-wallets/raw/refs/heads/main/talisman/talisman-3.0.5.zip",
+	extensionName: "talisman-extension-3.0.5"
+};
+async function findExtensionPopup(context, extensionId) {
+	await new Promise((resolve) => setTimeout(resolve, 1e3));
+	const pages = context.pages();
+	for (const p of pages) if (p.url().includes(`chrome-extension://${extensionId}/`)) {
+		p.setViewportSize({
+			width: 400,
+			height: 600
+		});
+		p.waitForLoadState("domcontentloaded");
+		return p;
 	}
+	throw new Error(`Extension popup not found for ID: ${extensionId}`);
+}
+async function getTalismanExtensionPath() {
+	const extensionsDir = path.resolve(process.cwd(), ".chroma");
+	const extensionDir = path.join(extensionsDir, TALISMAN_CONFIG.extensionName);
+	if (!fs.existsSync(extensionDir) || fs.readdirSync(extensionDir).length === 0) throw new Error(`Talisman extension not found at: ${extensionDir}\n\nPlease download the extension first by running:\n  npx @avalix/chroma download-extensions\n\nOr if you're using this as a dependency:\n  npm run chroma:download\n`);
+	console.log(`✅ Found Talisman extension at: ${extensionDir}`);
+	return extensionDir;
+}
+async function importEthPrivateKey(page, { seed, name = "Test Account", password = "h3llop0lkadot!" }) {
+	const context = page.__extensionContext;
+	const extensionId = page.__extensionId;
+	await new Promise((resolve) => setTimeout(resolve, 2e3));
+	let extensionPage = null;
+	const pages = context.pages();
+	for (const page$1 of pages) {
+		const url = page$1.url();
+		console.log(`📄 Found page: ${url}`);
+		if (url.includes("onboarding.html") || url.includes(`chrome-extension://${extensionId}/`)) {
+			extensionPage = page$1;
+			console.log(`✅ Found Talisman onboarding page: ${url}`);
+			break;
+		}
+	}
+	if (!extensionPage) throw new Error(`Talisman onboarding page not found`);
 	try {
-		console.log("📥 Downloading Polkadot JS extension...");
-		const response = await fetch(POLKADOT_JS_EXTENSION);
-		if (!response.ok) throw new Error(`Failed to download extension: ${response.status} ${response.statusText}`);
-		const writeStream = createWriteStream(zipPath);
-		await pipeline(response.body, writeStream);
-		console.log("📦 Extracting extension...");
-		await pipeline(fs.createReadStream(zipPath), Extract({ path: extensionDir }));
-		await fs.promises.unlink(zipPath);
-		console.log("✅ Polkadot extension downloaded and extracted to:", extensionDir);
-		return extensionDir;
+		await extensionPage.bringToFront();
+		console.log("🔄 Reloading onboarding page for fresh state...");
+		await extensionPage.reload();
+		await extensionPage.waitForLoadState("domcontentloaded");
+		await extensionPage.getByTestId("onboarding-get-started-button").click();
+		await extensionPage.getByRole("textbox", { name: "Enter password" }).fill(password);
+		await extensionPage.getByRole("textbox", { name: "Confirm password" }).fill(password);
+		await extensionPage.getByTestId("onboarding-password-confirm-button").click();
+		await extensionPage.getByRole("button", { name: "No thanks" }).click();
+		await extensionPage.getByTestId("onboarding-enter-talisman-button").click();
+		await extensionPage.getByRole("button", { name: "Add account Create or import" }).click();
+		await extensionPage.getByRole("button", { name: "Import Import an existing" }).click();
+		await extensionPage.getByRole("button", { name: "Import via Private Key" }).click();
+		await extensionPage.getByRole("button", { name: "Select account platform" }).click();
+		await extensionPage.getByRole("option", { name: "Ethereum" }).locator("div").click();
+		await extensionPage.getByRole("textbox", { name: "Choose a name" }).fill(name);
+		await extensionPage.getByRole("textbox", { name: "Enter your private key" }).fill(seed);
+		await extensionPage.getByRole("button", { name: "Save" }).click();
+		await extensionPage.close();
+		console.log("✅ Talisman account import completed");
 	} catch (error) {
-		if (fs.existsSync(zipPath)) await fs.promises.unlink(zipPath).catch(() => {});
-		if (fs.existsSync(extensionDir)) await fs.promises.rmdir(extensionDir, { recursive: true }).catch(() => {});
-		throw new Error(`Failed to download/extract Polkadot extension: ${error instanceof Error ? error.message : String(error)}`);
+		console.error("❌ Error during Talisman account import:", error);
+		throw error;
+	}
+}
+async function authorizeTalisman(page, options = {}) {
+	const { accountName = "Test Account" } = options;
+	const context = page.__extensionContext;
+	const extensionId = page.__extensionId;
+	await new Promise((resolve) => setTimeout(resolve, 1e3));
+	const extensionPopup = await findExtensionPopup(context, extensionId);
+	await extensionPopup.getByRole("button", { name: accountName }).click();
+	await extensionPopup.getByTestId("connection-connect-button").click();
+	try {
+		await (await findExtensionPopup(context, extensionId)).getByRole("button", { name: "Approve" }).click();
+	} catch {
+		console.log("No another popup found, skipping");
 	}
 }
+async function approveTalismanTx(page) {
+	const context = page.__extensionContext;
+	const extensionId = page.__extensionId;
+	await new Promise((resolve) => setTimeout(resolve, 1e3));
+	await (await findExtensionPopup(context, extensionId)).getByRole("button", { name: "Approve" }).click();
+}
 
 //#endregion
-//#region src/context-playwright/index.ts
-const DEFAULT_WALLET_CONFIGS = {
-	"polkadot-js": { downloadUrl: "https://github.com/polkadot-js/extension/releases/download/v0.61.7/master-chrome-build.zip" },
-	"talisman": {}
-};
-async function getExtensionPath(walletType, walletConfig) {
-	const { customPath } = walletConfig;
-	if (customPath) return customPath;
+//#region src/context-playwright/types.ts
+const WALLET_TYPES = ["polkadot-js", "talisman"];
+
+//#endregion
+//#region src/context-playwright/wallet-factory.ts
+function createExtendedPage(page, context, extensionId) {
+	const extPage = page;
+	extPage.__extensionContext = context;
+	extPage.__extensionId = extensionId;
+	return extPage;
+}
+function createWalletInstance(walletType, extensionId, context) {
+	let importedAccountName;
+	const baseInstance = {
+		extensionId,
+		importMnemonic: async (options) => {
+			const page = context.pages()[0] || await context.newPage();
+			const extPage = createExtendedPage(page, context, extensionId);
+			importedAccountName = options.name || "Test Account";
+			switch (walletType) {
+				case "polkadot-js":
+					await importPolkadotJSAccount(extPage, options);
+					break;
+				case "talisman": throw new Error("Talisman importMnemonic is not yet implemented.");
+				default: throw new Error(`Unsupported wallet type: ${walletType}`);
+			}
+		},
+		authorize: async (options = {}) => {
+			const page = context.pages()[0] || await context.newPage();
+			const extPage = createExtendedPage(page, context, extensionId);
+			const accountName = options.accountName || importedAccountName;
+			switch (walletType) {
+				case "polkadot-js":
+					await authorizePolkadotJS(extPage);
+					break;
+				case "talisman":
+					await authorizeTalisman(extPage, { accountName });
+					break;
+				default: throw new Error(`Unsupported wallet type: ${walletType}`);
+			}
+		},
+		approveTx: async (options = {}) => {
+			const page = context.pages()[0] || await context.newPage();
+			const extPage = createExtendedPage(page, context, extensionId);
+			switch (walletType) {
+				case "polkadot-js":
+					await approvePolkadotJSTx(extPage, options);
+					break;
+				case "talisman":
+					await approveTalismanTx(extPage);
+					break;
+				default: throw new Error(`Unsupported wallet type: ${walletType}`);
+			}
+		}
+	};
 	switch (walletType) {
-		case "polkadot-js": return await downloadAndExtractPolkadotExtension();
-		case "talisman": throw new Error("Talisman wallet download not implemented yet");
+		case "polkadot-js": return {
+			...baseInstance,
+			type: "polkadot-js"
+		};
+		case "talisman": return {
+			...baseInstance,
+			type: "talisman",
+			importEthPrivateKey: async (options) => {
+				const page = context.pages()[0] || await context.newPage();
+				const extPage = createExtendedPage(page, context, extensionId);
+				importedAccountName = options.name || "Test Account";
+				await importEthPrivateKey(extPage, {
+					seed: options.privateKey,
+					name: options.name,
+					password: options.password
+				});
+			}
+		};
 		default: throw new Error(`Unsupported wallet type: ${walletType}`);
 	}
 }
-async function findExtensionPopup(context, extensionId) {
-	const pages = context.pages();
-	for (const p of pages) if (p.url().includes(`chrome-extension://${extensionId}/`)) return p;
-	throw new Error(`Extension popup not found for ID: ${extensionId}`);
+
+//#endregion
+//#region src/context-playwright/index.ts
+async function getExtensionPathForWallet(config) {
+	const { type } = config;
+	switch (type) {
+		case "polkadot-js": return await getPolkadotJSExtensionPath();
+		case "talisman": return await getTalismanExtensionPath();
+		default: throw new Error(`Unsupported wallet type: ${type}`);
+	}
 }
 function createWalletTest(options = {}) {
-	const { walletType = "polkadot-js", walletConfig, headless = false, slowMo = 150 } = options;
-	const finalWalletConfig = walletConfig || DEFAULT_WALLET_CONFIGS[walletType];
+	const { headless = false, slowMo = 150 } = options;
+	const walletConfigs = options.wallets && options.wallets.length > 0 ? options.wallets : [{ type: "polkadot-js" }];
+	const isMultiWallet = walletConfigs.length > 1;
 	return test$1.extend({
-		walletType: async ({}, use) => {
-			await use(walletType);
-		},
-		walletConfig: async ({}, use) => {
-			await use(finalWalletConfig);
-		},
-		page: async ({}, use) => {
-			const extensionPath = await getExtensionPath(walletType, finalWalletConfig);
+		walletContext: [async ({}, use) => {
+			const extensionPathsString = (await Promise.all(walletConfigs.map((config) => getExtensionPathForWallet(config)))).join(",");
 			const context = await chromium.launchPersistentContext("", {
 				headless,
 				channel: "chromium",
-				args: [`--load-extension=${extensionPath}`, `--disable-extensions-except=${extensionPath}`],
+				args: [`--load-extension=${extensionPathsString}`, `--disable-extensions-except=${extensionPathsString}`],
 				slowMo
 			});
-			const page = context.pages()[0] || await context.newPage();
-			const extendedPage = page;
-			extendedPage.__extensionContext = context;
-			let [background] = context.serviceWorkers();
-			if (!background) background = await context.waitForEvent("serviceworker");
-			extendedPage.__extensionId = background.url().split("/")[2];
-			await use(page);
+			await use(context);
 			await context.close();
+		}, { scope: "worker" }],
+		walletExtensionIds: [async ({ walletContext }, use) => {
+			const extensionIds = /* @__PURE__ */ new Map();
+			if (walletContext.serviceWorkers().length === 0) await walletContext.waitForEvent("serviceworker");
+			if (isMultiWallet) await new Promise((resolve) => setTimeout(resolve, 1e3));
+			const allServiceWorkers = walletContext.serviceWorkers();
+			for (let i = 0; i < walletConfigs.length && i < allServiceWorkers.length; i++) {
+				const extensionId = allServiceWorkers[i].url().split("/")[2];
+				const walletType = walletConfigs[i].type;
+				extensionIds.set(walletType, extensionId);
+				console.log(`✅ Loaded ${walletType} extension with ID: ${extensionId}`);
+			}
+			await use(extensionIds);
+		}, { scope: "worker" }],
+		page: async ({ walletContext, walletExtensionIds }, use) => {
+			const extendedPage = walletContext.pages()[0] || await walletContext.newPage();
+			extendedPage.__extensionContext = walletContext;
+			extendedPage.__walletExtensionIds = walletExtensionIds;
+			await use(extendedPage);
 		},
-		importAccount: async ({ page }, use) => {
-			const importAccount = async ({ seed, name = "Test Account", password = "h3llop0lkadot!" }) => {
-				const context = page.__extensionContext;
-				const extensionPopupUrl = `chrome-extension://${page.__extensionId}/index.html`;
-				const extensionPage = await context.newPage();
-				try {
-					await extensionPage.goto(extensionPopupUrl);
-					const understoodButton = extensionPage.getByRole("button", { name: "Understood, let me continue" });
-					if (await understoodButton.count() > 0) {
-						await understoodButton.click();
-						await extensionPage.waitForTimeout(100);
-					}
-					await extensionPage.goto(`${extensionPopupUrl}#/account/import-seed`);
-					await extensionPage.locator("textarea").fill(seed);
-					await extensionPage.locator("button:has-text(\"Next\")").click();
-					await extensionPage.locator("input[type=\"text\"]").fill(name);
-					await extensionPage.locator("input[type=\"password\"]").fill(password);
-					await extensionPage.locator("div").filter({ hasText: /^Repeat password for verification$/ }).getByRole("textbox").fill(password);
-					await extensionPage.getByRole("button", { name: "Add the account with the supplied seed" }).click();
-					console.log(`✅ Created wallet account: ${name}`);
-				} finally {
-					await extensionPage.close();
-				}
-			};
-			await use(importAccount);
-		},
-		authorize: async ({ page }, use) => {
-			const authorize = async () => {
-				const context = page.__extensionContext;
-				const extensionId = page.__extensionId;
-				await new Promise((resolve) => setTimeout(resolve, 1e3));
-				const extensionPopup = await findExtensionPopup(context, extensionId);
-				await extensionPopup.getByText("Select all").click();
-				await extensionPopup.getByRole("button", { name: /Connect \d+ account\(s\)/ }).click();
-				console.log("✅ Wallet connected successfully");
-			};
-			await use(authorize);
-		},
-		approveTx: async ({ page }, use) => {
-			const approveTx = async (options$1 = {}) => {
-				const { password = "h3llop0lkadot!" } = options$1;
-				const context = page.__extensionContext;
-				const extensionId = page.__extensionId;
-				await new Promise((resolve) => setTimeout(resolve, 1e3));
-				const extensionPopup = await findExtensionPopup(context, extensionId);
-				await extensionPopup.getByRole("textbox").fill(password);
-				await extensionPopup.getByRole("button", { name: "Sign the transaction" }).click();
-				console.log("✅ Transaction signed successfully");
-			};
-			await use(approveTx);
+		wallets: async ({ walletContext, walletExtensionIds }, use) => {
+			const walletMap = {};
+			for (const [walletType, extensionId] of walletExtensionIds) if (WALLET_TYPES.includes(walletType)) walletMap[walletType] = createWalletInstance(walletType, extensionId, walletContext);
+			await use(walletMap);
 		}
 	});
 }
 const test = createWalletTest();
 
 //#endregion
-export { createWalletTest, downloadAndExtractPolkadotExtension, expect, test };
+export { createWalletTest, expect, test };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avalix/chroma",
   "type": "module",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "description": "End-to-end testing library for Polkadot wallet interactions",
   "author": "Avalix Labs",
   "license": "MIT",
@@ -30,14 +30,20 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "bin": {
+    "chroma": "./scripts/cli.js"
+  },
   "files": [
-    "dist"
+    "dist",
+    "scripts",
+    "src"
   ],
   "scripts": {
     "build": "tsdown",
     "dev": "tsdown --watch",
     "lint": "eslint --fix .",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "download-extensions": "rm -rf .chroma && tsx scripts/download-extensions.ts"
   },
   "peerDependencies": {
     "@playwright/test": "^1.55.0"
@@ -51,7 +57,8 @@
     "@types/node": "^24.3.3",
     "@types/unzipper": "^0.10.10",
     "eslint": "^9.35.0",
-    "tsdown": "latest"
+    "tsdown": "latest",
+    "tsx": "^4.20.6"
   },
   "publishConfig": {
     "access": "public"

package/scripts/cli.js

@@ -0,0 +1,30 @@
+#!/usr/bin/env node
+
+import { spawn } from 'node:child_process'
+import path from 'node:path'
+import process from 'node:process'
+import { fileURLToPath } from 'node:url'
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+
+const command = process.argv[2]
+
+if (command === 'download-extensions') {
+  const scriptPath = path.join(__dirname, 'download-extensions.ts')
+
+  // Use tsx to run TypeScript file
+  const child = spawn('npx', ['tsx', scriptPath], {
+    stdio: 'inherit',
+    shell: true,
+  })
+
+  child.on('exit', (code) => {
+    process.exit(code || 0)
+  })
+}
+else {
+  console.log('Unknown command:', command)
+  console.log('\nAvailable commands:')
+  console.log('  download-extensions - Download wallet extensions for testing')
+  process.exit(1)
+}

package/scripts/download-extensions.ts

@@ -0,0 +1,32 @@
+#!/usr/bin/env node
+import process from 'node:process'
+import { downloadAndExtractExtension } from '../src/utils/download-extension.js'
+import { POLKADOT_JS_CONFIG } from '../src/wallets/polkadot-js.js'
+import { TALISMAN_CONFIG } from '../src/wallets/talisman.js'
+
+async function main() {
+  console.log('🚀 Downloading Chroma wallet extensions...\n')
+
+  try {
+    // Download Polkadot-JS extension
+    await downloadAndExtractExtension({
+      downloadUrl: POLKADOT_JS_CONFIG.downloadUrl,
+      extensionName: POLKADOT_JS_CONFIG.extensionName,
+    })
+
+    // Download Talisman extension
+    await downloadAndExtractExtension({
+      downloadUrl: TALISMAN_CONFIG.downloadUrl,
+      extensionName: TALISMAN_CONFIG.extensionName,
+    })
+
+    console.log('\n✅ All extensions downloaded successfully!')
+    console.log('You can now run your Playwright tests.')
+  }
+  catch (error) {
+    console.error('\n❌ Failed to download extensions:', error instanceof Error ? error.message : String(error))
+    process.exit(1)
+  }
+}
+
+main()

package/src/context-playwright/index.ts

@@ -0,0 +1,139 @@
+import type {
+  ChromaTestOptions,
+  ConfiguredWallets,
+  ExtendedPage,
+  WalletConfig,
+  WalletFixtures,
+  WalletInstance,
+  Wallets,
+  WalletType,
+  WalletWorkerFixtures,
+} from './types.js'
+import { test as base, chromium } from '@playwright/test'
+import { getPolkadotJSExtensionPath } from '../wallets/polkadot-js.js'
+import { getTalismanExtensionPath } from '../wallets/talisman.js'
+import { WALLET_TYPES } from './types.js'
+import { createWalletInstance } from './wallet-factory.js'
+
+// Helper function to get extension path for a wallet config
+async function getExtensionPathForWallet(config: WalletConfig): Promise<string> {
+  const { type } = config
+
+  switch (type) {
+    case 'polkadot-js':
+      return await getPolkadotJSExtensionPath()
+    case 'talisman':
+      return await getTalismanExtensionPath()
+    default:
+      throw new Error(`Unsupported wallet type: ${type}`)
+  }
+}
+
+// Create a test function with wallet configuration
+// Supports single and multi-wallet modes
+export function createWalletTest<const T extends readonly WalletConfig[]>(
+  options: ChromaTestOptions<T> = {} as ChromaTestOptions<T>,
+) {
+  const { headless = false, slowMo = 150 } = options
+
+  // Default to polkadot-js if no wallets specified
+  const walletConfigs: readonly WalletConfig[] = options.wallets && options.wallets.length > 0
+    ? options.wallets
+    : [{ type: 'polkadot-js' }]
+
+  const isMultiWallet = walletConfigs.length > 1
+
+  // Compute the expected wallets type
+  type ExpectedWallets = T extends readonly WalletConfig[] ? ConfiguredWallets<T> : Wallets
+
+  return base.extend<WalletFixtures<ExpectedWallets>, WalletWorkerFixtures>({
+    // Worker-scoped: Browser context with extension(s) (persists across all tests in worker)
+    // eslint-disable-next-line no-empty-pattern
+    walletContext: [async ({}, use) => {
+      // Get all extension paths
+      const extensionPaths = await Promise.all(
+        walletConfigs.map(config => getExtensionPathForWallet(config)),
+      )
+
+      // Join paths with comma for Chrome args
+      const extensionPathsString = extensionPaths.join(',')
+
+      const context = await chromium.launchPersistentContext('', {
+        headless,
+        channel: 'chromium',
+        args: [
+          `--load-extension=${extensionPathsString}`,
+          `--disable-extensions-except=${extensionPathsString}`,
+        ],
+        slowMo,
+      })
+
+      await use(context)
+      await context.close()
+    }, { scope: 'worker' }],
+
+    // Worker-scoped: Map of wallet type to extension ID
+    walletExtensionIds: [async ({ walletContext }, use) => {
+      const extensionIds = new Map<string, string>()
+
+      // Wait for all service workers to load
+      const serviceWorkers = walletContext.serviceWorkers()
+      if (serviceWorkers.length === 0) {
+        // Wait for at least one service worker
+        await walletContext.waitForEvent('serviceworker')
+      }
+
+      // Give some time for all extensions to load
+      if (isMultiWallet) {
+        await new Promise(resolve => setTimeout(resolve, 1000))
+      }
+
+      // Get all service workers (one per extension)
+      const allServiceWorkers = walletContext.serviceWorkers()
+
+      // Map service workers to wallet types
+      // Note: The order should match the walletConfigs order
+      for (let i = 0; i < walletConfigs.length && i < allServiceWorkers.length; i++) {
+        const extensionId = allServiceWorkers[i].url().split('/')[2]
+        const walletType = walletConfigs[i].type
+        extensionIds.set(walletType, extensionId)
+        console.log(`✅ Loaded ${walletType} extension with ID: ${extensionId}`)
+      }
+
+      await use(extensionIds)
+    }, { scope: 'worker' }],
+
+    // Main page with extension context (uses worker-scoped context)
+    page: async ({ walletContext, walletExtensionIds }, use) => {
+      const page = walletContext.pages()[0] || await walletContext.newPage()
+
+      // Store context and extension IDs on page
+      const extendedPage = page as ExtendedPage
+      extendedPage.__extensionContext = walletContext
+      extendedPage.__walletExtensionIds = walletExtensionIds
+
+      await use(extendedPage)
+      // Note: Don't close the page or context here since they're worker-scoped
+    },
+
+    // Wallet instances for each configured wallet
+    wallets: async ({ walletContext, walletExtensionIds }, use) => {
+      const walletMap: Partial<ExpectedWallets> = {}
+
+      // Create wallet instance for each configured wallet
+      for (const [walletType, extensionId] of walletExtensionIds) {
+        if (WALLET_TYPES.includes(walletType as WalletType)) {
+          const instance = createWalletInstance(walletType, extensionId, walletContext);
+          (walletMap as Record<string, WalletInstance>)[walletType] = instance
+        }
+      }
+
+      await use(walletMap as ExpectedWallets)
+    },
+  })
+}
+
+// Default test with Polkadot JS wallet (with persistent wallet support via worker-scoped fixtures)
+export const test: ReturnType<typeof createWalletTest> = createWalletTest()
+
+export { expect } from '@playwright/test'