From ff51ab7ecb8ca950e51e33ede60b4c6001902fbb Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Sat, 19 Oct 2024 23:54:55 -0700
Subject: [PATCH] x-select is getting overly complicated and does not comply in
 general with HTML specs on select options, so start converting to native
 browser elements with the goal of possibly just eliminating Xel entirely.
 Also start building out data loading from session storage and account
 updating.

---
 app/pages/nemo-wallet.html | 363 +++++++++++++++++++++----------------
 1 file changed, 207 insertions(+), 156 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index de3ceed..e12f4f7 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -31,12 +31,31 @@
 			console.log('loaded libnemo')
 		}
 		async function loadUx () {
+			console.log('loading data')
+			const wallets = await getFromStorage('wallets')
+			for (const wallet of wallets) {
+				const { id, name } = JSON.parse(wallet)
+				const option = document.createElement('option')
+				option.value = id
+				option.innerText = name
+				wallet.appendChild(option)
+			}
+			const wallet = document.querySelector('#wallet')
+			if (wallet.value === '_new' || wallet.value === '_import') {
+				wallet.value = ''
+			}
+			const account = document.querySelector('#account')
+			if (account.value === '_new') {
+				account.value = ''
+			}
 			try {
 				document.querySelector(location.hash).classList.add('show')
 			} catch (err) {
 				location.hash = '#transact'
 			}
+			console.log('loaded data')
 		}
+
 		function switchPage (evt) {
 			console.log(evt)
 			const oldHash = new URL(evt.oldURL)?.hash
@@ -45,13 +64,14 @@
 				document.querySelector(oldHash)?.classList.remove('show')
 			}
 			try {
-			if (newHash) {
-				document.querySelector(newHash).classList.add('show')
+				if (newHash) {
+					document.querySelector(newHash).classList.add('show')
 				}
 			} catch (err) {
 				notify.warn(`Page not found`)
 			}
 		}
+
 		function getWalletClass (algorithm) {
 			switch (algorithm) {
 				case 'blake2b': {
@@ -67,6 +87,12 @@
 		async function updateWallet () {
 			const wallet = document.querySelector('#wallet')
 			const account = document.querySelector('#account')
+			if (wallet.value === '_new') {
+				return await document.querySelector('#wallet-new').showModal()
+			}
+			if (wallet.value === '_import') {
+				return await document.querySelector('#wallet-import').showModal()
+			}
 			if (wallet.value === '_ledger') {
 				try {
 					await LedgerWallet.create()
@@ -100,14 +126,42 @@
 			return await form.showModal()
 		}
 
-		function spinner (btn) {
-			const label = btn.firstElementChild
-			const spinner = document.createElement('x-throbber')
-			spinner.size = 'small'
-			spinner.style.width = `${label.scrollWidth}px`
-			btn.replaceChildren(spinner)
-			// at some point then...
-			// btn.replaceChildren(label)
+		async function updateAccount () {
+			const walletId = document.querySelector('#wallet').value
+			const account = document.querySelector('#account')
+			const wallets = await getFromStorage('wallets')
+			const { id, algorithm } = wallets.find(wallet => {
+				const { id } = JSON.parse(wallet)
+				return id === walletId
+			})
+			try {
+				const walletClass = getWalletClass(algorithm)
+				const wallet = await walletClass.fromId(id)
+				const accounts = await wallet.accounts()
+			} catch (err) {
+				notify.error(err)
+				return
+			}
+			const form = document.querySelector('#wallet-form')
+			const walletType = document.querySelector('#wallet-form-wallet-type')
+			const importType = document.querySelector('#wallet-form-import-type')
+			const importValue = document.querySelector('#wallet-form-import-value')
+			const salt = document.querySelector('#wallet-form-salt')
+			walletType.querySelector('x-radios').value = null
+			importType.querySelector('x-select').value = null
+			importValue.querySelector('x-input').value = null
+			salt.querySelector('x-input').value = null
+			if (wallet.value === '_new') {
+				importType.classList.add('hide')
+				importValue.classList.add('hide')
+				salt.classList.remove('hide')
+			}
+			if (wallet.value === '_import') {
+				importType.classList.remove('hide')
+				importValue.classList.remove('hide')
+				salt.classList.add('hide')
+			}
+			return await form.showModal()
 		}
 
 		async function createWallet () {
@@ -136,13 +190,11 @@
 				}
 				await addToStorage(`wallets`, JSON.stringify(walletData))
 
-				const menu = document.querySelector('#wallet > x-menu')
-				const menuitem = document.createElement('x-menuitem')
-				menuitem.value = walletData.id
-				menu.appendChild(menuitem)
-				const label = document.createElement('x-label')
-				label.innerText = walletData.name
-				menuitem.appendChild(label)
+				const select = document.querySelector('#wallet')
+				const option = document.createElement('option')
+				option.value = walletData.id
+				option.innerText = walletData.name
+				select.appendChild(option)
 				walletSelect.value = walletData.id
 			} catch (err) {
 				label?.remove()
@@ -174,6 +226,21 @@
 			})
 		}
 
+		function getFromStorage (key) {
+			return new Promise((resolve, reject) => {
+				try {
+					const item = JSON.parse(sessionStorage.getItem(key) ?? '[]')
+					if (!Array.isArray(item)) {
+						throw new TypeError(`Storage item is not an array`)
+					}
+					resolve(item)
+				} catch (err) {
+					console.error(err)
+					reject(err)
+				}
+			})
+		}
+
 		function updateWalletForm (id) {
 			const form = document.querySelector(id)
 			if (!form) {
@@ -293,14 +360,14 @@
     .page.show {
       display: initial;
     }
+    .hide {
+      display: none;
+    }
     h1 {
       text-align: center;
     }
     dialog {
       padding: 1rem !important;
-    }
-    dialog .hide {
-      display: none;
     }
 		x-button[skin="nav"].menubtn {
 			justify-content: flex-start;
@@ -346,149 +413,133 @@
 		<!-- Wallet Select -->
 
 		<x-box id="wallets">
+			<label for="wallet">Wallet</label>
 			<select id="wallet" style="width:100%;" onchange="updateWallet()">
-				<x-menu>
-					<x-menuitem value toggled style="display: none;"><x-label>Wallets</x-label></x-menuitem>
-
-					<x-button skin="nav" class="menubtn">
-						<x-icon href="#folder-plus"></x-icon>
-						<x-label>New Wallet</x-label>
-
-						<!-- New Wallet Form -->
-
-						<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-algorithm">
-									<x-label>Algorithm</x-label>
-									<x-radios required ontoggle="updateWalletForm('#wallet-new')">
-										<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="closeForm('#wallet-new')">
-											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>
-
-						<!-- Import Wallet Form -->
-
-						<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-algorithm">
-									<x-radios required onchange="updateWalletForm('#wallet-import')">
-										<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('#wallet-import')">
-										<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="closeForm('#wallet-import')">
-											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>
-						<x-icon href="#usb-drive"></x-icon>
-						<x-label>Ledger</x-label>
-					</x-menuitem>
-					<hr />
-				</x-menu>
-				</x-select>
+				<option value="" disabled>Choose...</option>
+				<hr />
+				<option value="_new">New</option>
+				<option value="_import">Import</option>
+				<hr />
+				<option value="_ledger">Ledger</option>
+				<hr />
+			</select>
 		</x-box>
 
+		<!-- New Wallet Form -->
+
+		<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-algorithm">
+					<x-label>Algorithm</x-label>
+					<x-radios required ontoggle="updateWalletForm('#wallet-new')">
+						<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"><x-label>Optional</x-label></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="closeForm('#wallet-new')">
+							Cancel
+						</x-button>
+						<x-button onclick="createWallet().then(w => { console.log(w);showWallets() })">
+							OK
+						</x-button>
+					</x-buttons>
+				</x-box>
+			</x-box>
+		</dialog>
+
+		<!-- Import Wallet Form -->
+
+		<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-algorithm">
+					<x-radios required onchange="updateWalletForm('#wallet-import')">
+						<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('#wallet-import')">
+						<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="closeForm('#wallet-import')">
+							Cancel
+						</x-button>
+						<x-button onclick="importWallet().then(w => { console.log(w);showWallets() })">
+							OK
+						</x-button>
+					</x-buttons>
+				</x-box>
+			</x-box>
+		</dialog>
+
 		<!-- Account Select -->
 
 		<x-box id="accounts">
-			<x-select id="account" style="width:100%;" onchange="updateAccount()" disabled>
-				<x-menu>
-					<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>
-
-						<!-- New Account Form -->
-
-						<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>
+			<label for="account">Account</label>
+			<select id="account" style="width:100%;" onchange="updateAccount()">
+				<option value="" disabled>Choose...</option>
+				<hr />
+				<option value="_new">New</option>
+				<hr />
+			</select>
+		</x-box><!-- New Account Form -->
+
+		<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>
-					<hr />
-				</x-menu>
-			</x-select>
-		</x-box>
+					<x-button onclick="deriveAccounts().then(w => { console.log(w);showWallets() })">
+						OK
+					</x-button>
+				</x-buttons>
+			</x-box>
+		</dialog>
 	</header>
 
 	<!-- Main Content Pages -->
-- 
2.34.1