chore: change chainId type to accept string and its dependencies (#2632)

packages/common/src/utils/NetworkUtil.ts

@@ -3,5 +3,11 @@ import type { CaipNetworkId } from './TypeUtil.js'
 export const NetworkUtil = {
   caipNetworkIdToNumber(caipnetworkId?: CaipNetworkId) {
     return caipnetworkId ? Number(caipnetworkId.split(':')[1]) : undefined
+  },
+
+  parseEvmChainId(chainId: string | number) {
+    return typeof chainId === 'string'
+      ? this.caipNetworkIdToNumber(chainId as CaipNetworkId)
+      : chainId
   }
 }

packages/ethers/src/client.ts

@@ -918,7 +918,8 @@ export class Web3Modal extends Web3ModalScaffold {
             : [{ address, type: preferredAccountType as 'eoa' | 'smartAccount' }],
           this.chain
         )
-        EthersStoreUtil.setChainId(chainId)
+
+        EthersStoreUtil.setChainId(NetworkUtil.parseEvmChainId(chainId))
         EthersStoreUtil.setProviderType(ConstantsUtil.AUTH_CONNECTOR_ID as 'w3mAuth')
         EthersStoreUtil.setProvider(this.authProvider as unknown as CombinedProvider)
         EthersStoreUtil.setStatus('connected')

packages/wagmi/src/connectors/AuthConnector.ts

@@ -4,15 +4,13 @@ import { SwitchChainError, getAddress } from 'viem'
 import type { Address } from 'viem'
 import { ConstantsUtil } from '@web3modal/scaffold-utils'
 import type { SocialProvider } from '@web3modal/scaffold-utils'
+import { NetworkUtil } from '@web3modal/common'
+
 // -- Types ----------------------------------------------------------------------------------------
 interface W3mFrameProviderOptions {
   projectId: string
 }
 
-interface ConnectOptions {
-  chainId?: number
-}
-
 export type AuthParameters = {
   chains?: CreateConfigParameters['chains']
   options: W3mFrameProviderOptions
@@ -28,6 +26,10 @@ export function authConnector(parameters: AuthParameters) {
     provider?: W3mFrameProvider
   }
 
+  function parseChainId(chainId: string | number) {
+    return NetworkUtil.parseEvmChainId(chainId) || 1
+  }
+
   return createConnector<W3mFrameProvider, Properties>(config => ({
     id: ConstantsUtil.AUTH_CONNECTOR_ID,
     name: 'Web3Modal Auth',
@@ -37,17 +39,21 @@ export function authConnector(parameters: AuthParameters) {
     showWallets: parameters.showWallets,
     walletFeatures: parameters.walletFeatures,
 
-    async connect(options: ConnectOptions = {}) {
+    async connect(options = {}) {
       const provider = await this.getProvider()
-      const { address, chainId } = await provider.connect({ chainId: options.chainId })
+      const { address, chainId } = await provider.connect({
+        chainId: options.chainId
+      })
       await provider.getSmartAccountEnabledNetworks()
 
+      const parsedChainId = parseChainId(chainId)
+
       return {
         accounts: [address as Address],
         account: address as Address,
-        chainId,
+        chainId: parsedChainId,
         chain: {
-          id: chainId,
+          id: parsedChainId,
           unsuported: false
         }
       }
@@ -78,7 +84,7 @@ export function authConnector(parameters: AuthParameters) {
       const provider: W3mFrameProvider = await this.getProvider()
       const { chainId } = await provider.getChainId()
 
-      return chainId
+      return parseChainId(chainId)
     },
 
     async isAuthorized() {

packages/wallet/src/W3mFrameProvider.ts

@@ -281,7 +281,7 @@ export class W3mFrameProvider {
     }
   }
 
-  public async switchNetwork(chainId: number) {
+  public async switchNetwork(chainId: number | string) {
     try {
       const response = await this.appEvent<'SwitchNetwork'>({
         type: W3mFrameConstants.APP_SWITCH_NETWORK,
@@ -481,7 +481,7 @@ export class W3mFrameProvider {
     W3mFrameStorage.delete(W3mFrameConstants.SOCIAL, true)
   }
 
-  private setLastUsedChainId(chainId: number) {
+  private setLastUsedChainId(chainId: string | number) {
     W3mFrameStorage.set(W3mFrameConstants.LAST_USED_CHAIN_KEY, String(chainId))
   }
 

packages/wallet/src/W3mFrameSchema.ts

@@ -13,7 +13,7 @@ export const GetTransactionByHashResponse = z.object({
   accessList: z.array(z.string()),
   blockHash: z.string().nullable(),
   blockNumber: z.string().nullable(),
-  chainId: z.string(),
+  chainId: z.string().or(z.number()),
   from: z.string(),
   gas: z.string(),
   hash: z.string(),
@@ -29,12 +29,12 @@ export const GetTransactionByHashResponse = z.object({
   v: z.string(),
   value: z.string()
 })
-export const AppSwitchNetworkRequest = z.object({ chainId: z.number() })
+export const AppSwitchNetworkRequest = z.object({ chainId: z.string().or(z.number()) })
 export const AppConnectEmailRequest = z.object({ email: z.string().email() })
 export const AppConnectOtpRequest = z.object({ otp: z.string() })
 export const AppConnectSocialRequest = z.object({ uri: z.string() })
 export const AppGetUserRequest = z.object({
-  chainId: z.optional(z.number()),
+  chainId: z.optional(z.string().or(z.number())),
   preferredAccountType: z.optional(z.string())
 })
 export const AppGetSocialRedirectUriRequest = z.object({
@@ -82,7 +82,7 @@ export const FrameConnectFarcasterResponse = z.object({
 export const FrameConnectSocialResponse = z.object({
   email: z.string(),
   address: z.string(),
-  chainId: z.number(),
+  chainId: z.string().or(z.number()),
   accounts: z
     .array(
       z.object({
@@ -102,7 +102,7 @@ export const FrameUpdateEmailResponse = z.object({
 export const FrameGetUserResponse = z.object({
   email: z.string().email().optional().nullable(),
   address: z.string(),
-  chainId: z.number(),
+  chainId: z.string().or(z.number()),
   smartAccountDeployed: z.optional(z.boolean()),
   accounts: z
     .array(
@@ -119,8 +119,8 @@ export const FrameGetUserResponse = z.object({
 })
 export const FrameGetSocialRedirectUriResponse = z.object({ uri: z.string() })
 export const FrameIsConnectedResponse = z.object({ isConnected: z.boolean() })
-export const FrameGetChainIdResponse = z.object({ chainId: z.number() })
-export const FrameSwitchNetworkResponse = z.object({ chainId: z.number() })
+export const FrameGetChainIdResponse = z.object({ chainId: z.string().or(z.number()) })
+export const FrameSwitchNetworkResponse = z.object({ chainId: z.string().or(z.number()) })
 export const FrameUpdateEmailSecondaryOtpResponse = z.object({ newEmail: z.string().email() })
 export const FrameGetSmartAccountEnabledNetworksResponse = z.object({
   smartAccountEnabledNetworks: z.array(z.number())
@@ -314,7 +314,7 @@ export const WalletSendCallsRequest = z.object({
   method: z.literal('wallet_sendCalls'),
   params: z.array(
     z.object({
-      chainId: z.string().optional(),
+      chainId: z.string().or(z.number()).optional(),
       from: z.string().optional(),
       version: z.string().optional(),
       capabilities: z.any().optional(),

packages/wallet/src/W3mFrameTypes.ts

@@ -71,6 +71,7 @@ import {
   WalletGrantPermissionsRequest
 } from './W3mFrameSchema.js'
 import type { W3mFrameRpcConstants } from './W3mFrameConstants.js'
+import type { CaipNetworkId } from '@web3modal/common'
 
 export namespace W3mFrameTypes {
   export type AppEvent = z.infer<typeof W3mFrameSchema.appEvent>
@@ -127,7 +128,7 @@ export namespace W3mFrameTypes {
 
   export interface Network {
     rpcUrl: string
-    chainId: number
+    chainId: number | CaipNetworkId
   }
 
   export type RPCRequest =