chore: adapter client improvements

packages/adapters/wagmi/src/client.ts

@@ -1,5 +1,5 @@
 import type UniversalProvider from '@walletconnect/universal-provider'
-import type { AppKitNetwork, BaseNetwork, CaipNetwork } from '@reown/appkit-common'
+import type { AppKitNetwork, BaseNetwork, CaipNetwork, ChainNamespace } from '@reown/appkit-common'
 import { AdapterBlueprint } from '@reown/appkit/adapters'
 import { CoreHelperUtil } from '@reown/appkit-core'
 import {
@@ -27,7 +27,8 @@
   getAccount,
   prepareTransactionRequest,
   reconnect,
-  watchPendingTransactions
+  watchPendingTransactions,
+  watchConnectors
 } from '@wagmi/core'
 import { type Chain } from '@wagmi/core/chains'
 
@@ -186,7 +187,6 @@
         }
       }
     })
-
     watchConnections(this.wagmiConfig, {
       onChange: connections => {
         if (connections.length === 0) {
@@ -220,7 +220,7 @@
       customConnectors.push(injected({ shimDisconnect: true }))
     }
 
     const emailEnabled =
       options.features?.email === undefined
         ? CoreConstantsUtil.DEFAULT_FEATURES.email
         : options.features?.email
@@ -232,9 +232,7 @@
       customConnectors.push(
         authConnector({
           chains: this.wagmiChains,
-          options: { projectId: options.projectId },
-          provider: this.availableConnectors.find(c => c.id === ConstantsUtil.AUTH_CONNECTOR_ID)
-            ?.provider as W3mFrameProvider
+          options: { projectId: options.projectId }
         })
       )
     }
@@ -358,40 +356,49 @@
     return formatUnits(params.value, params.decimals)
   }
 
-  public syncConnectors(options: AppKitOptions, appKit: AppKit) {
-    this.addWagmiConnectors(options, appKit)
+  private async addWagmiConnector(connector: Connector, options: AppKitOptions) {
+    let provider: W3mFrameProvider | UniversalProvider | undefined = undefined
 
-    const connectors = this.wagmiConfig.connectors.map(connector => ({
-      ...connector,
-      chain: this.namespace
-    }))
+    const shouldFetchProvider =
+      connector.id === ConstantsUtil.WALLET_CONNECT_CONNECTOR_ID ||
+      connector.id === ConstantsUtil.AUTH_CONNECTOR_ID
 
-    const uniqueIds = new Set()
-    const filteredConnectors = connectors.filter(item => {
-      const isDuplicate = uniqueIds.has(item.id)
-      uniqueIds.add(item.id)
+    if (shouldFetchProvider) {
+      provider = (await connector.getProvider().catch(() => undefined)) as
+        | W3mFrameProvider
+        | UniversalProvider
+        | undefined
+    }
 
-      return !isDuplicate
+    this.addConnector({
+      id: connector.id,
+      explorerId: PresetsUtil.ConnectorExplorerIds[connector.id],
+      imageUrl: options?.connectorImages?.[connector.id] ?? connector.icon,
+      name: PresetsUtil.ConnectorNamesMap[connector.id] ?? connector.name,
+      imageId: PresetsUtil.ConnectorImageIds[connector.id],
+      type: PresetsUtil.ConnectorTypesMap[connector.type] ?? 'EXTERNAL',
+      info:
+        connector.id === ConstantsUtil.INJECTED_CONNECTOR_ID ? undefined : { rdns: connector.id },
+      provider,
+      chain: this.namespace as ChainNamespace,
+      chains: []
     })
+  }
 
-    filteredConnectors.forEach(connector => {
-      const shouldSkip = ConstantsUtil.AUTH_CONNECTOR_ID === connector.id
-
-      const injectedConnector = connector.id === ConstantsUtil.INJECTED_CONNECTOR_ID
-
-      if (!shouldSkip && this.namespace) {
-        this.addConnector({
-          id: connector.id,
-          explorerId: PresetsUtil.ConnectorExplorerIds[connector.id],
-          imageUrl: options?.connectorImages?.[connector.id] ?? connector.icon,
-          name: PresetsUtil.ConnectorNamesMap[connector.id] ?? connector.name,
-          imageId: PresetsUtil.ConnectorImageIds[connector.id],
-          type: PresetsUtil.ConnectorTypesMap[connector.type] ?? 'EXTERNAL',
-          info: injectedConnector ? undefined : { rdns: connector.id },
-          chain: this.namespace,
-          chains: []
-        })
-      }
+  public syncConnectors(options: AppKitOptions, appKit: AppKit) {
+    // Add wagmi connectors
+    this.addWagmiConnectors(options, appKit)
+
+    // Add current wagmi connectors to chain adapter blueprint
+    this.wagmiConfig.connectors.forEach(connector => this.addWagmiConnector(connector, options))
+
+    /*
+     * Watch for new connectors. This is needed because some EIP6963 connectors
+     * that are added later in the process the initial setup
+     */
+    watchConnectors(this.wagmiConfig, {
+      onChange: connectors =>
+        connectors.forEach(connector => this.addWagmiConnector(connector, options))
     })
   }
 

packages/adapters/wagmi/src/connectors/AuthConnector.ts

@@ -16,7 +16,6 @@ interface W3mFrameProviderOptions {
 export type AuthParameters = {
   chains?: CreateConfigParameters['chains']
   options: W3mFrameProviderOptions
-  provider: W3mFrameProvider
 }
 
 // -- Connector ------------------------------------------------------------------------------------

packages/adapters/wagmi/src/connectors/AuthConnectorExport.ts

@@ -1,8 +1,5 @@
 import type { CreateConfigParameters } from '@wagmi/core'
 import { authConnector as authConnectorWagmi } from './AuthConnector.js'
-import { ErrorUtil } from '@reown/appkit-utils'
-import { AlertController } from '@reown/appkit-core'
-import { W3mFrameProviderSingleton } from '@reown/appkit/auth-provider'
 
 interface W3mFrameProviderOptions {
   projectId: string
@@ -14,13 +11,5 @@ export type AuthParameters = {
 }
 
 export function authConnector(parameters: AuthParameters) {
-  return authConnectorWagmi({
-    ...parameters,
-    provider: W3mFrameProviderSingleton.getInstance({
-      projectId: parameters.options.projectId,
-      onTimeout: () => {
-        AlertController.open(ErrorUtil.ALERT_ERRORS.SOCIALS_TIMEOUT, 'error')
-      }
-    })
-  })
+  return authConnectorWagmi(parameters)
 }

packages/adapters/wagmi/src/tests/client.test.ts

@@ -16,11 +16,15 @@ import {
   waitForTransactionReceipt,
   getAccount,
   watchPendingTransactions,
-  http
+  http,
+  watchConnectors,
+  mock
 } from '@wagmi/core'
+import * as wagmiCore from '@wagmi/core'
 import { mainnet } from '@wagmi/core/chains'
 import { CaipNetworksUtil } from '@reown/appkit-utils'
 import type UniversalProvider from '@walletconnect/universal-provider'
+import { mockAppKit } from './mocks/AppKit'
 
 vi.mock('@wagmi/core', async () => {
   const actual = await vi.importActual('@wagmi/core')
@@ -97,6 +101,38 @@ describe('WagmiAdapter', () => {
       expect(adapter.namespace).toBe('eip155')
     })
 
+    it('should set wagmi connectors', () => {
+      const addWagmiConnector = vi.spyOn(adapter, 'addWagmiConnector' as any)
+
+      vi.spyOn(wagmiCore, 'watchConnectors').mockResolvedValue(vi.fn)
+      ;(adapter as any).syncConnectors({}, mockAppKit)
+
+      expect(addWagmiConnector).toHaveBeenCalledWith(
+        {
+          id: 'test-connector'
+        },
+        {}
+      )
+    })
+
+    it('should listen for wagmi connector changes', () => {
+      const onConnectors = vi.fn()
+
+      vi.spyOn(wagmiCore, 'watchConnectors').mockImplementation(onConnectors)
+      ;(adapter as any).syncConnectors({}, mockAppKit)
+
+      adapter.wagmiConfig._internal.connectors.setState(() => [
+        ...adapter.wagmiConfig.connectors,
+        adapter.wagmiConfig._internal.connectors.setup(mock({ accounts: ['0x123'] }))
+      ])
+
+      watchConnectors(adapter.wagmiConfig, {
+        onChange: onConnectors
+      })
+
+      expect(onConnectors).toHaveBeenCalled()
+    })
+
     it('should not set info property for injected connector', () => {
       const mockConnectors = [
         {

packages/appkit/src/adapters/ChainAdapterBlueprint.ts

@@ -24,11 +24,17 @@ import type { AppKitOptions } from '../utils/index.js'
 import type { AppKit } from '../client.js'
 import { snapshot } from 'valtio/vanilla'
 
-type EventName = 'disconnect' | 'accountChanged' | 'switchNetwork' | 'pendingTransactions'
+type EventName =
+  | 'disconnect'
+  | 'accountChanged'
+  | 'switchNetwork'
+  | 'connectors'
+  | 'pendingTransactions'
 type EventData = {
   disconnect: () => void
   accountChanged: { address: string; chainId?: number | string }
   switchNetwork: { address?: string; chainId: number | string }
+  connectors: ChainAdapterConnector[]
   pendingTransactions: () => void
 }
 type EventCallback<T extends EventName> = (data: EventData[T]) => void
@@ -155,6 +161,8 @@ export abstract class AdapterBlueprint<
 
       return true
     })
+
+    this.emit('connectors', this.availableConnectors)
   }
 
   protected setStatus(status: AccountControllerState['status'], chainNamespace?: ChainNamespace) {

packages/appkit/src/adapters/index.ts

@@ -1 +1,2 @@
 export { AdapterBlueprint } from './ChainAdapterBlueprint.js'
+export type { ChainAdapterConnector } from './ChainAdapterConnector.js'