common-v2.1.7-alpha.2, core-v2.6.0-alpha.3, react-v2.2.5-alpha.2, vue-v2.1.5-alpha.2]: Fix: Chain id type fix

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.1.7-alpha.2",
+  "version": "2.1.7-alpha.3",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",

packages/common/src/types.ts

@@ -236,7 +236,9 @@ export type GetInterfaceHelpers = {
   EventEmitter: typeof EventEmitter
 }
 
-export type ChainId = string | number
+export type ChainId = string
+
+export type DecimalChainId = number
 
 export type RpcUrl = string
 
@@ -434,6 +436,8 @@ export interface Chain {
   blockExplorerUrl?: string
 }
 
+export type ChainWithDecimalId = Omit<Chain, 'id'> & { id: DecimalChainId }
+
 export type TokenSymbol = string // eg ETH
 
 export interface CustomNetwork {

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.6.0-alpha.5",
+  "version": "2.6.0-alpha.6",
   "description": "Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardized spec compliant web3 providers for all supported wallets, framework agnostic modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -83,7 +83,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.1.7-alpha.2",
+    "@web3-onboard/common": "^2.1.7-alpha.3",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.4.1",
     "bowser": "^2.11.0",

packages/core/src/chain.ts

@@ -6,6 +6,7 @@ import { state } from './store'
 import { switchChainModal$ } from './streams'
 import { validateSetChainOptions } from './validation'
 import type { WalletState } from './types'
+import { toHexString } from './utils'
 
 async function setChain(options: {
   chainId: string | number
@@ -20,10 +21,11 @@ async function setChain(options: {
 
   const { wallets, chains } = state.get()
   const { chainId, chainNamespace = 'evm', wallet: walletToSet } = options
+  const chainIdHex = toHexString(chainId)
 
   // validate that chainId has been added to chains
   const chain = chains.find(
-    ({ namespace, id }) => namespace === chainNamespace && id === chainId
+    ({ namespace, id }) => namespace === chainNamespace && id === chainIdHex
   )
 
   if (!chain) {
@@ -50,13 +52,13 @@ async function setChain(options: {
   // check if wallet is already connected to chainId
   if (
     walletConnectedChain.namespace === chainNamespace &&
-    walletConnectedChain.id === chainId
+    walletConnectedChain.id === chainIdHex
   ) {
     return true
   }
 
   try {
-    await switchChain(wallet.provider, chainId)
+    await switchChain(wallet.provider, chainIdHex)
     return true
   } catch (error) {
     const { code } = error as { code: number }
@@ -69,7 +71,7 @@ async function setChain(options: {
       // chain has not been added to wallet
       try {
         await addNewChain(wallet.provider, chain)
-        await switchChain(wallet.provider, chainId)
+        await switchChain(wallet.provider, chainIdHex)
         return true
       } catch (error) {
         // display notification to user to switch chain

packages/core/src/index.ts

@@ -91,8 +91,7 @@ function init(options: InitOptions): OnboardAPI {
   } = options
 
   initI18N(i18n)
-  addChains(chains.map(chainIdToHex))
-
+  addChains(chainIdToHex(chains))
   const { device, svelteInstance } = configuration
 
   // update accountCenter

packages/core/src/store/actions.ts

@@ -63,7 +63,7 @@ export function addChains(chains: Chain[]): void {
     payload: chains.map(({ namespace = 'evm', id, ...rest }) => ({
       ...rest,
       namespace,
-      id: id
+      id: id.toLowerCase()
     }))
   }
 

packages/core/src/types.ts

@@ -7,7 +7,8 @@ import type {
   EIP1193Provider,
   WalletModule,
   Chain,
-  TokenSymbol
+  TokenSymbol,
+  ChainWithDecimalId
 } from '@web3-onboard/common'
 
 import type gas from '@web3-onboard/gas'
@@ -23,7 +24,7 @@ export interface InitOptions {
   /**
    * The chains that your app works with
    */
-  chains: Chain[]
+  chains: Chain[] | ChainWithDecimalId[]
   /**
    * Additional metadata about your app to be displayed in the Onboard UI
    */

packages/core/src/utils.ts

@@ -8,7 +8,8 @@ import type {
   ChainId,
   Chain,
   WalletInit,
-  WalletModule
+  WalletModule,
+  ChainWithDecimalId
 } from '@web3-onboard/common'
 
 import ethereumIcon from './icons/ethereum'
@@ -92,10 +93,15 @@ export async function copyWalletAddress(text: string): Promise<void> {
   }
 }
 
-export const chainIdToHex = (chain: Chain): Chain =>
-  typeof chain.id === 'number'
-    ? { ...chain, id: `0x${chain.id.toString(16)}` }
-    : chain
+export const toHexString = (val: number | string): string => typeof val === 'number' ? `0x${val.toString(16)}` : val
+
+export function chainIdToHex(chains : Chain[] | ChainWithDecimalId[] ): 
+Chain[] {
+  return chains.map(({ id, ...rest }) => { 
+    const hexId = toHexString(id)
+    return { id: hexId, ...rest }
+  })  
+} 
 
 export const chainIdToLabel: Record<string, string> = {
   '0x1': 'Ethereum',

packages/core/src/validation.ts

@@ -2,6 +2,7 @@ import Joi, { ObjectSchema, Schema } from 'joi'
 import type {
   Chain,
   ChainId,
+  DecimalChainId,
   WalletInit,
   WalletModule
 } from '@web3-onboard/common'
@@ -304,7 +305,7 @@ export function validateString(str: string, label?: string): ValidateReturn {
 }
 
 export function validateSetChainOptions(data: {
-  chainId: ChainId
+  chainId: ChainId | DecimalChainId
   chainNamespace?: string
   wallet?: WalletState['label']
 }): ValidateReturn {

packages/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/react",
-  "version": "2.2.5-alpha.4",
+  "version": "2.2.5-alpha.5",
   "description": "A collection of React hooks for integrating Web3-Onboard in to React and Next.js projects. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -62,8 +62,8 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/core": "^2.6.0-alpha.4",
-    "@web3-onboard/common": "^2.1.7-alpha.2",
+    "@web3-onboard/core": "^2.6.0-alpha.6",
+    "@web3-onboard/common": "^2.1.7-alpha.3",
     "use-sync-external-store": "1.0.0"
   },
   "peerDependencies": {

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/vue",
-  "version": "2.1.5-alpha.4",
+  "version": "2.1.5-alpha.5",
   "description": "A collection of Vue Composables for integrating Web3-Onboard in to a Vue or Nuxt project. Web3-Onboard makes it simple to connect Ethereum hardware and software wallets to your dapp. Features standardised spec compliant web3 providers for all supported wallets, modern javascript UI with code splitting, CSS customization, multi-chain and multi-account support, reactive wallet state subscriptions and real-time transaction state change notifications.",
   "keywords": [
     "Ethereum",
@@ -62,8 +62,8 @@
   "dependencies": {
     "@vueuse/core": "^8.4.2",
     "@vueuse/rxjs": "^8.2.0",
-    "@web3-onboard/common": "^2.1.7-alpha.2",
-    "@web3-onboard/core": "^2.6.0-alpha.4",
+    "@web3-onboard/common": "^2.1.7-alpha.3",
+    "@web3-onboard/core": "^2.6.0-alpha.6",
     "vue-demi": "^0.12.4"
   },
   "peerDependencies": {