chore: fix wagmi not disconnecting and add adapter tests (#2751)

Co-authored-by: tomiir <[email protected]>

packages/base/adapters/evm/wagmi/client.ts

@@ -71,8 +71,6 @@ export class EVMWagmiClient {
   // -- Private variables -------------------------------------------------------
   private appKit: AppKit | undefined = undefined
 
-  private hasSyncedConnectedAccount = false
-
   private wagmiConfig: AdapterOptions<Config>['wagmiConfig']
 
   // -- Public variables --------------------------------------------------------
@@ -455,11 +453,10 @@ export class EVMWagmiClient {
 
   private async syncAccount({
     address,
-    isConnected,
-    isDisconnected,
     chainId,
     connector,
-    addresses
+    addresses,
+    status
   }: Partial<
     Pick<
       GetAccountReturnType,
@@ -477,10 +474,9 @@ export class EVMWagmiClient {
     if (this.appKit?.getCaipAddress() === caipAddress) {
       return
     }
-
-    if (isConnected && address && chainId) {
-      this.syncNetwork(address, chainId, isConnected)
-      this.appKit?.setIsConnected(isConnected, this.chain)
+    if (status === 'connected' && address && chainId) {
+      this.syncNetwork(address, chainId, true)
+      this.appKit?.setIsConnected(true, this.chain)
       this.appKit?.setCaipAddress(caipAddress, this.chain)
       await Promise.all([
         this.syncProfile(address, chainId),
@@ -500,15 +496,12 @@ export class EVMWagmiClient {
           this.chain
         )
       }
-
-      this.hasSyncedConnectedAccount = true
-    } else if (isDisconnected && this.hasSyncedConnectedAccount) {
+    } else if (status === 'disconnected') {
       this.appKit?.resetAccount(this.chain)
       this.appKit?.resetWcConnection()
       this.appKit?.resetNetwork()
       this.appKit?.setAllAccounts([], this.chain)
-
-      this.hasSyncedConnectedAccount = false
+      this.appKit?.setIsConnected(false, this.chain)
     }
   }
 
@@ -535,9 +528,8 @@ export class EVMWagmiClient {
         } else {
           this.appKit?.setAddressExplorerUrl(undefined, this.chain)
         }
-        if (this.hasSyncedConnectedAccount) {
-          await this.syncBalance(address, chainId)
-        }
+
+        await this.syncBalance(address, chainId)
       }
     }
   }

packages/wagmi/package.json

@@ -48,7 +48,8 @@
     "build": "tsc --build",
     "watch": "tsc --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
+    "test": "vitest run --dir tests"
   },
   "dependencies": {
     "@walletconnect/ethereum-provider": "2.15.1",
@@ -67,7 +68,8 @@
     "react-dom": "18.2.0",
     "viem": "2.19.6",
     "vue": "3.4.3",
-    "wagmi": "2.12.5"
+    "wagmi": "2.12.5",
+    "vitest": "2.0.3"
   },
   "peerDependencies": {
     "@wagmi/connectors": ">=4",

packages/wagmi/tests/adapter.test.ts

@@ -0,0 +1,53 @@
+import { describe, expect, test, vi } from 'vitest'
+import { connect, disconnect, getAccount as getAccount_wagmi } from '@wagmi/core'
+import { ConstantsUtil } from '@web3modal/scaffold-utils'
+import { appKitMock, mockAccount, wagmiConfigMock } from './mocks/adapter.mock'
+import { mainnet } from 'viem/chains'
+
+describe('wagmi adapter', () => {
+  test('should connect to adapter', async () => {
+    expect(appKitMock.getConnectors().length).toBe(1)
+    expect(appKitMock.getIsConnectedState()).toBe(false)
+    expect(appKitMock.getCaipAddress()).toBeUndefined()
+
+    const setApprovedCaipNetworksData = vi
+      .spyOn(appKitMock, 'setApprovedCaipNetworksData')
+      .mockResolvedValue()
+
+    await connect(wagmiConfigMock, { connector: wagmiConfigMock.connectors[0]! })
+
+    expect(setApprovedCaipNetworksData).toHaveBeenCalledOnce()
+
+    expect(appKitMock.getIsConnectedState()).toBe(true)
+    expect(appKitMock.getCaipAddress()).toBe(
+      `${ConstantsUtil.EIP155}:${mainnet.id}:${mockAccount.address}`
+    )
+
+    const wagmiAccount = getAccount_wagmi(wagmiConfigMock)
+
+    expect(wagmiAccount.status).toBe('connected')
+    expect(wagmiAccount.address).toBe(mockAccount.address)
+  })
+
+  test('should disconnect from adapter', async () => {
+    // Check if already connected
+    expect(appKitMock.getIsConnectedState()).toBe(true)
+
+    const resetAccount = vi.spyOn(appKitMock, 'resetAccount').mockResolvedValue()
+    const resetWcConnection = vi.spyOn(appKitMock, 'resetWcConnection').mockResolvedValue()
+    const resetNetwork = vi.spyOn(appKitMock, 'resetNetwork').mockResolvedValue()
+
+    await disconnect(wagmiConfigMock)
+
+    expect(resetAccount).toHaveBeenCalledOnce()
+    expect(resetWcConnection).toHaveBeenCalledOnce()
+    expect(resetNetwork).toHaveBeenCalledOnce()
+
+    expect(appKitMock.getIsConnectedState()).toBe(false)
+
+    const wagmiAccount = getAccount_wagmi(wagmiConfigMock)
+
+    expect(wagmiAccount.status).toBe('disconnected')
+    expect(wagmiAccount.address).toBeUndefined()
+  })
+})

packages/wagmi/tests/mocks/adapter.mock.ts

@@ -0,0 +1,38 @@
+import { EVMWagmiClient } from '@web3modal/base/adapters/evm/wagmi'
+import { mainnet } from 'viem/chains'
+import { createConfig, http } from 'wagmi'
+import { mock } from 'wagmi/connectors'
+
+import { generatePrivateKey, privateKeyToAccount } from 'viem/accounts'
+import { AppKit, type SdkVersion } from '@web3modal/base'
+
+const privateKey = generatePrivateKey()
+export const mockAccount = privateKeyToAccount(privateKey)
+
+export const wagmiConfigMock = createConfig({
+  chains: [mainnet],
+  connectors: [mock({ accounts: [mockAccount.address] })],
+  transports: {
+    [mainnet.id]: http()
+  }
+})
+
+const wagmiAdapterMock = new EVMWagmiClient({
+  wagmiConfig: wagmiConfigMock
+})
+
+const mockAppKitData = {
+  defaultChain: wagmiAdapterMock.defaultChain,
+  adapters: [wagmiAdapterMock],
+  metadata: {
+    description: 'Desc',
+    name: 'Name',
+    url: 'url.com',
+    icons: ['icon.png']
+  },
+  projectId: '1234',
+  sdkVersion: 'react-wagmi-4.0.13' as SdkVersion,
+  sdkType: 'w3m' as const
+}
+
+export const appKitMock = new AppKit(mockAppKitData)

packages/wagmi/tsconfig.json

@@ -6,5 +6,5 @@
     "baseUrl": "../../"
   },
   "extends": "../../tsconfig.json",
-  "include": ["exports"]
+  "include": ["exports", "tests"]
 }