Dynamic import sdk libraries

Author: lnbc1QWFyb24

src/components/Wallets.svelte

@@ -5,6 +5,7 @@
   import { WalletSelectModalData, WalletModule } from '../interfaces'
   export let modalData: WalletSelectModalData
   export let handleWalletSelect: (wallet: WalletModule) => void
+  export let loadingWallet: string | undefined
 
   let showingAllWalletModules: boolean = false
 </script>
@@ -62,7 +63,8 @@
         onclick={() => handleWalletSelect(wallet)}
         iconSrc={wallet.iconSrc}
         iconSrcSet={wallet.iconSrcSet}
-        text={wallet.name} />
+        text={wallet.name}
+        {loadingWallet} />
     </li>
   {/each}
 
@@ -82,7 +84,8 @@
           iconSrc={wallet.iconSrc}
           iconSrcSet={wallet.iconSrcSet}
           svg={wallet.svg}
-          text={wallet.name} />
+          text={wallet.name}
+          {loadingWallet} />
       </li>
     {/each}
   {/if}

src/elements/IconButton.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
-  import { app } from "../stores";
-  export let iconSrc: string;
-  export let iconSrcSet: string;
-  export let svg: string;
-  export let onclick: () => void = () => {};
-  export let text: string;
+  import Spinner from './Spinner.svelte'
+  import { app } from '../stores'
+  export let iconSrc: string
+  export let iconSrcSet: string
+  export let svg: string
+  export let onclick: () => void = () => {}
+  export let text: string
+  export let loadingWallet: string | undefined
 </script>
 
 <style>
@@ -23,7 +25,7 @@
     cursor: pointer;
     color: inherit;
     line-height: 1.15;
-    font-family: "Helvetica Neue";
+    font-family: 'Helvetica Neue';
   }
 
   button:hover {
@@ -35,6 +37,7 @@
   }
 
   div {
+    display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
@@ -70,7 +73,9 @@
   class="bn-onboard-custom bn-onboard-icon-button"
   class:bn-onboard-dark-mode-background-hover={$app.darkMode}>
   <div>
-    {#if svg}
+    {#if loadingWallet === text}
+      <Spinner />
+    {:else if svg}
       {@html svg}
     {:else}
       <img src={iconSrc} srcset={iconSrcSet} alt={text} />

src/elements/Spinner.svelte

@@ -12,10 +12,10 @@
     position: absolute;
     width: 2em;
     height: 2em;
-    border: 3px solid #4a90e2;
+    border: 3px solid;
     border-radius: 50%;
     animation: bn-onboard-loading 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-    border-color: #4a90e2 transparent transparent transparent;
+    border-color: currentColor transparent transparent transparent;
   }
   .bn-onboard-loading div:nth-child(1) {
     animation-delay: -0.45s;

src/interfaces.ts

@@ -3,6 +3,7 @@ export interface Initialization {
   networkId: number
   subscriptions: Subscriptions
   modules: Modules
+  darkMode?: boolean
 }
 
 export interface Subscriptions {
@@ -15,13 +16,13 @@ export interface Subscriptions {
 
 interface Modules {
   walletSelect: WalletSelectModule
-  walletCheck: WalletCheckModule[]
+  walletCheck: WalletCheckModule[] | Promise<WalletCheckModule[]>
 }
 
 export interface WalletSelectModule {
   heading: string
   description: string
-  wallets: WalletModule[]
+  wallets: WalletModule[] | Promise<WalletModule[]>
 }
 
 export interface WalletCheckModule {
@@ -74,11 +75,11 @@ export interface WalletModule {
   svg?: string
   wallet: (
     helpers: Helpers
-  ) => {
+  ) => Promise<{
     provider: any | undefined
     interface: WalletInterface | null
     instance?: any
-  }
+  }>
   link?: string
   installMessage?: (wallets: {
     currentWallet: string
@@ -125,10 +126,12 @@ export interface Wallet {
 export interface SdkWalletOptions {
   apiKey: string
   networkId: number
+  preferred?: boolean
 }
 
 export interface WalletConnectOptions {
   infuraKey: string
+  preferred?: boolean
 }
 
 export interface WalletInit {

src/modules/select/wallets/authereum.ts

@@ -1,21 +1,29 @@
-import Authereum from 'authereum'
 import authereumIcon from '../wallet-icons/authereum.png'
-
 import { networkName } from '../../../utilities'
 import { WalletModule } from '../../../interfaces'
 import { validateType } from '../../../validation'
 
-function authereum(options: { networkId: number }): WalletModule {
+function authereum(options: {
+  networkId: number
+  preferred?: boolean
+}): WalletModule {
   validateType({ name: 'Authereum Options', value: options, type: 'object' })
 
-  const { networkId } = options
+  const { networkId, preferred } = options
 
   validateType({ name: 'networkId', value: networkId, type: 'number' })
+  validateType({
+    name: 'preferred',
+    value: preferred,
+    type: 'boolean',
+    optional: true
+  })
 
   return {
     name: 'Authereum',
     iconSrc: authereumIcon,
-    wallet: () => {
+    wallet: async () => {
+      const { default: Authereum } = await import('authereum')
       const authereum = new Authereum({
         networkName: networkName(networkId),
         disableNotifications: true
@@ -49,7 +57,8 @@ function authereum(options: { networkId: number }): WalletModule {
       }
     },
     desktop: true,
-    mobile: true
+    mobile: true,
+    preferred
   }
 }
 

src/modules/select/wallets/coinbase.ts

@@ -1,12 +1,21 @@
 import { mobileWalletInstallMessage } from '../content'
 import { WalletModule, Helpers } from '../../../interfaces'
+import { validateType } from '../../../validation'
+
+function coinbase(options: { preferred?: boolean } = {}): WalletModule {
+  const { preferred } = options
+  validateType({
+    name: 'preferred',
+    value: preferred,
+    type: 'boolean',
+    optional: true
+  })
 
-function coinbase(): WalletModule {
   return {
     name: 'Coinbase',
     iconSrc:
       'https://cdn-images-1.medium.com/max/1200/1*7ywNS48PnonfsvvMu1tTsA.png',
-    wallet: (helpers: Helpers) => {
+    wallet: async (helpers: Helpers) => {
       const { getProviderName, createLegacyProviderInterface } = helpers
       const provider =
         (window as any).web3 && (window as any).web3.currentProvider
@@ -21,7 +30,8 @@ function coinbase(): WalletModule {
     },
     link: 'https://go.cb-w.com/',
     installMessage: mobileWalletInstallMessage,
-    mobile: true
+    mobile: true,
+    preferred
   }
 }
 

src/modules/select/wallets/dapper.ts

@@ -1,15 +1,25 @@
 import { extensionInstallMessage } from '../content'
 import { WalletModule, Helpers } from '../../../interfaces'
+import { validateType } from '../../../validation'
 
 import dapperIcon from '../wallet-icons/icon-dapper.png'
 import dapperIcon2x from '../wallet-icons/icon-dapper@2x.png'
 
-function dapper(): WalletModule {
+function dapper(options: { preferred?: boolean } = {}): WalletModule {
+  const { preferred } = options
+
+  validateType({
+    name: 'preferred',
+    value: preferred,
+    type: 'boolean',
+    optional: true
+  })
+
   return {
     name: 'Dapper',
     iconSrc: dapperIcon,
     iconSrcSet: dapperIcon2x,
-    wallet: (helpers: Helpers) => {
+    wallet: async (helpers: Helpers) => {
       const { createModernProviderInterface, getProviderName } = helpers
       const provider = (window as any).ethereum
 
@@ -23,7 +33,8 @@ function dapper(): WalletModule {
     },
     link: 'https://www.meetdapper.com/',
     installMessage: extensionInstallMessage,
-    desktop: true
+    desktop: true,
+    preferred
   }
 }
 

src/modules/select/wallets/fortmatic.ts

@@ -1,4 +1,3 @@
-import Fortmatic from 'fortmatic'
 import fortmaticIcon from '../wallet-icons/icon-fortmatic.svg'
 import { networkName } from '../../../utilities'
 import { validateType } from '../../../validation'
@@ -7,22 +6,35 @@ import { SdkWalletOptions, WalletModule, Helpers } from '../../../interfaces'
 function fortmatic(options: SdkWalletOptions): WalletModule {
   validateType({ name: 'Fortmatic options', value: options, type: 'object' })
 
-  const { apiKey, networkId } = options
+  const { apiKey, networkId, preferred } = options
 
   validateType({ name: 'apiKey', value: apiKey, type: 'string' })
   validateType({ name: 'networkId', value: networkId, type: 'number' })
+  validateType({
+    name: 'preferred',
+    value: preferred,
+    type: 'boolean',
+    optional: true
+  })
+
+  let instance: any
+  let provider: any
 
   return {
     name: 'Fortmatic',
     iconSrc: fortmaticIcon,
-    wallet: (helpers: Helpers) => {
-      const { BigNumber } = helpers
+    wallet: async (helpers: Helpers) => {
+      if (!instance) {
+        const { default: Fortmatic } = await import('fortmatic')
 
-      const instance = new Fortmatic(
-        apiKey,
-        networkId === 1 ? undefined : networkName(networkId)
-      )
-      const provider = instance.getProvider()
+        instance = new Fortmatic(
+          apiKey,
+          networkId === 1 ? undefined : networkName(networkId)
+        )
+        provider = instance.getProvider()
+      }
+
+      const { BigNumber } = helpers
 
       return {
         provider,
@@ -51,7 +63,8 @@ function fortmatic(options: SdkWalletOptions): WalletModule {
       }
     },
     desktop: true,
-    mobile: true
+    mobile: true,
+    preferred
   }
 }
 

src/modules/select/wallets/metamask.ts

@@ -1,16 +1,25 @@
 import { extensionInstallMessage } from '../content'
+import { WalletModule, Helpers } from '../../../interfaces'
+import { validateType } from '../../../validation'
 
 import metamaskIcon from '../wallet-icons/icon-metamask.png'
 import metamaskIcon2x from '../wallet-icons/icon-metamask@2x.png'
 
-import { WalletModule, Helpers } from '../../../interfaces'
+function metamask(options: { preferred?: boolean } = {}): WalletModule {
+  const { preferred } = options
+
+  validateType({
+    name: 'preferred',
+    value: preferred,
+    type: 'boolean',
+    optional: true
+  })
 
-function metamask(): WalletModule {
   return {
     name: 'MetaMask',
     iconSrc: metamaskIcon,
     iconSrcSet: metamaskIcon2x,
-    wallet: (helpers: Helpers) => {
+    wallet: async (helpers: Helpers) => {
       const {
         getProviderName,
         createModernProviderInterface,
@@ -33,7 +42,8 @@ function metamask(): WalletModule {
     },
     link: 'https://metamask.io/',
     installMessage: extensionInstallMessage,
-    desktop: true
+    desktop: true,
+    preferred
   }
 }
 

src/modules/select/wallets/opera-touch.ts

@@ -1,16 +1,25 @@
 import { extensionInstallMessage } from '../content'
+import { WalletModule, Helpers } from '../../../interfaces'
+import { validateType } from '../../../validation'
 
 import operaTouchIcon from '../wallet-icons/icon-opera-touch.png'
 import operaTouchIcon2x from '../wallet-icons/icon-opera-touch@2x.png'
 
-import { WalletModule, Helpers } from '../../../interfaces'
+function operaTouch(options: { preferred?: boolean } = {}): WalletModule {
+  const { preferred } = options
+
+  validateType({
+    name: 'preferred',
+    value: preferred,
+    type: 'boolean',
+    optional: true
+  })
 
-function operaTouch(): WalletModule {
   return {
     name: 'Opera Touch',
     iconSrc: operaTouchIcon,
     iconSrcSet: operaTouchIcon2x,
-    wallet: (helpers: Helpers) => {
+    wallet: async (helpers: Helpers) => {
       const { getProviderName, createModernProviderInterface } = helpers
 
       const provider =
@@ -27,7 +36,8 @@ function operaTouch(): WalletModule {
     },
     link: 'https://www.opera.com/mobile/touch',
     installMessage: extensionInstallMessage,
-    mobile: true
+    mobile: true,
+    preferred
   }
 }