Merge pull request #209 from blocknative/develop

Release 1.2.4

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "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/components/Wallets.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { fade } from 'svelte/transition'
   import Button from '../elements/Button.svelte'
   import IconButton from '../elements/IconButton.svelte'
   import { WalletSelectModalData, WalletModule } from '../interfaces'
@@ -18,10 +17,7 @@
     align-items: center;
     list-style-type: none;
     margin: 1.25em 0;
-    max-height: 66vh;
-    overflow-y: scroll;
     padding: 0;
-    scrollbar-width: none;
     font-family: inherit;
     font-size: inherit;
     line-height: 1.15;
@@ -51,14 +47,15 @@
     }
 
     ul {
-      scrollbar-width: unset;
+      max-height: 66vh;
+      overflow-y: scroll;
     }
   }
 </style>
 
 <ul class="bn-onboard-custom bn-onboard-modal-select-wallets">
-  {#each modalData.primaryWallets as wallet}
-    <li in:fade>
+  {#each modalData.primaryWallets as wallet, i (wallet.name)}
+    <li>
       <IconButton
         onclick={() => handleWalletSelect(wallet)}
         iconSrc={wallet.iconSrc}
@@ -78,8 +75,8 @@
   {/if}
 
   {#if showingAllWalletModules}
-    {#each modalData.secondaryWallets as wallet}
-      <li in:fade>
+    {#each modalData.secondaryWallets as wallet, i (wallet.name)}
+      <li>
         <IconButton
           onclick={() => handleWalletSelect(wallet)}
           iconSrc={wallet.iconSrc}

src/modules/select/wallets/metamask.ts

@@ -43,6 +43,7 @@ function metamask(
     link: 'https://metamask.io/',
     installMessage: extensionInstallMessage,
     desktop: true,
+    mobile: true,
     preferred
   }
 }

src/views/WalletSelect.svelte

@@ -66,31 +66,33 @@
         return !osExclusions.includes(os)
       })
 
+    if (deviceWallets.find(wallet => wallet.preferred)) {
+      // if preferred wallets, then split in to preferred and not preferred
+      primaryWallets = deviceWallets.filter(wallet => wallet.preferred)
+      secondaryWallets = deviceWallets.filter(wallet => !wallet.preferred)
+    } else {
+      // otherwise make the first 4 wallets preferred
+      primaryWallets = deviceWallets.slice(0, 4)
+      secondaryWallets =
+        deviceWallets.length > 4 ? deviceWallets.slice(4) : undefined
+    }
+
+    modalData = {
+      heading,
+      description,
+      primaryWallets,
+      secondaryWallets
+    }
+
     if (appState.autoSelectWallet) {
       const module = deviceWallets.find(
         (m: WalletModule) => m.name === appState.autoSelectWallet
       )
 
       app.update(store => ({ ...store, autoSelectWallet: '' }))
 
-      module ? handleWalletSelect(module) : finish({ completed: false })
-    } else {
-      if (deviceWallets.find(wallet => wallet.preferred)) {
-        // if preferred wallets, then split in to preferred and not preferred
-        primaryWallets = deviceWallets.filter(wallet => wallet.preferred)
-        secondaryWallets = deviceWallets.filter(wallet => !wallet.preferred)
-      } else {
-        // otherwise make the first 4 wallets preferred
-        primaryWallets = deviceWallets.slice(0, 4)
-        secondaryWallets =
-          deviceWallets.length > 4 ? deviceWallets.slice(4) : undefined
-      }
-
-      modalData = {
-        heading,
-        description,
-        primaryWallets,
-        secondaryWallets
+      if (module) {
+        handleWalletSelect(module)
       }
     }
   }