From 369cd466ad165e2c2efc55bdd13270ec8a2accfe Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Sat, 19 Oct 2024 02:47:42 -0700
Subject: [PATCH] x-button is usable in x-menu, so start refactoring wallet and
 account x-select elements to use this technique.

---
 app/pages/nemo-wallet.html | 230 ++++++++++++++++++++++---------------
 1 file changed, 139 insertions(+), 91 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index ff966a4..b37e018 100644
--- 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>
-- 
2.34.1