[core-v2.7.0-alpha.3, common-v2.1.8-alpha.1, hw-common-v1.0.0-alpha.1, demo-v2.0.8]: Feature -hw common (#1203)

* Initialization

* bump version

* circleci build

* build

* comments updates

* Fixes dependency and versioning issues

* Pin ethereumjs common version to fix type mismatch

* Change to serial build to ensure build order

* Version bumps

* Move more hw specific code

* Update yarn.lock

* Fix svelte build issues

* Fix hw imports

* Format rollup config

* Extract common validation logic

* Update yarn.lock

* Revert big number as ethers cannot handle it

* Update package.json files

* Import validation functions for gas module

* Update lock file

* Fix versions

* Update packages/vue/package.json

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

* Update packages/react/package.json

Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

Co-authored-by: Aaron Barnard <abarnard@protonmail.com>
Co-authored-by: Adam Carpenter <adamcarpenter86@gmail.com>

Author: 3 people

.circleci/config.yml

@@ -291,6 +291,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/gas
     steps:
       - node-build-steps
+  build-hw-common:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/hw-common
+    steps:
+      - node-build-steps
 
   # Build staging/Alpha releases
   build-staging-core:
@@ -419,6 +425,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/gas
     steps:
       - node-staging-build-steps
+  build-staging-hw-common:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/hw-common
+    steps:
+      - node-staging-build-steps
 
 workflows:
   version: 2
@@ -549,3 +561,9 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-gas:
           <<: *deploy_staging_filters
+  hw-common:
+    jobs:
+      - build-common:
+          <<: *deploy_production_filters
+      - build-staging-common:
+          <<: *deploy_staging_filters

examples/with-vuejs/package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@web3-onboard/injected-wallets": "^2.0.15",
-    "@web3-onboard/vue": "file:.yalc/@web3-onboard/vue",
+    "@web3-onboard/vue": "^2.1.6",
     "pinia": "^2.0.16",
     "vue": "^3.2.37",
     "vue-router": "^4.1.2"

examples/with-vuejs/yarn.lock

@@ -939,7 +939,7 @@
   dependencies:
     vue-demi "*"
 
-"@web3-onboard/common@^2.1.7", "@web3-onboard/common@^2.1.7-alpha.4":
+"@web3-onboard/common@^2.1.7":
   version "2.1.7"
   resolved "https://registry.yarnpkg.com/@web3-onboard/common/-/common-2.1.7.tgz#62c74726ed9dd6e8baadab1e6aec6462d62e7d2d"
   integrity sha512-4nJvfNl0t5D17B1jD8H9BNBtUOVDDHxyxmRyQxnv1u1D5dgdd2I/mUVGhee0xWIHgMy9ORjuJCApraYCwZfgJA==
@@ -950,12 +950,23 @@
     joi "^17.4.2"
     rxjs "^7.5.2"
 
-"@web3-onboard/core@^2.6.0-alpha.7":
-  version "2.6.0"
-  resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.6.0.tgz#978b41211780189d9f5fb2f8f3259659bf6022e2"
-  integrity sha512-mxX4kMKetSqp/kDWYEZYqpIeDx7s3Q2i+XgS9FAaNDv+Rbv95CC/AC5zxpxiUy2zsixe8avTZtKoPXRV7y0Wag==
+"@web3-onboard/common@^2.1.8":
+  version "2.1.8"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/common/-/common-2.1.8.tgz#e20e027eaa597846b4ff178423de13d5ca597a5b"
+  integrity sha512-3kmJi0FKUw0rPXrbVe/BL+K13JSEzZ2QndnzpmHtKt4xFyRN+JgboAaAvJqfuk9t4hAZe45PqEWraSnYUCgDaA==
   dependencies:
-    "@web3-onboard/common" "^2.1.7"
+    "@ethereumjs/common" "2.6.2"
+    bignumber.js "^9.0.0"
+    ethers "5.5.4"
+    joi "^17.4.2"
+    rxjs "^7.5.2"
+
+"@web3-onboard/core@^2.7.0":
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/core/-/core-2.7.0.tgz#20acb5ae430cc5d0b2a7513e4e83f3182cff19eb"
+  integrity sha512-wxlUheuqgW8C5W2W4bpQdfjV9fXwmWxQx82IKem5kEnDhU8NPjVYEO/Xg4+kUwPlzYg0Uj/SPuGGjk+tNIrn9g==
+  dependencies:
+    "@web3-onboard/common" "^2.1.8"
     bignumber.js "^9.0.0"
     bnc-sdk "^4.4.1"
     bowser "^2.11.0"
@@ -966,7 +977,7 @@
     lodash.partition "^4.6.0"
     nanoid "^4.0.0"
     rxjs "^7.5.2"
-    svelte "^3.46.4"
+    svelte "^3.49.0"
     svelte-i18n "^3.3.13"
 
 "@web3-onboard/injected-wallets@^2.0.15":
@@ -978,13 +989,15 @@
     joi "^17.4.2"
     lodash.uniqby "^4.7.0"
 
-"@web3-onboard/vue@file:.yalc/@web3-onboard/vue":
-  version "2.1.5-alpha.6"
+"@web3-onboard/vue@^2.1.6":
+  version "2.1.6"
+  resolved "https://registry.yarnpkg.com/@web3-onboard/vue/-/vue-2.1.6.tgz#c634aff42932cc51e97bc40dc8669af1396d4485"
+  integrity sha512-RWWpZdTYLiwjUoem2+Lppdxtj0qPycrw44Dls83PjOp+9mO9/dvLO+FXSwmMJcPJiOH9WYPuejqAGOF89LQAUQ==
   dependencies:
     "@vueuse/core" "^8.4.2"
     "@vueuse/rxjs" "^8.2.0"
-    "@web3-onboard/common" "^2.1.7-alpha.4"
-    "@web3-onboard/core" "^2.6.0-alpha.7"
+    "@web3-onboard/common" "^2.1.8"
+    "@web3-onboard/core" "^2.7.0"
     vue-demi "^0.12.4"
 
 acorn-jsx@^5.3.2:
@@ -2453,7 +2466,7 @@ svelte-i18n@^3.3.13:
     sade "^1.7.4"
     tiny-glob "^0.2.6"
 
-svelte@^3.46.4:
+svelte@^3.49.0:
   version "3.49.0"
   resolved "https://registry.yarnpkg.com/svelte/-/svelte-3.49.0.tgz#5baee3c672306de1070c3b7888fc2204e36a4029"
   integrity sha512-+lmjic1pApJWDfPCpUUTc1m8azDqYCG1JN9YEngrx/hUyIcFJo6VZhj0A1Ai0wqoHcEIuQy+e9tk+4uDgdtsFA==

package.json

@@ -49,7 +49,7 @@
     "install-m1-mac": "yarn install --ignore-optional",
     "format": "prettier --write 'packages/**/*.ts'",
     "dev": "yarn wsrun dev",
-    "build": "yarn wsrun --stages build",
+    "build": "yarn wsrun --serial build",
     "type-check": "yarn wsrun type-check"
   },
   "devDependencies": {

packages/coinbase/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/coinbase",
-  "version": "2.0.11",
+  "version": "2.1.0-alpha.1",
   "description": "Coinbase SDK wallet module for connecting to Web3-Onboard. 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",
@@ -36,7 +36,7 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/blocknative/web3-onboard.git",
-    "directory": "packages/core"
+    "directory": "packages/coinbase"
   },
   "homepage": "https://www.blocknative.com/onboard",
   "bugs": "https://github.com/blocknative/web3-onboard/issues",
@@ -59,6 +59,6 @@
   },
   "dependencies": {
     "@coinbase/wallet-sdk": "^3.0.5",
-    "@web3-onboard/common": "^2.1.8"
+    "@web3-onboard/common": "^2.2.0-alpha.1"
   }
 }

packages/common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/common",
-  "version": "2.1.8",
+  "version": "2.2.0-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",
@@ -36,15 +36,14 @@
   "repository": {
     "type": "git",
     "url": "https://github.com/blocknative/web3-onboard.git",
-    "directory": "packages/core"
+    "directory": "packages/common"
   },
   "homepage": "https://www.blocknative.com/onboard",
   "bugs": "https://github.com/blocknative/web3-onboard/issues",
   "scripts": {
-    "build": "rollup -c",
-    "dev": "rollup -c -w",
-    "start": "sirv public --no-clear",
-    "type-check": "svelte-check --tsconfig ./tsconfig.json",
+    "build": "tsc",
+    "dev": "tsc -w",
+    "type-check": "tsc --noEmit",
     "lint": "eslint -c './.eslintrc.cjs' './src' && prettier --check './src/**/*'"
   },
   "module": "dist/index.js",
@@ -57,33 +56,25 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.0.0",
-    "@rollup/plugin-replace": "^3.0.0",
-    "@rollup/plugin-typescript": "^8.0.0",
-    "@tsconfig/svelte": "^2.0.0",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
     "eip-712": "^0.4.3",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^3.2.1",
     "eventemitter3": "^4.0.7",
     "prettier": "^2.4.0",
     "prettier-plugin-svelte": "^2.4.0",
     "rollup": "^2.3.4",
     "rollup-plugin-svelte": "^7.0.0",
-    "svelte": "^3.49.0",
+    "svelte": "^3.42.5",
     "svelte-check": "^2.2.6",
     "svelte-preprocess": "^4.9.4",
     "tslib": "^2.0.0",
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@ethereumjs/common": "2.6.2",
-    "bignumber.js": "^9.0.0",
+    "bignumber.js": "^9.1.0",
     "ethers": "5.5.4",
-    "joi": "^17.4.2",
-    "rxjs": "^7.5.2"
+    "joi": "^17.4.2"
   }
 }

packages/common/src/index.ts

@@ -1,14 +1,7 @@
-export { ProviderRpcErrorCode } from './types'
 export { ProviderRpcError } from './errors'
 export { createEIP1193Provider } from './eip-1193'
-export { default as accountSelect } from './account-select'
-export { entryModal } from './entry-modal'
 export { SofiaProLight, SofiaProRegular, SofiaProSemiBold } from './fonts'
-export {
-  getCommon,
-  bigNumberFieldsToStrings,
-  getHardwareWalletProvider
-} from './hdwallets'
 export { weiToEth } from './utils'
 
 export * from './types'
+export * from './validation'

packages/common/src/types.ts

@@ -75,56 +75,6 @@ export type RequestPatch = {
       }) => Promise<null>)
     | null
 }
-
-// eslint-disable-next-line max-len
-export type AccountSelectAPI = (
-  options: SelectAccountOptions
-) => Promise<Account>
-
-export type SelectAccountOptions = {
-  basePaths: BasePath[] // the paths to display in the base path selector
-  assets: Asset[] // the selectable assets to scan for a balance
-  chains: Chain[] // the selectable chains/networks to scan for balance
-  scanAccounts: ScanAccounts
-  supportsCustomPath?: boolean
-}
-
-export type BasePath = {
-  label: string // eg - Ethereum Ledger Live
-  value: DerivationPath
-}
-
-export type DerivationPath = string // eg - m/44'/60'
-
-export type Asset = {
-  label: string // eg - ETH
-  address?: string // if is a token, address to query contract
-}
-
-export type ScanAccounts = (options: ScanAccountsOptions) => Promise<Account[]>
-
-export type ScanAccountsOptions = {
-  derivationPath: DerivationPath
-  chainId: Chain['id']
-  asset: Asset
-}
-
-export type AccountAddress = string
-
-export type Account = {
-  address: AccountAddress
-  derivationPath: DerivationPath
-  balance: {
-    asset: Asset['label']
-    value: ethers.BigNumber
-  }
-}
-
-export type AccountsList = {
-  all: Account[]
-  filtered: Account[]
-}
-
 export interface AppMetadata {
   /* App name */
   name: string
@@ -262,6 +212,8 @@ export interface ProviderInfo {
   chainId: ChainId
 }
 
+export type AccountAddress = string
+
 /**
  * An array of addresses
  */

packages/common/src/utils.ts

@@ -1,5 +1,5 @@
-import BigNumber from 'bignumber.js'
+import Bignumber from 'bignumber.js'
 
 export function weiToEth(wei: string): string {
-   return new BigNumber(wei).div(1e18).toString(10)
-}
+  return new Bignumber(wei).div(1e18).toString(10)
+}

packages/common/src/validation.ts

@@ -1,49 +1,42 @@
 import Joi from 'joi'
-import type { SelectAccountOptions } from './types'
 
-const basePath = Joi.object({
-  label: Joi.string().required(),
-  value: Joi.string().required()
+export type ValidateReturn = Joi.ValidationResult | null
+
+export function validate(validator: Joi.Schema, data: unknown): ValidateReturn {
+  const result = validator.validate(data)
+  return result.error ? result : null
+}
+
+export const chainIdValidation = Joi.alternatives().try(
+  Joi.string().pattern(/^0x[0-9a-fA-F]+$/),
+  Joi.number().positive()
+)
+
+export const chainNamespaceValidation = Joi.string().valid('evm')
+
+/** Related to ConnectionInfo from 'ethers/lib/utils' */
+export const providerConnectionInfoValidation = Joi.object({
+  url: Joi.string().required(),
+  headers: Joi.object(),
+  user: Joi.string(),
+  password: Joi.string(),
+  allowInsecureAuthentication: Joi.boolean(),
+  allowGzip: Joi.boolean(),
+  throttleLimit: Joi.number(),
+  throttleSlotInterval: Joi.number(),
+  throttleCallback: Joi.function(),
+  timeout: Joi.number()
 })
-const basePaths = Joi.array().items(basePath)
 
-const chain = Joi.object({
-  namespace: Joi.string(),
-  id: Joi.string()
-    .pattern(/^0x[0-9a-fA-F]+$/)
-    .required(),
+export const chainValidation = Joi.object({
+  namespace: chainNamespaceValidation,
+  id: chainIdValidation.required(),
   rpcUrl: Joi.string().required(),
   label: Joi.string().required(),
   token: Joi.string().required(),
   icon: Joi.string(),
-  color: Joi.string()
-})
-
-const chains = Joi.array().items(chain)
-
-const asset = Joi.object({
-  label: Joi.string().required(),
-  address: Joi.string()
+  color: Joi.string(),
+  publicRpcUrl: Joi.string(),
+  blockExplorerUrl: Joi.string(),
+  providerConnectionInfoValidation
 })
-const assets = Joi.array().items(asset)
-
-const selectAccountOptions = Joi.object({
-  basePaths: basePaths,
-  assets: assets,
-  chains: chains,
-  scanAccounts: Joi.function().arity(1).required(),
-  supportsCustomPath: Joi.bool()
-})
-
-type ValidateReturn = Joi.ValidationResult | null
-
-const validate = (validator: Joi.Schema, data: unknown): ValidateReturn => {
-  const result = validator.validate(data)
-  return result.error ? result : null
-}
-
-export const validateSelectAccountOptions = (
-  data: SelectAccountOptions
-): ValidateReturn => {
-  return validate(selectAccountOptions, data)
-}