Change label, styling and add error code

Author: lnbc1QWFyb24

src/modules/check/derivation-path.ts

@@ -1,24 +1,25 @@
 import { WalletCheckModal, StateAndHelpers } from '../../interfaces'
+import { usbIcon } from './icons'
 
 interface DerivationPaths {
   [key: string]: Array<{ path?: string; label: string }>
 }
 
 const derivationPaths: DerivationPaths = {
   Ledger: [
-    { path: `m/44'/60'`, label: 'Ethereum' },
-    { path: `m/44'/60'/0'`, label: 'Ethereum Legacy' }
+    { path: `m/44'/60'/0'`, label: 'Ethereum' },
+    { path: `m/44'/60'`, label: 'Ethereum Ledger Live' }
   ],
   Trezor: [{ path: `m/44'/60'/0'/0`, label: 'Ethereum' }]
 }
 
 const styles = `
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
 `
 
-// color: #4a90e2;
-
 const baseStyles = `
   background: inherit;
   font-size: 0.889em;
@@ -44,26 +45,43 @@ const selectedStyles = `
   border: 1px solid #4a90e2;
 `
 
-const customInputHtmlString = `
-  <input 
-    id="custom-derivation-input" 
-    style="${baseStyles + selectedStyles}" 
-    type="text" 
-    placeholder="custom derivation path" 
-    onchange="window.handleCustomInput(this.value)" />
+const errorStyles = `
+  border: 1px solid #e2504a;
 `
 
-function derivationPath() {
+const errorMsgStyles = `
+  font-size: 0.889em;
+  font-family: inherit;
+  color: #e2504a;
+`
+
+const customInputHtmlString = (error?: string) => {
+  return `
+    <input 
+      id="custom-derivation-input" 
+      style="${baseStyles + selectedStyles + (error ? errorStyles : '')}" 
+      type="text" 
+      placeholder="custom derivation path" 
+      onchange="window.handleCustomInput(this.value)" />
+    `
+}
+
+function derivationPath(options: {
+  heading: string
+  description: string
+  icon: string
+}) {
+  const { heading, description, icon } = options
+
   let state = {
     completed: false,
     showCustomInput: false,
-    dPath: ''
+    dPath: '',
+    loading: false,
+    error: ''
   }
 
-  function derivationSelectHtmlString(
-    walletName: string,
-    showCustomInput: boolean
-  ) {
+  function derivationSelectHtmlString(walletName: string) {
     return `
       <div id="derivation-select" style="${styles}">
         ${derivationPaths[walletName]
@@ -81,11 +99,22 @@ function derivationPath() {
           })
           .join(' ')}
         ${
-          showCustomInput
-            ? customInputHtmlString
+          state.showCustomInput
+            ? customInputHtmlString(state.error)
             : `<button style="${baseStyles +
                 buttonStyles}" onclick="window.handleDerivationClick(this)" data-path="custom">Custom Path</button>`
         }
+        ${
+          state.loading
+            ? `<div class="bn-onboard-custom bn-onboard-loading" style="margin-top: 1rem">
+                <div class="bn-onboard-loading-first"></div>
+                <div class="bn-onboard-loading-second"></div>
+                <div class="bn-onboard-loading-third"</div>
+              </div>`
+            : state.error
+            ? `<span style="${errorMsgStyles}">${state.error}</span>`
+            : ''
+        }
       </div>
     `
   }
@@ -94,20 +123,23 @@ function derivationPath() {
     state.completed = false
     state.showCustomInput = false
     state.dPath = ''
+    state.loading = false
+    state.error = ''
   }
 
   function checkModule(
     stateAndHelpers: StateAndHelpers
   ): WalletCheckModal | undefined {
-    const { wallet, address } = stateAndHelpers
+    const { wallet } = stateAndHelpers
 
-    if (!address && wallet && wallet.type === 'hardware' && !state.completed) {
+    if (wallet && wallet.type === 'hardware' && !state.completed) {
       const handleCustomInput = () => {
         const input = <HTMLInputElement>(
           document.getElementById('custom-derivation-input')
         )
 
         state.dPath = input && input.value
+        state.error = ''
       }
 
       const handleDerivationClick = (button: any) => {
@@ -121,6 +153,7 @@ function derivationPath() {
             input && input.focus()
           }, 100)
         } else {
+          state.error = ''
           state.showCustomInput = false
           state.dPath = selectedPath
         }
@@ -134,29 +167,42 @@ function derivationPath() {
       ;(window as any).handleDerivationClick = handleDerivationClick
 
       return {
-        heading: 'Hardware Wallet Connect',
-        description: `Please select a derivation path to connect your ${wallet.name} accounts, or select custom to input a custom path:`,
+        heading: heading || 'Hardware Wallet Connect',
+        description:
+          description ||
+          `Please select a derivation path to connect your ${wallet.name} accounts, or select custom to input a custom path:`,
         eventCode: 'derivationPath',
-        html: derivationSelectHtmlString(wallet.name, state.showCustomInput),
+        html: derivationSelectHtmlString(wallet.name),
         button: {
           text: 'Connect',
-          onclick: () => {
-            wallet.provider.setPath(
-              state.dPath || derivationPaths[wallet.name][0].path
+          onclick: async () => {
+            state.loading = true
+            const path = state.dPath || derivationPaths[wallet.name][0].path
+            const validPath = await wallet.provider.setPath(
+              path,
+              state.showCustomInput
             )
+
+            if (!validPath) {
+              state.error = `${path} is not a valid derivation path`
+              state.loading = false
+              return
+            }
+
+            state.error = ''
+
             wallet.connect &&
               wallet.connect().then(() => {
                 // @TODO add path to local store
 
                 deleteWindowProperties()
+                state.loading = false
                 state.completed = true
               })
           }
         },
 
-        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>
-        `
+        icon: icon || usbIcon
       }
     }
   }