Change architecture for better dx

Author: lnbc1QWFyb24

README.md

@@ -9,80 +9,28 @@ JavaScript library to easily onboard users to ethereum apps by enabling wallet s
 ## Quick Start
 
 ```javascript
-import Onboard, { modules } from 'bnc-onboard'
+import Onboard from 'bnc-onboard'
+import Web3 from 'web3'
+
+// set a variable to store instantiated web3
+let web3
 
 // head to blocknative.com to create a key
 const BLOCKNATIVE_KEY = 'blocknative-api-key'
 
 // the network id that your dapp runs on
 const NETWORK_ID = 1
 
-// SDK Wallet api keys
-const FORTMATIC_KEY = 'fortmatic-api-key'
-const PORTIS_KEY = 'portis-api-key'
-const INFURA_KEY = 'infura-api-key'
-const SQUARELINK_KEY = 'squarelink-api-key'
-
-// the wallets you would like the user to be able to select
-// mobile wallets will only be displayed if the user is on a mobile device
-// wallets will be displayed in order
-const wallets = [
-  { name: 'coinbase' },
-  { name: 'trust' },
-  { name: 'metamask' },
-  { name: 'dapper' },
-  {
-    name: 'fortmatic',
-    apiKey: FORTMATIC_KEY,
-    networkId: NETWORK_ID
-  },
-  {
-    name: 'portis',
-    apiKey: PORTIS_KEY,
-    networkId: NETWORK_ID
-  },
-  {
-    name: 'squarelink',
-    apiKey: SQUARELINK_KEY,
-    networkId: NETWORK_ID
-  },
-  { name: 'authereum', networkId: NETWORK_ID },
-  {
-    name: 'walletConnect',
-    infuraKey: INFURA_KEY,
-    networkId: NETWORK_ID
-  }
-]
-
-// the checks you would like the user's wallet to pass before being ready to transact
-const walletChecks = [
-  { name: 'connect' },
-  { name: 'network', networkId: NETWORK_ID },
-  { name: 'balance', minimumBalance: '1000000000' }
-]
-
 // initialize onboard
 const onboard = Onboard({
   dappId: BLOCKNATIVE_KEY,
   networkId: NETWORK_ID,
   subscriptions: {
-    address: address => console.log('user address has changed:', address),
-    network: network => console.log('user network has changed:', network),
-    balance: balance => console.log('user balance has changed:', balance),
-    wallet: wallet =>
-      console.log(
-        'a new wallet has been selected by user',
-        wallet.provider,
-        wallet.name
-      )
-  },
-  modules: {
-    walletSelect: {
-      heading: 'Select a Wallet',
-      description: 'Please select a wallet to connect to this dapp:',
-      wallets: modules.select(wallets)
-    },
-    walletCheck: modules.check(walletChecks)
+    wallet: wallet => {
+      // instantiate web3 when the user has selected a wallet
+      web3 = new Web3(wallet.provider)
+      console.log(`${wallet.name} connected!`)
+    }
   }
 })
 

src/interfaces.ts

@@ -2,7 +2,8 @@ export interface Initialization {
   dappId: string
   networkId: number
   subscriptions: Subscriptions
-  modules: Modules
+  walletSelect: WalletSelectModule
+  walletCheck: Array<WalletCheckModule | WalletCheckInit>
   darkMode?: boolean
 }
 
@@ -11,18 +12,12 @@ export interface Subscriptions {
   network: (networkId: number) => void
   balance: (balance: string) => void
   wallet: (wallet: Wallet) => void
-  [Key: string]: (val: any) => void
-}
-
-interface Modules {
-  walletSelect: WalletSelectModule
-  walletCheck: WalletCheckModule[] | Promise<WalletCheckModule[]>
 }
 
 export interface WalletSelectModule {
   heading: string
   description: string
-  wallets: WalletModule[] | Promise<WalletModule[]>
+  wallets: Array<WalletModule | WalletInit>
 }
 
 export interface WalletCheckModule {
@@ -58,6 +53,7 @@ export interface UserState {
   balance: string
   wallet: Wallet | null
   mobileDevice: boolean
+  appNetworkId: number
 }
 
 export interface StateAndHelpers extends UserState {
@@ -133,16 +129,15 @@ export interface WalletConnectOptions {
 }
 
 export interface WalletInit {
-  name: string
+  walletName: string
   preferred?: boolean
   apiKey?: string
   infuraKey?: string
   networkId?: number
 }
 
 export interface WalletCheckInit {
-  name: string
-  networkId?: number
+  checkName: string
   minimumBalance?: string
 }
 

src/modules/check/index.ts

@@ -1,21 +1,38 @@
-import { validateWalletCheckInit } from '../../validation'
+import { isWalletCheckModule } from '../../validation'
 import { WalletCheckModule, WalletCheckInit } from '../../interfaces'
 
-function walletChecks(
-  walletCheckInit: WalletCheckInit[]
-): never | Promise<WalletCheckModule[]> {
-  validateWalletCheckInit(walletCheckInit)
+const defaultChecks = ['connect', 'network']
 
-  return Promise.all(
-    walletCheckInit.map(init => {
-      const { name, ...initParams } = init
+function check(
+  walletChecks: Array<WalletCheckInit | WalletCheckModule> | undefined,
+  networkId: number
+): Promise<WalletCheckModule[]> {
+  if (walletChecks) {
+    return Promise.all(
+      walletChecks.map((checkOrModule: WalletCheckInit | WalletCheckModule) => {
+        if (!isWalletCheckModule(checkOrModule)) {
+          const { checkName, ...otherParams } = checkOrModule
+          const module = getModule(checkName)
+          return (
+            module &&
+            module.then((m: any) => m.default({ ...otherParams, networkId }))
+          )
+        }
+
+        return Promise.resolve(checkOrModule)
+      })
+    )
+  }
 
-      return getModule(name).then((module: any) => module.default(initParams))
+  return Promise.all(
+    defaultChecks.map((checkName: string) => {
+      const module = getModule(checkName)
+      return module && module.then((m: any) => m.default({ networkId }))
     })
   )
 }
 
-function getModule(name: string): Promise<any> {
+function getModule(name: string): Promise<any> | never {
   switch (name) {
     case 'connect':
       return import('./connect')
@@ -24,8 +41,8 @@ function getModule(name: string): Promise<any> {
     case 'balance':
       return import('./balance')
     default:
-      return Promise.reject('invalid wallet check name')
+      throw new Error(`invalid module name: ${name}`)
   }
 }
 
-export default walletChecks
+export default check

src/modules/check/network.ts

@@ -1,23 +1,17 @@
 import { networkName } from '../../utilities'
-import { validateType } from '../../validation'
 import { WalletCheckModule, StateAndHelpers } from '../../interfaces'
 
-function network(options: { networkId: number }): WalletCheckModule | never {
-  validateType({ name: 'network options', value: options, type: 'object' })
-
-  const { networkId } = options
-  validateType({ name: 'networkId', value: networkId, type: 'number' })
-
+function network(): WalletCheckModule | never {
   return (stateAndHelpers: StateAndHelpers) => {
-    const { network, walletSelect, exit } = stateAndHelpers
+    const { network, appNetworkId, walletSelect, exit } = stateAndHelpers
 
-    if (network != networkId) {
+    if (network != appNetworkId) {
       return {
         heading: 'You Must Change Networks',
         description: `We've detected that you need to switch your wallet's network from <b>${networkName(
           network
         )}</b> to <b>${networkName(
-          networkId
+          appNetworkId
         )} network</b> for this Dapp. <br><br> <i style="font-size: inherit; font-family: inherit;">*Some wallets may not support changing networks. If you can not change networks in your wallet you may consider switching to a different wallet.</i>`,
         eventCode: 'networkFail',
         button: {

src/modules/index.ts

@@ -1,7 +1,26 @@
 import select from './select'
 import check from './check'
+import {
+  WalletSelectModule,
+  WalletCheckModule,
+  WalletCheckInit
+} from '../interfaces'
 
-export default {
-  select,
-  check
+const defaultHeading = 'Select a Wallet'
+const defaultDescription = 'Please select a wallet to connect to this dapp:'
+
+export default function initializeModules(
+  networkId: number,
+  walletSelect: WalletSelectModule | undefined,
+  walletCheck: Array<WalletCheckModule | WalletCheckInit> | undefined
+) {
+  return {
+    walletSelect: {
+      heading: (walletSelect && walletSelect.heading) || defaultHeading,
+      description:
+        (walletSelect && walletSelect.description) || defaultDescription,
+      wallets: select(walletSelect && walletSelect.wallets, networkId)
+    },
+    walletCheck: check(walletCheck, networkId)
+  }
 }

src/modules/select/index.ts

@@ -1,19 +1,49 @@
-import { WalletInit } from '../../interfaces'
-import { validateWalletInit } from '../../validation'
+import { WalletInit, WalletModule } from '../../interfaces'
+import { isWalletInit } from '../../validation'
 
-function wallets(walletInit: WalletInit[]) {
-  validateWalletInit(walletInit)
+const defaultWalletNames = [
+  'metamask',
+  'dapper',
+  'coinbase',
+  'trust',
+  'authereum',
+  'opera',
+  'operaTouch'
+]
 
-  return Promise.all(
-    walletInit.map((init: WalletInit) => {
-      const { name, ...initParams } = init
+function select(
+  wallets: Array<WalletInit | WalletModule> | undefined,
+  networkId: number
+) {
+  if (wallets) {
+    return Promise.all(
+      wallets.map(wallet => {
+        if (isWalletInit(wallet)) {
+          const { walletName, ...initParams } = wallet
+          const module = getModule(walletName)
+
+          return (
+            module &&
+            module.then((m: any) => m.default({ ...initParams, networkId }))
+          )
+        }
 
-      return getModule(name).then((module: any) => module.default(initParams))
+        return Promise.resolve(wallet)
+      })
+    )
+  }
+
+  return Promise.all(
+    defaultWalletNames.map(walletName => {
+      const module = getModule(walletName)
+      if (module) {
+        return module.then((m: any) => m.default({ networkId }))
+      }
     })
   )
 }
 
-function getModule(name: string): Promise<any> {
+function getModule(name: string): Promise<any> | undefined {
   switch (name) {
     case 'metamask':
       return import('./wallets/metamask')
@@ -38,8 +68,8 @@ function getModule(name: string): Promise<any> {
     case 'operaTouch':
       return import('./wallets/opera-touch')
     default:
-      return Promise.reject('invalid wallet name')
+      return
   }
 }
 
-export default wallets
+export default select

src/onboard.ts

@@ -29,7 +29,7 @@ import {
   Wallet
 } from './interfaces'
 
-export { default as modules } from './modules'
+import initializeModules from './modules'
 
 let onboard: any
 
@@ -41,7 +41,7 @@ function init(initialization: Initialization): API {
 
   validateInit(initialization)
 
-  const { subscriptions, dappId, networkId, modules, darkMode } = initialization
+  const { subscriptions, dappId, networkId, darkMode } = initialization
 
   initializeBlocknative(dappId, networkId)
 
@@ -54,11 +54,17 @@ function init(initialization: Initialization): API {
     darkMode
   }))
 
+  const initializedModules = initializeModules(
+    networkId,
+    initialization.walletSelect,
+    initialization.walletCheck
+  )
+
   onboard = new Onboard({
     target: document.body,
     props: {
-      walletSelectModule: modules.walletSelect,
-      walletCheckModules: modules.walletCheck,
+      walletSelectModule: initializedModules.walletSelect,
+      walletCheckModules: initializedModules.walletCheck,
       walletSelect
     }
   })

src/stores.ts

@@ -57,7 +57,8 @@ export const state = derived(
       network: $network,
       balance: $balance,
       wallet: $wallet,
-      mobileDevice: $app.mobileDevice
+      mobileDevice: $app.mobileDevice,
+      appNetworkId: $app.networkId
     }
   }
 )