refactor: exposed switch network method and hooks

.changeset/lazy-frogs-leave.md

@@ -0,0 +1,24 @@
+---
+'@reown/appkit-utils': patch
+'@apps/laboratory': patch
+'@reown/appkit': patch
+'@reown/appkit-core': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit-cdn': 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
+---
+
+Adds switch network methods and hooks

apps/laboratory/src/components/AppKitButtons.tsx

@@ -1,28 +1,15 @@
-import { useAppKit, useDisconnect, useAppKitAccount } from '@reown/appkit/react'
-import {
-  Stack,
-  Card,
-  CardHeader,
-  Heading,
-  CardBody,
-  Box,
-  StackDivider,
-  Button
-} from '@chakra-ui/react'
+import { Stack, Card, CardHeader, Heading, CardBody, Box, StackDivider } from '@chakra-ui/react'
+import { AppKitHooks } from './AppKitHooks'
 
 export function AppKitButtons() {
-  const { open } = useAppKit()
-  const { isConnected } = useAppKitAccount()
-  const { disconnect } = useDisconnect()
-
   return (
     <Card marginTop={10}>
       <CardHeader>
         <Heading size="md">AppKit Interactions</Heading>
       </CardHeader>
 
       <CardBody>
-        <Stack divider={<StackDivider />} spacing="4">
+        <Stack divider={<StackDivider />} spacing="4" flexWrap="wrap">
           <Box>
             <Heading size="xs" textTransform="uppercase" pb="2">
               Connect / Account Button
@@ -35,24 +22,7 @@ export function AppKitButtons() {
             </Heading>
             <w3m-network-button />
           </Box>
-          <Box>
-            <Heading size="xs" textTransform="uppercase" pb="2">
-              Hooks Interactions
-            </Heading>
-            <Box display="flex" alignItems="center" columnGap={3}>
-              <Button data-testid="w3m-open-hook-button" onClick={() => open()}>
-                Open
-              </Button>
-
-              <Button
-                data-testid="disconnect-hook-button"
-                isDisabled={!isConnected}
-                onClick={() => disconnect()}
-              >
-                Disconnect
-              </Button>
-            </Box>
-          </Box>
+          <AppKitHooks />
         </Stack>
       </CardBody>
     </Card>

apps/laboratory/src/components/AppKitHooks.tsx

@@ -0,0 +1,49 @@
+import { useAppKit, useDisconnect, useAppKitAccount, useAppKitNetwork } from '@reown/appkit/react'
+import { polygon, mainnet, solana, solanaTestnet, type AppKitNetwork } from '@reown/appkit/networks'
+import { Heading, Box, Button } from '@chakra-ui/react'
+
+export function AppKitHooks() {
+  const { open } = useAppKit()
+  const { isConnected } = useAppKitAccount()
+  const { caipNetwork, switchNetwork } = useAppKitNetwork()
+  const { disconnect } = useDisconnect()
+
+  function handleSwitchNetwork() {
+    const isEIPNamespace = caipNetwork?.chainNamespace === 'eip155'
+    // eslint-disable-next-line no-nested-ternary
+    const networkToSwitch: AppKitNetwork = isEIPNamespace
+      ? caipNetwork?.id === polygon.id
+        ? mainnet
+        : polygon
+      : caipNetwork?.id === solana.id
+        ? solanaTestnet
+        : solana
+
+    switchNetwork(networkToSwitch)
+  }
+
+  return (
+    <Box>
+      <Heading size="xs" textTransform="uppercase" pb="2">
+        Hooks Interactions
+      </Heading>
+      <Box display="flex" alignItems="center" columnGap={3} flexWrap="wrap">
+        <Button data-testid="w3m-open-hook-button" onClick={() => open()}>
+          Open
+        </Button>
+
+        <Button
+          data-testid="disconnect-hook-button"
+          isDisabled={!isConnected}
+          onClick={() => disconnect()}
+        >
+          Disconnect
+        </Button>
+
+        <Button data-testid="switch-network-hook-button" onClick={handleSwitchNetwork}>
+          Switch Network
+        </Button>
+      </Box>
+    </Box>
+  )
+}

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -567,4 +567,8 @@ export class ModalPage {
 
     return signature as `0x${string}`
   }
+
+  async switchNetworkWithHook() {
+    await this.page.getByTestId('switch-network-hook-button').click()
+  }
 }

apps/laboratory/tests/wallet.spec.ts

@@ -66,7 +66,8 @@ sampleWalletTest('it should show disabled networks', async ({ library }) => {
 })
 
 sampleWalletTest('it should switch networks and sign', async ({ library }) => {
-  const chains = library === 'solana' ? ['Solana Testnet', 'Solana'] : ['Polygon', 'Ethereum']
+  const chains =
+    library === 'solana' ? [solanaTestnet.name, solana.name] : [polygon.name, mainnet.name]
   const caipNetworkId =
     library === 'solana' ? [solanaTestnet.id, solana.id] : [polygon.id, mainnet.id]
 
@@ -99,6 +100,34 @@ sampleWalletTest('it should switch networks and sign', async ({ library }) => {
   await processChain(0)
 })
 
+sampleWalletTest('it should switch networks using hook', async ({ library }) => {
+  const chains = library === 'solana' ? ['Solana Testnet', 'Solana'] : ['Polygon', 'Ethereum']
+  const caipNetworkId =
+    library === 'solana' ? [solanaTestnet.id, solana.id] : [polygon.id, mainnet.id]
+
+  async function processChain(index: number) {
+    if (index >= chains.length) {
+      return
+    }
+
+    const chainName = chains[index] ?? DEFAULT_CHAIN_NAME
+    // Switch network using hook button
+    await modalPage.switchNetworkWithHook()
+    await modalPage.openModal()
+    await modalPage.openNetworks()
+    await modalValidator.expectSwitchedNetwork(chainName)
+    await modalPage.closeModal()
+    await modalValidator.expectCaipAddressHaveCorrectNetworkId(
+      caipNetworkId[index] as CaipNetworkId
+    )
+
+    await processChain(index + 1)
+  }
+
+  // Start processing from the first chain
+  await processChain(0)
+})
+
 sampleWalletTest('it should show last connected network after refreshing', async ({ library }) => {
   const chainName = library === 'solana' ? 'Solana Testnet' : 'Polygon'
 

packages/appkit-utils/src/ErrorUtil.ts

@@ -3,6 +3,11 @@ export const ErrorUtil = {
     UNAUTHORIZED_DOMAIN_NOT_ALLOWED: 'Unauthorized: origin not allowed'
   },
   ALERT_ERRORS: {
+    SWITCH_NETWORK_NOT_FOUND: {
+      shortMessage: 'Network Not Found',
+      longMessage:
+        "Network not found - please make sure it is included in 'networks' array in createAppKit function"
+    },
     INVALID_APP_CONFIGURATION: {
       shortMessage: 'Invalid App Configuration',
       longMessage: () =>

packages/appkit/exports/react.ts

@@ -3,6 +3,8 @@ import type { AppKitOptions } from '../src/utils/TypesUtil.js'
 import { getAppKit } from '../src/library/react/index.js'
 import { CoreHelperUtil } from '@reown/appkit-core'
 import { PACKAGE_VERSION } from './constants.js'
+import { useAppKitNetworkCore } from '@reown/appkit-core/react'
+import type { AppKitNetwork } from '@reown/appkit/networks'
 
 // -- Views ------------------------------------------------------------
 export * from '@reown/appkit-scaffold-ui'
@@ -41,4 +43,20 @@ export type { AppKitOptions }
 
 // -- Hooks ------------------------------------------------------------
 export * from '../src/library/react/index.js'
-export { useAppKitAccount, useAppKitNetwork } from '@reown/appkit-core/react'
+
+export function useAppKitNetwork() {
+  const { caipNetwork, caipNetworkId, chainId } = useAppKitNetworkCore()
+
+  function switchNetwork(network: AppKitNetwork) {
+    modal?.switchNetwork(network)
+  }
+
+  return {
+    caipNetwork,
+    caipNetworkId,
+    chainId,
+    switchNetwork
+  }
+}
+
+export { useAppKitAccount } from '@reown/appkit-core/react'

packages/appkit/exports/vue.ts

@@ -3,6 +3,8 @@ import type { AppKitOptions } from '../src/utils/TypesUtil.js'
 import { getAppKit } from '../src/library/vue/index.js'
 import { CoreHelperUtil } from '@reown/appkit-core'
 import { PACKAGE_VERSION } from './constants.js'
+import { useAppKitNetworkCore } from '@reown/appkit-core/vue'
+import type { AppKitNetwork } from '@reown/appkit/networks'
 
 // -- Views ------------------------------------------------------------
 export * from '@reown/appkit-scaffold-ui'
@@ -36,4 +38,19 @@ export { AppKit }
 export type { AppKitOptions }
 
 // -- Hooks ------------------------------------------------------------
+export function useAppKitNetwork() {
+  const { caipNetwork, caipNetworkId, chainId } = useAppKitNetworkCore()
+
+  function switchNetwork(network: AppKitNetwork) {
+    modal?.switchNetwork(network)
+  }
+
+  return {
+    caipNetwork,
+    caipNetworkId,
+    chainId,
+    switchNetwork
+  }
+}
+
 export * from '../src/library/vue/index.js'

packages/appkit/src/client.ts

@@ -42,6 +42,7 @@ import { UniversalAdapterClient } from './universal-adapter/client.js'
 import { CaipNetworksUtil, ErrorUtil } from '@reown/appkit-utils'
 import type { W3mFrameTypes } from '@reown/appkit-wallet'
 import { ProviderUtil } from './store/ProviderUtil.js'
+import type { AppKitNetwork } from '@reown/appkit/networks'
 
 // -- Export Controllers -------------------------------------------------------
 export { AccountController }
@@ -116,8 +117,16 @@ export class AppKit {
     return ChainController.state.activeCaipNetwork?.id
   }
 
-  public switchNetwork(caipNetwork: CaipNetwork) {
-    return ChainController.switchActiveNetwork(caipNetwork)
+  public switchNetwork(appKitNetwork: AppKitNetwork) {
+    const network = this.caipNetworks.find(n => n.id === appKitNetwork.id)
+
+    if (!network) {
+      AlertController.open(ErrorUtil.ALERT_ERRORS.SWITCH_NETWORK_NOT_FOUND, 'error')
+
+      return
+    }
+
+    ChainController.switchActiveNetwork(network)
   }
 
   public getWalletProvider() {

packages/appkit/src/tests/appkit.test.ts

@@ -1,5 +1,6 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 import { AppKit } from '../client'
+import { mainnet, polygon } from '../networks/index.js'
 import {
   AccountController,
   ModalController,
@@ -446,5 +447,22 @@ describe('Base', () => {
       })
       expect(result).toBe('connector-image-url')
     })
+
+    it('should switch network when requested', async () => {
+      vi.mocked(ChainController.switchActiveNetwork).mockResolvedValue(undefined)
+
+      await appKit.switchNetwork(mainnet)
+
+      expect(ChainController.switchActiveNetwork).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: mainnet.id,
+          name: mainnet.name
+        })
+      )
+
+      await appKit.switchNetwork(polygon)
+
+      expect(ChainController.switchActiveNetwork).toHaveBeenCalledTimes(1)
+    })
   })
 })

packages/core/exports/react.ts

@@ -6,7 +6,7 @@ import type { CaipNetwork, CaipNetworkId } from '@reown/appkit-common'
 import { ConnectionController } from '../src/controllers/ConnectionController.js'
 
 // -- Hooks ------------------------------------------------------------
-export function useAppKitNetwork(): {
+export function useAppKitNetworkCore(): {
   caipNetwork: CaipNetwork | undefined
   chainId: number | string | undefined
   caipNetworkId: CaipNetworkId | undefined

packages/core/exports/vue.ts

@@ -7,7 +7,7 @@ import { onUnmounted } from 'vue'
 import { ConnectionController } from '../src/controllers/ConnectionController.js'
 
 // -- Hooks ------------------------------------------------------------
-export function useAppKitNetwork(): {
+export function useAppKitNetworkCore(): {
   caipNetwork: CaipNetwork | undefined
   chainId: number | string | undefined
   caipNetworkId: CaipNetworkId | undefined

packages/core/src/controllers/ChainController.ts

@@ -268,6 +268,14 @@ export const ChainController = {
     }
   },
 
+  addCaipNetwork(caipNetwork: AdapterNetworkState['caipNetwork']) {
+    if (!caipNetwork) {
+      return
+    }
+
+    state.chains.get(caipNetwork.chainNamespace)?.caipNetworks.push(caipNetwork)
+  },
+
   async switchActiveNetwork(network: CaipNetwork) {
     const networkControllerClient = this.getNetworkControllerClient(network.chainNamespace)
 

packages/core/tests/hooks/react.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { useAppKitNetwork, useAppKitAccount } from '../../exports/react'
+import { useAppKitNetworkCore, useAppKitAccount } from '../../exports/react'
 
 import type { CaipNetwork } from '@reown/appkit-common'
 import { AccountController, ChainController } from '../../exports'
@@ -42,7 +42,7 @@ describe('useAppKitNetwork', () => {
       activeCaipNetwork: mockNetwork
     })
 
-    const { caipNetwork, chainId } = useAppKitNetwork()
+    const { caipNetwork, chainId } = useAppKitNetworkCore()
 
     expect(caipNetwork).toBe(mockNetwork)
     expect(chainId).toBe(1)