✨ feat: Add keplr wallet support and shared utils package

wallets/keplr/cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'cypress'
+import { installSynpress } from './src/cypress'
+
+export default defineConfig({
+  chromeWebSecurity: false,
+  e2e: {
+    baseUrl: 'http://localhost:9999',
+    specPattern: 'test/cypress/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'src/cypress/support/e2e.{js,jsx,ts,tsx}',
+    fixturesFolder: 'src/cypress/fixtures',
+    testIsolation: false,
+    async setupNodeEvents(on, config) {
+      return installSynpress(on, config)
+    }
+  }
+})

wallets/keplr/environment.d.ts

@@ -0,0 +1,19 @@
+declare global {
+  namespace NodeJS {
+    interface ProcessEnv {
+      CI: boolean
+      HEADLESS: boolean
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ethereum: import('ethers').Eip1193Provider
+  }
+
+  // biome-ignore lint/suspicious/noExplicitAny: Web3Mock is a mock object
+  const Web3Mock: any
+}
+
+export {}

wallets/keplr/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@synthetixio/keplr",
+  "version": "0.0.1-alpha.0",
+  "type": "module",
+  "exports": {
+    "types": "./types/index.d.ts",
+    "default": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "types": "./types/index.d.ts",
+  "files": [
+    "dist",
+    "src",
+    "types"
+  ],
+  "scripts": {
+    "build": "pnpm run clean && pnpm run build:dist && pnpm run build:types",
+    "build:dist": "tsup --tsconfig tsconfig.build.json",
+    "build:types": "tsc --emitDeclarationOnly --project tsconfig.build.json",
+    "clean": "rimraf dist types",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:e2e:headful": "playwright test",
+    "test:e2e:headless": "HEADLESS=true playwright test",
+    "test:e2e:headless:ui": "HEADLESS=true playwright test --ui",
+    "test:watch": "vitest watch",
+    "types:check": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@synthetixio/synpress-cache": "workspace:*",
+    "@synthetixio/synpress-core": "workspace:*"
+  },
+  "devDependencies": {
+    "@synthetixio/synpress-tsconfig": "workspace:*",
+    "@types/node": "20.11.17",
+    "@vitest/coverage-v8": "1.2.2",
+    "cypress": "13.9.0",
+    "rimraf": "5.0.5",
+    "tsup": "8.0.2",
+    "typescript": "5.3.3",
+    "vitest": "1.2.2"
+  },
+  "peerDependencies": {
+    "@playwright/test": "1.44.0"
+  }
+}

wallets/keplr/playwright.config.ts

@@ -0,0 +1,50 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  // Look for test files in the "test/e2e" directory, relative to this configuration file.
+  testDir: './test/playwright',
+
+  // We're increasing the timeout to 60 seconds to allow all traces to be recorded.
+  // Sometimes it threw an error saying that traces were not recorded in the 30 seconds timeout limit.
+  timeout: 60_000,
+
+  // Run all tests in parallel.
+  fullyParallel: true,
+
+  // Fail the build on CI if you accidentally left test.only in the source code.
+  forbidOnly: !!process.env.CI,
+
+  // Fail all remaining tests on CI after the first failure. We want to reduce the feedback loop on CI to minimum.
+  maxFailures: process.env.CI ? 1 : 0,
+
+  // Opt out of parallel tests on CI since it supports only 1 worker.
+  workers: process.env.CI ? 1 : undefined,
+
+  // Concise 'dot' for CI, default 'html' when running locally.
+  // See https://playwright.dev/docs/test-reporters.
+  reporter: process.env.CI
+    ? [['html', { open: 'never', outputFolder: `playwright-report-${process.env.HEADLESS ? 'headless' : 'headful'}` }]]
+    : 'html',
+
+  // Shared settings for all the projects below.
+  // See https://playwright.dev/docs/api/class-testoptions.
+  use: {
+    // We are using locally deployed MetaMask Test Dapp.
+    baseURL: 'http://localhost:9999',
+
+    // Collect all traces on CI, and only traces for failed tests when running locally.
+    // See https://playwright.dev/docs/trace-viewer.
+    trace: process.env.CI ? 'on' : 'retain-on-failure'
+  },
+
+  // Configure projects for major browsers.
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] }
+    }
+  ]
+})

wallets/keplr/src/KeplrWallet.ts

@@ -0,0 +1,143 @@
+import type { Page } from '@playwright/test'
+export type Keplr = 'keplr'
+
+export class KeplrWallet {
+  seedPhrase = ''
+  wallet: Keplr = 'keplr'
+
+  constructor(readonly page: Page) {
+    this.page = page
+  }
+
+  /**
+   * Imports wallet from secret phrase and password.
+   *
+   * @param secretWords. The secret words to import.
+   * @param password. The password to set.
+   * 
+   * @returns true if the wallet was imported successfully.
+   */
+  async importWallet(secretWords, password) {
+    await playwright.waitAndClickByText(
+      onboardingElements.createWalletButton,
+      await playwright.keplrWindow(),
+    );
+    await playwright.waitAndClickByText(
+      onboardingElements.importRecoveryPhraseButton,
+      await playwright.keplrWindow(),
+    );
+    await playwright.waitAndClickByText(
+      onboardingElements.useRecoveryPhraseButton,
+      await playwright.keplrWindow(),
+    );
+    await playwright.waitAndClickByText(
+      onboardingElements.phraseCount24,
+      await playwright.keplrWindow(),
+    );
+
+    for (const [index, word] of secretWords.split(' ').entries()) {
+      await playwright.waitAndTypeByLocator(
+        onboardingElements.textAreaSelector,
+        word,
+        index,
+      );
+    }
+
+    await playwright.waitAndClick(
+      onboardingElements.submitPhraseButton,
+      await playwright.keplrWindow(),
+    );
+
+    await playwright.waitAndType(
+      onboardingElements.walletInput,
+      onboardingElements.walletName,
+    );
+    await playwright.waitAndType(onboardingElements.passwordInput, password);
+    await playwright.waitAndType(
+      onboardingElements.confirmPasswordInput,
+      password,
+    );
+
+    await playwright.waitAndClick(
+      onboardingElements.submitWalletDataButton,
+      await playwright.keplrWindow(),
+      { number: 1 },
+    );
+
+    await playwright.waitForByText(
+      onboardingElements.phraseSelectChain,
+      await playwright.keplrWindow(),
+    );
+
+    await playwright.waitAndClick(
+      onboardingElements.submitChainButton,
+      await playwright.keplrWindow(),
+    );
+
+    await playwright.waitForByText(
+      onboardingElements.phraseAccountCreated,
+      await playwright.keplrWindow(),
+    );
+
+    await playwright.waitAndClick(
+      onboardingElements.finishButton,
+      await playwright.keplrWindow(),
+      { dontWait: true },
+    );
+
+    return true;
+  }
+
+  /**
+   * Adds a new account.
+   *
+   * @returns true if the account was added successfully.
+   */
+  async acceptAccess() {
+    const notificationPage = await playwright.switchToKeplrNotification();
+    await playwright.waitAndClick(
+      notificationPageElements.approveButton,
+      notificationPage,
+      { waitForEvent: 'close' },
+    );
+    return true;
+  }
+
+  /**
+   * Confirms a transaction.
+   *
+   * @returns true if the transaction was confirmed successfully.
+   */
+  async confirmTransaction() {
+    const notificationPage = await playwright.switchToKeplrNotification();
+    await playwright.waitAndClick(
+      notificationPageElements.approveButton,
+      notificationPage,
+      { waitForEvent: 'close' },
+    );
+    return true;
+  }
+
+  /**
+   * Does initial setup for the wallet.
+   * 
+   * @param playwrightInstance. The playwright instance to use.
+   * @param secretWordsOrPrivateKey. The secret words or private key to import.
+   * @param password. The password to set.
+   */
+  async setupWallet(
+    playwrightInstance,
+    { secretWordsOrPrivateKey, password },
+  ) {
+    if (playwrightInstance) {
+      await playwright.init(playwrightInstance);
+    } else {
+      await playwright.init();
+    }
+
+    await playwright.assignWindows();
+    await playwright.assignActiveTabName('keplr');
+    await module.exports.getExtensionDetails();
+    await module.exports.importWallet(secretWordsOrPrivateKey, password);
+  }
+}

wallets/keplr/src/cypress/errors.ts

@@ -0,0 +1,3 @@
+export const NO_CONTEXT = 'No browser context found. Connect Playwright first - connectPlaywright()'
+export const NO_PAGE = 'No page found. Use getPage()'
+export const MISSING_INIT = 'Keplr not initialized. Use initKeplrWallet()'

wallets/keplr/src/cypress/index.ts

@@ -0,0 +1 @@
+export { default as installSynpress } from './installSynpress'

wallets/keplr/src/cypress/initKeplrWallet.ts

@@ -0,0 +1,77 @@
+import { readFileSync } from 'fs'
+import { type BrowserContext, type Page, chromium } from '@playwright/test'
+
+import { KeplrWallet } from '../KeplrWallet'
+import { SEED_PHRASE, mockEthereum, web3MockPath } from '../utils'
+import { MISSING_INIT, NO_CONTEXT, NO_PAGE } from './errors'
+
+let context: BrowserContext | undefined
+let cypressPage: Page | undefined
+let keplrWallet: KeplrWallet | undefined
+
+let keplrLoaded = false
+
+const getCypressPage = async () => {
+  if (!context) {
+    console.error(NO_CONTEXT)
+    return
+  }
+
+  cypressPage = context.pages()[0]
+
+  return cypressPage
+}
+
+export async function connectPlaywrightToChrome(port: number) {
+  const debuggerDetails = await fetch(`http://127.0.0.1:${port}/json/version`)
+
+  const debuggerDetailsConfig = (await debuggerDetails.json()) as {
+    webSocketDebuggerUrl: string
+  }
+
+  const browser = await chromium.connectOverCDP(debuggerDetailsConfig.webSocketDebuggerUrl)
+
+  context = browser.contexts()[0]
+
+  return browser.isConnected()
+}
+
+export async function initKeplrWallet(port: number) {
+  await connectPlaywrightToChrome(port)
+
+  if (!context) {
+    console.error(NO_CONTEXT)
+    return
+  }
+
+  await getCypressPage()
+
+  if (!cypressPage) {
+    console.error(NO_PAGE)
+    return
+  }
+
+  await context.addInitScript({
+    content: `${readFileSync(web3MockPath, 'utf-8')}\n(${mockEthereum.toString()})();`
+  })
+
+  // As we want to refresh the page after mocking the ethereum object
+  if (!keplrLoaded) {
+    await cypressPage.reload()
+    keplrLoaded = true
+  }
+
+  keplrWallet = new KeplrWallet(cypressPage)
+  await keplrWallet.setupWallet(SEED_PHRASE, PASSWORD)
+}
+
+export function getKeplrWallet() {
+  if (!context || !cypressPage || !keplrWallet) {
+    console.error(MISSING_INIT)
+    return
+  }
+
+  if (keplrWallet) return keplrWallet
+
+  return new KeplrWallet(cypressPage)
+}

wallets/keplr/src/cypress/installSynpress.ts

@@ -0,0 +1,30 @@
+import { ensureRdpPort } from '@synthetixio/synpress-core'
+
+// import { initEthereumWalletMock } from './initEthereumWalletMock'
+// import setupTasks from './setupTasks'
+
+let port: number
+
+export default function installSynpress(on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) {
+  const browsers = config.browsers.filter((b) => b.name === 'chrome')
+  if (browsers.length === 0) {
+    throw new Error('No Chrome browser found in the configuration')
+  }
+
+  on('before:browser:launch', async (_, launchOptions) => {
+    // Enable debug mode to establish playwright connection
+    const args = Array.isArray(launchOptions) ? launchOptions : launchOptions.args
+    port = ensureRdpPort(args)
+  })
+
+  on('before:spec', async () => {
+    await initEthereumWalletMock(port)
+  })
+
+  setupTasks(on)
+
+  return {
+    ...config,
+    browsers
+  }
+}