Start dynamic import implementation

Author: lnbc1QWFyb24

package.json

@@ -8,8 +8,8 @@
     "blocknative",
     "wallet"
   ],
-  "main": "dist/onboard.umd.js",
-  "module": "dist/onboard.esm.js",
+  "main": "dist/cjs/onboard.js",
+  "module": "dist/esm/onboard.js",
   "typings": "dist/src/onboard.d.ts",
   "files": [
     "dist"
@@ -29,6 +29,7 @@
     "@rollup/plugin-json": "^4.0.0",
     "@types/node": "^12.12.3",
     "babel-plugin-external-helpers": "^6.18.0",
+    "rimraf": "^3.0.0",
     "rollup": "^1.12.0",
     "rollup-plugin-commonjs": "^10.0.0",
     "rollup-plugin-img": "^1.1.0",
@@ -52,7 +53,7 @@
     "regenerator-runtime": "^0.13.3"
   },
   "scripts": {
-    "build": "rollup -c && babel dist/onboard.esm.js --out-file dist/onboard.esm.js && babel dist/onboard.umd.js --out-file dist/onboard.umd.js --minified",
+    "build": "rimraf dist && rollup -c && babel dist/cjs --out-dir dist/cjs && babel dist/esm --out-dir dist/esm",
     "test": "echo \"TBD\" && exit 0"
   }
 }

rollup.config.js

@@ -23,83 +23,49 @@ const opts = {
   }
 }
 
-export default [
-  {
-    input: 'src/onboard.ts',
-    output: {
-      format: 'umd',
-      name: 'onboard',
-      file: 'dist/onboard.umd.js'
-    },
-    moduleContext: id => {
-      const thisAsWindowForModules = [
-        'node_modules/intl-messageformat/lib/core.js',
-        'node_modules/intl-messageformat/lib/compiler.js'
-      ]
-
-      if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
-        return 'window'
-      }
-    },
-    plugins: [
-      image(),
-      json(),
-      svelte({
-        preprocess: preprocess(opts)
-      }),
-      resolve({
-        browser: true,
-        preferBuiltins: true,
-        dedupe: importee =>
-          importee === 'svelte' || importee.startsWith('svelte/')
-      }),
-      commonjs(),
-      globals(),
-      builtins(),
-      typescript()
-    ]
-  },
-  {
-    input: 'src/onboard.ts',
-    output: {
+export default {
+  input: 'src/onboard.ts',
+  output: [
+    {
       format: 'es',
-      file: 'dist/onboard.esm.js'
+      dir: 'dist/esm/'
     },
-    moduleContext: id => {
-      const thisAsWindowForModules = [
-        'node_modules/intl-messageformat/lib/core.js',
-        'node_modules/intl-messageformat/lib/compiler.js'
-      ]
-
-      if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
-        return 'window'
-      }
-    },
-    plugins: [
-      json(),
-      image(),
-      svelte({
-        preprocess: preprocess(opts)
-      }),
-      resolve({
-        browser: true,
-        dedupe: importee =>
-          importee === 'svelte' || importee.startsWith('svelte/')
-      }),
-      commonjs(),
-      typescript()
-    ],
-    external: [
-      'bowser',
-      'bnc-sdk',
-      'bignumber.js',
-      'promise-cancelable',
-      '@portis/web3',
-      '@walletconnect/web3-provider',
-      'fortmatic',
-      // 'squarelink',
-      'authereum',
-      'regenerator-runtime/runtime'
+    { format: 'cjs', dir: 'dist/cjs/' }
+  ],
+  moduleContext: id => {
+    const thisAsWindowForModules = [
+      'node_modules/intl-messageformat/lib/core.js',
+      'node_modules/intl-messageformat/lib/compiler.js'
     ]
-  }
-]
+
+    if (thisAsWindowForModules.some(id_ => id.trimRight().endsWith(id_))) {
+      return 'window'
+    }
+  },
+  plugins: [
+    json(),
+    image(),
+    svelte({
+      preprocess: preprocess(opts)
+    }),
+    resolve({
+      browser: true,
+      dedupe: importee =>
+        importee === 'svelte' || importee.startsWith('svelte/')
+    }),
+    commonjs(),
+    typescript()
+  ],
+  external: [
+    'bowser',
+    'bnc-sdk',
+    'bignumber.js',
+    'promise-cancelable',
+    '@portis/web3',
+    '@walletconnect/web3-provider',
+    'fortmatic',
+    'squarelink',
+    'authereum',
+    'regenerator-runtime/runtime'
+  ]
+}

src/interfaces.ts

@@ -1,6 +1,6 @@
 export interface Initialization {
-  networkId: number
   dappId: string
+  networkId: number
   subscriptions: Subscriptions
   modules: Modules
 }
@@ -21,10 +21,7 @@ interface Modules {
 export interface WalletSelectModule {
   heading: string
   description: string
-  wallets: {
-    mobile: WalletModule[]
-    desktop: WalletModule[]
-  }
+  wallets: WalletModule[]
 }
 
 export interface WalletReadyModule {
@@ -88,6 +85,8 @@ export interface WalletModule {
     selectedWallet: string
   }) => string
   preferred?: boolean
+  desktop?: boolean
+  mobile?: boolean
 }
 
 export interface Helpers {
@@ -137,15 +136,12 @@ export interface WalletConnectOptions {
   infuraKey: string
 }
 
-export interface SelectDefaultsOptions {
-  heading?: string
-  description?: string
-  networkId: number
-  fortmaticInit?: { apiKey: string }
-  portisInit?: { apiKey: string }
-  squarelinkInit?: { apiKey: string }
-  walletConnectInit?: WalletConnectOptions
-  preferredWallets?: string[]
+export interface WalletInit {
+  name: string
+  preferred?: boolean
+  apiKey?: string
+  infuraKey?: string
+  networkId?: number
 }
 
 export interface WalletSelectFunction {

src/modules/select/index.ts

@@ -1,104 +1,42 @@
-import metamask from './wallets/metamask'
-import dapper from './wallets/dapper'
-import walletConnect from './wallets/wallet-connect'
-import coinbase from './wallets/coinbase'
-import trust from './wallets/trust'
-import portis from './wallets/portis'
-import fortmatic from './wallets/fortmatic'
-import authereum from './wallets/authereum'
-// import squarelink from './wallets/squarelink'
-import opera from './wallets/opera'
-import operaTouch from './wallets/opera-touch'
+import { WalletInit } from '../../interfaces'
 
-import { validateSelectDefaultsOptions } from '../../validation'
-import { SelectDefaultsOptions, WalletSelectModule } from '../../interfaces'
+function wallets(wallets: WalletInit[]) {
+  return Promise.all(
+    wallets.map((wallet: WalletInit) => {
+      const { name, ...initParams } = wallet
 
-function defaults(options: SelectDefaultsOptions): WalletSelectModule {
-  validateSelectDefaultsOptions(options)
-
-  const {
-    heading,
-    description,
-    networkId,
-    fortmaticInit,
-    portisInit,
-    // squarelinkInit,
-    walletConnectInit,
-    preferredWallets
-  } = options
-
-  let desktopWallets = [metamask(), dapper(), opera()]
-  let mobileWallets = [coinbase(), trust(), operaTouch()]
-
-  if (portisInit) {
-    desktopWallets.push(portis({ ...portisInit, networkId }))
-    mobileWallets.push(portis({ ...portisInit, networkId }))
-  }
-
-  if (fortmaticInit) {
-    desktopWallets.push(fortmatic({ ...fortmaticInit, networkId }))
-    mobileWallets.push(fortmatic({ ...fortmaticInit, networkId }))
-  }
-
-  if (walletConnectInit) {
-    desktopWallets.push(
-      walletConnect({ infuraKey: walletConnectInit.infuraKey })
-    )
-    mobileWallets.push(
-      walletConnect({ infuraKey: walletConnectInit.infuraKey })
-    )
-  }
-
-  // if (squarelinkInit) {
-  //   desktopWallets.push(squarelink({ ...squarelinkInit, networkId }))
-  //   mobileWallets.push(squarelink({ ...squarelinkInit, networkId }))
-  // }
-
-  desktopWallets.push(authereum({ networkId }))
-  mobileWallets.push(authereum({ networkId }))
-
-  //set preferred wallets if provided
-  if (preferredWallets) {
-    desktopWallets = desktopWallets.map(wallet => {
-      if (preferredWallets.includes(wallet.name)) {
-        wallet.preferred = true
-      }
-
-      return wallet
+      return getModule(name).then((module: any) => module.default(initParams))
     })
+  )
+}
 
-    mobileWallets = mobileWallets.map(wallet => {
-      if (preferredWallets.includes(wallet.name)) {
-        wallet.preferred = true
-      }
-
-      return wallet
-    })
-  }
-
-  return {
-    heading: heading || 'Select a Wallet',
-    description:
-      description ||
-      'Please select the wallet that you would like to use with this dapp:',
-    wallets: {
-      mobile: mobileWallets,
-      desktop: desktopWallets
-    }
+function getModule(name: string): Promise<any> {
+  switch (name) {
+    case 'metamask':
+      return import('./wallets/metamask')
+    case 'dapper':
+      return import('./wallets/dapper')
+    case 'portis':
+      return import('./wallets/portis')
+    case 'fortmatic':
+      return import('./wallets/fortmatic')
+    case 'squarelink':
+      return import('./wallets/squarelink')
+    case 'authereum':
+      return import('./wallets/authereum')
+    case 'trust':
+      return import('./wallets/trust')
+    case 'coinbase':
+      return import('./wallets/coinbase')
+    case 'walletConnect':
+      return import('./wallets/wallet-connect')
+    case 'opera':
+      return import('./wallets/opera')
+    case 'operaTouch':
+      return import('./wallets/opera-touch')
+    default:
+      return Promise.reject('invalid wallet name')
   }
 }
 
-export default {
-  defaults,
-  metamask,
-  dapper,
-  walletConnect,
-  coinbase,
-  trust,
-  portis,
-  fortmatic,
-  authereum,
-  // squarelink,
-  opera,
-  operaTouch
-}
+export default wallets

src/modules/select/wallets/authereum.ts

@@ -47,7 +47,9 @@ function authereum(options: { networkId: number }): WalletModule {
           }
         }
       }
-    }
+    },
+    desktop: true,
+    mobile: true
   }
 }
 

src/modules/select/wallets/coinbase.ts

@@ -20,7 +20,8 @@ function coinbase(): WalletModule {
       }
     },
     link: 'https://go.cb-w.com/',
-    installMessage: mobileWalletInstallMessage
+    installMessage: mobileWalletInstallMessage,
+    mobile: true
   }
 }
 

src/modules/select/wallets/dapper.ts

@@ -22,7 +22,8 @@ function dapper(): WalletModule {
       }
     },
     link: 'https://www.meetdapper.com/',
-    installMessage: extensionInstallMessage
+    installMessage: extensionInstallMessage,
+    desktop: true
   }
 }
 

src/modules/select/wallets/fortmatic.ts

@@ -49,7 +49,9 @@ function fortmatic(options: SdkWalletOptions): WalletModule {
           }
         }
       }
-    }
+    },
+    desktop: true,
+    mobile: true
   }
 }
 

src/modules/select/wallets/metamask.ts

@@ -32,7 +32,8 @@ function metamask(): WalletModule {
       }
     },
     link: 'https://metamask.io/',
-    installMessage: extensionInstallMessage
+    installMessage: extensionInstallMessage,
+    desktop: true
   }
 }