refactor: handle viem chains in wagmi adapter constructor

apps/laboratory/src/components/Ethers/Ethers5TransactionTest.tsx

@@ -49,7 +49,7 @@ export function Ethers5TransactionTest() {
     }
   }
 
-  return Number(chainId) !== mainnet.chainId && address ? (
+  return chainId !== mainnet.id && address ? (
     <Stack direction={['column', 'column', 'row']}>
       <Button
         data-testid="sign-transaction-button"

apps/laboratory/src/components/Ethers/Ethers5WriteContractTest.tsx

@@ -47,9 +47,9 @@ export function Ethers5WriteContractTest() {
       setLoading(false)
     }
   }
-  const allowedChains = [sepolia.chainId, optimism.chainId]
+  const allowedChains = [sepolia.id, optimism.id]
 
-  return allowedChains.includes(Number(chainId)) && address ? (
+  return allowedChains.find(chain => chain === chainId) && address ? (
     <Stack direction={['column', 'column', 'row']}>
       <Button
         data-testid="sign-transaction-button"

apps/laboratory/src/components/Ethers/EthersTransactionTest.tsx

@@ -48,7 +48,7 @@ export function EthersTransactionTest() {
     }
   }
 
-  return Number(chainId) !== mainnet.chainId && address ? (
+  return chainId !== mainnet.id && address ? (
     <Stack direction={['column', 'column', 'row']}>
       <Button
         data-testid="sign-transaction-button"

apps/laboratory/src/components/Ethers/EthersWriteContractTest.tsx

@@ -46,9 +46,9 @@ export function EthersWriteContractTest() {
       setLoading(false)
     }
   }
-  const allowedChains = [sepolia.chainId, optimism.chainId]
+  const allowedChains = [sepolia.id, optimism.id]
 
-  return allowedChains.includes(Number(chainId)) && address ? (
+  return allowedChains.find(chain => chain === chainId) && address ? (
     <Stack direction={['column', 'column', 'row']}>
       <Button
         data-testid="sign-transaction-button"

apps/laboratory/src/components/Solana/SolanaTests.tsx

@@ -38,7 +38,7 @@ export function SolanaTests() {
             </Heading>
             <SolanaSignMessageTest />
           </Box>
-          {caipNetwork?.chainId === solana.chainId && (
+          {caipNetwork?.id === solana.id && (
             <Box>
               <Text fontSize="md" color="yellow">
                 Please be aware that you are connected to the mainnet. Be careful with your
@@ -99,8 +99,7 @@ export function SolanaTests() {
             <SolanaSignJupiterSwapTest />
           </Box>
 
-          {(caipNetwork?.chainId === solanaTestnet.chainId ||
-            caipNetwork?.chainId === solanaDevnet.chainId) && (
+          {(caipNetwork?.id === solanaTestnet.id || caipNetwork?.id === solanaDevnet.id) && (
             <Stack divider={<StackDivider />} spacing="4">
               <Box>
                 <Heading size="xs" textTransform="uppercase" pb="2">

apps/laboratory/src/components/Solana/SolanaWriteContractTest.tsx

@@ -26,7 +26,7 @@ export function SolanaWriteContractTest() {
   async function onIncrementCounter() {
     setLoading(true)
 
-    const PROGRAM_ID = new PublicKey(detectProgramId(caipNetwork?.chainId?.toString() ?? ''))
+    const PROGRAM_ID = new PublicKey(detectProgramId(caipNetwork?.id?.toString() ?? ''))
 
     try {
       if (!walletProvider?.publicKey) {

apps/laboratory/src/components/UPA/UpaSolanaSignMessageTest.tsx

@@ -25,7 +25,7 @@ export function UpaSolanaSignMessageTest() {
           pubkey: address
         }
       }
-      const chain = caipNetwork?.id
+      const chain = caipNetwork?.id?.toString()
       await walletProvider.request(payload, chain)
 
       toast({

apps/laboratory/src/pages/library/wagmi.tsx

@@ -18,8 +18,12 @@ const wagmiAdapter = new WagmiAdapter({
 
 const modal = createAppKit({
   adapters: [wagmiAdapter],
-  networks: ConstantsUtil.EvmNetworks,
+  networks: wagmiAdapter.caipNetworks,
   projectId: ConstantsUtil.ProjectId,
+  chainImages: {
+    787: 'https://imagedelivery.net/_aTEfDRm7z3tKgu9JhfeKA/59c89b74-8c5a-49e8-467b-607a2c0ac900/md',
+    4337: 'https://imagedelivery.net/_aTEfDRm7z3tKgu9JhfeKA/e8537239-736f-4db2-f941-07ff4eb7de00/md'
+  },
   features: {
     analytics: true,
     email: true,

apps/laboratory/src/utils/ConstantsUtil.ts

@@ -9,7 +9,8 @@ import {
   solanaTestnet,
   solanaDevnet,
   base,
-  gnosis
+  gnosis,
+  type AppKitNetwork
 } from '@reown/appkit/networks'
 import { getLocalStorageItem } from './LocalStorage'
 import type { CaipNetwork } from '@reown/appkit'
@@ -50,19 +51,27 @@ if (typeof window !== 'undefined') {
 
 const customWallet = storedCustomWallet ? [JSON.parse(storedCustomWallet)] : []
 
-const EvmNetworks = [mainnet, optimism, polygon, zkSync, arbitrum, base, sepolia, gnosis]
+const EvmNetworks = [mainnet, optimism, polygon, zkSync, arbitrum, base, sepolia, gnosis] as [
+  AppKitNetwork,
+  ...AppKitNetwork[]
+]
 
 export const solanaNotExist = {
-  id: 'solana:chaindoesntexist',
-  chainId: 'chaindoesntexist',
+  id: 'chaindoesntexist',
+  caipNetworkId: 'solana:chaindoesntexist',
+  chainNamespace: 'solana',
   name: 'Solana Unsupported',
-  currency: 'SOL',
-  explorerUrl: 'https://explorer.solana.com/?cluster=unsupported',
-  rpcUrl: 'https://api.unsupported.solana.com',
-  chainNamespace: 'solana'
+  nativeCurrency: { name: 'Solana', symbol: 'SOL', decimals: 9 },
+  blockExplorers: {
+    default: { name: 'Solscan', url: 'https://explorer.solana.com/?cluster=unsupported' }
+  },
+  rpcUrls: { default: { http: ['https://api.unsupported.solana.com'] } }
 } as CaipNetwork
 
-const SolanaNetworks = [solana, solanaTestnet, solanaDevnet, solanaNotExist]
+const SolanaNetworks = [solana, solanaTestnet, solanaDevnet, solanaNotExist] as [
+  AppKitNetwork,
+  ...AppKitNetwork[]
+]
 
 export const ConstantsUtil = {
   SigningSucceededToastTitle: 'Signing Succeeded',
@@ -120,5 +129,5 @@ export const ConstantsUtil = {
   ProjectId: projectId,
   EvmNetworks,
   SolanaNetworks,
-  AllNetworks: [...EvmNetworks, ...SolanaNetworks]
+  AllNetworks: [...EvmNetworks, ...SolanaNetworks] as [AppKitNetwork, ...AppKitNetwork[]]
 }

apps/laboratory/src/utils/EthersConstants.ts

@@ -3,7 +3,7 @@ import {
   aurora,
   avalanche,
   base,
-  binanceSmartChain,
+  bsc,
   celo,
   gnosis,
   mainnet,
@@ -21,7 +21,7 @@ export const EthersConstants = {
     arbitrum,
     polygon,
     avalanche,
-    binanceSmartChain,
+    bsc,
     optimism,
     gnosis,
     zkSync,

apps/laboratory/src/utils/SiweUtils.ts

@@ -13,7 +13,7 @@ export const siweConfig = createSIWEConfig({
   getMessageParams: async () => ({
     domain: window.location.host,
     uri: window.location.origin,
-    chains: chains.map(chain => chain.chainId as number),
+    chains: chains.map(chain => chain.id as number),
     statement: 'Please sign with your account',
     iat: new Date().toISOString()
   }),

apps/laboratory/src/utils/SolanaConstants.ts

@@ -7,11 +7,11 @@ export const SolanaConstantsUtil = {
   chains: [solana, solanaTestnet, solanaDevnet],
   programIds: [
     {
-      chainId: solanaDevnet.chainId,
+      chainId: solanaDevnet.id,
       programId: 'Cb5aXEgXptKqHHWLifvXu5BeAuVLjojQ5ypq6CfQj1hy'
     },
     {
-      chainId: solanaTestnet.chainId,
+      chainId: solanaTestnet.id,
       programId: 'FZn4xQoKKvcxDADDRdqNAAPnVv9qYCbUTbP3y4Rn1BBr'
     }
   ]

apps/laboratory/tests/email.spec.ts

@@ -66,7 +66,7 @@ emailTest('it should reject sign', async () => {
 
 emailTest('it should switch network and sign', async ({ library }) => {
   let targetChain = library === 'solana' ? 'Solana Testnet' : 'Polygon'
-  let caipNetworkId = library === 'solana' ? solanaTestnet.id : polygon.id
+  let caipNetworkId: number | string = library === 'solana' ? solanaTestnet.id : polygon.id
 
   await page.switchNetwork(targetChain)
   await validator.expectSwitchedNetworkOnNetworksView(targetChain)

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -84,7 +84,9 @@ export class ModalValidator {
 
   async expectCaipAddressHaveCorrectNetworkId(caipNetworkId: CaipNetworkId) {
     const address = this.page.getByTestId('appkit-caip-address')
-    await expect(address, 'Correct CAIP address should be present').toContainText(caipNetworkId)
+    await expect(address, 'Correct CAIP address should be present').toContainText(
+      caipNetworkId.toString()
+    )
   }
 
   async expectNetwork(network: string) {
@@ -237,6 +239,12 @@ export class ModalValidator {
     throw new Error('Call status not confirmed')
   }
 
+  async expectNetworkVisible(name: string) {
+    const network = this.page.getByTestId(`w3m-network-switch-${name}`)
+    await expect(network).toBeVisible()
+    await expect(network).toBeDisabled()
+  }
+
   async expectNetworksDisabled(name: string) {
     const disabledNetwork = this.page.getByTestId(`w3m-network-switch-${name}`)
     await expect(disabledNetwork.locator('button')).toBeDisabled()

apps/laboratory/tests/siwe.spec.ts

@@ -44,7 +44,7 @@ siweWalletTest('it should be authenticated', async () => {
 })
 
 siweWalletTest('it should require re-authentication when switching networks', async () => {
-  await modalPage.switchNetwork('ZkSync')
+  await modalPage.switchNetwork('Polygon')
   await modalValidator.expectUnauthenticated()
   await modalPage.promptSiwe()
   await walletPage.handleRequest({ accept: true })

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

@@ -1,6 +1,6 @@
 import { cookieStorage, createStorage } from '@wagmi/core'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
-import { mainnet, arbitrum } from '@reown/appkit/networks'
+import { mainnet, arbitrum, type AppKitNetwork } from '@reown/appkit/networks'
 
 // Get projectId from https://cloud.reown.com
 export const projectId = process.env.NEXT_PUBLIC_PROJECT_ID
@@ -9,7 +9,7 @@ if (!projectId) {
   throw new Error('Project ID is not defined')
 }
 
-export const networks = [mainnet, arbitrum]
+export const networks = [mainnet, arbitrum] as [AppKitNetwork, ...AppKitNetwork[]]
 
 // Set up the Wagmi Adapter (Config)
 export const wagmiAdapter = new WagmiAdapter({

examples/next-wagmi-app-router/src/context/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 
-import { wagmiAdapter, projectId } from '@/config'
+import { wagmiAdapter, projectId, networks } from '@/config'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { createAppKit } from '@reown/appkit/react'
-import { mainnet } from '@reown/appkit/networks'
+import { mainnet, arbitrum, type AppKitNetwork } from '@reown/appkit/networks'
 import React, { type ReactNode } from 'react'
 import { cookieToInitialState, WagmiProvider, type Config } from 'wagmi'
 
@@ -26,7 +26,7 @@ const metadata = {
 export const modal = createAppKit({
   adapters: [wagmiAdapter],
   projectId,
-  networks: wagmiAdapter.caipNetworks,
+  networks,
   defaultNetwork: mainnet,
   metadata: metadata,
   themeMode: 'light',

examples/next-wagmi-pages-router/src/context/index.tsx

@@ -6,7 +6,7 @@ import { State, WagmiProvider } from 'wagmi'
 
 import { cookieStorage, createStorage } from '@wagmi/core'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
-import { mainnet, arbitrum } from '@reown/appkit/networks'
+import { mainnet, arbitrum, type AppKitNetwork } from '@reown/appkit/networks'
 import { createAppKit } from '@reown/appkit/react'
 
 // Setup queryClient
@@ -16,7 +16,7 @@ const projectId = process.env.NEXT_PUBLIC_PROJECT_ID
 
 if (!projectId) throw new Error('Project ID is not defined')
 
-export const networks = [mainnet, arbitrum]
+export const networks = [mainnet, arbitrum] as [AppKitNetwork, ...AppKitNetwork[]]
 
 export const wagmiAdapter = new WagmiAdapter({
   storage: createStorage({

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

@@ -1,14 +1,25 @@
 import { cookieStorage, createStorage } from '@wagmi/core'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
-import { mainnet, arbitrum, avalanche, base, optimism, polygon } from '@reown/appkit/networks'
+import {
+  mainnet,
+  arbitrum,
+  avalanche,
+  base,
+  optimism,
+  polygon,
+  type AppKitNetwork
+} from '@reown/appkit/networks'
 
 export const projectId = process.env['NEXT_PUBLIC_PROJECT_ID']
 
 if (!projectId) {
   throw new Error('Project ID is not defined')
 }
 
-export const networks = [mainnet, arbitrum, avalanche, base, optimism, polygon]
+export const networks = [mainnet, arbitrum, avalanche, base, optimism, polygon] as [
+  AppKitNetwork,
+  ...AppKitNetwork[]
+]
 
 export const wagmiAdapter = new WagmiAdapter({
   storage: createStorage({

examples/react-wagmi/src/App.tsx

@@ -5,7 +5,7 @@ import {
   useAppKitState,
   useAppKitTheme
 } from '@reown/appkit/react'
-import { mainnet, polygon } from '@reown/appkit/networks'
+import { mainnet, polygon, bsc } from '@reown/appkit/networks'
 import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'
 import { WagmiProvider } from 'wagmi'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
@@ -23,7 +23,7 @@ if (!projectId) {
 // 2. Setup wagmi adapter
 const wagmiAdapter = new WagmiAdapter({
   projectId,
-  networks: [mainnet, polygon]
+  networks: [mainnet, polygon, bsc]
 })
 
 // 3. Create modal