[core:2.6.0-alpha.3] [common:2.1.7-alpha.2] - [feature] : Gas Module (#1168)

* Initial implementation of Gas module
* Working prototype
* Add docs
* Modify API
* Add override poll example and comment
* Remove gas module from demo
* Update usage in core
* Update gas API
* Revert changes to fix types
* Revert changes to types that are in another pr
* Fix docs
* Revert in favor of PR
* Fix Configuration types
* Fix validation
* Remove gas from demo
* Increment versions
* Correct version for demo
* Use joi version in other pkgs, update yarn.lock

Author: lnbc1QWFyb24

.circleci/config.yml

@@ -285,6 +285,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/vue
     steps:
       - node-build-steps
+  build-gas:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/gas
+    steps:
+      - node-build-steps
 
   # Build staging/Alpha releases
   build-staging-core:
@@ -407,6 +413,12 @@ jobs:
     working_directory: ~/web3-onboard-monorepo/packages/vue
     steps:
       - node-staging-build-steps
+  build-staging-gas:
+    docker:
+      - image: cimg/node:16.13.1
+    working_directory: ~/web3-onboard-monorepo/packages/gas
+    steps:
+      - node-staging-build-steps
 
 workflows:
   version: 2
@@ -531,3 +543,9 @@ workflows:
           <<: *deploy_production_filters
       - build-staging-vue:
           <<: *deploy_staging_filters
+  gas:
+    jobs:
+      - build-gas:
+          <<: *deploy_production_filters
+      - build-staging-gas:
+          <<: *deploy_staging_filters

packages/common/src/index.ts

@@ -1,62 +1,3 @@
-import type {
-  RequestPatch,
-  AccountSelectAPI,
-  SelectAccountOptions,
-  BasePath,
-  DerivationPath,
-  Asset,
-  ScanAccounts,
-  ScanAccountsOptions,
-  AccountAddress,
-  Account,
-  AccountsList,
-  AppMetadata,
-  RecommendedInjectedWallets,
-  WalletInit,
-  WalletHelpers,
-  APIKey,
-  Device,
-  WalletModule,
-  GetInterfaceHelpers,
-  Platform,
-  DeviceOS,
-  DeviceBrowser,
-  DeviceOSName,
-  DeviceBrowserName,
-  DeviceType,
-  ChainId,
-  RpcUrl,
-  WalletInterface,
-  ProviderMessage,
-  ProviderInfo,
-  ProviderAccounts,
-  ProviderEvent,
-  SimpleEventEmitter,
-  ConnectListener,
-  DisconnectListener,
-  MessageListener,
-  ChainListener,
-  AccountsListener,
-  Balance,
-  EthAccountsRequest,
-  EthBalanceRequest,
-  EIP1102Request,
-  SelectAccountsRequest,
-  EIP3326Request,
-  EIP3085Request,
-  EthChainIdRequest,
-  EthSignTransactionRequest,
-  EthSignMessageRequest,
-  EIP712Request,
-  AddChainParams,
-  EIP1193Provider,
-  Chain,
-  TokenSymbol,
-  CustomNetwork,
-  TransactionObject,
-  RPCResponse
-} from './types'
-
 export { ProviderRpcErrorCode } from './types'
 export { ProviderRpcError } from './errors'
 export { createEIP1193Provider } from './eip-1193'
@@ -69,61 +10,4 @@ export {
   getHardwareWalletProvider
 } from './hdwallets'
 
-export type {
-  RequestPatch,
-  AccountSelectAPI,
-  SelectAccountOptions,
-  BasePath,
-  DerivationPath,
-  Asset,
-  ScanAccounts,
-  ScanAccountsOptions,
-  AccountAddress,
-  Account,
-  AccountsList,
-  AppMetadata,
-  RecommendedInjectedWallets,
-  WalletInit,
-  WalletHelpers,
-  APIKey,
-  Device,
-  WalletModule,
-  GetInterfaceHelpers,
-  Platform,
-  DeviceOS,
-  DeviceBrowser,
-  DeviceOSName,
-  DeviceBrowserName,
-  DeviceType,
-  ChainId,
-  RpcUrl,
-  WalletInterface,
-  ProviderMessage,
-  ProviderInfo,
-  ProviderAccounts,
-  ProviderEvent,
-  SimpleEventEmitter,
-  ConnectListener,
-  DisconnectListener,
-  MessageListener,
-  ChainListener,
-  AccountsListener,
-  Balance,
-  EthAccountsRequest,
-  EthBalanceRequest,
-  EIP1102Request,
-  SelectAccountsRequest,
-  EIP3326Request,
-  EIP3085Request,
-  EthChainIdRequest,
-  EthSignTransactionRequest,
-  EthSignMessageRequest,
-  EIP712Request,
-  AddChainParams,
-  EIP1193Provider,
-  Chain,
-  TokenSymbol,
-  CustomNetwork,
-  TransactionObject,
-  RPCResponse
-}
+export * from './types'

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.6.0-alpha.4",
+  "version": "2.6.0-alpha.5",
   "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",
@@ -68,6 +68,7 @@
     "@types/lodash.partition": "^4.6.6",
     "@typescript-eslint/eslint-plugin": "^4.31.1",
     "@typescript-eslint/parser": "^4.31.1",
+    "@web3-onboard/gas": "^2.0.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-svelte3": "^3.2.1",

packages/core/src/configuration.ts

@@ -6,7 +6,8 @@ export let configuration: Configuration = {
   appMetadata: null,
   apiKey: null,
   device: getDevice(),
-  initialWalletInit: []
+  initialWalletInit: [],
+  gas: null
 }
 
 export function updateConfiguration(update: Partial<Configuration>): void {

packages/core/src/index.ts

@@ -4,16 +4,20 @@ import disconnectWallet from './disconnect'
 import setChain from './chain'
 import { state } from './store'
 import { reset$ } from './streams'
-import {
-  validateInitOptions,
-  validateNotify,
-  validateNotifyOptions
-} from './validation'
 import initI18N from './i18n'
 import App from './views/Index.svelte'
 import type { InitOptions, Notify } from './types'
 import { APP_INITIAL_STATE } from './constants'
 import { configuration, updateConfiguration } from './configuration'
+import updateBalances from './update-balances'
+import { chainIdToHex } from './utils'
+import { preflightNotifications } from './preflight-notifications'
+
+import {
+  validateInitOptions,
+  validateNotify,
+  validateNotifyOptions
+} from './validation'
 
 import {
   addChains,
@@ -25,10 +29,6 @@ import {
   setWalletModules
 } from './store/actions'
 
-import updateBalances from './update-balances'
-import { chainIdToHex } from './utils'
-import { preflightNotifications } from './preflight-notifications'
-
 const API = {
   connectWallet,
   disconnectWallet,
@@ -86,11 +86,13 @@ function init(options: InitOptions): OnboardAPI {
     i18n,
     accountCenter,
     apiKey,
-    notify
+    notify,
+    gas
   } = options
 
   initI18N(i18n)
   addChains(chains.map(chainIdToHex))
+
   const { device, svelteInstance } = configuration
 
   // update accountCenter
@@ -129,6 +131,7 @@ function init(options: InitOptions): OnboardAPI {
       ) {
         notify.desktop.position = accountCenter.desktop.position
       }
+
       if (
         (!notify.mobile || (notify.mobile && !notify.mobile.position)) &&
         accountCenter &&
@@ -137,6 +140,7 @@ function init(options: InitOptions): OnboardAPI {
       ) {
         notify.mobile.position = accountCenter.mobile.position
       }
+
       let notifyUpdate: Partial<Notify>
 
       if (device.type === 'mobile' && notify.mobile) {
@@ -150,16 +154,19 @@ function init(options: InitOptions): OnboardAPI {
           ...notify.desktop
         }
       }
+
       if (!apiKey || !notifyUpdate.enabled) {
         notifyUpdate.enabled = false
       }
+
       updateNotify(notifyUpdate)
     } else {
       const error = validateNotify(notify as Notify)
 
       if (error) {
         throw error
       }
+
       const notifyUpdate: Partial<Notify> = {
         ...APP_INITIAL_STATE.notify,
         ...notify
@@ -168,6 +175,7 @@ function init(options: InitOptions): OnboardAPI {
       if (!apiKey || !notifyUpdate.enabled) {
         notifyUpdate.enabled = false
       }
+
       updateNotify(notifyUpdate)
     }
   } else {
@@ -176,6 +184,7 @@ function init(options: InitOptions): OnboardAPI {
     if (!apiKey) {
       notifyUpdate.enabled = false
     }
+
     updateNotify(notifyUpdate)
   }
 
@@ -191,7 +200,8 @@ function init(options: InitOptions): OnboardAPI {
     appMetadata,
     svelteInstance: app,
     apiKey,
-    initialWalletInit: wallets
+    initialWalletInit: wallets,
+    gas
   })
 
   return API
@@ -214,6 +224,7 @@ function mountApp() {
   styleEl.innerHTML = `
     ${SofiaProRegular}
   `
+
   document.body.appendChild(styleEl)
 
   // add to DOM
@@ -317,7 +328,9 @@ function mountApp() {
 
   const containerElementQuery =
     state.get().accountCenter.containerElement || 'body'
+
   const containerElement = document.querySelector(containerElementQuery)
+
   if (!containerElement) {
     throw new Error(
       `Element with query ${state.get().accountCenter} does not exist.`

packages/core/src/types.ts

@@ -10,6 +10,8 @@ import type {
   TokenSymbol
 } from '@web3-onboard/common'
 
+import type gas from '@web3-onboard/gas'
+
 import type en from './i18n/en.json'
 import type { EthereumTransactionData, Network } from 'bnc-sdk'
 
@@ -43,6 +45,8 @@ export interface InitOptions {
    * Transaction notification options
    */
   notify?: Partial<NotifyOptions> | Partial<Notify>
+  /**Gas module */
+  gas?: typeof gas
 }
 
 export interface ConnectOptions {
@@ -116,10 +120,11 @@ export interface AppState {
 
 export type Configuration = {
   svelteInstance: SvelteComponent | null
-  appMetadata: AppMetadata | null
   device: Device | DeviceNotBrowser
-  apiKey: string
   initialWalletInit: WalletInit[]
+  appMetadata?: AppMetadata | null
+  apiKey?: string
+  gas?: typeof gas
 }
 
 export type Locale = string

packages/core/src/utils.ts

@@ -92,7 +92,10 @@ 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 chainIdToHex = (chain: Chain): Chain =>
+  typeof chain.id === 'number'
+    ? { ...chain, id: `0x${chain.id.toString(16)}` }
+    : chain
 
 export const chainIdToLabel: Record<string, string> = {
   '0x1': 'Ethereum',
@@ -245,5 +248,5 @@ export const defaultNotifyEventStyles: Record<string, NotifyEventStyles> = {
   }
 }
 
-export const wait = (time: number) =>
+export const wait = (time: number): Promise<void> =>
   new Promise(resolve => setTimeout(resolve, time))