[core-v2.1.0] - Feature: Update Wallets without Re-Initialization (#906)

* Add update wallet module action to API

* Increment version

* Update core version in react package

Author: lnbc1QWFyb24

packages/core/README.md

@@ -95,10 +95,6 @@ Putting it all together, here is an example initialization with the injected wal
 import Onboard from '@web3-onboard/core'
 import injectedModule from '@web3-onboard/injected-wallets'
 
-const ETH_MAINNET_RPC = `https://mainnet.infura.io/v3/${INFURA_KEY}`
-const ETH_RINKEBY_RPC = `https://rinkeby.infura.io/v3/${INFURA_KEY}`
-const MATIC_MAINNET_RPC = 'https://matic-mainnet.chainstacklabs.com'
-
 const injected = injectedModule()
 
 const onboard = Onboard({
@@ -239,11 +235,13 @@ Onboard currently keeps track of the following state:
 
 - `wallets`: The wallets connected to Onboard
 - `chains`: The chains that Onboard has been initialized with
+- `walletModules`: The wallet modules that are currently set and will be rendered in the wallet selection modal
 
 ```typescript
 type AppState = {
   chains: Chain[]
   wallets: WalletState[]
+  walletModules: WalletModule[]
 }
 
 type WalletState = {
@@ -273,14 +271,24 @@ type ConnectedChain = {
 
 type ChainId = string
 type TokenSymbol = string
+
+type WalletModule {
+  label: string
+  getIcon: () => Promise<string>
+  getInterface: (helpers: GetInterfaceHelpers) => Promise<WalletInterface>
+}
 ```
 
+### Get Current State
+
 The current state of Onboard can be accessed at any time using the `state.get()` method:
 
 ```javascript
 const currentState = onboard.state.get()
 ```
 
+### Subscribe to State Updates
+
 State can also be subscribed to using the `state.select()` method. The `select` method will return an [RXJS Observable](https://rxjs.dev/guide/observable). Understanding of RXJS observables is not necessary to subscribe to state updates, but allows for composable functionality if wanted. The key point to understand is that if you subscribe for updates, remember to unsubscribe when you are finished to prevent memory leaks.
 
 To subscribe to all state updates, call the `select` method with no arguments:
@@ -307,6 +315,43 @@ const { unsubscribe } = wallets.subscribe(update =>
 unsubscribe()
 ```
 
+### Actions to Modify State
+
+A limited subset of internal actions are exposed to update the Onboard state.
+
+**setWalletModules**
+For updating the wallets that are displayed in the wallet selection modal. This can be used if the wallets you want to support is conditional on another user action within your app. The `setWalletModules` action is called with an updated array of wallets (the same wallets that are passed in on initialization)
+
+```typescript
+import Onboard from '@web3-onboard/core'
+import injectedModule from '@web3-onboard/injected-wallets'
+import ledgerModule from '@web3-onboard/ledger'
+import trezorModule from '@web3-onboard/trezor'
+
+const injected = injectedModule()
+const ledger = ledgerModule()
+const trezor = trezorModule({
+  email: '<EMAIL_CONTACT>',
+  appUrl: '<APP_URL>'
+})
+
+// initialize with injected and hardware wallets
+const onboard = Onboard({
+  wallets: [injected, trezor, ledger],
+  chains: [
+    {
+      id: '0x1',
+      token: 'ETH',
+      label: 'Ethereum Mainnet',
+      rpcUrl: `https://mainnet.infura.io/v3/${INFURA_ID}`
+    }
+  ]
+})
+
+// then after a user action, you may decide to only display hardware wallets on the next call to onboard.connectWallet
+onboard.state.actions.setWalletModules([ledger, trezor])
+```
+
 ## Setting the User's Chain/Network
 
 When initializing Onboard you define a list of chains/networks that your app supports. If you would like to prompt the user to switch to one of those chains, you can use the `setChain` method on an initialized instance of Onboard:

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@web3-onboard/core",
-  "version": "2.0.11",
+  "version": "2.1.0",
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",

packages/core/src/constants.ts

@@ -1,8 +1,9 @@
 import type { AppState } from './types'
 
 export const APP_INITIAL_STATE: AppState = {
-  wallets: [],
-  chains: []
+  chains: [],
+  walletModules: [],
+  wallets: []
 }
 
 export const STORAGE_KEYS = {

packages/core/src/index.ts

@@ -1,10 +1,9 @@
-import type { WalletModule } from '@web3-onboard/common'
 import { SofiaProRegular } from '@web3-onboard/common'
 import connectWallet from './connect'
 import disconnectWallet from './disconnect'
 import setChain from './chain'
 import { state } from './store'
-import { addChains } from './store/actions'
+import { addChains, setWalletModules } from './store/actions'
 import { reset$, internalState$ } from './streams'
 import { validateInitOptions } from './validation'
 import initI18N from './i18n'
@@ -17,7 +16,13 @@ const API = {
   connectWallet,
   disconnectWallet,
   setChain,
-  state
+  state: {
+    get: state.get,
+    select: state.select,
+    actions: {
+      setWalletModules
+    }
+  }
 }
 
 export type {
@@ -56,27 +61,16 @@ function init(options: InitOptions): OnboardAPI {
   }
 
   const device = getDeviceInfo()
-
-  const walletModules = wallets.reduce((acc, walletInit) => {
-    const initialized = walletInit({ device })
-
-    if (initialized) {
-      // injected wallets is an array of wallets
-      acc.push(...(Array.isArray(initialized) ? initialized : [initialized]))
-    }
-
-    return acc
-  }, [] as WalletModule[])
-
   const app = svelteInstance || mountApp()
 
   internalState$.next({
     appMetadata,
     svelteInstance: app,
-    walletModules,
     device
   })
 
+  setWalletModules(wallets)
+
   return API
 }
 

packages/core/src/store/actions.ts

@@ -1,25 +1,33 @@
-import type { Chain } from '@web3-onboard/common'
+import type { Chain, WalletInit } from '@web3-onboard/common'
+import { internalState$ } from '../streams'
 
 import type {
   Account,
   AddChainsAction,
   AddWalletAction,
   RemoveWalletAction,
   ResetStoreAction,
+  SetWalletModulesAction,
   UpdateAccountAction,
   UpdateWalletAction,
   WalletState
 } from '../types'
+import { initializeWalletModules } from '../utils'
 
-import { validateString, validateWallet } from '../validation'
+import {
+  validateString,
+  validateWallet,
+  validateWalletInit
+} from '../validation'
 
 import {
   ADD_CHAINS,
   UPDATE_WALLET,
   RESET_STORE,
   ADD_WALLET,
   REMOVE_WALLET,
-  UPDATE_ACCOUNT
+  UPDATE_ACCOUNT,
+  SET_WALLET_MODULES
 } from './constants'
 import { dispatch } from './index'
 
@@ -112,3 +120,23 @@ export function resetStore(): void {
 
   dispatch(action as ResetStoreAction)
 }
+
+export function setWalletModules(wallets: WalletInit[]): void {
+  const error = validateWalletInit(wallets)
+
+  if (error) {
+    throw error
+  }
+
+  const modules = initializeWalletModules(
+    wallets,
+    internalState$.getValue().device
+  )
+
+  const action = {
+    type: SET_WALLET_MODULES,
+    payload: modules
+  }
+
+  dispatch(action as SetWalletModulesAction)
+}

packages/core/src/store/constants.ts

@@ -4,3 +4,4 @@ export const ADD_WALLET = 'add_wallet'
 export const UPDATE_WALLET = 'update_wallet'
 export const REMOVE_WALLET = 'remove_wallet'
 export const UPDATE_ACCOUNT = 'update_account'
+export const SET_WALLET_MODULES = 'set_wallet_modules'

packages/core/src/store/index.ts

@@ -1,7 +1,7 @@
 import { BehaviorSubject, Subject, Observable } from 'rxjs'
 import { distinctUntilKeyChanged, pluck, filter } from 'rxjs/operators'
 
-import type { Chain } from '@web3-onboard/common'
+import type { Chain, WalletModule } from '@web3-onboard/common'
 
 import type {
   AppState,
@@ -18,18 +18,13 @@ import {
   UPDATE_WALLET,
   REMOVE_WALLET,
   RESET_STORE,
-  UPDATE_ACCOUNT
+  UPDATE_ACCOUNT,
+  SET_WALLET_MODULES
 } from './constants'
 
 import { APP_INITIAL_STATE } from '../constants'
 import { notNullish } from '../utils'
 
-// observable to log actions or do sideeffects after every state change
-export const actions$ = new Subject<{
-  action: Action
-  state: AppState
-}>()
-
 function reducer(state: AppState, action: Action): AppState {
   const { type, payload } = action
 
@@ -103,6 +98,13 @@ function reducer(state: AppState, action: Action): AppState {
       }
     }
 
+    case SET_WALLET_MODULES: {
+      return {
+        ...state,
+        walletModules: payload as WalletModule[]
+      }
+    }
+
     case RESET_STORE:
       return APP_INITIAL_STATE
 
@@ -118,8 +120,6 @@ _stateUpdates.subscribe(_store)
 
 export function dispatch(action: Action): void {
   const state = _store.getValue()
-  actions$.next({ action, state })
-
   _stateUpdates.next(reducer(state, action))
 }
 

packages/core/src/streams.ts

@@ -19,7 +19,6 @@ export const disconnectWallet$ = new Subject<WalletState['label']>()
 
 export const internalState$ = new BehaviorSubject<InternalState>({
   svelteInstance: null,
-  walletModules: [],
   appMetadata: null,
   device: null
 })

packages/core/src/types.ts

@@ -90,12 +90,12 @@ export type Address = string
 
 export interface AppState {
   chains: Chain[]
+  walletModules: WalletModule[]
   wallets: WalletState[]
 }
 
 export type InternalState = {
   svelteInstance: SvelteComponent | null
-  walletModules: WalletModule[]
   appMetadata: AppMetadata | null
   device: Device | null
 }
@@ -112,6 +112,7 @@ export type Action =
   | RemoveWalletAction
   | ResetStoreAction
   | UpdateAccountAction
+  | SetWalletModulesAction
 
 export type AddChainsAction = { type: 'add_chains'; payload: Chain[] }
 export type AddWalletAction = { type: 'add_wallet'; payload: WalletState }
@@ -135,3 +136,8 @@ export type UpdateAccountAction = {
   type: 'update_account'
   payload: { id: string; address: string } & Partial<Account>
 }
+
+export type SetWalletModulesAction = {
+  type: 'set_wallet_modules'
+  payload: WalletModule[]
+}

packages/core/src/utils.ts

@@ -5,7 +5,9 @@ import type {
   DeviceBrowser,
   DeviceOS,
   DeviceType,
-  ChainId
+  ChainId,
+  WalletInit,
+  WalletModule
 } from '@web3-onboard/common'
 
 export const notNullish = <T>(value: T | null | undefined): value is T =>
@@ -39,3 +41,19 @@ export function validEnsChain(chainId: ChainId): boolean {
 export function isSVG(str: string): boolean {
   return str.includes('<svg')
 }
+
+export function initializeWalletModules(
+  modules: WalletInit[],
+  device: Device
+): WalletModule[] {
+  return modules.reduce((acc, walletInit) => {
+    const initialized = walletInit({ device })
+
+    if (initialized) {
+      // injected wallets is an array of wallets
+      acc.push(...(Array.isArray(initialized) ? initialized : [initialized]))
+    }
+
+    return acc
+  }, [] as WalletModule[])
+}

packages/core/src/validation.ts

@@ -1,5 +1,5 @@
 import Joi from 'joi'
-import type { ChainId, WalletModule } from '@web3-onboard/common'
+import type { ChainId, WalletInit, WalletModule } from '@web3-onboard/common'
 
 import type {
   InitOptions,
@@ -92,10 +92,10 @@ const walletModule = Joi.object({
   getInterface: Joi.function().arity(1).required()
 })
 
-const walletModules = Joi.array().items(Joi.function()).required()
+const walletInit = Joi.array().items(Joi.function()).required()
 
 const initOptions = Joi.object({
-  wallets: walletModules,
+  wallets: walletInit,
   chains: chains.required(),
   appMetadata: appMetadata,
   i18n: Joi.object().unknown()
@@ -163,3 +163,7 @@ export function validateSetChainOptions(data: {
 }): ValidateReturn {
   return validate(setChainOptions, data)
 }
+
+export function validateWalletInit(data: WalletInit[]): ValidateReturn {
+  return validate(walletInit, data)
+}

packages/core/src/views/connect/Index.svelte

@@ -34,7 +34,8 @@
 
   export let autoSelect: ConnectOptions['autoSelect']
 
-  const { walletModules, appMetadata } = internalState$.getValue()
+  const { appMetadata } = internalState$.getValue()
+  const { walletModules } = state.get()
 
   let connectionRejected = false
   let wallets: WalletWithLoadingIcon[] = []