fix: external connectors (#2437)

apps/laboratory/package.json

@@ -10,6 +10,7 @@
     "playwright:start": "npm run start:laboratory",
     "playwright:install": "playwright install --with-deps",
     "playwright:test": "playwright test",
+    "playwright:test:basic": "playwright test --grep 'basic-tests.spec.ts'",
     "playwright:test:wallet": "playwright test --grep 'connect-qr.spec.ts|wallet.spec.ts'",
     "playwright:test:email": "playwright test --grep 'email.spec.ts'",
     "playwright:test:social": "playwright test --grep 'social.spec.ts'",
@@ -19,6 +20,7 @@
     "playwright:test:sa": "playwright test --grep smart-account.spec.ts",
     "playwright:test:canary": "playwright test --retries=0 --grep canary.spec.ts --project='Desktop Chrome/wagmi'",
     "playwright:debug": "npm run playwright:test -- --debug",
+    "playwright:debug:basic": "npm run playwright:test:basic -- --debug",
     "playwright:debug:wallet": "npm run playwright:test:wallet -- --debug",
     "playwright:debug:email": "npm run playwright:test:email -- --debug",
     "playwright:debug:social": "npm run playwright:test:social -- --debug",

apps/laboratory/src/pages/library/external.tsx

@@ -0,0 +1,53 @@
+import { createWeb3Modal } from '@web3modal/wagmi/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { useEffect, useState } from 'react'
+import { WagmiProvider, createConfig, http } from 'wagmi'
+import { Web3ModalButtons } from '../../components/Web3ModalButtons'
+import { WagmiTests } from '../../components/Wagmi/WagmiTests'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
+import { mainnet } from 'viem/chains'
+import { externalTestConnector } from '../../utils/ConnectorUtil'
+
+const queryClient = new QueryClient()
+
+const connectors = [externalTestConnector()]
+
+const wagmiConfig = createConfig({
+  chains: [mainnet],
+  connectors,
+  transports: {
+    1: http()
+  },
+  multiInjectedProviderDiscovery: false
+})
+
+const modal = createWeb3Modal({
+  wagmiConfig,
+  projectId: ConstantsUtil.ProjectId,
+  enableAnalytics: true,
+  metadata: ConstantsUtil.Metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy'
+})
+
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  const [ready, setReady] = useState(false)
+
+  useEffect(() => {
+    setReady(true)
+  }, [])
+
+  return ready ? (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <Web3ModalButtons />
+        <WagmiModalInfo />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
+  ) : null
+}

apps/laboratory/src/utils/ConnectorUtil.ts

@@ -0,0 +1,77 @@
+import { createConnector } from '@wagmi/core'
+
+interface ConnectOptions {
+  chainId?: number
+}
+
+// -- Connector ------------------------------------------------------------------------------------
+export function externalTestConnector() {
+  type Properties = {
+    provider?: () => Record<string, never>
+  }
+
+  return createConnector<() => Record<string, never>, Properties>(() => ({
+    id: 'externalTestConnector',
+    name: 'Web3Modal external',
+    type: 'externalTestConnector',
+
+    async connect(options: ConnectOptions = {}) {
+      return Promise.resolve({
+        options,
+        accounts: [],
+        account: '',
+        chainId: 0,
+        chain: {
+          id: 0,
+          unsuported: false
+        }
+      })
+    },
+
+    async disconnect() {
+      return Promise.resolve()
+    },
+
+    async getAccounts() {
+      return Promise.resolve([])
+    },
+
+    async getProvider() {
+      return Promise.resolve(() => ({}))
+    },
+
+    async getChainId() {
+      return Promise.resolve(0)
+    },
+
+    async isAuthorized() {
+      return Promise.resolve(false)
+    },
+
+    async switchChain({ chainId }) {
+      return Promise.resolve({
+        chainId,
+        rpcUrls: { default: { http: [''] } },
+        id: 0,
+        name: '',
+        nativeCurrency: { name: 'Test', symbol: '', decimals: 10 }
+      })
+    },
+
+    onAccountsChanged(accounts) {
+      return accounts
+    },
+
+    onChainChanged(chain) {
+      return chain
+    },
+
+    async onConnect(connectInfo) {
+      return Promise.resolve(connectInfo)
+    },
+
+    async onDisconnect(_error) {
+      return Promise.resolve()
+    }
+  }))
+}

apps/laboratory/tests/basic-tests.spec.ts

@@ -1,3 +1,4 @@
+import { testMExternal } from './shared/fixtures/w3m-external-fixture'
 import { testM, expect } from './shared/fixtures/w3m-fixture'
 
 testM.describe('Modal only tests', () => {
@@ -6,3 +7,10 @@ testM.describe('Modal only tests', () => {
     await expect(modalPage.page.getByTestId('all-wallets')).toBeVisible()
   })
 })
+
+testMExternal.describe('External connectors tests', () => {
+  testMExternal('Should show external connectors', async ({ modalPage, modalValidator }) => {
+    await modalPage.page.getByTestId('connect-button').click()
+    await modalValidator.expectExternalVisible()
+  })
+})

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

@@ -0,0 +1,17 @@
+import type { ModalFixture } from './w3m-fixture'
+import { ModalPage } from '../pages/ModalPage'
+import { ModalValidator } from '../validators/ModalValidator'
+import { timingFixture } from './timing-fixture'
+
+export const testMExternal = timingFixture.extend<ModalFixture>({
+  library: ['wagmi', { option: true }],
+  modalPage: async ({ page, library }, use) => {
+    const modalPage = new ModalPage(page, library, 'external')
+    await modalPage.load()
+    await use(modalPage)
+  },
+  modalValidator: async ({ modalPage }, use) => {
+    const modalValidator = new ModalValidator(modalPage.page)
+    await use(modalValidator)
+  }
+})

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

@@ -7,7 +7,16 @@ import { Email } from '../utils/email'
 import { DeviceRegistrationPage } from './DeviceRegistrationPage'
 import type { TimingRecords } from '../fixtures/timing-fixture'
 
-export type ModalFlavor = 'default' | 'siwe' | 'email' | 'wallet' | 'all'
+export type ModalFlavor = 'default' | 'siwe' | 'email' | 'wallet' | 'external' | 'all'
+
+function getUrlByFlavor(baseUrl: string, library: string, flavor: ModalFlavor) {
+  const urlsByFlavor: Partial<Record<ModalFlavor, string>> = {
+    default: `${baseUrl}library/${library}/`,
+    external: `${baseUrl}library/external/`
+  }
+
+  return urlsByFlavor[flavor] || `${baseUrl}library/${library}-${flavor}/`
+}
 
 export class ModalPage {
   private readonly baseURL = BASE_URL
@@ -22,10 +31,7 @@ export class ModalPage {
     public readonly flavor: ModalFlavor
   ) {
     this.connectButton = this.page.getByTestId('connect-button')
-    this.url =
-      flavor === 'default'
-        ? `${this.baseURL}library/${this.library}/`
-        : `${this.baseURL}library/${this.library}-${this.flavor}/`
+    this.url = getUrlByFlavor(this.baseURL, library, flavor)
   }
 
   async load() {

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -102,4 +102,9 @@ export class ModalValidator {
 
     expect(isVerified).toBe(true)
   }
+
+  async expectExternalVisible() {
+    const externalConnector = this.page.getByTestId(/^wallet-selector-external/u)
+    await expect(externalConnector).toBeVisible()
+  }
 }

packages/scaffold-ui/exports/index.ts

@@ -98,6 +98,7 @@ export * from '../src/partials/w3m-connect-custom-widget/index.js'
 export * from '../src/partials/w3m-connect-featured-widget/index.js'
 export * from '../src/partials/w3m-connect-injected-widget/index.js'
 export * from '../src/partials/w3m-connect-coinbase-widget/index.js'
+export * from '../src/partials/w3m-connect-external-widget/index.js'
 export * from '../src/partials/w3m-connect-recent-widget/index.js'
 export * from '../src/partials/w3m-connect-recommended-widget/index.js'
 export * from '../src/partials/w3m-connect-walletconnect-widget/index.js'