[common-v2.1.5-alpha.1, core-v2.4.0-alpha.7, react-v2.2.3-alpha.5, vue-v2.1.3-alpha.5, demo-v2.0.6]: Enhancement - chain number support (#1135)

* chain-number

* chain-number

* chain-number

* chain-number

* package-bump

* merge develop

* merge develop

* remove space

* remove yarn.lock

* remove common-yarn.lock

* package bump

* package bump

* package versioning

* package versioning

* package versioning

* package versioning

Author: mahmud-bn

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.1.6",
+  "version": "2.1.7-alpha.1",
   "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,7 @@ export type GetInterfaceHelpers = {
   EventEmitter: typeof EventEmitter
 }
 
-export type ChainId = string
+export type ChainId = string | number
 
 export type RpcUrl = string
 

packages/common/src/validation.ts

@@ -9,7 +9,9 @@ const basePaths = Joi.array().items(basePath)
 
 const chain = Joi.object({
   namespace: Joi.string(),
-  id: Joi.string().required(),
+  id: Joi.alternatives()
+        .try(Joi.string().pattern(/^0x[0-9a-fA-F]+$/), 
+        Joi.number().positive()).required,
   rpcUrl: Joi.string().required(),
   label: Joi.string().required(),
   token: Joi.string().required(),

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.5.0",
+  "version": "2.6.0-alpha.1",
   "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",
@@ -81,7 +81,7 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@web3-onboard/common": "^2.1.6",
+    "@web3-onboard/common": "^2.1.7-alpha.1",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "^4.4.1",
     "bowser": "^2.11.0",

packages/core/src/chain.ts

@@ -8,7 +8,7 @@ import { validateSetChainOptions } from './validation'
 import type { WalletState } from './types'
 
 async function setChain(options: {
-  chainId: string
+  chainId: string | number
   chainNamespace?: string
   wallet?: WalletState['label']
 }): Promise<boolean> {

packages/core/src/connect.ts

@@ -25,8 +25,8 @@ async function connect(
   if (!chains.length)
     throw new Error(
       'At least one chain must be set before attempting to connect a wallet'
-    )
-
+  )
+  
   const { autoSelect } = options || {
     autoSelect: { label: '', disableModals: false }
   }

packages/core/src/index.ts

@@ -26,6 +26,7 @@ import {
 } from './store/actions'
 
 import updateBalances from './update-balances'
+import { chainIdToHex } from './utils'
 import { preflightNotifications } from './preflight-notifications'
 
 const API = {
@@ -89,8 +90,7 @@ function init(options: InitOptions): OnboardAPI {
   } = options
 
   initI18N(i18n)
-  addChains(chains)
-
+  addChains(chains.map(chainIdToHex))
   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.toLowerCase()
+      id: id
     }))
   }
 

packages/core/src/utils.ts

@@ -92,6 +92,8 @@ 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 chainIdToLabel: Record<string, string> = {
   '0x1': 'Ethereum',
   '0x3': 'Ropsten',

packages/core/src/validation.ts

@@ -22,7 +22,10 @@ import type {
   PreflightNotificationsOptions
 } from './types'
 
-const chainId = Joi.string().pattern(/^0x[0-9a-fA-F]+$/)
+// const chainId = Joi.string().pattern(/^0x[0-9a-fA-F]+$/)
+const chainId = Joi.alternatives().
+                try(Joi.string().pattern(/^0x[0-9a-fA-F]+$/), 
+                Joi.number().positive())
 const chainNamespace = Joi.string().valid('evm')
 const unknownObject = Joi.object().unknown()