Add loading accounts module for ledger

Author: lnbc1QWFyb24

src/components/Wallets.svelte

@@ -1,13 +1,24 @@
 <script lang="ts">
+  import { onDestroy } from 'svelte'
   import { fade } from 'svelte/transition'
   import Button from '../elements/Button.svelte'
   import IconButton from '../elements/IconButton.svelte'
-  import { WalletSelectModalData, WalletModule } from '../interfaces'
+  import { wallet } from '../stores'
+  import {
+    WalletSelectModalData,
+    WalletModule,
+    WritableStore
+  } from '../interfaces'
   export let modalData: WalletSelectModalData
   export let handleWalletSelect: (wallet: WalletModule) => void
   export let loadingWallet: string | undefined
 
   let showingAllWalletModules: boolean = false
+  let selectedWallet: WritableStore
+
+  const unsubscribe = wallet.subscribe(wallet => (selectedWallet = wallet))
+
+  onDestroy(() => unsubscribe())
 </script>
 
 <style>
@@ -65,6 +76,7 @@
         iconSrcSet={wallet.iconSrcSet}
         svg={wallet.svg}
         text={wallet.name}
+        currentlySelected={wallet.name === selectedWallet.name}
         {loadingWallet} />
     </li>
   {/each}
@@ -86,6 +98,7 @@
           iconSrcSet={wallet.iconSrcSet}
           svg={wallet.svg}
           text={wallet.name}
+          currentlySelected={wallet.name === selectedWallet.name}
           {loadingWallet} />
       </li>
     {/each}

src/elements/IconButton.svelte

@@ -7,6 +7,7 @@
   export let onclick: () => void = () => {}
   export let text: string
   export let loadingWallet: string | undefined
+  export let currentlySelected: boolean = false
 </script>
 
 <style>
@@ -61,6 +62,11 @@
     font-family: inherit;
   }
 
+  i {
+    font-size: 1.6rem;
+    margin-left: 0.5rem;
+  }
+
   @media only screen and (max-width: 450px) {
     button {
       width: 100%;
@@ -82,4 +88,7 @@
     {/if}
   </div>
   <span>{text}</span>
+  {#if currentlySelected}
+    <i>*</i>
+  {/if}
 </button>

src/interfaces.ts

@@ -25,6 +25,7 @@ export interface WalletCheckModule {
     | WalletCheckModal
     | undefined
     | Promise<WalletCheckModal | undefined>
+  id?: string
 }
 
 export interface WalletCheckModal {
@@ -37,9 +38,7 @@ export interface WalletCheckModal {
   }
   eventCode: string
   action?: () => Promise<{ message: string } | undefined>
-  loading?: Promise<undefined>
   icon?: string
-  hint?: string
 }
 
 export interface WalletSelectModalData {
@@ -109,7 +108,6 @@ export interface WalletInterface {
   name: string | undefined
   connect?: () => Promise<{ message: string } | undefined>
   disconnect?: () => void
-  loading?: Promise<undefined>
   address: StateSyncer
   network: StateSyncer
   balance: StateSyncer
@@ -126,7 +124,6 @@ export interface Wallet {
   type: 'hardware' | 'injected' | 'sdk'
   instance?: any
   connect?: () => Promise<{ message: string } | undefined>
-  loading?: Promise<undefined>
 }
 
 export interface CommonWalletOptions {

src/modules/check/connect.ts

@@ -9,23 +9,12 @@ function connect() {
         description: `This dapp requires access to your wallet, please login and authorize access to your ${wallet.name} accounts to continue.`,
         eventCode: 'loginFail',
         action: wallet.connect,
-        loading: wallet.loading,
         icon: `
         <svg height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m10.29375 4.05351563c0-.04921875 0-.09140625 0-.13007813 0-1.0546875 0-2.109375 0-3.1640625 0-.43945312.3480469-.76992188.7804688-.7453125.2003906.01054688.3585937.10546875.4992187.24609375.5800781.58359375 1.1566406 1.16367188 1.7367187 1.74023438 1.4695313 1.46953125 2.9390625 2.93906249 4.4050782 4.40859375.1335937.13359375.2425781.27421875.2707031.46757812.0351562.20742188-.0246094.421875-.1652344.58007813-.0246094.028125-.0492187.05273437-.0738281.08085937-2.0601563 2.06367188-4.1203125 4.1238281-6.1804688 6.1875-.2109375.2109375-.4570312.3023438-.7453125.2179688-.2707031-.0808594-.4464843-.2707032-.5132812-.5484375-.0140625-.0738282-.0175781-.1441407-.0140625-.2179688 0-1.0335937 0-2.0707031 0-3.1042969 0-.0386719 0-.08085935 0-.13359372h-5.06953125c-.49570313 0-.80507813-.309375-.80507813-.80859375 0-1.42382813 0-2.84414063 0-4.26796875 0-.49570313.30585938-.8015625.8015625-.8015625h4.93593748z"/><path d="m5.69882812 13.978125h-4.01132812c-.928125 0-1.6875-.8753906-1.6875-1.9511719v-10.06171872c0-1.07578125.75585938-1.95117188 1.6875-1.95117188h4.01132812c.34101563 0 .61523438.31992188.61523438.71015625 0 .39023438-.27421875.71015625-.61523438.71015625h-4.01132812c-.253125 0-.45703125.23554688-.45703125.52734375v10.06171875c0 .2917969.20390625.5273437.45703125.5273437h4.01132812c.34101563 0 .61523438.3199219.61523438.7101563s-.27773438.7171875-.61523438.7171875z"/></g></svg>
-        `,
-        hint: connectHint(wallet.name)
+        `
       }
     }
   }
 }
 
-function connectHint(walletName: string) {
-  switch (walletName) {
-    case 'Ledger':
-      return 'Make sure your Ledger wallet is plugged in, unlocked and has the Ethereum app open and then click connect.'
-    default:
-      return undefined
-  }
-}
-
 export default connect

src/modules/check/loading-accounts.ts

@@ -0,0 +1,34 @@
+import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
+
+function loadingAccounts() {
+  // need to assign an id so that it can be checked at to whether it has been included in modules array
+  return Object.assign(module, { id: 'loadingAccounts' })
+}
+
+function module(
+  stateAndHelpers: StateAndHelpers
+): WalletCheckModal | undefined {
+  const { wallet, address } = stateAndHelpers
+  if (!address && wallet && wallet.name) {
+    return {
+      heading: 'Loading Accounts',
+      description: getDescription(wallet.name),
+      eventCode: 'loadingAccounts',
+      action: wallet.connect,
+      icon: `
+      <svg height="14" viewBox="0 0 18 14" width="18" xmlns="http://www.w3.org/2000/svg"><g fill="currentColor"><path d="m10.29375 4.05351563c0-.04921875 0-.09140625 0-.13007813 0-1.0546875 0-2.109375 0-3.1640625 0-.43945312.3480469-.76992188.7804688-.7453125.2003906.01054688.3585937.10546875.4992187.24609375.5800781.58359375 1.1566406 1.16367188 1.7367187 1.74023438 1.4695313 1.46953125 2.9390625 2.93906249 4.4050782 4.40859375.1335937.13359375.2425781.27421875.2707031.46757812.0351562.20742188-.0246094.421875-.1652344.58007813-.0246094.028125-.0492187.05273437-.0738281.08085937-2.0601563 2.06367188-4.1203125 4.1238281-6.1804688 6.1875-.2109375.2109375-.4570312.3023438-.7453125.2179688-.2707031-.0808594-.4464843-.2707032-.5132812-.5484375-.0140625-.0738282-.0175781-.1441407-.0140625-.2179688 0-1.0335937 0-2.0707031 0-3.1042969 0-.0386719 0-.08085935 0-.13359372h-5.06953125c-.49570313 0-.80507813-.309375-.80507813-.80859375 0-1.42382813 0-2.84414063 0-4.26796875 0-.49570313.30585938-.8015625.8015625-.8015625h4.93593748z"/><path d="m5.69882812 13.978125h-4.01132812c-.928125 0-1.6875-.8753906-1.6875-1.9511719v-10.06171872c0-1.07578125.75585938-1.95117188 1.6875-1.95117188h4.01132812c.34101563 0 .61523438.31992188.61523438.71015625 0 .39023438-.27421875.71015625-.61523438.71015625h-4.01132812c-.253125 0-.45703125.23554688-.45703125.52734375v10.06171875c0 .2917969.20390625.5273437.45703125.5273437h4.01132812c.34101563 0 .61523438.3199219.61523438.7101563s-.27773438.7171875-.61523438.7171875z"/></g></svg>
+      `
+    }
+  }
+}
+
+function getDescription(walletName: string) {
+  switch (walletName) {
+    case 'Ledger':
+      return 'Your Ledger accounts are currently being loaded, make sure your Ledger wallet: <ol><li>Is plugged in</li><li>Is Unlocked</li><li>Has the Ethereum app open</li></ol> For more info on how to connect, <a style="color: #4a90e2; font-size: 0.889rem; font-family: inherit;" href="https://www.ledger.com/start/" target="_blank" rel="noopener noreferrer">check out the Ledger documentation </a>'
+    default:
+      return ''
+  }
+}
+
+export default loadingAccounts

src/modules/select/wallets/authereum.ts

@@ -1,9 +1,22 @@
 import authereumIcon from '../wallet-icons/icon-authereum.png'
 import { networkName } from '../../../utilities'
-import { WalletModule, AuthereumOptions, CommonWalletOptions } from '../../../interfaces'
+import {
+  WalletModule,
+  AuthereumOptions,
+  CommonWalletOptions
+} from '../../../interfaces'
 
-function authereum(options: AuthereumOptions & CommonWalletOptions): WalletModule {
-  const { networkId, preferred, label, iconSrc, svg, disableNotifications } = options
+function authereum(
+  options: AuthereumOptions & CommonWalletOptions
+): WalletModule {
+  const {
+    networkId,
+    preferred,
+    label,
+    iconSrc,
+    svg,
+    disableNotifications
+  } = options
 
   return {
     name: label || 'Authereum',
@@ -25,9 +38,6 @@ function authereum(options: AuthereumOptions & CommonWalletOptions): WalletModul
           name: 'Authereum',
           connect: () => provider.enable(),
           disconnect: () => instance.logout(),
-          loading: new Promise((resolve: () => void) => {
-            instance.on('openPopup', resolve)
-          }),
           address: {
             get: () => instance.getAccountAddress()
           },
@@ -46,7 +56,9 @@ function authereum(options: AuthereumOptions & CommonWalletOptions): WalletModul
     type: 'sdk',
     desktop: true,
     mobile: true,
-    url: `https://${networkId !== 1 ? `${networkName(networkId)}.` : ''}authereum.com/`,
+    url: `https://${
+      networkId !== 1 ? `${networkName(networkId)}.` : ''
+    }authereum.com/`,
     preferred
   }
 }

src/modules/select/wallets/ledger.ts

@@ -196,16 +196,23 @@ async function ledgerProvider(options: {
         paths.push(`${basePath}/0'/0`)
       }
 
-      const transport = await TransportU2F.create()
-      const eth = new Eth(transport)
+      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)
           addressToPath.set(address.toLowerCase(), path)
         } catch (err) {
           return reject({
-            message: 'An error occurred when trying to get account information'
+            message: 'There was a problem trying to connect to your Ledger.'
           })
         }
       }
@@ -239,8 +246,15 @@ async function ledgerProvider(options: {
 
   async function signTransaction(transactionData: any) {
     const path = [...addressToPath.values()][0]
-    const transport = await TransportU2F.create()
-    const eth = new Eth(transport)
+    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(transactionData, {
@@ -262,7 +276,7 @@ async function ledgerProvider(options: {
 
       return `0x${transaction.serialize().toString('hex')}`
     } catch (error) {
-      throw new Error(error)
+      throw new Error('Error signing transaction')
     } finally {
       transport.close()
     }

src/stores.ts

@@ -51,7 +51,6 @@ export const wallet: WritableStore = writable({
   connect: null,
   instance: null,
   url: null,
-  loading: null,
   type: null
 })
 
@@ -116,8 +115,7 @@ export function resetWalletState(options?: {
         provider: undefined,
         connect: undefined,
         instance: undefined,
-        url: undefined,
-        loading: undefined
+        url: undefined
       }))
 
       currentInterface.disconnect && currentInterface.disconnect()
@@ -134,8 +132,7 @@ export function resetWalletState(options?: {
         provider: undefined,
         connect: undefined,
         instance: undefined,
-        url: undefined,
-        loading: undefined
+        url: undefined
       }))
 
       disconnected &&

src/validation.ts

@@ -357,25 +357,13 @@ export function validateModal(modal: WalletCheckModal): never | void {
     eventCode,
     action,
     icon,
-    loading,
     html,
-    hint,
     ...otherParams
   } = modal
 
   invalidParams(
     otherParams,
-    [
-      'heading',
-      'description',
-      'button',
-      'eventCode',
-      'action',
-      'icon',
-      'loading',
-      'html',
-      'hint'
-    ],
+    ['heading', 'description', 'button', 'eventCode', 'action', 'icon', 'html'],
     'modal'
   )
 
@@ -389,13 +377,6 @@ export function validateModal(modal: WalletCheckModal): never | void {
     optional: true
   })
 
-  validateType({
-    name: 'loading',
-    value: loading,
-    type: 'object',
-    optional: true
-  })
-
   validateType({
     name: 'button',
     value: button,
@@ -410,13 +391,6 @@ export function validateModal(modal: WalletCheckModal): never | void {
     optional: true
   })
 
-  validateType({
-    name: 'hint',
-    value: hint,
-    type: 'string',
-    optional: true
-  })
-
   if (button) {
     const { onclick, text, ...restParams } = button
     invalidParams(restParams, ['onclick', 'text'], 'button')