refactor: handle viem chains in wagmi adapter constructor (#2955)

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

.changeset/curly-peas-decide.md

@@ -0,0 +1,40 @@
+---
+'@examples/next-wagmi-pages-router': minor
+'@examples/next-wagmi-app-router': minor
+'@reown/appkit-adapter-ethers5': minor
+'@reown/appkit-adapter-ethers': minor
+'@reown/appkit-adapter-solana': minor
+'@reown/appkit-adapter-wagmi': minor
+'@reown/appkit-utils': minor
+'@examples/react-wagmi': minor
+'@reown/appkit-scaffold-ui': minor
+'@examples/next-wagmi': minor
+'@apps/laboratory': minor
+'@reown/appkit': minor
+'@reown/appkit-common': minor
+'@reown/appkit-solana': minor
+'@reown/appkit-wagmi': minor
+'@reown/appkit-core': minor
+'@reown/appkit-siwe': minor
+'@reown/appkit-cdn': minor
+'@reown/appkit-ui': minor
+'@apps/demo': minor
+'@apps/gallery': minor
+'@examples/html-ethers': minor
+'@examples/html-ethers5': minor
+'@examples/html-wagmi': minor
+'@examples/next-ethers': minor
+'@examples/react-ethers': minor
+'@examples/react-ethers5': minor
+'@examples/react-solana': minor
+'@examples/vue-ethers5': minor
+'@examples/vue-solana': minor
+'@examples/vue-wagmi': minor
+'@reown/appkit-adapter-polkadot': minor
+'@reown/appkit-ethers': minor
+'@reown/appkit-ethers5': minor
+'@reown/appkit-polyfills': minor
+'@reown/appkit-wallet': minor
+---
+
+Add Viem chains support

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,8 +25,8 @@ export function UpaSolanaSignMessageTest() {
           pubkey: address
         }
       }
-      const chain = caipNetwork?.id
-      await walletProvider.request(payload, chain)
+
+      await walletProvider.request(payload, caipNetwork?.caipNetworkId)
 
       toast({
         title: ConstantsUtil.SigningSucceededToastTitle,

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

@@ -18,7 +18,7 @@ const wagmiAdapter = new WagmiAdapter({
 
 const modal = createAppKit({
   adapters: [wagmiAdapter],
-  networks: ConstantsUtil.EvmNetworks,
+  networks: wagmiAdapter.caipNetworks,
   projectId: ConstantsUtil.ProjectId,
   features: {
     analytics: true,

apps/laboratory/src/utils/ConstantsUtil.ts

@@ -9,8 +9,9 @@ import {
   solanaTestnet,
   solanaDevnet,
   base,
+  baseSepolia,
   gnosis,
-  baseSepolia
+  type AppKitNetwork
 } from '@reown/appkit/networks'
 import { getLocalStorageItem } from './LocalStorage'
 import type { CaipNetwork } from '@reown/appkit'
@@ -58,22 +59,27 @@ const EvmNetworks = [
   zkSync,
   arbitrum,
   base,
+  baseSepolia,
   sepolia,
-  gnosis,
-  baseSepolia
-]
+  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',
@@ -131,5 +137,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/multichain/multichain-basic.spec.ts

@@ -37,7 +37,7 @@ test.afterAll(async () => {
 // -- Tests --------------------------------------------------------------------
 
 test('it should switch networks and sign', async () => {
-  const chains = ['Optimism', 'Solana']
+  const chains = ['Polygon', 'Solana']
 
   async function processChain(index: number) {
     if (index >= chains.length) {

apps/laboratory/tests/shared/constants/index.ts

@@ -8,5 +8,5 @@ export const DEFAULT_SESSION_PARAMS: SessionParams = {
   optAccounts: ['1', '2'],
   accept: true
 }
-export const SECURE_WEBSITE_URL = 'https://secure.walletconnect.org'
+export const SECURE_WEBSITE_URL = 'https://secure.reown.com'
 export const DEFAULT_CHAIN_NAME = process.env['DEFAULT_CHAIN_NAME'] || 'Ethereum'

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