Merge branch 'develop' into release/1.28.0

Author: taylorjdawson

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.28.0",
+  "version": "1.28.0-0.1.0",
   "description": "Onboard users to web3 by allowing them to select a wallet, get that wallet ready to transact and have access to synced wallet state.",
   "keywords": [
     "ethereum",
@@ -43,6 +43,7 @@
     "eslint": "^6.8.0",
     "eslint-config-prettier": "^8.3.0",
     "prettier": "^2.0.5",
+    "prettier-plugin-svelte": "^2.2.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.27.5",
     "rollup-plugin-svelte": "^6.1.1",
@@ -75,7 +76,6 @@
     "ethereumjs-util": "^7.0.3",
     "fortmatic": "^2.2.1",
     "hdkey": "^2.0.1",
-    "prettier-plugin-svelte": "^2.2.0",
     "regenerator-runtime": "^0.13.7",
     "trezor-connect": "^8.1.9",
     "walletlink": "^2.1.0",

src/components/Modal.svelte

@@ -2,7 +2,7 @@
   import { fade } from 'svelte/transition'
   import { app } from '../stores'
   import Branding from '../elements/Branding.svelte'
-  export let closeModal: () => void
+  export let closeModal: () => void = () => {}
   export let closeable: boolean = true
 
   let closeHovered: boolean

src/elements/Spinner.svelte

@@ -1,5 +1,5 @@
-<script>
-  export let description
+<script lang="ts">
+  export let description: string = ''
 </script>
 
 <style>

src/interfaces.ts

@@ -89,7 +89,7 @@ export interface StateAndHelpers extends UserState {
   BigNumber: any
   walletSelect: WalletSelectFunction
   wallet: Wallet
-  exit: (completed?: boolean) => void
+  exit: (completed?: boolean, state?: Partial<AppState>) => void
   stateSyncStatus: {
     [key: string]:
       | null
@@ -490,6 +490,7 @@ export interface AppState {
   accountSelectInProgress: boolean
   walletSelectDisplayedUI: boolean
   walletCheckDisplayedUI: boolean
+  switchingWallets: boolean
   displayBranding: boolean
   agreement: TermsOfServiceAgreementOptions
 }

src/modules/check/network.ts

@@ -2,10 +2,13 @@ import { networkName } from '../../utilities'
 import {
   WalletCheckModal,
   StateAndHelpers,
-  WalletCheckCustomOptions
+  WalletCheckCustomOptions,
+  AppState
 } from '../../interfaces'
 import { networkIcon } from './icons'
 
+import { app } from '../../stores'
+
 function network(
   options: WalletCheckCustomOptions = {}
 ): (currentState: StateAndHelpers) => Promise<WalletCheckModal | undefined> {
@@ -50,8 +53,15 @@ function network(
         eventCode: 'networkFail',
         button: button || {
           onclick: () => {
-            exit()
-            walletSelect()
+            exit(false, { switchingWallets: true })
+
+            walletSelect().then(result => {
+              app.update((store: AppState) => ({
+                ...store,
+                switchingWallets: false,
+                walletCheckCompleted: result
+              }))
+            })
           },
           text: 'Switch Wallet'
         },

src/onboard.ts

@@ -206,9 +206,11 @@ function init(initialization: Initialization): API {
         const {
           walletCheckInProgress,
           walletCheckCompleted,
-          walletCheckDisplayedUI
+          walletCheckDisplayedUI,
+          switchingWallets
         } = store
-        if (walletCheckInProgress === false) {
+
+        if (!switchingWallets && walletCheckInProgress === false) {
           appUnsubscribe()
           walletCheckDisplayedUI
             ? setTimeout(() => {

src/stores.ts

@@ -28,6 +28,7 @@ export const app: WritableStore = writable({
   walletSelectCompleted: false,
   walletCheckInProgress: false,
   walletCheckCompleted: false,
+  switchingWallets: false,
   accountSelectInProgress: false,
   autoSelectWallet: '',
   checkModules: [],

src/views/WalletCheck.svelte

@@ -169,12 +169,16 @@
         })
   }
 
-  function handleExit(completed?: boolean) {
+  function handleExit(
+    completed: boolean = false,
+    { switchingWallets }: Partial<AppState> = {}
+  ) {
     resetState()
     app.update((store: AppState) => ({
       ...store,
+      switchingWallets,
       walletCheckInProgress: false,
-      walletCheckCompleted: completed ? completed : false,
+      walletCheckCompleted: completed,
       accountSelectInProgress: false
     }))
   }
@@ -246,7 +250,7 @@
             loadingModal = false
             completed = true
             modal = res
-            resolve()
+            resolve(undefined)
           })
 
           setTimeout(() => {
@@ -320,7 +324,7 @@
 
 {#if activeModal}
   <Modal closeModal={() => handleExit()}>
-    <ModalHeader icon={activeModal.icon} heading={activeModal.heading} />
+    <ModalHeader icon={activeModal.icon || ''} heading={activeModal.heading} />
     <p class="bn-onboard-custom bn-onboard-prepare-description">
       {@html activeModal.description}
     </p>