fix: use up-to-date chainId/accounts when querying EIP1193-derived wallets

packages/coinbase-wallet/src/index.spec.ts

@@ -1,7 +1,7 @@
 import { createWeb3ReactStoreAndActions } from '@web3-react/store'
 import type { Actions, Web3ReactStore } from '@web3-react/types'
 import { CoinbaseWallet } from '.'
-import { MockEIP1193Provider } from '../../eip1193/src/index.spec'
+import { MockEIP1193Provider } from '../../eip1193/src/mock'
 
 jest.mock(
   '@coinbase/wallet-sdk',
@@ -19,7 +19,7 @@ const accounts: string[] = []
 describe('Coinbase Wallet', () => {
   let store: Web3ReactStore
   let connector: CoinbaseWallet
-  let mockConnector: MockEIP1193Provider
+  let mockProvider: MockEIP1193Provider
 
   describe('connectEagerly = true', () => {
     beforeEach(async () => {
@@ -34,14 +34,20 @@ describe('Coinbase Wallet', () => {
       })
       await connector.connectEagerly().catch(() => {})
 
-      mockConnector = connector.provider as unknown as MockEIP1193Provider
-      mockConnector.chainId = chainId
-      mockConnector.accounts = accounts
+      mockProvider = connector.provider as unknown as MockEIP1193Provider
+      mockProvider.chainId = chainId
+      mockProvider.accounts = accounts
     })
 
     test('#activate', async () => {
       await connector.activate()
 
+      expect(mockProvider.eth_requestAccounts).toHaveBeenCalled()
+      expect(mockProvider.eth_accounts).not.toHaveBeenCalled()
+      expect(mockProvider.eth_chainId).toHaveBeenCalled()
+      expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+        .toBeGreaterThan(mockProvider.eth_requestAccounts.mock.invocationCallOrder[0])
+
       expect(store.getState()).toEqual({
         chainId: Number.parseInt(chainId, 16),
         accounts,

packages/coinbase-wallet/src/index.ts

@@ -85,17 +85,14 @@ export class CoinbaseWallet extends Connector {
     try {
       await this.isomorphicInitialize()
 
-      if (!this.connected) throw new Error('No existing connection')
-
-      return Promise.all([
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.provider!.request<string>({ method: 'eth_chainId' }),
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.provider!.request<string[]>({ method: 'eth_accounts' }),
-      ]).then(([chainId, accounts]) => {
-        if (!accounts.length) throw new Error('No accounts returned')
-        this.actions.update({ chainId: parseChainId(chainId), accounts })
-      })
+      if (!this.provider || !this.connected) throw new Error('No existing connection')
+
+      // Wallets may resolve eth_chainId and hang on eth_accounts pending user interaction, which may include changing
+      // chains; they should be requested serially, with accounts first, so that the chainId can settle.
+      const accounts = await this.provider.request<string[]>({ method: 'eth_accounts' }) 
+      const chainId = await this.provider.request<string>({ method: 'eth_chainId' }) 
+      if (!accounts.length) throw new Error('No accounts returned')
+      this.actions.update({ chainId: parseChainId(chainId), accounts })
     } catch (error) {
       cancelActivation()
       throw error
@@ -117,20 +114,18 @@ export class CoinbaseWallet extends Connector {
         ? desiredChainIdOrChainParameters
         : desiredChainIdOrChainParameters?.chainId
 
-    if (this.connected) {
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      if (!desiredChainId || desiredChainId === parseChainId(this.provider!.chainId)) return
+    if (this.provider && this.connected) {
+      if (!desiredChainId || desiredChainId === parseChainId(this.provider.chainId)) return
 
       const desiredChainIdHex = `0x${desiredChainId.toString(16)}`
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-      return this.provider!.request<void>({
+      return this.provider.request<void>({
         method: 'wallet_switchEthereumChain',
         params: [{ chainId: desiredChainIdHex }],
       }).catch(async (error: ProviderRpcError) => {
         if (error.code === 4902 && typeof desiredChainIdOrChainParameters !== 'number') {
+          if (!this.provider) throw new Error('No provider')
           // if we're here, we can try to add a new network
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-          return this.provider!.request<void>({
+          return this.provider.request<void>({
             method: 'wallet_addEthereumChain',
             params: [{ ...desiredChainIdOrChainParameters, chainId: desiredChainIdHex }],
           })
@@ -144,38 +139,36 @@ export class CoinbaseWallet extends Connector {
 
     try {
       await this.isomorphicInitialize()
+      if (!this.provider) throw new Error('No provider')
 
-      return Promise.all([
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.provider!.request<string>({ method: 'eth_chainId' }),
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        this.provider!.request<string[]>({ method: 'eth_requestAccounts' }),
-      ]).then(([chainId, accounts]) => {
-        const receivedChainId = parseChainId(chainId)
-
-        if (!desiredChainId || desiredChainId === receivedChainId)
-          return this.actions.update({ chainId: receivedChainId, accounts })
-
-        // if we're here, we can try to switch networks
-        const desiredChainIdHex = `0x${desiredChainId.toString(16)}`
-        return this.provider
-          ?.request<void>({
-            method: 'wallet_switchEthereumChain',
-            params: [{ chainId: desiredChainIdHex }],
-          })
-          .catch(async (error: ProviderRpcError) => {
-            if (error.code === 4902 && typeof desiredChainIdOrChainParameters !== 'number') {
-              // if we're here, we can try to add a new network
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              return this.provider!.request<void>({
-                method: 'wallet_addEthereumChain',
-                params: [{ ...desiredChainIdOrChainParameters, chainId: desiredChainIdHex }],
-              })
-            }
-
-            throw error
-          })
-      })
+      // Wallets may resolve eth_chainId and hang on eth_accounts pending user interaction, which may include changing
+      // chains; they should be requested serially, with accounts first, so that the chainId can settle.
+      const accounts = await this.provider.request<string[]>({ method: 'eth_requestAccounts' })
+      const chainId = await this.provider.request<string>({ method: 'eth_chainId' })
+      const receivedChainId = parseChainId(chainId)
+
+      if (!desiredChainId || desiredChainId === receivedChainId)
+        return this.actions.update({ chainId: receivedChainId, accounts })
+
+      // if we're here, we can try to switch networks
+      const desiredChainIdHex = `0x${desiredChainId.toString(16)}`
+      return this.provider
+        ?.request<void>({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: desiredChainIdHex }],
+        })
+        .catch(async (error: ProviderRpcError) => {
+          if (error.code === 4902 && typeof desiredChainIdOrChainParameters !== 'number') {
+            if (!this.provider) throw new Error('No provider')
+            // if we're here, we can try to add a new network
+            return this.provider.request<void>({
+              method: 'wallet_addEthereumChain',
+              params: [{ ...desiredChainIdOrChainParameters, chainId: desiredChainIdHex }],
+            })
+          }
+
+          throw error
+        })
     } catch (error) {
       cancelActivation()
       throw error

packages/eip1193/src/index.spec.ts

@@ -4,6 +4,7 @@ import { createWeb3ReactStoreAndActions } from '@web3-react/store'
 import type { Actions, ProviderRpcError, RequestArguments, Web3ReactStore } from '@web3-react/types'
 import { EventEmitter } from 'node:events'
 import { EIP1193 } from '.'
+import { MockEIP1193Provider } from './mock'
 
 class MockProviderRpcError extends Error {
   public code: number
@@ -13,47 +14,6 @@ class MockProviderRpcError extends Error {
   }
 }
 
-export class MockEIP1193Provider extends EventEmitter {
-  public chainId?: string
-  public accounts?: string[]
-
-  public eth_chainId = jest.fn((chainId?: string) => chainId)
-  public eth_accounts = jest.fn((accounts?: string[]) => accounts)
-  public eth_requestAccounts = jest.fn((accounts?: string[]) => accounts)
-
-  public request(x: RequestArguments): Promise<unknown> {
-    // make sure to throw if we're "not connected"
-    if (!this.chainId) return Promise.reject(new Error())
-
-    switch (x.method) {
-      case 'eth_chainId':
-        return Promise.resolve(this.eth_chainId(this.chainId))
-      case 'eth_accounts':
-        return Promise.resolve(this.eth_accounts(this.accounts))
-      case 'eth_requestAccounts':
-        return Promise.resolve(this.eth_requestAccounts(this.accounts))
-      default:
-        throw new Error()
-    }
-  }
-
-  public emitConnect(chainId: string) {
-    this.emit('connect', { chainId })
-  }
-
-  public emitDisconnect(error: ProviderRpcError) {
-    this.emit('disconnect', error)
-  }
-
-  public emitChainChanged(chainId: string) {
-    this.emit('chainChanged', chainId)
-  }
-
-  public emitAccountsChanged(accounts: string[]) {
-    this.emit('accountsChanged', accounts)
-  }
-}
-
 const chainId = '0x1'
 const accounts: string[] = []
 
@@ -132,7 +92,7 @@ describe('EIP1193', () => {
         mockProvider.accounts = accounts
 
         connector = new EIP1193({ actions, provider: mockProvider })
-        await connector.connectEagerly().catch(() => {})
+        await connector.connectEagerly()
 
         expect(store.getState()).toEqual({
           chainId: 1,
@@ -143,6 +103,8 @@ describe('EIP1193', () => {
         expect(mockProvider.eth_chainId.mock.calls.length).toBe(1)
         expect(mockProvider.eth_accounts.mock.calls.length).toBe(1)
         expect(mockProvider.eth_requestAccounts.mock.calls.length).toBe(0)
+        expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+          .toBeGreaterThan(mockProvider.eth_accounts.mock.invocationCallOrder[0])
       })
     })
 
@@ -170,6 +132,8 @@ describe('EIP1193', () => {
           expect(mockProvider.eth_chainId.mock.calls.length).toBe(1)
           expect(mockProvider.eth_accounts.mock.calls.length).toBe(0)
           expect(mockProvider.eth_requestAccounts.mock.calls.length).toBe(1)
+          expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+            .toBeGreaterThan(mockProvider.eth_requestAccounts.mock.invocationCallOrder[0])
         })
 
         test(`chainId = ${chainId}`, async () => {

packages/eip1193/src/index.ts

@@ -42,39 +42,30 @@ export class EIP1193 extends Connector {
     })
   }
 
-  /** {@inheritdoc Connector.connectEagerly} */
-  public async connectEagerly(): Promise<void> {
+  private async connect(eager: boolean): Promise<void> {
     const cancelActivation = this.actions.startActivation()
 
-    return Promise.all([
-      this.provider.request({ method: 'eth_chainId' }) as Promise<string>,
-      this.provider.request({ method: 'eth_accounts' }) as Promise<string[]>,
-    ])
-      .then(([chainId, accounts]) => {
-        this.actions.update({ chainId: parseChainId(chainId), accounts })
-      })
-      .catch((error) => {
+    try {
+      // Wallets may resolve eth_chainId and hang on eth_accounts pending user interaction, which may include changing
+      // chains; they should be requested serially, with accounts first, so that the chainId can settle.
+      const accounts = await (eager ? this.provider.request({ method: 'eth_accounts' }) : this.provider
+          .request({ method: 'eth_requestAccounts' })
+          .catch(() => this.provider.request({ method: 'eth_accounts' }))) as string[]
+      const chainId = await this.provider.request({ method: 'eth_chainId' }) as string
+      this.actions.update({ chainId: parseChainId(chainId), accounts })
+    } catch (error) {
         cancelActivation()
         throw error
-      })
+    }
+  }
+
+  /** {@inheritdoc Connector.connectEagerly} */
+  public async connectEagerly(): Promise<void> {
+    return this.connect(true)
   }
 
   /** {@inheritdoc Connector.activate} */
   public async activate(): Promise<void> {
-    const cancelActivation = this.actions.startActivation()
-
-    return Promise.all([
-      this.provider.request({ method: 'eth_chainId' }) as Promise<string>,
-      this.provider
-        .request({ method: 'eth_requestAccounts' })
-        .catch(() => this.provider.request({ method: 'eth_accounts' })) as Promise<string[]>,
-    ])
-      .then(([chainId, accounts]) => {
-        this.actions.update({ chainId: parseChainId(chainId), accounts })
-      })
-      .catch((error) => {
-        cancelActivation()
-        throw error
-      })
+    return this.connect(false)
   }
 }

packages/eip1193/src/mock.ts

@@ -0,0 +1,43 @@
+import type { ProviderRpcError, RequestArguments } from '@web3-react/types'
+import { EventEmitter } from 'node:events'
+
+export class MockEIP1193Provider extends EventEmitter {
+  public chainId?: string
+  public accounts?: string[]
+
+  public eth_chainId = jest.fn((chainId?: string) => chainId)
+  public eth_accounts = jest.fn((accounts?: string[]) => accounts)
+  public eth_requestAccounts = jest.fn((accounts?: string[]) => accounts)
+
+  public request(x: RequestArguments): Promise<unknown> {
+    // make sure to throw if we're "not connected"
+    if (!this.chainId) return Promise.reject(new Error())
+
+    switch (x.method) {
+      case 'eth_chainId':
+        return Promise.resolve(this.eth_chainId(this.chainId))
+      case 'eth_accounts':
+        return Promise.resolve(this.eth_accounts(this.accounts))
+      case 'eth_requestAccounts':
+        return Promise.resolve(this.eth_requestAccounts(this.accounts))
+      default:
+        throw new Error()
+    }
+  }
+
+  public emitConnect(chainId: string) {
+    this.emit('connect', { chainId })
+  }
+
+  public emitDisconnect(error: ProviderRpcError) {
+    this.emit('disconnect', error)
+  }
+
+  public emitChainChanged(chainId: string) {
+    this.emit('chainChanged', chainId)
+  }
+
+  public emitAccountsChanged(accounts: string[]) {
+    this.emit('accountsChanged', accounts)
+  }
+}

packages/metamask/src/index.spec.ts

@@ -1,10 +1,10 @@
 import { createWeb3ReactStoreAndActions } from '@web3-react/store'
 import type { Actions, Web3ReactStore } from '@web3-react/types'
 import { MetaMask } from '.'
-import { MockEIP1193Provider } from '../../eip1193/src/index.spec'
+import { MockEIP1193Provider } from '../../eip1193/src/mock'
 
 const chainId = '0x1'
-const accounts: string[] = []
+const accounts: string[] = ['0x0000000000000000000000000000000000000000']
 
 describe('MetaMask', () => {
   let mockProvider: MockEIP1193Provider
@@ -26,12 +26,37 @@ describe('MetaMask', () => {
     connector = new MetaMask({ actions })
   })
 
+  test('#connectEagerly', async () => {
+    mockProvider.chainId = chainId
+    mockProvider.accounts = accounts
+
+    await connector.connectEagerly()
+
+    expect(mockProvider.eth_requestAccounts).not.toHaveBeenCalled()
+    expect(mockProvider.eth_accounts).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+      .toBeGreaterThan(mockProvider.eth_accounts.mock.invocationCallOrder[0])
+
+    expect(store.getState()).toEqual({
+      chainId: Number.parseInt(chainId, 16),
+      accounts,
+      activating: false,
+    })
+  })
+
   test('#activate', async () => {
     mockProvider.chainId = chainId
     mockProvider.accounts = accounts
 
     await connector.activate()
 
+    expect(mockProvider.eth_requestAccounts).toHaveBeenCalled()
+    expect(mockProvider.eth_accounts).not.toHaveBeenCalled()
+    expect(mockProvider.eth_chainId).toHaveBeenCalled()
+    expect(mockProvider.eth_chainId.mock.invocationCallOrder[0])
+      .toBeGreaterThan(mockProvider.eth_requestAccounts.mock.invocationCallOrder[0])
+
     expect(store.getState()).toEqual({
       chainId: Number.parseInt(chainId, 16),
       accounts,