refactor/switch network and local storage controls (#2888)

.changeset/three-doors-love.md

@@ -0,0 +1,38 @@
+---
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-scaffold-ui': patch
+'@apps/laboratory': patch
+'@reown/appkit': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@examples/html-ethers': patch
+'@examples/html-ethers5': patch
+'@examples/html-wagmi': patch
+'@examples/next-ethers': patch
+'@examples/next-wagmi': patch
+'@examples/react-ethers': patch
+'@examples/react-ethers5': patch
+'@examples/react-solana': patch
+'@examples/react-wagmi': patch
+'@examples/vue-ethers5': patch
+'@examples/vue-solana': patch
+'@examples/vue-wagmi': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-ethers': patch
+'@reown/appkit-ethers5': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-solana': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wagmi': patch
+'@reown/appkit-wallet': patch
+---
+
+Updates active network state management and local storage controls

apps/laboratory/src/components/AppKitNetworkInfo.tsx

@@ -27,7 +27,7 @@ export function AppKitNetworkInfo() {
             <Heading size="xs" textTransform="uppercase" pb="2">
               Address
             </Heading>
-            <Text data-testid="w3m-address">{address}</Text>
+            <Text data-testid="w3m-address">{address || '-'}</Text>
           </Box>
 
           <Box>

apps/laboratory/src/components/Wagmi/WagmiModalInfo.tsx

@@ -13,9 +13,9 @@ export function WagmiModalInfo() {
   async function getClientId() {
     if (connector?.type === 'walletConnect') {
       const provider = await connector?.getProvider?.()
-      const ethereumProvider = provider as UniversalProvider
+      const universalProvider = provider as UniversalProvider
 
-      return ethereumProvider.client?.core?.crypto?.getClientId()
+      return universalProvider?.client?.core?.crypto?.getClientId()
     }
 
     return null

apps/laboratory/tests/wallet.spec.ts

@@ -81,8 +81,23 @@ sampleWalletTest('it should switch networks and sign', async ({ library }) => {
   await processChain(0)
 })
 
+sampleWalletTest('it should show last connected network after refreshing', async ({ library }) => {
+  const chainName = library === 'solana' ? 'Solana Testnet' : 'Polygon'
+
+  await modalPage.switchNetwork(chainName)
+  await modalValidator.expectSwitchedNetwork(chainName)
+  await modalPage.closeModal()
+
+  await modalPage.page.reload()
+
+  await modalPage.openModal()
+  await modalPage.openNetworks()
+  await modalValidator.expectSwitchedNetwork(chainName)
+  await modalPage.closeModal()
+})
+
 sampleWalletTest('it should reject sign', async ({ library }) => {
-  const chainName = library === 'solana' ? 'Solana' : DEFAULT_CHAIN_NAME
+  const chainName = library === 'solana' ? 'Solana Testnet' : 'Polygon'
   await modalPage.sign()
   await walletValidator.expectReceivedSign({ chainName })
   await walletPage.handleRequest({ accept: false })

packages/adapters/ethers/src/client.ts

@@ -613,12 +613,10 @@ export class EthersAdapter {
       if (provider) {
         const { addresses, chainId } = await EthersHelpersUtil.getUserInfo(provider)
         const firstAddress = addresses?.[0]
-        const caipNetwork = this.caipNetworks.find(c => c.chainId === chainId)
         const caipAddress = `${this.chainNamespace}:${chainId}:${firstAddress}` as CaipAddress
 
-        if (firstAddress && chainId && caipNetwork) {
+        if (firstAddress && chainId) {
           this.appKit?.setCaipAddress(caipAddress, this.chainNamespace)
-          this.appKit?.setCaipNetwork(caipNetwork)
           ProviderUtil.setProviderId('eip155', providerId)
           ProviderUtil.setProvider<Provider>('eip155', provider)
           this.appKit?.setStatus('connected', this.chainNamespace)
@@ -660,8 +658,6 @@ export class EthersAdapter {
             : [{ address, type: preferredAccountType as 'eoa' | 'smartAccount' }],
           this.chainNamespace
         )
-        const caipNetwork = this.caipNetworks.find(c => c.chainId === chainId)
-        this.appKit?.setCaipNetwork(caipNetwork)
         this.appKit?.setStatus('connected', this.chainNamespace)
         this.appKit?.setCaipAddress(
           `${this.chainNamespace}:${chainId}:${address}`,
@@ -717,13 +713,13 @@ export class EthersAdapter {
       }
     }
 
-    const chainChangedHandler = (networkId: string) => {
-      if (networkId) {
-        const networkIdNumber =
-          typeof networkId === 'string'
-            ? EthersHelpersUtil.hexStringToNumber(networkId)
-            : Number(networkId)
-        const caipNetwork = this.caipNetworks.find(c => c.chainId === networkIdNumber)
+    const chainChangedHandler = (chainId: string) => {
+      const chainIdNumber =
+        typeof chainId === 'string' ? EthersHelpersUtil.hexStringToNumber(chainId) : Number(chainId)
+      const caipNetwork = this.caipNetworks.find(c => c.chainId === chainIdNumber)
+      const currentCaipNetwork = this.appKit?.getCaipNetwork()
+
+      if (!currentCaipNetwork || currentCaipNetwork?.id !== caipNetwork?.id) {
         this.appKit?.setCaipNetwork(caipNetwork)
       }
     }
@@ -836,10 +832,7 @@ export class EthersAdapter {
 
     this.appKit?.setLoading(true)
     const chainId = NetworkUtil.caipNetworkIdToNumber(this.appKit?.getCaipNetwork()?.id)
-    const caipNetwork = this.caipNetworks.find(c => c.chainId === chainId)
-
     this.appKit?.setCaipAddress(`eip155:${chainId}:${address}`, this.chainNamespace)
-    this.appKit?.setCaipNetwork(caipNetwork)
     this.appKit?.setStatus('connected', this.chainNamespace)
     this.appKit?.setPreferredAccountType(type as W3mFrameTypes.AccountType, this.chainNamespace)
 
@@ -1014,13 +1007,12 @@ export class EthersAdapter {
   }
 
   public async switchNetwork(caipNetwork: CaipNetwork) {
-    const requestSwitchNetwork = async (provider: Provider) => {
+    async function requestSwitchNetwork(provider: Provider) {
       try {
         await provider.request({
           method: 'wallet_switchEthereumChain',
           params: [{ chainId: EthersHelpersUtil.numberToHexString(caipNetwork.chainId) }]
         })
-        this.appKit?.setCaipNetwork(caipNetwork)
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (switchError: any) {
         if (

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

@@ -165,7 +165,6 @@ describe('EthersAdapter', () => {
           ])
         })
       )
-      expect(mockAppKit.setCaipNetwork).toHaveBeenCalledWith(newNetwork)
     })
 
     it('should add network if not recognized by wallet', async () => {
@@ -344,7 +343,6 @@ describe('EthersAdapter', () => {
 
         expect(mockAppKit.setLoading).toHaveBeenCalledWith(true)
         expect(mockAppKit.setCaipAddress).toHaveBeenCalledWith(`eip155:${1}:${address}`, 'eip155')
-        expect(mockAppKit.setCaipNetwork).toHaveBeenCalled()
         expect(mockAppKit.setStatus).toHaveBeenCalledWith('connected', 'eip155')
         expect(mockAppKit.setPreferredAccountType).toHaveBeenCalledWith(type, 'eip155')
 
@@ -388,7 +386,6 @@ describe('EthersAdapter', () => {
           [{ address: mockAddress, type: mockPreferredAccountType }],
           'eip155'
         )
-        expect(mockAppKit.setCaipNetwork).toHaveBeenCalled()
         expect(mockAppKit.setStatus).toHaveBeenCalledWith('connected', 'eip155')
         expect(mockAppKit.setCaipAddress).toHaveBeenCalledWith(
           `eip155:${mockChainId}:${mockAddress}`,
@@ -527,7 +524,6 @@ describe('EthersAdapter', () => {
         SafeLocalStorageKeys.WALLET_NAME,
         'MetaMask'
       )
-      expect(mockAppKit.setCaipNetwork).toHaveBeenCalled()
       expect(mockAppKit.setCaipAddress).toHaveBeenCalled()
       expect(ProviderUtil.setProviderId).toHaveBeenCalledWith('eip155', 'injected')
       expect(ProviderUtil.setProvider).toHaveBeenCalledWith('eip155', mockProvider)
@@ -584,7 +580,7 @@ describe('EthersAdapter', () => {
       const chainChangedHandler = mockProvider.on.mock.calls.find(
         (call: string[]) => call[0] === 'chainChanged'
       )[1]
-      await chainChangedHandler('0x1')
+      await chainChangedHandler('0x137')
 
       expect(mockAppKit.setCaipNetwork).toHaveBeenCalled()
     })

packages/adapters/ethers5/src/client.ts

@@ -722,13 +722,13 @@ export class Ethers5Adapter {
       }
     }
 
-    const chainChangedHandler = (networkId: string) => {
-      if (networkId) {
-        const networkIdNumber =
-          typeof networkId === 'string'
-            ? EthersHelpersUtil.hexStringToNumber(networkId)
-            : Number(networkId)
-        const caipNetwork = this.caipNetworks.find(c => c.chainId === networkIdNumber)
+    const chainChangedHandler = (chainId: string) => {
+      const chainIdNumber =
+        typeof chainId === 'string' ? EthersHelpersUtil.hexStringToNumber(chainId) : Number(chainId)
+      const caipNetwork = this.caipNetworks.find(c => c.chainId === chainIdNumber)
+      const currentCaipNetwork = this.appKit?.getCaipNetwork()
+
+      if (!currentCaipNetwork || currentCaipNetwork?.id !== caipNetwork?.id) {
         this.appKit?.setCaipNetwork(caipNetwork)
       }
     }

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

@@ -349,7 +349,6 @@ describe('EthersAdapter', () => {
 
         expect(mockAppKit.setLoading).toHaveBeenCalledWith(true)
         expect(mockAppKit.setCaipAddress).toHaveBeenCalledWith(`eip155:${1}:${address}`, 'eip155')
-        expect(mockAppKit.setCaipNetwork).toHaveBeenCalled()
         expect(mockAppKit.setStatus).toHaveBeenCalledWith('connected', 'eip155')
         expect(mockAppKit.setPreferredAccountType).toHaveBeenCalledWith(type, 'eip155')
 
@@ -532,7 +531,6 @@ describe('EthersAdapter', () => {
         SafeLocalStorageKeys.WALLET_NAME,
         'MetaMask'
       )
-      expect(mockAppKit.setCaipNetwork).toHaveBeenCalled()
       expect(ProviderUtil.setProviderId).toHaveBeenCalledWith('eip155', 'injected')
       expect(ProviderUtil.setProvider).toHaveBeenCalledWith('eip155', mockProvider)
       expect(mockAppKit.setStatus).toHaveBeenCalledWith('connected', 'eip155')
@@ -588,7 +586,7 @@ describe('EthersAdapter', () => {
       const chainChangedHandler = mockProvider.on.mock.calls.find(
         (call: string[]) => call[0] === 'chainChanged'
       )[1]
-      await chainChangedHandler('0x1')
+      await chainChangedHandler('0x2')
 
       expect(mockAppKit.setCaipNetwork).toHaveBeenCalled()
     })

packages/adapters/solana/src/client.ts

@@ -2,7 +2,6 @@ import { Connection } from '@solana/web3.js'
 import {
   AccountController,
   ApiController,
-  AssetController,
   ChainController,
   CoreHelperUtil,
   EventsController
@@ -311,10 +310,6 @@ export class SolanaAdapter implements ChainAdapter {
 
     this.syncRequestedNetworks(this.caipNetworks)
 
-    AssetController.subscribeNetworkImages(() => {
-      this.syncNetwork()
-    })
-
     ChainController.subscribeKey('activeCaipNetwork', (newCaipNetwork: CaipNetwork | undefined) => {
       const newChain = this.caipNetworks.find(
         _chain => _chain.chainId === newCaipNetwork?.id.split(':')[1]

packages/adapters/wagmi/src/client.ts

@@ -394,7 +394,6 @@ export class WagmiAdapter implements ChainAdapter {
           await SIWEController.signOut()
         }
         SafeLocalStorage.removeItem(SafeLocalStorageKeys.WALLET_ID)
-        SafeLocalStorage.removeItem(SafeLocalStorageKeys.ACTIVE_CAIP_NETWORK)
         SafeLocalStorage.removeItem(SafeLocalStorageKeys.CONNECTED_CONNECTOR)
         SafeLocalStorage.removeItem(SafeLocalStorageKeys.WALLET_NAME)
         this.appKit?.setClientId(null)
@@ -609,7 +608,6 @@ export class WagmiAdapter implements ChainAdapter {
       this.appKit?.resetNetwork()
       this.appKit?.setAllAccounts([], this.chainNamespace)
       SafeLocalStorage.removeItem(SafeLocalStorageKeys.WALLET_ID)
-      SafeLocalStorage.removeItem(SafeLocalStorageKeys.ACTIVE_CAIP_NETWORK)
 
       return
     }
@@ -647,7 +645,6 @@ export class WagmiAdapter implements ChainAdapter {
           }
         } else if (status === 'connected' && address && chainId) {
           const caipAddress = `eip155:${chainId}:${address}` as CaipAddress
-          this.appKit?.resetAccount(this.chainNamespace)
           this.syncNetwork(address, chainId, true)
           this.appKit?.setCaipAddress(caipAddress, this.chainNamespace)
           await Promise.all([

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

@@ -19,10 +19,10 @@ import {
   numberToHex
 } from 'viem'
 import { WcHelpersUtil } from '@reown/appkit'
+import { StorageUtil } from '@reown/appkit-core'
 import type { AppKitOptions } from '@reown/appkit'
 import type { AppKit } from '@reown/appkit'
 import { convertToAppKitChains } from '../utils/helpers.js'
-import { SafeLocalStorage, SafeLocalStorageKeys } from '@reown/appkit-common'
 
 type UniversalConnector = Connector & {
   onDisplayUri(uri: string): void
@@ -231,7 +231,8 @@ export function walletConnect(parameters: AppKitOptionsParams, appKit: AppKit) {
       const currentChainId = appKit.getCaipNetwork()?.chainId
 
       if (chainId && currentChainId !== chainId) {
-        const storedCaipNetwork = SafeLocalStorage.getItem(SafeLocalStorageKeys.ACTIVE_CAIP_NETWORK)
+        const storedCaipNetwork = StorageUtil.getStoredActiveCaipNetwork()
+
         if (storedCaipNetwork && storedCaipNetwork.chainNamespace === 'eip155') {
           await this.switchChain?.({ chainId: Number(storedCaipNetwork.chainId) })
         } else {