refactor: send statusChange event to sync wagmi status with account c…

…ontroller (#3329)

Co-authored-by: tomiir <rocchitomas@gmail.com>

.changeset/config.json

@@ -1,11 +1,24 @@
 {
   "$schema": "https://unpkg.com/@changesets/config@3.0.0/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "reown-com/appkit" }],
+  "changelog": ["@changesets/changelog-github", 
+  { "repo": "reown-com/appkit" }],
   "commit": false,
   "fixed": [],
   "linked": [],
   "access": "public",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@examples/*", "@apps/gallery-new", "@apps/laboratory", "@apps/laboratory-new", "@reown/appkit-new", "@reown/appkit-scaffold-ui-new", "@reown/appkit-ui-new", "@reown/appkit-adapter-bitcoin"]
+  "ignore": [
+    "@examples/*", 
+    "@apps/demo", 
+    "@apps/gallery", 
+    "@apps/gallery-new", 
+    "@apps/laboratory", 
+    "@apps/laboratory-new", 
+    "@reown/appkit-new", 
+    "@reown/appkit-scaffold-ui-new", 
+    "@reown/appkit-ui-new", 
+    "@reown/appkit-adapter-bitcoin",
+    "@reown/appkit-adapter-polkadot"
+  ]
 }

.changeset/two-glasses-drive.md

@@ -0,0 +1,20 @@
+---
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': 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
+---
+
+Sync wagmi status with account controller status

apps/laboratory/src/pages/library/wagmi-no-ssr.tsx

@@ -0,0 +1,41 @@
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { WagmiTests } from '../../components/Wagmi/WagmiTests'
+import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
+import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
+import { createAppKit } from '@reown/appkit/react'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { ThemeStore } from '../../utils/StoreUtil'
+
+const queryClient = new QueryClient()
+
+const wagmiAdapter = new WagmiAdapter({
+  networks: ConstantsUtil.EvmNetworks,
+  projectId: ConstantsUtil.ProjectId
+})
+
+const modal = createAppKit({
+  adapters: [wagmiAdapter],
+  networks: ConstantsUtil.EvmNetworks,
+  projectId: ConstantsUtil.ProjectId,
+  features: {
+    analytics: true
+  },
+  customWallets: ConstantsUtil.CustomWallets
+})
+
+const config = wagmiAdapter.wagmiConfig
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>
+        <AppKitButtons />
+        <WagmiModalInfo />
+        <WagmiTests config={config} />
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

examples/next-ethers/src/context/index.tsx

@@ -5,7 +5,10 @@ import { EthersAdapter } from '@reown/appkit-adapter-ethers'
 import { mainnet, arbitrum, avalanche, base, optimism, polygon } from '@reown/appkit/networks'
 import { type ReactNode } from 'react'
 
-const projectId = 'Your project ID'
+const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
+if (!projectId) {
+  throw new Error('NEXT_PUBLIC_PROJECT_ID is not set')
+}
 
 const ethersAdapter = new EthersAdapter()
 
@@ -14,10 +17,10 @@ createAppKit({
   projectId,
   networks: [mainnet, arbitrum, avalanche, base, optimism, polygon],
   metadata: {
-    name: 'My App',
-    description: 'My app description',
-    url: 'https://myapp.com',
-    icons: ['https://myapp.com/favicon.ico']
+    name: 'AppKit Next.js Ethers Example',
+    description: 'Example Next.js application implementing AppKit with Ethers adapter',
+    url: 'https://reown.com/appkit',
+    icons: ['https://avatars.githubusercontent.com/u/179229932?s=200&v=4']
   },
   enableEIP6963: true,
   enableCoinbase: true

examples/next-wagmi/src/config/index.ts

@@ -1,4 +1,3 @@
-import { cookieStorage, createStorage } from '@wagmi/core'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 import {
   mainnet,
@@ -22,10 +21,7 @@ export const networks = [mainnet, arbitrum, avalanche, base, optimism, polygon]
 ]
 
 export const wagmiAdapter = new WagmiAdapter({
-  storage: createStorage({
-    storage: cookieStorage
-  }),
-  ssr: true,
+  ssr: false,
   networks,
   projectId
 })

packages/appkit-new/package.json

@@ -13,8 +13,7 @@
     "build": "tsc --build tsconfig.build.json",
     "watch": "tsc --watch",
     "typecheck": "tsc --noEmit",
-    "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
-    "test": "vitest run --coverage.enabled=true -- coverage.reporter=json --coverage.reporter=json-summary --coverage.reportOnFailure=true"
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
   },
   "exports": {
     ".": {

packages/appkit/exports/constants.ts

@@ -1 +1 @@
-export const PACKAGE_VERSION = '1.5.1'
+export const PACKAGE_VERSION = '1.5.2'

packages/appkit/src/adapters/ChainAdapterBlueprint.ts

@@ -6,8 +6,10 @@ import {
 } from '@reown/appkit-common'
 import type { ChainAdapterConnector } from './ChainAdapterConnector.js'
 import {
+  AccountController,
   OptionsController,
   ThemeController,
+  type AccountControllerState,
   type Connector as AppKitConnector,
   type AuthConnector,
   type Metadata,
@@ -152,6 +154,10 @@ export abstract class AdapterBlueprint<
     })
   }
 
+  protected setStatus(status: AccountControllerState['status'], chainNamespace?: ChainNamespace) {
+    AccountController.setStatus(status, chainNamespace)
+  }
+
   /**
    * Adds an event listener for a specific event.
    * @template T

packages/appkit/src/client.ts

@@ -20,7 +20,8 @@ import {
   type EstimateGasTransactionArgs,
   type AccountControllerState,
   type AdapterNetworkState,
-  SIWXUtil
+  SIWXUtil,
+  type ConnectionStatus
 } from '@reown/appkit-core'
 import {
   AccountController,
@@ -380,6 +381,7 @@ export class AppKit {
   }
 
   public setStatus: (typeof AccountController)['setStatus'] = (status, chain) => {
+    StorageUtil.setConnectionStatus(status as ConnectionStatus)
     AccountController.setStatus(status, chain)
   }
 
@@ -946,15 +948,15 @@ export class AppKit {
           const providerType =
             ProviderUtil.state.providerIds[ChainController.state.activeChain as ChainNamespace]
 
-          if (providerType === 'AUTH') {
+          if (providerType === UtilConstantsUtil.CONNECTOR_TYPE_AUTH) {
             try {
               ChainController.state.activeChain = caipNetwork.chainNamespace
               await this.connectionControllerClient?.connectExternal?.({
-                id: 'ID_AUTH',
+                id: UtilConstantsUtil.AUTH_CONNECTOR_ID,
                 provider: this.authProvider,
                 chain: caipNetwork.chainNamespace,
                 chainId: caipNetwork.id,
-                type: 'AUTH',
+                type: UtilConstantsUtil.CONNECTOR_TYPE_AUTH as ConnectorType,
                 caipNetwork
               })
             } catch (error) {
@@ -1013,21 +1015,13 @@ export class AppKit {
     this.setLoading(true)
     const isLoginEmailUsed = provider.getLoginEmailUsed()
     this.setLoading(isLoginEmailUsed)
-    const { isConnected } = await provider.isConnected()
-    if (isConnected && this.connectionControllerClient?.connectExternal) {
-      this.connectionControllerClient?.connectExternal({
-        id: 'ID_AUTH',
-        info: {
-          name: 'ID_AUTH'
-        },
-        type: 'AUTH',
-        provider,
-        chainId: ChainController.state.activeCaipNetwork?.id
-      })
-    } else {
-      this.setLoading(false)
+
+    if (isLoginEmailUsed) {
+      this.setStatus('connecting', ChainController.state.activeChain as ChainNamespace)
     }
 
+    const { isConnected } = await provider.isConnected()
+
     provider.onRpcRequest((request: W3mFrameTypes.RPCRequest) => {
       if (W3mFrameHelpers.checkIfRequestExists(request)) {
         if (!W3mFrameHelpers.checkIfRequestIsSafe(request)) {
@@ -1068,7 +1062,7 @@ export class AppKit {
     })
     provider.onNotConnected(() => {
       const connectedConnector = SafeLocalStorage.getItem(SafeLocalStorageKeys.CONNECTED_CONNECTOR)
-      const isConnectedWithAuth = connectedConnector === 'ID_AUTH'
+      const isConnectedWithAuth = connectedConnector === UtilConstantsUtil.AUTH_CONNECTOR_ID
       if (!isConnected && isConnectedWithAuth) {
         this.setCaipAddress(undefined, ChainController.state.activeChain as ChainNamespace)
         this.setLoading(false)
@@ -1079,9 +1073,9 @@ export class AppKit {
     })
     provider.onConnect(async user => {
       this.syncProvider({
-        type: 'AUTH',
+        type: UtilConstantsUtil.CONNECTOR_TYPE_AUTH as ConnectorType,
         provider,
-        id: 'ID_AUTH',
+        id: UtilConstantsUtil.AUTH_CONNECTOR_ID,
         chainNamespace: ChainController.state.activeChain as ChainNamespace
       })
 
@@ -1127,6 +1121,21 @@ export class AppKit {
         ChainController.state.activeChain as ChainNamespace
       )
     })
+
+    if (isConnected && this.connectionControllerClient?.connectExternal) {
+      await this.connectionControllerClient?.connectExternal({
+        id: UtilConstantsUtil.AUTH_CONNECTOR_ID,
+        info: { name: UtilConstantsUtil.AUTH_CONNECTOR_ID },
+        type: UtilConstantsUtil.CONNECTOR_TYPE_AUTH as ConnectorType,
+        provider,
+        chainId: ChainController.state.activeCaipNetwork?.id
+      })
+      this.setLoading(false)
+      this.setStatus('connected', ChainController.state.activeChain as ChainNamespace)
+    } else {
+      this.setLoading(false)
+      this.setStatus('disconnected', ChainController.state.activeChain as ChainNamespace)
+    }
   }
 
   private listenWalletConnect() {
@@ -1176,6 +1185,13 @@ export class AppKit {
 
   private listenAdapter(chainNamespace: ChainNamespace) {
     const adapter = this.getAdapter(chainNamespace)
+    const connectionStatus = StorageUtil.getConnectionStatus()
+
+    if (connectionStatus === 'connected') {
+      this.setStatus('connecting', chainNamespace)
+    } else {
+      this.setStatus(connectionStatus, chainNamespace)
+    }
 
     adapter?.on('switchNetwork', ({ address, chainId }) => {
       if (chainId && this.caipNetworks?.find(n => n.id === chainId)) {
@@ -1526,6 +1542,7 @@ export class AppKit {
       connectedConnector !== UtilConstantsUtil.CONNECTOR_TYPE_W3M_AUTH &&
       connectedNamespace
     ) {
+      this.setStatus('connecting', connectedNamespace as ChainNamespace)
       const adapter = this.getAdapter(connectedNamespace as ChainNamespace)
       const res = await adapter?.syncConnection({
         id: connectedConnector,
@@ -1537,11 +1554,16 @@ export class AppKit {
       if (res) {
         this.syncProvider({ ...res, chainNamespace: connectedNamespace as ChainNamespace })
         await this.syncAccount({ ...res, chainNamespace: connectedNamespace as ChainNamespace })
+        this.setStatus('connected', connectedNamespace as ChainNamespace)
+      } else {
+        this.setStatus('disconnected', connectedNamespace as ChainNamespace)
       }
 
       if (!this.caipNetworks?.some(network => network.id === res?.chainId)) {
         ChainController.showUnsupportedChainUI()
       }
+    } else if (connectedConnector !== UtilConstantsUtil.CONNECTOR_TYPE_W3M_AUTH) {
+      this.setStatus('disconnected', ChainController.state.activeChain as ChainNamespace)
     }
   }