1.28.0-0.2.1: [fix] - Switch Wallet Flow (#592)

* Call wallet check in switch flow

* Increment version

* Fix linter

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.28.0-0.2.0",
+  "version": "1.28.0-0.2.1",
   "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",

src/interfaces.ts

@@ -88,6 +88,7 @@ export interface UserState {
 export interface StateAndHelpers extends UserState {
   BigNumber: any
   walletSelect: WalletSelectFunction
+  walletCheck: WalletCheck
   wallet: Wallet
   exit: (completed?: boolean, state?: Partial<AppState>) => void
   stateSyncStatus: {
@@ -398,19 +399,19 @@ export interface WalletSelectFunction {
   (autoSelectWallet?: string): Promise<boolean>
 }
 
-interface WalletCheck {
+export interface WalletCheck {
   (): Promise<boolean>
 }
 
-interface AccountSelect {
+export interface AccountSelect {
   (): Promise<boolean>
 }
 
-interface Config {
+export interface Config {
   (options: ConfigOptions): void
 }
 
-interface GetState {
+export interface GetState {
   (): UserState
 }
 

src/modules/check/network.ts

@@ -19,6 +19,7 @@ function network(
       network,
       appNetworkId,
       walletSelect,
+      walletCheck,
       exit,
       stateSyncStatus,
       stateStore
@@ -52,16 +53,16 @@ function 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: button || {
-          onclick: () => {
+          onclick: async () => {
             exit(false, { switchingWallets: true })
+            const walletSelected = await walletSelect()
+            const walletReady = walletSelected && (await walletCheck())
 
-            walletSelect().then(result => {
-              app.update((store: AppState) => ({
-                ...store,
-                switchingWallets: false,
-                walletCheckCompleted: result
-              }))
-            })
+            app.update((store: AppState) => ({
+              ...store,
+              switchingWallets: false,
+              walletCheckCompleted: walletReady
+            }))
           },
           text: 'Switch Wallet'
         },

src/onboard.ts

@@ -121,7 +121,8 @@ function init(initialization: Initialization): API {
     target: document.body,
     props: {
       walletSelectModule: initializedModules.walletSelect,
-      walletSelect
+      walletSelect,
+      walletCheck
     }
   })
 

src/views/Onboard.svelte

@@ -7,12 +7,13 @@
 
   import {
     WalletSelectModule,
-    WalletCheckModule,
-    WalletSelectFunction
+    WalletSelectFunction,
+    WalletCheck as WalletCheckType
   } from '../interfaces'
 
   export let walletSelectModule: WalletSelectModule
   export let walletSelect: WalletSelectFunction
+  export let walletCheck: WalletCheckType
 </script>
 
 <style>
@@ -49,9 +50,13 @@
 {/if}
 
 {#if $app.walletCheckInProgress}
-  <WalletCheck {walletSelect} />
+  <WalletCheck modules={undefined} {walletSelect} {walletCheck} />
 {/if}
 
 {#if $app.accountSelectInProgress}
-  <WalletCheck modules={[derivationPath(), accountSelect()]} />
+  <WalletCheck
+    modules={[derivationPath(), accountSelect()]}
+    {walletSelect}
+    {walletCheck}
+  />
 {/if}

src/views/WalletCheck.svelte

@@ -26,12 +26,14 @@
   import {
     WalletCheckModule,
     WalletSelectFunction,
+    WalletCheck,
     AppState,
     WalletCheckModal,
     UserState,
     Connect
   } from '../interfaces'
 
+  export let walletCheck: WalletCheck
   export let walletSelect: WalletSelectFunction
   export let modules: WalletCheckModule[] | undefined
 
@@ -222,6 +224,7 @@
       ...state,
       BigNumber,
       walletSelect,
+      walletCheck,
       exit: handleExit,
       wallet: get(wallet),
       stateSyncStatus,