diff --git a/packages/common/package.json b/packages/common/package.json index d6a146080..b82ce3384 100644 --- a/packages/common/package.json +++ b/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", diff --git a/packages/common/src/types.ts b/packages/common/src/types.ts index 86b6d75e3..6d10ff435 100644 --- a/packages/common/src/types.ts +++ b/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 & { id: DecimalChainId } + export type TokenSymbol = string // eg ETH export interface CustomNetwork { diff --git a/packages/core/package.json b/packages/core/package.json index 32706a314..55751fd0e 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/chain.ts b/packages/core/src/chain.ts index 55de64efa..6efd9175b 100644 --- a/packages/core/src/chain.ts +++ b/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 diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index f29f2157e..46cd0d349 100644 --- a/packages/core/src/index.ts +++ b/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 diff --git a/packages/core/src/store/actions.ts b/packages/core/src/store/actions.ts index 4bc8c74f4..91f5c8f07 100644 --- a/packages/core/src/store/actions.ts +++ b/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() })) } diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 0c2a05c0b..fd61471b7 100644 --- a/packages/core/src/types.ts +++ b/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 */ diff --git a/packages/core/src/utils.ts b/packages/core/src/utils.ts index 2108177c8..23204f0a9 100644 --- a/packages/core/src/utils.ts +++ b/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 { } } -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 = { '0x1': 'Ethereum', diff --git a/packages/core/src/validation.ts b/packages/core/src/validation.ts index ffa38fedf..8b0097acf 100644 --- a/packages/core/src/validation.ts +++ b/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 { diff --git a/packages/react/package.json b/packages/react/package.json index 222ccd1e5..86eebd244 100644 --- a/packages/react/package.json +++ b/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": { diff --git a/packages/vue/package.json b/packages/vue/package.json index cf4185e8c..2869eb1ab 100644 --- a/packages/vue/package.json +++ b/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": {