🎨 feat: Reusable ethereum-wallet-mock package

examples/new-dawn/test/e2e/00_mock.spec.ts

@@ -1,11 +1,13 @@
-import { MetaMaskMock, testWithMetaMaskMock } from '@synthetixio/synpress'
+import { EthereumWalletMock, testWithEthereumWalletMock } from '@synthetixio/synpress'
 
-const test = testWithMetaMaskMock
+const test = testWithEthereumWalletMock
 
 const { expect } = test
 
-test('should mock MetaMask in the Test Dapp', async ({ page }) => {
-  await page.goto('/')
+test('should mock MetaMask in the Test Dapp', async ({ page, walletMock }) => {
+  expect(await walletMock.getAllAccounts()).toHaveLength(1)
+
+  await page.locator('#connectButton').click()
 
   await expect(page.locator('#accounts')).toHaveText('0xd73b04b0e696b0945283defa3eee453814758f1a')
 
@@ -14,10 +16,14 @@ test('should mock MetaMask in the Test Dapp', async ({ page }) => {
 })
 
 test('should add new account using MetaMask mock', async ({ page }) => {
-  const metamask = new MetaMaskMock(page)
+  const walletMock = new EthereumWalletMock(page)
 
-  metamask.importWallet('candy maple cake sugar pudding cream honey rich smooth crumble sweet treat')
-  await metamask.addNewAccount()
+  await walletMock.importWallet('candy maple cake sugar pudding cream honey rich smooth crumble sweet treat')
+  await walletMock.addNewAccount()
 
-  await expect(page.locator('#accounts')).toHaveText('0xd73b04b0e696b0945283defa3eee453814758f1a')
+  await page.locator('#connectButton').click()
+
+  await expect(page.locator('#accounts')).toHaveText(
+    '0x6503D95e3F20389EE9496b277ABfFDb8eCCD2cc5,0xd73b04b0e696b0945283defa3eee453814758f1a'
+  )
 })

release/package.json

@@ -26,10 +26,10 @@
     "types:check": "tsc --noEmit"
   },
   "dependencies": {
+    "@synthetixio/ethereum-wallet-mock": "0.0.1-alpha.3",
     "@synthetixio/synpress-core": "0.0.1-alpha.3",
     "@synthetixio/synpress-fixtures": "0.0.1-alpha.3",
-    "@synthetixio/synpress-metamask": "0.0.1-alpha.3",
-    "@synthetixio/synpress-metamask-mock": "0.0.1-alpha.3"
+    "@synthetixio/synpress-metamask": "0.0.1-alpha.3"
   },
   "devDependencies": {
     "@synthetixio/synpress-tsconfig": "0.0.1-alpha.3",

release/src/index.ts

@@ -1,15 +1,15 @@
+import { EthereumWalletMock, testWithEthereumWalletMock } from '@synthetixio/ethereum-wallet-mock'
 import { defineWalletSetup } from '@synthetixio/synpress-core'
 import { getExtensionId, testWithSynpress } from '@synthetixio/synpress-fixtures'
 import { MetaMask, homePageSelectors, unlockForFixture } from '@synthetixio/synpress-metamask'
-import { MetaMaskMock, testWithMetaMaskMock } from '@synthetixio/synpress-metamask-mock'
 
 export {
   // Framework fixtures
   testWithSynpress,
-  testWithMetaMaskMock,
+  testWithEthereumWalletMock,
   // API
   MetaMask,
-  MetaMaskMock,
+  EthereumWalletMock,
   // Helpers
   defineWalletSetup,
   getExtensionId,

wallets/metamask-mock/package.json → wallets/ethereum-wallet-mock/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@synthetixio/synpress-metamask-mock",
+  "name": "@synthetixio/ethereum-wallet-mock",
   "version": "0.0.1-alpha.3",
   "type": "module",
   "exports": {

wallets/metamask-mock/src/metamask-mock.ts → wallets/ethereum-wallet-mock/src/ethereum-wallet-mock.ts

@@ -1,35 +1,15 @@
-// @ts-ignore
-import { connect } from '@depay/web3-mock'
 import type { Page } from '@playwright/test'
 import { mnemonicToAccount, privateKeyToAccount } from 'viem/accounts'
 import type { Network } from './network/Network'
+import { ACCOUNT_MOCK, BLOCKCHAIN, BSC_NETWORK_ID } from './utils'
 
-export const blockchain = 'ethereum'
-export const wallet = 'metamask'
+export type WalletMock = 'metamask' | 'coinbase' | 'phantom' | 'walletconnect' | 'walletlink'
 
-const networkConfig = {
-  blockchain,
-  wallet
-}
-
-const BSC_NETWORK_ID = '0x38'
-
-export const SEED_PHRASE = 'test test test test test test test test test test test junk'
-
-export const PRIVATE_KEY = 'ea084c575a01e2bbefcca3db101eaeab1d8af15554640a510c73692db24d0a6a'
-
-/**
- * This class is the heart of Synpress's MetaMask API.
- */
-export class MetaMaskMock {
+export class EthereumWalletMock {
   seedPhrase = ''
+  wallet: WalletMock = 'metamask'
 
-  constructor(
-    /**
-     * The MetaMask tab page.
-     */
-    readonly page: Page
-  ) {
+  constructor(readonly page: Page) {
     this.page = page
   }
 
@@ -40,6 +20,19 @@
    */
   importWallet(seedPhrase: string) {
     this.seedPhrase = seedPhrase
+
+    return this.page.evaluate(
+      ([blockchain, wallet, accounts]) => {
+        return Web3Mock.mock({
+          blockchain,
+          wallet,
+          accounts: {
+            return: accounts
+          }
+        })
+      },
+      [BLOCKCHAIN, this.wallet, [ACCOUNT_MOCK]]
+    )
   }
 
   /**
@@ -62,15 +55,16 @@
     })
 
     return this.page.evaluate(
-      ([networkConfig, accounts]) => {
+      ([blockchain, wallet, accounts]) => {
         return Web3Mock.mock({
-          ...networkConfig,
+          blockchain,
+          wallet,
           accounts: {
             return: accounts
           }
         })
       },
-      [networkConfig, [newAccount.address, ...accounts]]
+      [BLOCKCHAIN, this.wallet, [newAccount.address, ...accounts]]
     )
   }
 
@@ -83,15 +77,16 @@
     const newAccount = privateKeyToAccount(privateKey)
 
     return this.page.evaluate(
-      ([networkConfig, account]) => {
+      ([blockchain, wallet, account]) => {
         return Web3Mock.mock({
-          ...networkConfig,
+          blockchain,
+          wallet,
           accounts: {
             return: account
           }
         })
       },
-      [networkConfig, [newAccount.address]]
+      [BLOCKCHAIN, this.wallet, [newAccount.address]]
     )
   }
 
@@ -102,16 +97,16 @@
    */
   async switchAccount(accountAddress: string) {
     return this.page.evaluate(
-      ([networkConfig, accountAddress]) => {
+      ([blockchain, wallet, accountAddress]) => {
         return Web3Mock.mock({
-          // @ts-ignore
-          ...networkConfig,
+          blockchain,
+          wallet,
           accounts: {
             return: [accountAddress]
           }
         })
       },
-      [networkConfig, accountAddress]
+      [BLOCKCHAIN, this.wallet, accountAddress]
     )
   }
 
@@ -135,15 +130,16 @@
     }
 
     return this.page.evaluate(
-      ([networkConfig, networkInfo]) => {
+      ([blockchain, wallet, networkInfo]) => {
         return Web3Mock.mock({
-          ...networkConfig,
+          blockchain,
+          wallet,
           network: {
             add: networkInfo
           }
         })
       },
-      [networkConfig, networkInfo]
+      [BLOCKCHAIN, this.wallet, networkInfo]
     )
   }
 
@@ -161,10 +157,10 @@
    */
   async switchNetwork(networkName: string) {
     return this.page.evaluate(
-      ([networkConfig, networkName, chainId]) => {
+      ([blockchain, wallet, networkName, chainId]) => {
         Web3Mock.mock({
-          // @ts-ignore
-          ...networkConfig,
+          blockchain,
+          wallet,
           network: {
             switchTo: networkName
           }
@@ -176,14 +172,36 @@
           params: [{ chainId }]
         })
       },
-      [networkConfig, networkName, BSC_NETWORK_ID]
+      [BLOCKCHAIN, this.wallet, networkName, BSC_NETWORK_ID]
     )
   }
 
   /**
-   * Connects to the dapp using the currently selected account.
+   * Connects wallet to the dapp.
    */
-  async connectToDapp(network: string) {
-    connect(network)
+  async connectToDapp(wallet: WalletMock = 'metamask') {
+    this.wallet = wallet
+    return this.page.evaluate(
+      ([blockchain, accounts, wallet]) => {
+        // Cannot pass custom class as an argument to `page.evaluate`
+        class WalletConnectStub {}
+
+        let connector: WalletConnectStub | undefined
+
+        if (wallet === 'walletconnect') {
+          connector = WalletConnectStub
+        }
+
+        return Web3Mock.mock({
+          blockchain,
+          wallet,
+          accounts: {
+            return: accounts
+          },
+          connector
+        })
+      },
+      [BLOCKCHAIN, [ACCOUNT_MOCK], wallet]
+    )
   }
 }

wallets/ethereum-wallet-mock/src/index.ts

@@ -0,0 +1,3 @@
+export * from './ethereum-wallet-mock'
+export * from './utils'
+export * from './testWithEthereumWalletMock'