Code refactor, add feature to auto select a wallet for user

Author: lnbc1QWFyb24

package-lock.json

@@ -2,7 +2,7 @@
   import Button from "../elements/Button.svelte";
   import IconDisplay from "../elements/IconDisplay.svelte";
   import { fade } from "svelte/transition";
-  export let selectedWallet;
+  export let selectedWalletModule;
   export let onBack;
   export let installMessage;
 </script>
@@ -21,17 +21,20 @@
 
 <section class="bn-onboard-custom bn-onboard-modal-selected-wallet" in:fade>
   <IconDisplay
-    iconSrc={selectedWallet.iconSrc}
-    iconSrcSet={selectedWallet.iconSrcSet}
-    text={selectedWallet.name} />
+    iconSrc={selectedWalletModule.iconSrc}
+    iconSrcSet={selectedWalletModule.iconSrcSet}
+    text={selectedWalletModule.name} />
 
   {#if installMessage}
     {@html installMessage}
   {/if}
 
   <footer class="bn-onboard-custom bn-onboard-modal-selected-wallet-footer">
-    <a href={selectedWallet.link} rel="noreferrer noopener" target="_blank">
-      <Button>Install {selectedWallet.name}</Button>
+    <a
+      href={selectedWalletModule.link}
+      rel="noreferrer noopener"
+      target="_blank">
+      <Button>Install {selectedWalletModule.name}</Button>
     </a>
     <Button onclick={onBack}>Back</Button>
   </footer>

src/api.js

@@ -35,7 +35,7 @@
 </style>
 
 <ul class="bn-onboard-custom bn-onboard-modal-select-wallets">
-  {#each modalData.walletModules as wallet}
+  {#each modalData.primaryWallets as wallet}
     <li in:fade>
       <IconButton
         onclick={() => handleWalletSelect(wallet)}
@@ -45,7 +45,7 @@
     </li>
   {/each}
 
-  {#if modalData.extraWalletModules && !showingAllWalletModules}
+  {#if modalData.secondaryWallets && !showingAllWalletModules}
     <div>
       <Button highlight={true} onclick={() => (showingAllWalletModules = true)}>
         Show More
@@ -54,7 +54,7 @@
   {/if}
 
   {#if showingAllWalletModules}
-    {#each modalData.extraWalletModules as wallet}
+    {#each modalData.secondaryWallets as wallet}
       <li in:fade>
         <IconButton
           onclick={() => handleWalletSelect(wallet)}

src/components/SelectedWallet.svelte

@@ -1,30 +1,46 @@
 import "regenerator-runtime/runtime"
 
+import { get } from "svelte/store"
+
 import Onboard from "./views/Onboard.svelte"
-import { app, address, network, balance, provider } from "./stores"
-import { selectWallet, prepareWallet, config, getState } from "./api"
-import { validateInit } from "./validation"
-import { getUserAgent } from "./utilities"
+
+import {
+  app,
+  address,
+  network,
+  balance,
+  wallet,
+  state,
+  walletInterface
+} from "./stores"
+
+import { validateInit, validateConfig } from "./validation"
+import { isMobileDevice } from "./utilities"
 import { initializeBlocknative } from "./services"
 
-function init(initialization) {
-  getUserAgent()
+import { version } from "../package.json"
 
+function init(initialization) {
   validateInit(initialization)
 
-  const { subscriptions, ...rest } = initialization
+  const { subscriptions, dappId, networkId, modules } = initialization
 
-  initializeBlocknative(initialization.dappId, initialization.networkId)
+  initializeBlocknative(dappId, networkId)
 
   app.update(store => ({
     ...store,
-    ...rest
+    dappId,
+    networkId,
+    version,
+    mobileDevice: isMobileDevice()
   }))
 
   new Onboard({
     target: document.body,
     props: {
-      onboardingModules: initialization.modules.prepareWallet
+      walletSelectModule: modules.walletSelect,
+      walletReadyModules: modules.walletReady,
+      walletSelect
     }
   })
 
@@ -42,12 +58,63 @@ function init(initialization) {
       balance.subscribe(subscriptions.balance)
     }
 
-    if (subscriptions.provider) {
-      provider.subscribe(subscriptions.provider)
+    if (subscriptions.wallet) {
+      wallet.subscribe(subscriptions.wallet)
     }
   }
 
-  return { selectWallet, prepareWallet, config, getState }
+  function walletSelect(autoSelectWallet) {
+    return new Promise(resolve => {
+      app.update(store => ({
+        ...store,
+        walletSelectInProgress: true,
+        autoSelectWallet:
+          typeof autoSelectWallet === "string" && autoSelectWallet
+      }))
+
+      const appUnsubscribe = app.subscribe(
+        ({ walletSelectInProgress, walletSelectCompleted }) => {
+          if (walletSelectInProgress === false) {
+            appUnsubscribe()
+            setTimeout(() => resolve(walletSelectCompleted), 500)
+          }
+        }
+      )
+    })
+  }
+
+  function walletReady() {
+    return new Promise(resolve => {
+      if (!get(walletInterface)) {
+        throw new Error("walletSelect must be called before walletReady")
+      }
+
+      app.update(store => ({
+        ...store,
+        walletReadyInProgress: true
+      }))
+
+      const appUnsubscribe = app.subscribe(
+        ({ walletReadyInProgress, walletReadyCompleted }) => {
+          if (walletReadyInProgress === false) {
+            appUnsubscribe()
+            setTimeout(() => resolve(walletReadyCompleted), 500)
+          }
+        }
+      )
+    })
+  }
+
+  function config(options) {
+    validateConfig(options)
+    app.update(store => ({ ...store, ...options }))
+  }
+
+  function getState() {
+    return get(state)
+  }
+
+  return { walletSelect, walletReady, config, getState }
 }
 
 export default init