@avalix/chroma 0.0.7 → 0.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@avalix/chroma",
   "type": "module",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "End-to-end testing library for Polkadot wallet interactions",
   "author": "Avalix Labs",
   "license": "MIT",
@@ -35,7 +35,8 @@
   },
   "files": [
     "dist",
-    "scripts"
+    "scripts",
+    "src"
   ],
   "scripts": {
     "build": "tsdown",

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'

package/src/context-playwright/types.ts

@@ -0,0 +1,83 @@
+import type { BrowserContext, Page } from '@playwright/test'
+
+// Wallet types - single source of truth
+export type WalletType = 'polkadot-js' | 'talisman'
+
+// Available wallet types as constant array
+export const WALLET_TYPES: readonly WalletType[] = ['polkadot-js', 'talisman'] as const
+
+// Wallet account configuration
+export interface WalletAccount {
+  seed: string
+  name?: string
+  password?: string
+}
+
+// Configuration for a single wallet
+export interface WalletConfig {
+  type: WalletType
+  downloadUrl?: string
+}
+
+// Base wallet instance - common methods for all wallets
+export interface BaseWalletInstance {
+  extensionId: string
+  importMnemonic: (options: WalletAccount) => Promise<void>
+  authorize: (options?: { accountName?: string }) => Promise<void>
+  approveTx: (options?: { password?: string }) => Promise<void>
+}
+
+// Polkadot-JS specific wallet instance
+export interface PolkadotJsWalletInstance extends BaseWalletInstance {
+  type: 'polkadot-js'
+}
+
+// Talisman specific wallet instance (with additional methods)
+export interface TalismanWalletInstance extends BaseWalletInstance {
+  type: 'talisman'
+  importEthPrivateKey: (options: { privateKey: string, name?: string, password?: string }) => Promise<void>
+}
+
+// Union type of all wallet instances
+export type WalletInstance = PolkadotJsWalletInstance | TalismanWalletInstance
+
+// Map wallet type to its instance
+export interface WalletTypeMap {
+  'polkadot-js': PolkadotJsWalletInstance
+  'talisman': TalismanWalletInstance
+}
+
+// Wallets collection - all wallet types
+export type Wallets = WalletTypeMap
+
+// Helper type to build a wallets object based on configured wallet types
+export type ConfiguredWallets<T extends readonly WalletConfig[]> = {
+  [K in T[number]['type']]: WalletTypeMap[K]
+}
+
+// Extended page with wallet context
+export type ExtendedPage = Page & {
+  __extensionContext: BrowserContext
+  __walletExtensionIds: Map<string, string>
+}
+
+// Complete test configuration - supports single and multi-wallet
+export interface ChromaTestOptions<T extends readonly WalletConfig[] = WalletConfig[]> {
+  // Wallet configuration (single or multiple)
+  wallets?: T
+  // Common options
+  headless?: boolean
+  slowMo?: number
+}
+
+// Test fixtures (test-scoped: recreated per test)
+export interface WalletFixtures<W = Wallets> {
+  page: ExtendedPage
+  wallets: W
+}
+
+// Worker fixtures (worker-scoped: persisted across tests)
+export interface WalletWorkerFixtures {
+  walletContext: BrowserContext
+  walletExtensionIds: Map<string, string>
+}

package/src/context-playwright/wallet-factory.ts

@@ -0,0 +1,123 @@
+import type { BrowserContext, Page } from '@playwright/test'
+import type {
+  BaseWalletInstance,
+  PolkadotJsWalletInstance,
+  TalismanWalletInstance,
+  WalletAccount,
+  WalletInstance,
+} from './types.js'
+import {
+  approvePolkadotJSTx,
+  authorizePolkadotJS,
+  importPolkadotJSAccount,
+} from '../wallets/polkadot-js.js'
+import {
+  approveTalismanTx,
+  authorizeTalisman,
+  importEthPrivateKey,
+} from '../wallets/talisman.js'
+
+// Helper to create extended page with wallet context
+function createExtendedPage(page: Page, context: BrowserContext, extensionId: string) {
+  const extPage = page as Page & { __extensionContext: BrowserContext, __extensionId: string }
+  extPage.__extensionContext = context
+  extPage.__extensionId = extensionId
+  return extPage
+}
+
+// Create wallet instance helper with proper typing
+export function createWalletInstance(
+  walletType: string,
+  extensionId: string,
+  context: BrowserContext,
+): WalletInstance {
+  // Store the imported account name for later use
+  let importedAccountName: string | undefined
+
+  // Common methods for all wallets
+  const baseInstance: BaseWalletInstance = {
+    extensionId,
+    importMnemonic: async (options: WalletAccount) => {
+      const page = context.pages()[0] || await context.newPage()
+      const extPage = createExtendedPage(page, context, extensionId)
+
+      // Store the account name for future authorize calls
+      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: { accountName?: string } = {}) => {
+      const page = context.pages()[0] || await context.newPage()
+      const extPage = createExtendedPage(page, context, extensionId)
+
+      // Use provided account name or fall back to the imported one
+      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: { password?: string } = {}) => {
+      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}`)
+      }
+    },
+  }
+
+  // Return wallet-specific instance with type discriminator
+  switch (walletType) {
+    case 'polkadot-js':
+      return {
+        ...baseInstance,
+        type: 'polkadot-js',
+      } as PolkadotJsWalletInstance
+
+    case 'talisman':
+      return {
+        ...baseInstance,
+        type: 'talisman',
+        importEthPrivateKey: async (options: { privateKey: string, name?: string, password?: string }) => {
+          const page = context.pages()[0] || await context.newPage()
+          const extPage = createExtendedPage(page, context, extensionId)
+
+          // Store the account name for future authorize calls
+          importedAccountName = options.name || 'Test Account'
+
+          // Use the seed property to pass the private key
+          await importEthPrivateKey(extPage, {
+            seed: options.privateKey,
+            name: options.name,
+            password: options.password,
+          })
+        },
+      } as TalismanWalletInstance
+
+    default:
+      throw new Error(`Unsupported wallet type: ${walletType}`)
+  }
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+// Main entry point for chroma package
+export { createWalletTest, expect, test } from './context-playwright'

package/src/utils/download-extension.ts

@@ -0,0 +1,68 @@
+import fs, { createWriteStream } from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+import { pipeline } from 'node:stream/promises'
+import { Extract } from 'unzipper'
+
+export interface DownloadExtensionOptions {
+  downloadUrl: string
+  extensionName: string
+  targetDir?: string
+}
+
+export async function downloadAndExtractExtension(options: DownloadExtensionOptions): Promise<string> {
+  const { downloadUrl, extensionName, targetDir } = options
+
+  // Default to a directory in the user's project, not relative to this package
+  const extensionsDir = targetDir || path.resolve(process.cwd(), '.chroma')
+  const extensionDir = path.join(extensionsDir, extensionName)
+  const zipPath = path.join(extensionsDir, `${extensionName}.zip`)
+
+  // Create extensions directory if it doesn't exist
+  await fs.promises.mkdir(extensionsDir, { recursive: true })
+
+  // Check if extension is already downloaded and extracted
+  if (fs.existsSync(extensionDir) && fs.readdirSync(extensionDir).length > 0) {
+    console.log(`✅ ${extensionName} already exists at:`, extensionDir)
+    return extensionDir
+  }
+
+  try {
+    console.log(`📥 Downloading ${extensionName}...`)
+
+    // Download the ZIP file
+    const response = await fetch(downloadUrl)
+    if (!response.ok) {
+      throw new Error(`Failed to download extension: ${response.status} ${response.statusText}`)
+    }
+
+    // Save ZIP file
+    const writeStream = createWriteStream(zipPath)
+    await pipeline(response.body!, writeStream)
+
+    console.log('📦 Extracting extension...')
+
+    // Standard zip extraction
+    await pipeline(
+      fs.createReadStream(zipPath),
+      Extract({ path: extensionDir }),
+    )
+
+    // Clean up ZIP file
+    await fs.promises.unlink(zipPath)
+
+    console.log(`✅ ${extensionName} downloaded and extracted to:`, extensionDir)
+    return extensionDir
+  }
+  catch (error) {
+    // Clean up on error
+    if (fs.existsSync(zipPath)) {
+      await fs.promises.unlink(zipPath).catch(() => {})
+    }
+    if (fs.existsSync(extensionDir)) {
+      await fs.promises.rm(extensionDir, { recursive: true, force: true }).catch(() => {})
+    }
+
+    throw new Error(`Failed to download/extract ${extensionName}: ${error instanceof Error ? error.message : String(error)}`)
+  }
+}

package/src/wallets/polkadot-js.ts

@@ -0,0 +1,114 @@
+import type { BrowserContext, Page } from '@playwright/test'
+import type { WalletAccount } from '../context-playwright/types.js'
+import fs from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+
+// Polkadot-JS specific configuration
+export 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',
+} as const
+
+// Helper function to find extension popup
+async function findExtensionPopup(context: BrowserContext, extensionId: string): Promise<Page> {
+  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}`)
+}
+
+// Get Polkadot-JS extension path
+export async function getPolkadotJSExtensionPath(): Promise<string> {
+  const extensionsDir = path.resolve(process.cwd(), '.chroma')
+  const extensionDir = path.join(extensionsDir, POLKADOT_JS_CONFIG.extensionName)
+
+  // Check if extension exists
+  if (!fs.existsSync(extensionDir) || fs.readdirSync(extensionDir).length === 0) {
+    throw new Error(
+      `Polkadot-JS extension not found at: ${extensionDir}\n\n`
+      + `Please download the extension first by running:\n`
+      + `  npx @avalix/chroma download-extensions\n\n`
+      + `Or if you're using this as a dependency:\n`
+      + `  npm run chroma:download\n`,
+    )
+  }
+
+  console.log(`✅ Found Polkadot-JS extension at: ${extensionDir}`)
+  return extensionDir
+}
+
+// Polkadot-JS specific account import implementation
+export async function importPolkadotJSAccount(
+  page: Page & { __extensionContext: BrowserContext, __extensionId: string },
+  { seed, name = 'Test Account', password = 'h3llop0lkadot!' }: WalletAccount,
+): Promise<void> {
+  const context = page.__extensionContext
+  const extensionId = page.__extensionId
+
+  const extensionPopupUrl = `chrome-extension://${extensionId}/index.html`
+  const extensionPage = await context.newPage()
+
+  try {
+    await extensionPage.goto(extensionPopupUrl)
+
+    // Handle "Understood, let me continue" button if it exists
+    const understoodButton = extensionPage.getByRole('button', { name: 'Understood, let me continue' })
+    if (await understoodButton.count() > 0) {
+      await understoodButton.click()
+      await extensionPage.waitForTimeout(100)
+    }
+
+    // Navigate to import seed page
+    await extensionPage.goto(`${extensionPopupUrl}#/account/import-seed`)
+
+    // Fill seed phrase and account details
+    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()
+  }
+}
+
+// Polkadot-JS specific authorization implementation
+export async function authorizePolkadotJS(
+  page: Page & { __extensionContext: BrowserContext, __extensionId: string },
+): Promise<void> {
+  const context = page.__extensionContext
+  const extensionId = page.__extensionId
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  const extensionPopup = await findExtensionPopup(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')
+}
+
+// Polkadot-JS specific transaction approval implementation
+export async function approvePolkadotJSTx(
+  page: Page & { __extensionContext: BrowserContext, __extensionId: string },
+  options: { password?: string } = {},
+): Promise<void> {
+  const { password = 'h3llop0lkadot!' } = options
+  const context = page.__extensionContext
+  const extensionId = page.__extensionId
+
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  const extensionPopup = await findExtensionPopup(context, extensionId)
+
+  await extensionPopup.getByRole('textbox').fill(password)
+  await extensionPopup.getByRole('button', { name: 'Sign the transaction' }).click()
+
+  console.log('✅ Polkadot-JS transaction signed successfully')
+}

package/src/wallets/talisman.ts

@@ -0,0 +1,159 @@
+import type { BrowserContext, Page } from '@playwright/test'
+import type { WalletAccount } from '../context-playwright/types.js'
+import fs from 'node:fs'
+import path from 'node:path'
+import process from 'node:process'
+
+// Talisman specific configuration
+export 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',
+} as const
+
+// Helper function to find extension popup
+async function findExtensionPopup(context: BrowserContext, extensionId: string): Promise<Page> {
+  // delay for 1 second
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  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}`)
+}
+
+// Get Talisman extension path
+export async function getTalismanExtensionPath(): Promise<string> {
+  const extensionsDir = path.resolve(process.cwd(), '.chroma')
+  const extensionDir = path.join(extensionsDir, TALISMAN_CONFIG.extensionName)
+
+  // Check if extension exists
+  if (!fs.existsSync(extensionDir) || fs.readdirSync(extensionDir).length === 0) {
+    throw new Error(
+      `Talisman extension not found at: ${extensionDir}\n\n`
+      + `Please download the extension first by running:\n`
+      + `  npx @avalix/chroma download-extensions\n\n`
+      + `Or if you're using this as a dependency:\n`
+      + `  npm run chroma:download\n`,
+    )
+  }
+
+  console.log(`✅ Found Talisman extension at: ${extensionDir}`)
+  return extensionDir
+}
+
+// Talisman specific Ethereum private key import implementation
+export async function importEthPrivateKey(
+  page: Page & { __extensionContext: BrowserContext, __extensionId: string },
+  { seed, name = 'Test Account', password = 'h3llop0lkadot!' }: WalletAccount,
+): Promise<void> {
+  const context = page.__extensionContext
+  const extensionId = page.__extensionId
+
+  // Wait for Talisman to open its onboarding tab
+  await new Promise(resolve => setTimeout(resolve, 2000))
+
+  // Find the onboarding tab
+  let extensionPage: Page | null = null
+  const pages = context.pages()
+
+  for (const page of pages) {
+    const url = page.url()
+    console.log(`📄 Found page: ${url}`)
+    if (url.includes('onboarding.html') || url.includes(`chrome-extension://${extensionId}/`)) {
+      extensionPage = page
+      console.log(`✅ Found Talisman onboarding page: ${url}`)
+      break
+    }
+  }
+
+  if (!extensionPage) {
+    throw new Error(`Talisman onboarding page not found`)
+  }
+
+  try {
+    // Bring the onboarding page to front
+    await extensionPage.bringToFront()
+
+    // Reload the onboarding page to ensure fresh state
+    console.log('🔄 Reloading onboarding page for fresh state...')
+    await extensionPage.reload()
+
+    // Wait for the page to load and become interactive
+    await extensionPage.waitForLoadState('domcontentloaded')
+    // await extensionPage.waitForTimeout(20000) // Give Talisman more time to initialize
+
+    // Click the get started button
+    await extensionPage.getByTestId('onboarding-get-started-button').click()
+
+    // Fill the password
+    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()
+
+    // Click the no thanks button
+    await extensionPage.getByRole('button', { name: 'No thanks' }).click()
+    await extensionPage.getByTestId('onboarding-enter-talisman-button').click()
+
+    // Import Ethereum account
+    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) {
+    console.error('❌ Error during Talisman account import:', error)
+    throw error
+  }
+}
+
+// Talisman specific authorization implementation
+export async function authorizeTalisman(
+  page: Page & { __extensionContext: BrowserContext, __extensionId: string },
+  options: { accountName?: string } = {},
+): Promise<void> {
+  const { accountName = 'Test Account' } = options
+  const context = page.__extensionContext
+  const extensionId = page.__extensionId
+  await new Promise(resolve => setTimeout(resolve, 1000))
+
+  const extensionPopup = await findExtensionPopup(context, extensionId)
+
+  // Authorize Talisman account
+  await extensionPopup.getByRole('button', { name: accountName }).click()
+  await extensionPopup.getByTestId('connection-connect-button').click()
+
+  try {
+    const anotherPopup = await findExtensionPopup(context, extensionId)
+    await anotherPopup.getByRole('button', { name: 'Approve' }).click()
+  }
+  catch {
+    console.log('No another popup found, skipping')
+  }
+}
+
+// Talisman specific transaction approval implementation
+export async function approveTalismanTx(
+  page: Page & { __extensionContext: BrowserContext, __extensionId: string },
+): Promise<void> {
+  const context = page.__extensionContext
+  const extensionId = page.__extensionId
+
+  await new Promise(resolve => setTimeout(resolve, 1000))
+  const extensionPopup = await findExtensionPopup(context, extensionId)
+
+  await extensionPopup.getByRole('button', { name: 'Approve' }).click()
+}