Merge pull request #252 from blocknative/develop

Release 1.3.6

Author: lnbc1QWFyb24

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bnc-onboard",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "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/Modal.svelte

@@ -15,7 +15,7 @@
     font-family: 'Helvetica Neue';
     justify-content: center;
     align-items: center;
-    position: absolute;
+    position: fixed;
     font-size: 16px;
     z-index: 99;
     top: 0;

src/interfaces.ts

@@ -150,6 +150,7 @@ export interface TrezorOptions {
 
 export interface LedgerOptions {
   rpcUrl: string
+  LedgerTransport?: any
 }
 
 export interface TorusOptions {
@@ -161,13 +162,12 @@ export interface TorusOptions {
   enabledVerifiers: TorusVerifierStatus
 }
 
-
 interface TorusVerifierStatus {
-  google?: boolean;
-  facebook?: boolean;
-  reddit?: boolean;
-  twitch?: boolean;
-  discord?: boolean;
+  google?: boolean
+  facebook?: boolean
+  reddit?: boolean
+  twitch?: boolean
+  discord?: boolean
 }
 
 export interface AuthereumOptions {

src/modules/select/wallets/ledger.ts

@@ -15,7 +15,15 @@ import * as EthereumTx from 'ethereumjs-tx'
 import buffer from 'buffer'
 
 function ledger(options: LedgerOptions & CommonWalletOptions): WalletModule {
-  const { rpcUrl, networkId, preferred, label, iconSrc, svg } = options
+  const {
+    rpcUrl,
+    LedgerTransport,
+    networkId,
+    preferred,
+    label,
+    iconSrc,
+    svg
+  } = options
 
   return {
     name: label || 'Ledger',
@@ -27,6 +35,7 @@ function ledger(options: LedgerOptions & CommonWalletOptions): WalletModule {
       const provider = await ledgerProvider({
         rpcUrl,
         networkId,
+        LedgerTransport,
         BigNumber,
         networkName
       })
@@ -36,7 +45,7 @@ function ledger(options: LedgerOptions & CommonWalletOptions): WalletModule {
         interface: {
           name: 'Ledger',
           connect: provider.enable,
-          disconnect: () => provider.stop(),
+          disconnect: provider.disconnect,
           address: {
             get: async () => provider.getPrimaryAddress()
           },
@@ -61,10 +70,11 @@ function ledger(options: LedgerOptions & CommonWalletOptions): WalletModule {
 async function ledgerProvider(options: {
   networkId: number
   rpcUrl: string
+  LedgerTransport: any
   BigNumber: any
   networkName: (id: number) => string
 }) {
-  const { networkId, rpcUrl, BigNumber, networkName } = options
+  const { networkId, rpcUrl, LedgerTransport, BigNumber, networkName } = options
   const basePath = networkIdToDerivationPath(networkId)
 
   let addressToPath = new Map()
@@ -90,6 +100,27 @@ async function ledgerProvider(options: {
   provider.setPrimaryAccount = setPrimaryAccount
   provider.getBalance = getBalance
   provider.send = provider.sendAsync
+  provider.disconnect = disconnect
+
+  let transport: any
+  let eth: any
+
+  try {
+    transport = LedgerTransport
+      ? await LedgerTransport.create()
+      : await TransportU2F.create()
+
+    eth = new Eth(transport)
+  } catch (error) {
+    throw new Error('Error connecting to Ledger wallet')
+  }
+
+  function disconnect() {
+    transport.close()
+    addressToPath = new Map()
+    enabled = false
+    provider.stop()
+  }
 
   function enable() {
     enabled = true
@@ -161,16 +192,6 @@ async function ledgerProvider(options: {
         paths.push(`${basePath}/0'/0`)
       }
 
-      let transport
-      let eth
-
-      try {
-        transport = await TransportU2F.create()
-        eth = new Eth(transport)
-      } catch (error) {
-        reject({ message: 'Error connecting to Ledger wallet' })
-      }
-
       for (const path of paths) {
         try {
           const { address } = await eth.getAddress(path)
@@ -215,15 +236,6 @@ async function ledgerProvider(options: {
 
   async function signTransaction(transactionData: any) {
     const path = [...addressToPath.values()][0]
-    let transport
-    let eth
-
-    try {
-      transport = await TransportU2F.create()
-      eth = new Eth(transport)
-    } catch (error) {
-      throw new Error('Error connecting to Ledger wallet')
-    }
 
     try {
       const transaction = new EthereumTx.Transaction(transactionData, {

src/validation.ts

@@ -527,6 +527,7 @@ export function validateWalletInit(
     appUrl,
     email,
     rpcUrl,
+    LedgerTransport,
     buildEnv,
     buttonPosition,
     enableLogging,
@@ -551,6 +552,7 @@ export function validateWalletInit(
       'appUrl',
       'email',
       'rpcUrl',
+      'LedgerTransport',
       'buildEnv',
       'buttonPosition',
       'enableLogging',
@@ -619,11 +621,17 @@ export function validateWalletInit(
   validateType({
     name: 'walletInit.appUrl',
     value: appUrl,
-
     type: 'string',
     optional: true
   })
 
+  validateType({
+    name: 'walletInit.LedgerTransport',
+    value: LedgerTransport,
+    type: 'function',
+    optional: true
+  })
+
   validateType({
     name: 'walletInit.email',
     value: email,
@@ -660,7 +668,6 @@ export function validateWalletInit(
     optional: true
   })
 
-
   validateType({
     name: 'walletInit.enabledVerifiers',
     value: enabledVerifiers,

src/views/WalletCheck.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { get } from 'svelte/store'
-
+  import { onDestroy, onMount } from 'svelte'
   import { fade } from 'svelte/transition'
   import BigNumber from 'bignumber.js'
 
@@ -54,6 +54,23 @@
     renderModule()
   }
 
+  function lockScroll() {
+    window.scrollTo(0, 0)
+  }
+
+  let originalOverflowValue: string
+
+  onMount(() => {
+    originalOverflowValue = window.document.body.style.overflow
+    window.document.body.style.overflow = 'hidden'
+    window.addEventListener('scroll', lockScroll)
+  })
+
+  onDestroy(() => {
+    window.removeEventListener('scroll', lockScroll)
+    window.document.body.style.overflow = originalOverflowValue
+  })
+
   async function renderModule() {
     checkingModule = true
 

src/views/WalletSelect.svelte

@@ -2,6 +2,7 @@
   import BigNumber from 'bignumber.js'
   import { get } from 'svelte/store'
   import { fade } from 'svelte/transition'
+  import { onDestroy, onMount } from 'svelte'
 
   import { app, walletInterface, wallet, resetWalletState } from '../stores'
 
@@ -56,6 +57,23 @@
   let showingAllWalletModules = false
   const showAllWallets = () => (showingAllWalletModules = true)
 
+  function lockScroll() {
+    window.scrollTo(0, 0)
+  }
+
+  let originalOverflowValue: string
+
+  onMount(() => {
+    originalOverflowValue = window.document.body.style.overflow
+    window.document.body.style.overflow = 'hidden'
+    window.addEventListener('scroll', lockScroll)
+  })
+
+  onDestroy(() => {
+    window.removeEventListener('scroll', lockScroll)
+    window.document.body.style.overflow = originalOverflowValue
+  })
+
   renderWalletSelect()
 
   async function renderWalletSelect() {