Merge pull request #297 from blocknative/develop

Release 1.7.3

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.7.2",
+  "version": "1.7.3",
   "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",
@@ -44,7 +44,7 @@
     "@portis/web3": "^2.0.0-beta.42",
     "@toruslabs/torus-embed": "^1.2.4",
     "@unilogin/provider": "^0.5.21",
-    "@walletconnect/web3-provider": "^1.0.0-beta.45",
+    "@walletconnect/web3-provider": "^1.0.0-beta.75",
     "authereum": "^0.0.4-beta.131",
     "bignumber.js": "^9.0.0",
     "bnc-sdk": "2.0.0",

src/elements/Spinner.svelte

@@ -1,4 +1,24 @@
+<script>
+  export let description
+</script>
+
 <style>
+  .bn-onboard-loading-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    font-family: inherit;
+    font-size: inherit;
+    color: inherit;
+  }
+
+  span {
+    font-family: inherit;
+    font-size: 0.889em;
+    margin-top: 1rem;
+  }
+
   :global(.bn-onboard-loading) {
     display: inline-block;
     position: relative;
@@ -36,8 +56,13 @@
   }
 </style>
 
-<div class="bn-onboard-custom bn-onboard-loading">
-  <div class="bn-onboard-loading-first" />
-  <div class="bn-onboard-loading-second" />
-  <div class="bn-onboard-loading-third" />
+<div class="bn-onboard-loading-container">
+  <div class="bn-onboard-custom bn-onboard-loading">
+    <div class="bn-onboard-loading-first" />
+    <div class="bn-onboard-loading-second" />
+    <div class="bn-onboard-loading-third" />
+  </div>
+  {#if description}
+    <span>{description}</span>
+  {/if}
 </div>

src/views/WalletCheck.svelte

@@ -186,7 +186,6 @@
   }
 
   function runModules(modules: WalletCheckModule[]) {
-    loadingModal = true
     return new Promise(
       async (
         resolve: (result: {
@@ -198,12 +197,10 @@
           const result = await invalidState(module, currentState)
 
           if (result) {
-            loadingModal = false
             return resolve(result)
           }
         }
 
-        loadingModal = false
         return resolve({ modal: undefined, module: undefined })
       }
     )
@@ -238,7 +235,25 @@
         }
       } else {
         // module returned a promise, so await it for val
-        const modal = await result
+        // show loading spinner if promise doesn't resolve within 150ms
+        let modal
+        await new Promise(resolve => {
+          let completed: boolean = false
+
+          result.then(res => {
+            loadingModal = false
+            completed = true
+            modal = res
+            resolve()
+          })
+
+          setTimeout(() => {
+            if (!completed) {
+              loadingModal = true
+            }
+          }, 150)
+        })
+
         if (modal) {
           validateModal(modal)
           return {
@@ -294,7 +309,7 @@
 
 {#if loadingModal}
   <Modal closeable={false}>
-    <Spinner />
+    <Spinner description="Checking wallet" />
   </Modal>
 {/if}