chore: test ethers verify API

apps/laboratory/src/pages/library/ethers-verify-domain-mismatch.tsx

@@ -0,0 +1,39 @@
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
+import { EthersTests } from '../../components/Ethers/EthersTests'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { EthersConstants } from '../../utils/EthersConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
+
+// Special project ID with verify enabled on localhost
+const projectId = 'e4eae1aad4503db9966a04fd045a7e4d'
+
+const modal = createWeb3Modal({
+  ethersConfig: defaultConfig({
+    metadata: ConstantsUtil.Metadata,
+    defaultChainId: 1,
+    chains: EthersConstants.chains,
+    coinbasePreference: 'smartWalletOnly'
+  }),
+  chains: EthersConstants.chains,
+  defaultChain: EthersConstants.chains[1],
+  projectId,
+  enableAnalytics: true,
+  metadata: ConstantsUtil.Metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  customWallets: ConstantsUtil.CustomWallets
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <EthersModalInfo />
+      <EthersTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/ethers-verify-evil.tsx

@@ -0,0 +1,47 @@
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
+import { EthersTests } from '../../components/Ethers/EthersTests'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { EthersConstants } from '../../utils/EthersConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
+
+const metadata = {
+  name: 'Evil Web3Modal',
+  description: 'Evil Web3Modal Laboratory',
+  url: 'https://malicious-app-verify-simulation.vercel.app/',
+  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  verifyUrl: ''
+}
+
+// Special project ID with https://malicious-app-verify-simulation.vercel.app/ as the verified domain and this domain is marked as a scam
+const projectId = '9d176efa3150a1df0a76c8c138b6b657'
+
+const modal = createWeb3Modal({
+  ethersConfig: defaultConfig({
+    metadata,
+    defaultChainId: 1,
+    chains: EthersConstants.chains,
+    coinbasePreference: 'smartWalletOnly'
+  }),
+  chains: EthersConstants.chains,
+  defaultChain: EthersConstants.chains[1],
+  projectId,
+  enableAnalytics: true,
+  metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  customWallets: ConstantsUtil.CustomWallets
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <EthersModalInfo />
+      <EthersTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/ethers-verify-valid.tsx

@@ -0,0 +1,48 @@
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
+import { EthersTests } from '../../components/Ethers/EthersTests'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { EthersConstants } from '../../utils/EthersConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
+
+const metadata = {
+  name: 'Web3Modal',
+  description: 'Web3Modal Laboratory',
+  // Allow localhost
+  url: 'http://localhost:3000',
+  icons: ['https://avatars.githubusercontent.com/u/37784886'],
+  verifyUrl: ''
+}
+
+// Special project ID with verify enabled on localhost
+const projectId = 'e4eae1aad4503db9966a04fd045a7e4d'
+
+const modal = createWeb3Modal({
+  ethersConfig: defaultConfig({
+    metadata,
+    defaultChainId: 1,
+    chains: EthersConstants.chains,
+    coinbasePreference: 'smartWalletOnly'
+  }),
+  chains: EthersConstants.chains,
+  defaultChain: EthersConstants.chains[1],
+  projectId,
+  enableAnalytics: true,
+  metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  customWallets: ConstantsUtil.CustomWallets
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <EthersModalInfo />
+      <EthersTests />
+    </>
+  )
+}

apps/laboratory/tests/shared/fixtures/w3m-ethers-verify-domain-mismatch-fixture.ts

@@ -0,0 +1,12 @@
+import type { ModalFixture } from './w3m-fixture'
+import { ModalPage } from '../pages/ModalPage'
+import { timingFixture } from './timing-fixture'
+
+export const testMEthersVerifyDomainMismatch = timingFixture.extend<ModalFixture>({
+  library: ['ethers', { option: true }],
+  modalPage: async ({ page, library }, use) => {
+    const modalPage = new ModalPage(page, library, 'ethers-verify-domain-mismatch')
+    await modalPage.load()
+    await use(modalPage)
+  }
+})

apps/laboratory/tests/shared/fixtures/w3m-ethers-verify-evil-fixture.ts

@@ -0,0 +1,12 @@
+import type { ModalFixture } from './w3m-fixture'
+import { ModalPage } from '../pages/ModalPage'
+import { timingFixture } from './timing-fixture'
+
+export const testMEthersVerifyEvil = timingFixture.extend<ModalFixture>({
+  library: ['ethers', { option: true }],
+  modalPage: async ({ page, library }, use) => {
+    const modalPage = new ModalPage(page, library, 'ethers-verify-evil')
+    await modalPage.load()
+    await use(modalPage)
+  }
+})

apps/laboratory/tests/shared/fixtures/w3m-ethers-verify-valid-fixture.ts

@@ -0,0 +1,12 @@
+import type { ModalFixture } from './w3m-fixture'
+import { ModalPage } from '../pages/ModalPage'
+import { timingFixture } from './timing-fixture'
+
+export const testMEthersVerifyValid = timingFixture.extend<ModalFixture>({
+  library: ['ethers', { option: true }],
+  modalPage: async ({ page, library }, use) => {
+    const modalPage = new ModalPage(page, library, 'ethers-verify-valid')
+    await modalPage.load()
+    await use(modalPage)
+  }
+})

apps/laboratory/tests/shared/fixtures/w3m-fixture.ts

@@ -23,6 +23,18 @@ export const testM = timingFixture.extend<ModalFixture>({
     await use(modalPage)
   }
 })
+export const testMEthers = timingFixture.extend<ModalFixture>({
+  library: ['ethers', { option: true }],
+  modalPage: async ({ page, library }, use) => {
+    timeStart('new ModalPage')
+    const modalPage = new ModalPage(page, library, 'default')
+    timeEnd('new ModalPage')
+    timeStart('modalPage.load')
+    await modalPage.load()
+    timeEnd('modalPage.load')
+    await use(modalPage)
+  }
+})
 
 export const testMSiwe = timingFixture.extend<ModalFixture>({
   library: ['wagmi', { option: true }],

apps/laboratory/tests/shared/fixtures/w3m-verify-domain-mismatch-fixture.ts → apps/laboratory/tests/shared/fixtures/w3m-wagmi-verify-domain-mismatch-fixture.ts

@@ -2,10 +2,10 @@ import type { ModalFixture } from './w3m-fixture'
 import { ModalPage } from '../pages/ModalPage'
 import { timingFixture } from './timing-fixture'
 
-export const testMVerifyDomainMismatch = timingFixture.extend<ModalFixture>({
+export const testMWagmiVerifyDomainMismatch = timingFixture.extend<ModalFixture>({
   library: ['wagmi', { option: true }],
   modalPage: async ({ page, library }, use) => {
-    const modalPage = new ModalPage(page, library, 'verify-domain-mismatch')
+    const modalPage = new ModalPage(page, library, 'wagmi-verify-domain-mismatch')
     await modalPage.load()
     await use(modalPage)
   }

apps/laboratory/tests/shared/fixtures/w3m-verify-evil-fixture.ts → apps/laboratory/tests/shared/fixtures/w3m-wagmi-verify-evil-fixture.ts

@@ -2,10 +2,10 @@ import type { ModalFixture } from './w3m-fixture'
 import { ModalPage } from '../pages/ModalPage'
 import { timingFixture } from './timing-fixture'
 
-export const testMVerifyEvil = timingFixture.extend<ModalFixture>({
+export const testMWagmiVerifyEvil = timingFixture.extend<ModalFixture>({
   library: ['wagmi', { option: true }],
   modalPage: async ({ page, library }, use) => {
-    const modalPage = new ModalPage(page, library, 'verify-evil')
+    const modalPage = new ModalPage(page, library, 'wagmi-verify-evil')
     await modalPage.load()
     await use(modalPage)
   }

apps/laboratory/tests/shared/fixtures/w3m-verify-valid-fixture.ts → apps/laboratory/tests/shared/fixtures/w3m-wagmi-verify-valid-fixture.ts

@@ -2,10 +2,10 @@ import type { ModalFixture } from './w3m-fixture'
 import { ModalPage } from '../pages/ModalPage'
 import { timingFixture } from './timing-fixture'
 
-export const testMVerifyValid = timingFixture.extend<ModalFixture>({
+export const testMWagmiVerifyValid = timingFixture.extend<ModalFixture>({
   library: ['wagmi', { option: true }],
   modalPage: async ({ page, library }, use) => {
-    const modalPage = new ModalPage(page, library, 'verify-valid')
+    const modalPage = new ModalPage(page, library, 'wagmi-verify-valid')
     await modalPage.load()
     await use(modalPage)
   }

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -15,9 +15,12 @@ const maliciousUrl = 'https://malicious-app-verify-simulation.vercel.app'
 export type ModalFlavor =
   | 'default'
   | 'external'
-  | 'verify-valid'
-  | 'verify-domain-mismatch'
-  | 'verify-evil'
+  | 'wagmi-verify-valid'
+  | 'wagmi-verify-domain-mismatch'
+  | 'wagmi-verify-evil'
+  | 'ethers-verify-valid'
+  | 'ethers-verify-domain-mismatch'
+  | 'ethers-verify-evil'
   | 'no-email'
   | 'no-socials'
   | 'all'
@@ -26,9 +29,12 @@ function getUrlByFlavor(baseUrl: string, library: string, flavor: ModalFlavor) {
   const urlsByFlavor: Partial<Record<ModalFlavor, string>> = {
     default: `${baseUrl}library/${library}/`,
     external: `${baseUrl}library/external/`,
-    'verify-valid': `${baseUrl}library/verify-valid/`,
-    'verify-domain-mismatch': `${baseUrl}library/verify-domain-mismatch/`,
-    'verify-evil': maliciousUrl
+    'wagmi-verify-valid': `${baseUrl}library/wagmi-verify-valid/`,
+    'wagmi-verify-domain-mismatch': `${baseUrl}library/wagmi-verify-domain-mismatch/`,
+    'wagmi-verify-evil': maliciousUrl,
+    'ethers-verify-valid': `${baseUrl}library/ethers-verify-valid/`,
+    'ethers-verify-domain-mismatch': `${baseUrl}library/ethers-verify-domain-mismatch/`,
+    'ethers-verify-evil': maliciousUrl
   }
 
   return urlsByFlavor[flavor] || `${baseUrl}library/${library}-${flavor}/`
@@ -51,8 +57,11 @@ export class ModalPage {
   }
 
   async load() {
-    if (this.flavor === 'verify-evil') {
-      await routeInterceptUrl(this.page, maliciousUrl, this.baseURL, '/library/verify-evil/')
+    if (this.flavor === 'wagmi-verify-evil') {
+      await routeInterceptUrl(this.page, maliciousUrl, this.baseURL, '/library/wagmi-verify-evil/')
+    }
+    if (this.flavor === 'ethers-verify-evil') {
+      await routeInterceptUrl(this.page, maliciousUrl, this.baseURL, '/library/ethers-verify-evil/')
     }
 
     await this.page.goto(this.url)