x-button is usable in x-menu, so start refactoring wallet and account x-select elemen...

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index ff966a4d99517bcbbafbabe2b15481ba390f0312..b37e0180e0060a77f4f7651424a0dae7d2d4dfbd 100644 (file)
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -61,12 +61,18 @@
                }
 
                async function updateWallet () {
-                       const wallet = document.querySelector('#wallet').value
-                       if (wallet !== '_new' && wallet !== '_import' && wallet !== '_ledger') {
-                               return await updateAccount()
-                       }
-                       if (wallet === '_ledger') {
-                               return await LedgerWallet.create()
+                       const wallet = document.querySelector('#wallet')
+                       const account = document.querySelector('#account')
+                       if (wallet.value === '_ledger') {
+                               try {
+                                       await LedgerWallet.create()
+                                       account.removeAttribute('disabled')
+                               } catch (err) {
+                                       account.setAttribute('disabled', '')
+                                       notify.error(`Error connecting to Ledger: ${err}`)
+                               } finally {
+                                       return
+                               }
                        }
                        const form = document.querySelector('#wallet-form')
                        const walletType = document.querySelector('#wallet-form-wallet-type')
@@ -104,7 +110,7 @@
                        const walletSelect = document.querySelector('#wallet')
                        const form = document.querySelector('#wallet-form')
                        const name = form.querySelector('#wallet-form-name x-input').value
-                       if (name === '_new' || name === '_import' || name === '_ledger') {
+                       if (name === '_ledger') {
                                walletSelect.value = null
                                notify.warn(`Invalid wallet name "${name}".`)
                                return
@@ -175,7 +181,7 @@
                        const importTypeContainer = document.querySelector('#wallet-form-import-type')
                        const importType = importTypeContainer.firstChild
                        const saltContainer = document.querySelector('#wallet-form-salt')
-                       if (walletType.value === 'bip44' && importType.value === 'mnemonic') {
+                       if (walletType.value === 'bip44' && importType.value !== 'seed') {
                                saltContainer.classList.remove('hide')
                        } else {
                                saltContainer.classList.add('hide')
@@ -206,7 +212,13 @@
                }
 
                async function deriveAccounts () {
-                       const wallet = document.querySelector('#wallet').value
+                       const wallet = document.querySelector('#wallet')
+                       const account = document.querySelector('#account')
+                       if (!wallet.value) {
+                               account.value = null
+                               notify.error(`Select a wallet first`)
+                               return
+                       }
                        const form = btn.querySelector('#account-form')
                        await console.log('deriveAccounts')
                }
@@ -271,6 +283,11 @@
     dialog .hide {
       display: none;
     }
+               x-button[skin="nav"].menubtn {
+                       justify-content: flex-start;
+      padding: 0 12px 0 23px;
+                       width: 100%;
+               }
     nav {
       align-items: flex-end;
       bottom: 0;
@@ -309,100 +326,131 @@
                <x-box id="wallets">
                        <x-select id="wallet" style="width:100%;" onchange="updateWallet()">
                                <x-menu>
-                                       <x-menuitem value="_new">
-                                               <x-label>New</x-label>
-                                       </x-menuitem>
-                                       <x-menuitem value="_import">
-                                               <x-label>Import</x-label>
-                                       </x-menuitem>
+                                       <x-menuitem value toggled style="display: none;"><x-label>Wallets</x-label></x-menuitem>
+                                       <x-button skin="nav" class="menubtn">
+                                               <x-icon href="#wallet2"></x-icon>
+                                               <x-label>New Wallet</x-label>
+                                               <dialog id="wallet-new">
+                                                       <x-box vertical>
+                                                               <x-box id="wallet-new-name">
+                                                                       <x-label>Name</x-label>
+                                                                       <x-input type="text"></x-input>
+                                                               </x-box>
+                                                               <x-box id="wallet-new-wallet-type">
+                                                                       <x-radios required onchange="updateWalletForm()">
+                                                                               <x-radio value="bip44"><x-label>BIP-44</x-label></x-radio>
+                                                                               <x-radio value="blake2b"><x-label>BLAKE2b</x-label></x-radio>
+                                                                       </x-radios>
+                                                               </x-box>
+                                                               <x-box id="wallet-new-salt" class="hide">
+                                                                       <x-label>Salt</x-label>
+                                                                       <x-input type="password">Optional</x-input>
+                                                               </x-box>
+                                                               <x-box id="wallet-new-password">
+                                                                       <x-label>Lock</x-label>
+                                                                       <x-input type="password" required><x-label>Password</x-label></x-input>
+                                                               </x-box>
+                                                               <x-box>
+                                                                       <x-buttons>
+                                                                               <x-button onclick="document.querySelector('#wallet-new').close()">
+                                                                                       Cancel
+                                                                               </x-button>
+                                                                               <x-button onclick="createWallet().then(w => { console.log(w);showWallets() })">
+                                                                                       OK
+                                                                               </x-button>
+                                                                       </x-buttons>
+                                                               </x-box>
+                                                       </x-box>
+                                               </dialog>
+                                       </x-button>
+                                       <x-button skin="nav" class="menubtn">
+                                               <x-icon href="#box-arrow-down"></x-icon>
+                                               <x-label>Import Wallet</x-label>
+                                               <dialog id="wallet-import">
+                                                       <x-box vertical>
+                                                               <x-box id="wallet-import-name">
+                                                                       <x-label>Name</x-label>
+                                                                       <x-input type="text"></x-input>
+                                                               </x-box>
+                                                               <x-box id="wallet-import-wallet-type">
+                                                                       <x-radios required onchange="updateWalletForm()">
+                                                                               <x-radio value="bip44"><x-label>BIP-44</x-label></x-radio>
+                                                                               <x-radio value="blake2b"><x-label>BLAKE2b</x-label></x-radio>
+                                                                       </x-radios>
+                                                               </x-box>
+                                                               <x-box id="wallet-import-type" class="hide">
+                                                                       <x-select onchange="updateWalletForm()">
+                                                                               <x-menu>
+                                                                                       <x-menuitem value="mnemonic"><x-label>Import mnemonic</x-label></x-menuitem>
+                                                                                       <x-menuitem value="seed"><x-label>Import seed</x-label></x-menuitem>
+                                                                               </x-menu>
+                                                                       </x-select>
+                                                               </x-box>
+                                                               <x-box id="wallet-import-value" class="hide">
+                                                                       <x-label style="text-transform:capitalize"></x-label>
+                                                                       <x-input type="password"></x-input>
+                                                               </x-box>
+                                                               <x-box id="wallet-import-salt" class="hide">
+                                                                       <x-label>Salt</x-label>
+                                                                       <x-input type="password">Optional</x-input>
+                                                               </x-box>
+                                                               <x-box id="wallet-import-password">
+                                                                       <x-label>Lock</x-label>
+                                                                       <x-input type="password" required><x-label>Password</x-label></x-input>
+                                                               </x-box>
+                                                               <x-box>
+                                                                       <x-buttons>
+                                                                               <x-button onclick="document.querySelector('#wallet-import').close()">
+                                                                                       Cancel
+                                                                               </x-button>
+                                                                               <x-button onclick="importWallet().then(w => { console.log(w);showWallets() })">
+                                                                                       OK
+                                                                               </x-button>
+                                                                       </x-buttons>
+                                                               </x-box>
+                                                       </x-box>
+                                               </dialog>
+                                       </x-button>
                                        <hr />
-                                       <x-menuitem value="_ledger">
+                                       <x-menuitem>
+                                               <x-icon href="#usb-drive"></x-icon>
                                                <x-label>Ledger</x-label>
                                        </x-menuitem>
                                        <hr />
                                </x-menu>
                        </x-select>
-                       <dialog id="wallet-form">
-                               <x-box vertical>
-                                       <x-box id="wallet-form-name">
-                                               <x-label>Name</x-label>
-                                               <x-input type="text"></x-input>
-                                       </x-box>
-                                       <x-box id="wallet-form-wallet-type">
-                                               <x-radios required onchange="updateWalletForm()">
-                                                       <x-radio value="bip44"><x-label>BIP-44</x-label></x-radio>
-                                                       <x-radio value="blake2b"><x-label>BLAKE2b</x-label></x-radio>
-                                               </x-radios>
-                                       </x-box>
-                                       <x-box id="wallet-form-import-type" class="hide">
-                                               <x-select onchange="updateWalletForm()">
-                                                       <x-menu>
-                                                               <x-menuitem value="mnemonic"><x-label>Import mnemonic</x-label></x-menuitem>
-                                                               <x-menuitem value="seed"><x-label>Import seed</x-label></x-menuitem>
-                                                       </x-menu>
-                                               </x-select>
-                                       </x-box>
-                                       <x-box id="wallet-form-import-value" class="hide">
-                                               <x-label style="text-transform:capitalize"></x-label>
-                                               <x-input type="password"></x-input>
-                                       </x-box>
-                                       <x-box id="wallet-form-salt" class="hide">
-                                               <x-label>Salt</x-label>
-                                               <x-input type="password">Optional</x-input>
-                                       </x-box>
-                                       <x-box id="wallet-form-password">
-                                               <x-label>Lock</x-label>
-                                               <x-input type="password" required><x-label>Password</x-label></x-input>
-                                       </x-box>
-                                       <x-box>
-                                               <x-buttons>
-                                                       <x-button onclick="document.querySelector('#wallet-form').close()">
-                                                               Cancel
-                                                       </x-button>
-                                                       <x-button onclick="createWallet().then(w => { console.log(w);showWallets() })">
-                                                               OK
-                                                       </x-button>
-                                               </x-buttons>
-                                       </x-box>
-                               </x-box>
-                       </dialog>
                </x-box><!-- end #wallets-->
                <x-box id="accounts">
-                       <x-select id="account" style="width:100%;" onchange="updateAccount()">
+                       <x-select id="account" style="width:100%;" onchange="updateAccount()" disabled>
                                <x-menu>
-                                       <x-menuitem value="_new">
-                                               <x-label>New</x-label>
-                                       </x-menuitem>
-                                       <x-menuitem value="_import">
-                                               <x-label>Import</x-label>
-                                       </x-menuitem>
+                                       <x-menuitem value toggled style="display: none;"><x-label>Accounts</x-label></x-menuitem>
+                                       <x-button skin="nav" class="menubtn">
+                                               <x-icon href="#cash-stack"></x-icon>
+                                               <x-label>New Account</x-label>
+                                               <dialog id="account-new">
+                                                       <x-box vertical>
+                                                               <x-box>
+                                                                       <x-label>Name</x-label>
+                                                                       <x-input type="text"></x-input>
+                                                               </x-box>
+                                                               <x-box>
+                                                                       <x-label>Index (optional)</x-label>
+                                                                       <x-numberinput min="0" max="2147483647"></x-numberinput>
+                                                               </x-box>
+                                                               <x-buttons>
+                                                                       <x-button onclick="document.querySelector('#account-new').close()">
+                                                                               Cancel
+                                                                       </x-button>
+                                                                       <x-button onclick="deriveAccounts().then(w => { console.log(w);showWallets() })">
+                                                                               OK
+                                                                       </x-button>
+                                                               </x-buttons>
+                                                       </x-box>
+                                               </dialog>
+                                       </x-button>
                                        <hr />
                                </x-menu>
                        </x-select>
-                       <x-button>
-                               <x-icon href="#cash-stack"></x-icon>
-                               <x-label>New Account</x-label>
-                               <dialog id="account-form">
-                                       <x-box vertical>
-                                               <x-box>
-                                                       <x-label>Name</x-label>
-                                                       <x-input type="text"></x-input>
-                                               </x-box>
-                                               <x-box>
-                                                       <x-label>Index (optional)</x-label>
-                                                       <x-numberinput min="0" max="2147483647"></x-numberinput>
-                                               </x-box>
-                                               <x-buttons>
-                                                       <x-button onclick="document.querySelector('#account-form').close()">
-                                                               Cancel
-                                                       </x-button>
-                                                       <x-button onclick="deriveAccounts(this).then(w => { console.log(w);showWallets() })">
-                                                               OK
-                                                       </x-button>
-                                               </x-buttons>
-                                       </x-box>
-                               </dialog>
-                       </x-button>
                </x-box><!-- end #accounts -->
        </header>
        <main>