Phantom support for Playwright

package.json

@@ -9,6 +9,7 @@
   "scripts": {
     "build": "turbo build",
     "build:cache": "turbo build:cache --filter=@synthetixio/synpress-metamask",
+    "build:cache:phantom": "turbo build:cache --filter=@synthetixio/synpress-phantom",
     "docs:build": "turbo docs:build --filter=docs",
     "format": "biome format . --write",
     "format:check": "biome format . --error-on-warnings",
@@ -21,8 +22,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:playwright:headful": "turbo test:playwright:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
-    "test:playwright:headless": "turbo test:playwright:headless --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock",
+    "test:playwright:headful": "turbo test:playwright:headful --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock --filter=@synthetixio/synpress-phantom",
+    "test:playwright:headless": "turbo test:playwright:headless --filter=@synthetixio/synpress-metamask --filter=@synthetixio/ethereum-wallet-mock --filter=@synthetixio/synpress-phantom",
     "update:deps": "ncu -u -ws --root"
   },
   "lint-staged": {

packages/cache/package.json

@@ -44,6 +44,7 @@
     "gradient-string": "2.0.2",
     "progress": "2.0.3",
     "tsup": "8.0.2",
+    "unzip-crx-3": "0.2.0",
     "unzipper": "0.10.14",
     "zod": "3.22.4"
   },

packages/cache/src/cli/cliEntrypoint.ts

@@ -6,13 +6,15 @@ import { rimraf } from 'rimraf'
 import { WALLET_SETUP_DIR_NAME } from '../constants'
 import { createCache } from '../createCache'
 import { prepareExtension } from '../prepareExtension'
+import { prepareExtensionPhantom } from '../prepareExtensionPhantom'
 import { compileWalletSetupFunctions } from './compileWalletSetupFunctions'
 import { footer } from './footer'
 
 interface CliFlags {
   headless: boolean
   force: boolean
   debug: boolean
+  phantom: boolean
 }
 
 // TODO: Add unit tests for the CLI!
@@ -30,6 +32,7 @@ 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('-p, --phantom', 'If this flag is present, Phantom extension will be installed instead of Metamask', false)
     .helpOption(undefined, 'Display help for command')
     .addHelpText('afterAll', `\n${footer}\n`)
     .parse(process.argv)
@@ -77,8 +80,12 @@ export const cliEntrypoint = async () => {
     flags.debug
   )
 
-  // TODO: We should be using `prepareExtension` function from the wallet itself!
-  await createCache(compiledWalletSetupDirPath, setupFunctionHashes, prepareExtension, flags.force)
+  // TODO: We should be using `prepareExtension` functions from the wallet itself!
+  if (flags.phantom) {
+    await createCache(compiledWalletSetupDirPath, setupFunctionHashes, prepareExtensionPhantom, flags.force)
+  } else {
+    await createCache(compiledWalletSetupDirPath, setupFunctionHashes, prepareExtension, flags.force)
+  }
 
   if (!flags.debug) {
     await rimraf(compiledWalletSetupDirPath)

packages/cache/src/index.ts

@@ -8,3 +8,4 @@ export * from './utils/createTempContextDir'
 export * from './utils/removeTempContextDir'
 export * from './prepareExtension'
 export * from './cli/cliEntrypoint'
+export * from './prepareExtensionPhantom'

packages/cache/src/prepareExtensionPhantom.ts

@@ -0,0 +1,21 @@
+import { downloadFile, ensureCacheDirExists, unzipArchivePhantom } from '.'
+
+export const DEFAULT_PHANTOM_VERSION = 'latest'
+export const PHANTOM_EXTENSION_DOWNLOAD_URL = 'https://crx-backup.phantom.dev/latest.crx'
+
+// NOTE: This function is copied from `wallets/phantom/src/prepareExtensionPhantom.ts` only TEMPORARILY!
+export async function prepareExtensionPhantom() {
+  const cacheDirPath = ensureCacheDirExists()
+
+  const downloadResult = await downloadFile({
+    url: PHANTOM_EXTENSION_DOWNLOAD_URL,
+    outputDir: cacheDirPath,
+    fileName: 'phantom-chrome-latest.crx'
+  })
+
+  const unzipResult = await unzipArchivePhantom({
+    archivePath: downloadResult.filePath
+  })
+
+  return unzipResult.outputPath
+}

packages/cache/src/unzipArchive.ts

@@ -1,5 +1,6 @@
 import path from 'node:path'
 import fs from 'fs-extra'
+import unzipCrx from 'unzip-crx-3'
 import unzippper from 'unzipper'
 
 type UnzipArchiveOptions = {
@@ -73,3 +74,27 @@ export async function unzipArchive(options: UnzipArchiveOptions) {
     throw new Error(`[UnzipFile] Error unzipping the file - ${error.message}`)
   })
 }
+
+export async function unzipArchivePhantom(options: UnzipArchiveOptions) {
+  const { archivePath, overwrite } = options
+
+  const archiveFileExtension = archivePath.split('.').slice(-1)
+  const outputPath = archivePath.replace(`.${archiveFileExtension}`, '')
+
+  const fileExists = fs.existsSync(outputPath)
+  if (fileExists && !overwrite) {
+    return {
+      outputPath,
+      unzipSkipped: true
+    }
+  }
+
+  // Creates the output directory
+  fs.mkdirSync(outputPath, { recursive: true })
+
+  await unzipCrx(archivePath, outputPath)
+
+  // TODO: Handle errors
+
+  return { outputPath }
+}

packages/cache/tsconfig.build.json

@@ -8,5 +8,5 @@
     "declarationMap": true
   },
   "include": ["src"],
-  "files": ["environment.d.ts"]
+  "files": ["environment.d.ts", "unzip-crx-3.d.ts"]
 }

packages/cache/tsconfig.json

@@ -4,9 +4,6 @@
     "rootDir": ".",
     "lib": ["DOM"]
   },
-  "include": [
-    "src",
-    "test"
-  ],
-  "files": ["environment.d.ts"]
+  "include": ["src", "test"],
+  "files": ["environment.d.ts", "unzip-crx-3.d.ts"]
 }

packages/cache/unzip-crx-3.d.ts

@@ -0,0 +1 @@
+declare module 'unzip-crx-3'