✨ feat: Add keplr wallet support and shared utils package

examples/new-dawn/test/playwright/wallet-setup/basic.setup.ts

@@ -1,10 +1,11 @@
+import { BrowserContext, Page } from '@playwright/test'
+import { MetaMask } from '@synthetixio/synpress'
 import { defineWalletSetup } from '@synthetixio/synpress'
-import { MetaMask } from '@synthetixio/synpress/playwright'
 
 const SEED_PHRASE = 'test test test test test test test test test test test junk'
 const PASSWORD = 'SynpressIsAwesomeNow!!!'
 
-export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+export default defineWalletSetup(PASSWORD, async (context: BrowserContext, walletPage: Page) => {
   const metamask = new MetaMask(context, walletPage, PASSWORD)
 
   await metamask.importWallet(SEED_PHRASE)

examples/new-dawn/test/playwright/wallet-setup/connected.setup.ts

@@ -1,11 +1,11 @@
+import type { BrowserContext, Page } from '@playwright/test'
+import { MetaMask, getExtensionId } from '@synthetixio/synpress'
 import { defineWalletSetup } from '@synthetixio/synpress'
-import { MetaMask, getExtensionId } from '@synthetixio/synpress/playwright'
-import 'dotenv/config'
 
 const SEED_PHRASE = process.env.SEED_PHRASE
 const PASSWORD = process.env.WALLET_PASSWORD
 
-export default defineWalletSetup(PASSWORD, async (context, walletPage) => {
+export default defineWalletSetup(PASSWORD, async (context: BrowserContext, walletPage: Page) => {
   // This is a workaround for the fact that the MetaMask extension ID changes.
   // This workaround won't be needed in the near future! 😁
   const extensionId = await getExtensionId(context, 'MetaMask')

package.json

@@ -2,7 +2,7 @@
   "private": true,
   "scripts": {
     "build": "turbo build",
-    "build:cache": "turbo build:cache --filter=@synthetixio/synpress-metamask",
+    "build:cache": "turbo build:cache --filter=@synthetixio/synpress-metamask --filter=@synthetixio/synpress-keplr",
     "docs:build": "turbo docs:build --filter=docs",
     "format": "biome format . --write",
     "format:check": "biome format . --error-on-warnings",
@@ -15,8 +15,8 @@
     "sort-package-json": "sort-package-json 'package.json' '{packages,wallets,examples}/*/package.json'",
     "sort-package-json:check": "sort-package-json 'package.json' '{packages,wallets,examples}/*/package.json' --check",
     "test": "turbo test",
-    "test:e2e:headful": "turbo test:e2e:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
-    "test:e2e:headless": "turbo test:e2e:headless --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
+    "test:e2e:headful": "turbo test:e2e:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/synpress-keplr --filter=@synthetixio/ethereum-wallet-mock",
+    "test:e2e:headless": "turbo test:e2e:headless --filter=@synthetixio/synpress-metamask --filter=@synthetixio/synpress-keplr --filter=@synthetixio/ethereum-wallet-mock",
     "update:deps": "ncu -u -ws --root"
   },
   "lint-staged": {

packages/cache/src/cli/cliEntrypoint.ts

@@ -10,6 +10,8 @@ import { compileWalletSetupFunctions } from './compileWalletSetupFunctions'
 import { footer } from './footer'
 
 interface CliFlags {
+  keplr: boolean
+  metamask: boolean
   headless: boolean
   force: boolean
   debug: boolean
@@ -30,24 +32,37 @@ export const cliEntrypoint = async () => {
     )
     .option('-f, --force', 'Force the creation of cache even if it already exists', false)
     .option('-d, --debug', 'If this flag is present, the compilation files are not going to be deleted', false)
+    .option('-k, --keplr', 'Prepare the Keplr extension', false)
+    .option('-m, --metamask', 'Prepare the MetaMask extension', false)
     .helpOption(undefined, 'Display help for command')
     .addHelpText('afterAll', `\n${footer}\n`)
     .parse(process.argv)
-
   let walletSetupDir = program.args[0]
   if (!walletSetupDir) {
     walletSetupDir = path.join(process.cwd(), 'test', WALLET_SETUP_DIR_NAME)
   }
 
   const flags: CliFlags = program.opts()
 
-  if (flags.headless) {
-    process.env.HEADLESS = true
-  }
-
   if (flags.debug) {
     console.log('[DEBUG] Running with the following options:')
-    console.log({ cacheDir: walletSetupDir, ...flags, headless: Boolean(process.env.HEADLESS) ?? false }, '\n')
+    console.log({ cacheDir: walletSetupDir, ...flags, headless: flags.headless ?? false }, '\n')
+  }
+
+  const extensionsToSetup = () => {
+    const extensions = []
+    if (flags.keplr) {
+      extensions.push('Keplr')
+    }
+    if (flags.metamask) {
+      extensions.push('MetaMask')
+    }
+    return extensions
+  }
+  let extensionNames = extensionsToSetup()
+
+  if (!extensionNames.length) {
+    extensionNames = ['Keplr']
   }
 
   if (os.platform() === 'win32') {
@@ -63,9 +78,10 @@ export const cliEntrypoint = async () => {
   }
 
   const compiledWalletSetupDirPath = await compileWalletSetupFunctions(walletSetupDir, flags.debug)
-
+  for (const extensionName of extensionNames) {
+    await createCache(compiledWalletSetupDirPath, () => prepareExtension(extensionName), flags.force) // Pass extensionName
+  }
   // TODO: We should be using `prepareExtension` function from the wallet itself!
-  await createCache(compiledWalletSetupDirPath, prepareExtension, flags.force)
 
   if (!flags.debug) {
     await rimraf(compiledWalletSetupDirPath)

packages/cache/src/createCache.ts

@@ -1,6 +1,7 @@
 import { getUniqueWalletSetupFunctions } from './utils/getUniqueWalletSetupFunctions'
 import { triggerCacheCreation } from './utils/triggerCacheCreation'
 
+//@TODO: Make it so createCache can handle only one wallet setup function
 export async function createCache(walletSetupDirPath: string, downloadExtension: () => Promise<string>, force = false) {
   const setupFunctions = await getUniqueWalletSetupFunctions(walletSetupDirPath)
 

packages/cache/src/ensureCacheDirExists.ts

@@ -1,6 +1,6 @@
 import path from 'node:path'
 import fs from 'fs-extra'
-import { CACHE_DIR_NAME } from './constants'
+import { CACHE_DIR_NAME } from '../../cache/src/constants'
 
 export function ensureCacheDirExists() {
   const cacheDirPath = path.join(process.cwd(), CACHE_DIR_NAME)

packages/cache/src/index.ts

@@ -1,10 +1,20 @@
-export * from './constants'
+export * from './createCache'
+export * from './cli/cliEntrypoint'
+export * from '../../cache/src/constants'
 export * from './downloadFile'
-export * from './unzipArchive'
+export * from '../../cache/src/unzipArchive'
 export * from './ensureCacheDirExists'
-export * from './createCache'
 export * from './defineWalletSetup'
+export * from '../../cache/src/prepareExtension'
+export * from './prepareExtension'
+export * from './utils/bytesToMegabytes'
+export * from './utils/createCacheForWalletSetupFunction'
 export * from './utils/createTempContextDir'
+export * from './utils/getUniqueWalletSetupFunctions'
+export * from './utils/getWalletSetupFiles'
+export * from './utils/getWalletSetupFuncHash'
+export * from './utils/importWalletSetupFile'
+export * from './utils/isDirEmpty'
+export * from './utils/onDownloadProgress'
+export * from './utils/triggerCacheCreation'
 export * from './utils/removeTempContextDir'
-export * from './prepareExtension'
-export * from './cli/cliEntrypoint'

packages/cache/src/prepareExtension.ts

@@ -1,16 +1,44 @@
 import { downloadFile, ensureCacheDirExists, unzipArchive } from '.'
 
-export const DEFAULT_METAMASK_VERSION = '11.9.1'
-export const EXTENSION_DOWNLOAD_URL = `https://github.com/MetaMask/metamask-extension/releases/download/v${DEFAULT_METAMASK_VERSION}/metamask-chrome-${DEFAULT_METAMASK_VERSION}.zip`
+interface ExtensionConfig {
+  name: string
+  version: string
+  downloadUrl: string
+}
+
+export async function getExtensionConfig(name: string): Promise<ExtensionConfig> {
+  const config = {
+    extensions: [
+      {
+        name: 'MetaMask',
+        version: '11.9.1',
+        downloadUrl:
+          'https://github.com/MetaMask/metamask-extension/releases/download/v11.9.1/metamask-chrome-11.9.1.zip'
+      },
+      {
+        name: 'Keplr',
+        version: '0.12.102',
+        downloadUrl:
+          'https://github.com/chainapsis/keplr-wallet/releases/download/v0.12.102/keplr-extension-manifest-v2-v0.12.102.zip'
+      }
+    ]
+  }
+
+  const extension = config.extensions.find((ext: { name: string }) => ext.name === name)
+  if (!extension) {
+    throw new Error(`Extension configuration not found for ${name}`)
+  }
+  return extension
+}
 
-// NOTE: This function is copied from `wallets/metamask/src/prepareExtension.ts` only TEMPORARILY!
-export async function prepareExtension() {
+export async function prepareExtension(extensionName: string) {
   const cacheDirPath = ensureCacheDirExists()
+  const extensionConfig = await getExtensionConfig(extensionName) // Get config
 
   const downloadResult = await downloadFile({
-    url: EXTENSION_DOWNLOAD_URL,
+    url: extensionConfig.downloadUrl,
     outputDir: cacheDirPath,
-    fileName: `metamask-chrome-${DEFAULT_METAMASK_VERSION}.zip`
+    fileName: `${extensionConfig.name.toLowerCase()}-chrome-${extensionConfig.version}.zip`
   })
 
   const unzipResult = await unzipArchive({

packages/cache/test/createCache.test.ts

@@ -1,14 +1,17 @@
 import { afterAll, afterEach, describe, expect, it, vi } from 'vitest'
 
 import path from 'node:path'
+import type { BrowserContext, Page } from 'playwright-core'
 import { createCache } from '../src/createCache'
-import type { WalletSetupFunction } from '../src/defineWalletSetup'
 import * as GetUniqueWalletSetupFunctions from '../src/utils/getUniqueWalletSetupFunctions'
 import * as TriggerCacheCreation from '../src/utils/triggerCacheCreation'
 
 const ROOT_DIR = '/tmp'
 
-const setupFunctions = new Map<string, { fileName: string; setupFunction: WalletSetupFunction }>()
+const setupFunctions = new Map<
+  string,
+  { fileName: string; setupFunction: (context: BrowserContext, walletPage: Page) => Promise<void> }
+>()
 
 setupFunctions.set('hash1', { fileName: path.join(ROOT_DIR, 'hash1'), setupFunction: vi.fn() })
 setupFunctions.set('hash2', { fileName: path.join(ROOT_DIR, 'hash2'), setupFunction: vi.fn() })

packages/cache/test/defineWalletSetup.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { defineWalletSetup } from '../src/defineWalletSetup'
+import { defineWalletSetup } from '../src'
 
 const PASSWORD = 'Quack Quack! 🦆'
 const EXPECTED_HASH = 'f9c5ea5bb2c3aac96ff4'

packages/cache/test/ensureCacheDirExists.test.ts

@@ -1,7 +1,7 @@
 import path from 'node:path'
 import fs from 'fs-extra'
 import { afterAll, afterEach, describe, expect, it, vi } from 'vitest'
-import { CACHE_DIR_NAME } from '../src/constants'
+import { CACHE_DIR_NAME } from '../src'
 import { ensureCacheDirExists } from '../src/ensureCacheDirExists'
 
 vi.mock('fs-extra', async () => {

packages/cache/test/utils/bytesToMegabytes.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { bytesToMegabytes } from '../../src/utils/bytesToMegabytes'
+import { bytesToMegabytes } from '../../src'
 
 describe('bytesToMegabytes', () => {
   it('converts bytes to megabytes and rounds the result', async () => {

packages/cache/test/utils/createCacheForWalletSetupFunction.test.ts

@@ -1,6 +1,6 @@
 import { chromium } from 'playwright-core'
 import { afterAll, afterEach, beforeAll, describe, expect, it, vi } from 'vitest'
-import { createCacheForWalletSetupFunction } from '../../src/utils/createCacheForWalletSetupFunction'
+import { createCacheForWalletSetupFunction } from '../../src'
 import * as WaitForExtensionOnLoadPage from '../../src/utils/waitForExtensionOnLoadPage'
 
 const EXTENSION_PATH = '/tmp/extension'

packages/cache/test/utils/getUniqueWalletSetupFunctions.test.ts

@@ -1,5 +1,5 @@
 import { afterAll, describe, expect, it, vi } from 'vitest'
-import { getUniqueWalletSetupFunctions } from '../../src/utils/getUniqueWalletSetupFunctions'
+import { getUniqueWalletSetupFunctions } from '../../src'
 
 vi.mock('../../src/utils/getWalletSetupFiles', async () => {
   return {

packages/cache/test/utils/getWalletSetupFuncHash.test.ts

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest'
-import { WALLET_SETUP_FUNC_HASH_LENGTH, getWalletSetupFuncHash } from '../../src/utils/getWalletSetupFuncHash'
+import { WALLET_SETUP_FUNC_HASH_LENGTH, getWalletSetupFuncHash } from '../../src'
 
 const EXPECTED_HASH = 'b940c886be3c1a041ddd'
 

packages/cache/test/utils/importWalletSetupFile.test.ts

@@ -1,5 +1,5 @@
 import { afterAll, describe, expect, it, vi } from 'vitest'
-import { importWalletSetupFile } from '../../src/utils/importWalletSetupFile'
+import { importWalletSetupFile } from '../../src'
 
 vi.mock('../../src/ensureCacheDirExists', async () => {
   return {

packages/cache/test/utils/removeTempContextDir.test.ts

@@ -1,5 +1,5 @@
 import { afterAll, describe, expect, it, vi } from 'vitest'
-import { removeTempContextDir } from '../../src/utils/removeTempContextDir'
+import { removeTempContextDir } from '../../src'
 
 const PATH = 'Happy Quack Path'
 const MAX_RETRIES = 10