refactor: remove onUri callbacks in favor of adding single callback listener

.changeset/selfish-comics-rule.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Remove all onUri callback drilling for all walletConnectConnect methods in favor of a single call when initializing the UniversalProvider

packages/adapters/bitcoin/tests/BitcoinAdapter.test.ts

@@ -53,19 +53,14 @@ describe('BitcoinAdapter', () => {
     })
 
     it('should call connect from WALLET_CONNECT connector', async () => {
-      const onUri = vi.fn()
-      await adapter.connectWalletConnect(onUri)
-      ;(
-        mockWalletConnect.provider.on as MockedFunction<typeof mockWalletConnect.provider.on>
-      ).mock.calls.find(([name]) => name === 'display_uri')![1]('mock_uri')
+      await adapter.connectWalletConnect()
 
-      expect(onUri).toHaveBeenCalled()
       expect(mockWalletConnect.provider.connect).toHaveBeenCalled()
     })
 
     it('should throw if caipNetworks is not defined', async () => {
       adapter = new BitcoinAdapter({ api })
-      await expect(adapter.connectWalletConnect(vi.fn())).rejects.toThrow()
+      await expect(adapter.connectWalletConnect()).rejects.toThrow()
     })
 
     it('should set BitcoinWalletConnectConnector', async () => {

packages/adapters/solana/src/client.ts

@@ -331,11 +331,8 @@ export class SolanaAdapter extends AdapterBlueprint<SolanaProvider> {
     )
   }
 
-  public override async connectWalletConnect(
-    onUri: (uri: string) => void,
-    chainId?: string | number
-  ) {
-    const result = await super.connectWalletConnect(onUri, chainId)
+  public override async connectWalletConnect(chainId?: string | number) {
+    const result = await super.connectWalletConnect(chainId)
 
     const rpcUrl = this.caipNetworks?.find(n => n.id === chainId)?.rpcUrls.default.http[0] as string
     const connection = new Connection(rpcUrl, this.connectionSettings)

packages/adapters/solana/src/providers/SolanaWalletConnectProvider.ts

@@ -45,9 +45,6 @@ export class SolanaWalletConnectProvider
     this.getActiveChain = getActiveChain
   }
 
-  // -- Universal Provider Events ------------------------ //
-  public onUri?: (uri: string) => void
-
   // -- Public ------------------------------------------- //
   public get session(): SessionTypes.Struct | undefined {
     return this.provider.session
@@ -80,13 +77,7 @@ export class SolanaWalletConnectProvider
   }
 
   public async connect() {
-    if (!this.onUri) {
-      throw new Error('onUri callback is required to connect WalletConnectProvider')
-    }
-
-    await super.connectWalletConnect({
-      onUri: this.onUri
-    })
+    await super.connectWalletConnect()
 
     const account = this.getAccount(true)
 

packages/adapters/solana/src/tests/GenericProvider.test.ts

@@ -20,14 +20,11 @@ const getActiveChain = vi.fn(() => TestConstants.chains[0])
 const providers: { name: string; provider: Provider }[] = [
   {
     name: 'WalletConnectProvider',
-    provider: Object.assign(
-      new SolanaWalletConnectProvider({
-        provider: mockUniversalProvider(),
-        chains: TestConstants.chains,
-        getActiveChain
-      }),
-      { onUri: vi.fn() }
-    )
+    provider: new SolanaWalletConnectProvider({
+      provider: mockUniversalProvider(),
+      chains: TestConstants.chains,
+      getActiveChain
+    })
   },
   {
     name: 'WalletStandardProvider',

packages/adapters/solana/src/tests/WalletConnectProvider.test.ts

@@ -25,7 +25,6 @@ describe('WalletConnectProvider specific tests', () => {
       chains: TestConstants.chains,
       getActiveChain
     })
-    walletConnectProvider.onUri = vi.fn()
   })
 
   it('should call connect', async () => {

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

@@ -230,12 +230,10 @@ describe('SolanaAdapter', () => {
 
   describe('SolanaAdapter - connectWalletConnect', () => {
     it('should connect WalletConnect provider', async () => {
-      const onUri = vi.fn()
       vi.mocked(adapter['connectors']).push(mockWalletConnectConnector)
-      await adapter.connectWalletConnect(onUri)
+      await adapter.connectWalletConnect()
 
       expect(mockWalletConnectConnector.provider.connect).toHaveBeenCalled()
-      expect(mockWalletConnectConnector.provider.on).toHaveBeenCalledWith('display_uri', onUri)
       expect(SolStoreUtil.setConnection).toHaveBeenCalled()
     })
   })

packages/adapters/wagmi/src/client.ts

@@ -478,38 +478,28 @@ export class WagmiAdapter extends AdapterBlueprint {
     }
   }
 
-  public override async connectWalletConnect(
-    onUri: (uri: string) => void,
-    chainId?: number | string
-  ) {
+  public override async connectWalletConnect(chainId?: number | string) {
     // Attempt one click auth first
     const walletConnectConnector = this.getWalletConnectConnector()
-    const isAuthenticated = await walletConnectConnector.authenticate({ onUri })
+    const isAuthenticated = await walletConnectConnector.authenticate()
 
     if (isAuthenticated) {
       return { clientId: await walletConnectConnector.provider.client.core.crypto.getClientId() }
     }
 
     // Attempt to connect using wagmi connector
-    const connector = this.getWagmiConnector('walletConnect')
+    const wagmiConnector = this.getWagmiConnector('walletConnect')
 
-    if (!connector) {
+    if (!wagmiConnector) {
       throw new Error('UniversalAdapter:connectWalletConnect - connector not found')
     }
 
-    const provider = (await connector.getProvider()) as UniversalProvider
-
-    if (!this.caipNetworks || !provider) {
-      throw new Error(
-        'UniversalAdapter:connectWalletConnect - caipNetworks or provider is undefined'
-      )
-    }
-
-    provider.on('display_uri', onUri)
-
-    await connect(this.wagmiConfig, { connector, chainId: chainId ? Number(chainId) : undefined })
+    await connect(this.wagmiConfig, {
+      connector: wagmiConnector,
+      chainId: chainId ? Number(chainId) : undefined
+    })
 
-    return { clientId: await provider.client.core.crypto.getClientId() }
+    return { clientId: await walletConnectConnector.provider.client.core.crypto.getClientId() }
   }
 
   public async connect(

packages/appkit/src/adapters/ChainAdapterBlueprint.ts

@@ -187,16 +187,14 @@ export abstract class AdapterBlueprint<
 
   /**
    * Connects to WalletConnect.
-   * @param {(uri: string) => void} onUri - Callback function to handle the WalletConnect URI
    * @param {number | string} [_chainId] - Optional chain ID to connect to
    */
   public async connectWalletConnect(
-    onUri: (uri: string) => void,
     _chainId?: number | string
   ): Promise<undefined | { clientId: string }> {
     const connector = this.getWalletConnectConnector()
 
-    const result = await connector.connectWalletConnect({ onUri })
+    const result = await connector.connectWalletConnect()
 
     return { clientId: result.clientId }
   }

packages/appkit/src/client.ts

@@ -829,14 +829,14 @@ export class AppKit {
 
   private createClients() {
     this.connectionControllerClient = {
-      connectWalletConnect: async (onUri: (uri: string) => void) => {
+      connectWalletConnect: async () => {
         const adapter = this.getAdapter(ChainController.state.activeChain)
 
         if (!adapter) {
           throw new Error('Adapter not found')
         }
 
-        const result = await adapter.connectWalletConnect(onUri, this.getCaipNetwork()?.id)
+        const result = await adapter.connectWalletConnect(this.getCaipNetwork()?.id)
         this.close()
 
         this.setClientId(result?.clientId || null)
@@ -1289,6 +1289,11 @@ export class AppKit {
 
   private listenWalletConnect() {
     if (this.universalProvider) {
+      this.universalProvider.on(
+        'display_uri',
+        ConnectionController.setUri.bind(ConnectionController)
+      )
+
       this.universalProvider.on('disconnect', () => {
         this.chainNamespaces.forEach(namespace => {
           this.resetAccount(namespace)

packages/appkit/src/connectors/WalletConnectConnector.ts

@@ -33,8 +33,8 @@ export class WalletConnectConnector<Namespace extends ChainNamespace = ChainName
     return this.caipNetworks
   }
 
-  async connectWalletConnect(params: WalletConnectConnector.ConnectParams) {
-    const isAuthenticated = await this.authenticate(params)
+  async connectWalletConnect() {
+    const isAuthenticated = await this.authenticate()
 
     if (!isAuthenticated) {
       await this.provider.connect({
@@ -52,9 +52,7 @@ export class WalletConnectConnector<Namespace extends ChainNamespace = ChainName
     await this.provider.disconnect()
   }
 
-  async authenticate(params: WalletConnectConnector.ConnectParams): Promise<boolean> {
-    this.provider.on('display_uri', params.onUri)
-
+  async authenticate(): Promise<boolean> {
     const chains = this.chains.map(network => network.caipNetworkId)
 
     return SIWXUtil.universalProviderAuthenticate({
@@ -72,10 +70,6 @@ export namespace WalletConnectConnector {
     namespace: Namespace
   }
 
-  export type ConnectParams = {
-    onUri: (uri: string) => void
-  }
-
   export type ConnectResult = {
     clientId: string | null
     session: SessionTypes.Struct

packages/appkit/src/universal-adapter/client.ts

@@ -2,12 +2,7 @@ import type UniversalProvider from '@walletconnect/universal-provider'
 import bs58 from 'bs58'
 
 import { type ChainNamespace, ConstantsUtil } from '@reown/appkit-common'
-import {
-  ChainController,
-  ConnectionController,
-  CoreHelperUtil,
-  OptionsController
-} from '@reown/appkit-core'
+import { ChainController, CoreHelperUtil } from '@reown/appkit-core'
 
 import { AdapterBlueprint } from '../adapters/ChainAdapterBlueprint.js'
 import { WalletConnectConnector } from '../connectors/WalletConnectConnector.js'
@@ -23,19 +18,6 @@ export class UniversalAdapter extends AdapterBlueprint {
     )
   }
 
-  public override async connectWalletConnect(
-    onUri: (uri: string) => void,
-    _chainId?: string | number | undefined
-  ): Promise<{ clientId: string } | undefined> {
-    if (OptionsController.state.useInjectedUniversalProvider && ConnectionController.state.wcUri) {
-      onUri(ConnectionController.state.wcUri)
-
-      return undefined
-    }
-
-    return super.connectWalletConnect(onUri, _chainId)
-  }
-
   public async connect(
     params: AdapterBlueprint.ConnectParams
   ): Promise<AdapterBlueprint.ConnectResult> {

packages/appkit/tests/appkit.test.ts

@@ -1721,6 +1721,7 @@ describe('WalletConnect Events', () => {
   let universalProvider: Mocked<Pick<UniversalProvider, 'on'>>
 
   let chainChangedCallback: (chainId: string | number) => void
+  let displayUriCallback: (uri: string) => void
 
   beforeEach(async () => {
     appkit = new AppKit({
@@ -1739,6 +1740,9 @@ describe('WalletConnect Events', () => {
     chainChangedCallback = universalProvider.on.mock.calls.find(
       ([event]) => event === 'chainChanged'
     )?.[1]
+    displayUriCallback = universalProvider.on.mock.calls.find(
+      ([event]) => event === 'display_uri'
+    )?.[1]
   })
 
   describe('chainChanged', () => {
@@ -1764,4 +1768,11 @@ describe('WalletConnect Events', () => {
       expect(setCaipNetworkSpy).toHaveBeenNthCalledWith(2, newChain)
     })
   })
+
+  describe('display_uri', () => {
+    it('should call openUri', () => {
+      displayUriCallback('mock_uri')
+      expect(ConnectionController.setUri).toHaveBeenCalledWith('mock_uri')
+    })
+  })
 })

packages/appkit/tests/connectors/WalletConnectConnector.test.ts

@@ -51,7 +51,7 @@ describe('WalletConnectConnector', () => {
         .spyOn(SIWXUtil, 'universalProviderAuthenticate')
         .mockResolvedValueOnce(false)
 
-      await connector.connectWalletConnect({ onUri: vi.fn() })
+      await connector.connectWalletConnect()
 
       expect(authenticateSpy).toHaveBeenCalledWith(
         expect.objectContaining({
@@ -68,7 +68,7 @@ describe('WalletConnectConnector', () => {
         Promise.resolve(true)
       )
 
-      await connector.connectWalletConnect({ onUri: vi.fn() })
+      await connector.connectWalletConnect()
 
       expect(provider.connect).not.toHaveBeenCalled()
     })

packages/appkit/tests/universal-adapter.test.ts

@@ -63,11 +63,8 @@ describe('UniversalAdapter', () => {
 
   describe('connectWalletConnect', () => {
     it('should connect successfully', async () => {
-      const onUri = vi.fn()
+      await adapter.connectWalletConnect()
 
-      await adapter.connectWalletConnect(onUri)
-
-      expect(mockProvider.on).toHaveBeenCalledWith('display_uri', expect.any(Function))
       expect(mockProvider.connect).toHaveBeenCalledWith({
         optionalNamespaces: expect.any(Object)
       })
@@ -79,13 +76,12 @@ describe('UniversalAdapter', () => {
         writable: true
       })
 
-      await expect(adapter.connectWalletConnect(() => {})).rejects.toThrow(
+      await expect(adapter.connectWalletConnect()).rejects.toThrow(
         'WalletConnectConnector not found'
       )
     })
 
     it('should call onUri when display_uri event is emitted', async () => {
-      const onUri = vi.fn()
       const testUri = 'wc:test-uri'
 
       // Call the callback directly when 'on' is called
@@ -96,9 +92,7 @@ describe('UniversalAdapter', () => {
         return mockProvider
       })
 
-      await adapter.connectWalletConnect(onUri)
-
-      expect(onUri).toHaveBeenCalledWith(testUri)
+      await adapter.connectWalletConnect()
     })
   })