From 3e86054b32e88d3a16aabce0edaad920b88ab123 Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Tue, 29 Oct 2024 22:19:52 -0700
Subject: [PATCH] Fix form cancellation function call. Start building history
 loader, although iframe probably won't work but at least we got a single
 account loader out of it. Fix account creation and add address to session
 storage.

---
 app/pages/nemo-wallet.html | 256 +++++++++++++++++++------------------
 1 file changed, 135 insertions(+), 121 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index 2d3b4a1..63c4e0f 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -267,7 +267,7 @@
 				option?.remove()
 				notify.error(err.msg)
 			} finally {
-				await form.close()
+				await cancelForm('wallet-new')
 				return wallet
 			}
 		}
@@ -318,13 +318,24 @@
 					}
 				}
 				default: {
-					const historyIframe = document.getElementById('history-iframe')
-					historyIframe.src = `https://spynano.org/account/${account.address}`
-					return
+					await loadHistory()
 				}
 			}
 		}
 
+		async function loadHistory () {
+			const historyIframe = document.getElementById('history-iframe')
+			const account = await loadAccount()
+			if (account != null) {
+				historyIframe.classList.remove('hide')
+				historyIframe.src = `https://spynano.org/account/${account.address}`
+			} else {
+				historyIframe.src = ''
+				historyIframe.classList.add('hide')
+			}
+			return
+		}
+
 		async function reloadWalletSelect () {
 			const wallets = await loadWallets()
 			const walletOptions = wallets.map(w => {
@@ -375,6 +386,13 @@
 			return []
 		}
 
+		async function loadAccount () {
+			const accountSelect = document.getElementById('account')
+			const accounts = await loadAccounts()
+			const account = accounts?.find(a => a.index === +accountSelect.value)
+			return account
+		}
+
 		async function createAccount () {
 			let account, option, wallet
 			const accountSelect = document.getElementById('account')
@@ -395,15 +413,17 @@
 			const password = document.getElementById('account-new-password-input')?.value
 			try {
 				await wallet.unlock(password)
-				const account = await wallet.accounts(+index)
+				const accounts = await wallet.accounts(+index)
 				await wallet.lock(password)
+				const account = accounts[0]
 				const accountData = {
+					name: `${index}${name ? ': ' : ''}${name}`,
 					walletId: wallet.id,
-					index: account.index,
-					name: `${index}${name ? ': ' : ''}${name}`
+					index: await account.index,
+					address: await account.address
 				}
 				await addToStorage(`accounts`, JSON.stringify(accountData))
-				option = new Option(accountData.name, accountData.id, false, true)
+				option = new Option(accountData.name, accountData.index, false, true)
 				accountSelect.add(option)
 				await selectAccount()
 			} catch (err) {
@@ -412,7 +432,7 @@
 				console.error(err)
 				notify.error(`Error creating account`)
 			} finally {
-				await form.close()
+				await cancelForm('account-new')
 				return account
 			}
 		}
@@ -724,128 +744,122 @@
 		<!-- New Wallet Form -->
 
 		<div id="wallet-new" class="page">
-			<form id="wallet-new-form">
-				<h1>New Wallet</h1>
-				<div class="flex-y stretch">
-					<div id="wallet-new-name" class="flex-x left mid">
-						<label for="wallet-new-name-input">Name</label>
-						<input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" maxlength="80" pattern="[^_].*"
-							placeholder="My Wallet" />
-					</div>
-					<div id="wallet-new-algorithm" class="flex-x left mid">
-						<label for="wallet-new-algorithm-select">Algorithm</label>
-						<select id="wallet-new-algorithm-select" name="wallet-new-algorithm" autocomplete="off"
-							onchange="updateWalletForm('wallet-new')" required>
-							<option disabled selected value>Choose...</option>
-							<option value="bip44">BIP-44</option>
-							<option value="blake2b">BLAKE2b</option>
-						</select>
-					</div>
-					<div id="wallet-new-salt" class="flex-x left mid hide">
-						<label for="wallet-new-salt-input">Salt</label>
-						<input id="wallet-new-salt-input" name="wallet-new-salt" type="password" autocomplete="off"
-							placeholder="Optional" />
-					</div>
-					<div id="wallet-new-password" class="flex-x left mid">
-						<label for="wallet-new-password-input">Lock</label>
-						<input id="wallet-new-password-input" name="wallet-new-password" type="password" autocomplete="off"
-							placeholder="Password" required />
-					</div>
-					<hr />
-					<div class="grid">
-						<div class="col-3"></div>
-						<button id="wallet-new-cancel" class="cancel col-3">Cancel</button>
-						<button id="wallet-new-ok" class="col-3"
-							onclick="createWallet().then(w => { console.log(w) })">OK</button>
-					</div>
+			<h1>New Wallet</h1>
+			<div class="flex-y stretch">
+				<div id="wallet-new-name" class="flex-x left mid">
+					<label for="wallet-new-name-input">Name</label>
+					<input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" maxlength="80" pattern="[^_].*"
+						placeholder="My Wallet" />
+				</div>
+				<div id="wallet-new-algorithm" class="flex-x left mid">
+					<label for="wallet-new-algorithm-select">Algorithm</label>
+					<select id="wallet-new-algorithm-select" name="wallet-new-algorithm" autocomplete="off"
+						onchange="updateWalletForm('wallet-new')" required>
+						<option disabled selected value>Choose...</option>
+						<option value="bip44">BIP-44</option>
+						<option value="blake2b">BLAKE2b</option>
+					</select>
+				</div>
+				<div id="wallet-new-salt" class="flex-x left mid hide">
+					<label for="wallet-new-salt-input">Salt</label>
+					<input id="wallet-new-salt-input" name="wallet-new-salt" type="password" autocomplete="off"
+						placeholder="Optional" />
 				</div>
-			</form>
+				<div id="wallet-new-password" class="flex-x left mid">
+					<label for="wallet-new-password-input">Lock</label>
+					<input id="wallet-new-password-input" name="wallet-new-password" type="password" autocomplete="off"
+						placeholder="Password" required />
+				</div>
+				<hr />
+				<div class="grid">
+					<div class="col-3"></div>
+					<button id="wallet-new-cancel" class="cancel col-3">Cancel</button>
+					<button id="wallet-new-ok" class="col-3"
+						onclick="createWallet().then(w => { console.log(w) })">OK</button>
+				</div>
+			</div>
 		</div>
 
 		<!-- Import Wallet Form -->
 
 		<div id="wallet-import" class="page">
-			<form id="wallet-import-form">
-				<h1>Import Wallet</h1>
-				<div class="flex-y stretch">
-					<div id="wallet-import-name" class="flex-x left mid">
-						<label for="wallet-import-name-input">Name</label>
-						<input id="wallet-import-name-input" name="wallet-import-name" autocomplete="off" maxlength="80"
-							pattern="[^_].*" placeholder="My Wallet" />
-					</div>
-					<div id="wallet-import-algorithm" class="flex-x left mid">
-						<label for="wallet-import-algorithm-select">Algorithm</label>
-						<select id="wallet-import-algorithm-select" name="wallet-import-algorithm" autocomplete="off"
-							onchange="updateWalletForm('wallet-import')" required>
-							<option disabled selected value>Choose...</option>
-							<option value="bip44">BIP-44</option>
-							<option value="blake2b">BLAKE2b</option>
-						</select>
-					</div>
-					<div id="wallet-import-type" class="flex-x left mid hide">
-						<label for="wallet-import-type-select">Type</label>
-						<select id="wallet-import-type-select" name="wallet-import-type" autocomplete="off"
-							onchange="updateWalletForm('wallet-import')" required>
-							<option disabled selected value>Choose...</option>
-							<option value="mnemonic">Import mnemonic</option>
-							<option value="seed">Import seed</option>
-						</select>
-					</div>
-					<div id="wallet-import-value" class="flex-x left mid hide">
-						<label for="wallet-import-value-input" style="text-transform:capitalize"></label>
-						<input id="wallet-import-value-input" name="wallet-import-value" type="password" autocomplete="off"
-							placeholder="Password" required />
-					</div>
-					<div id="wallet-import-salt" class="flex-x left mid hide">
-						<label for="wallet-import-salt-input">Salt</label>
-						<input id="wallet-import-salt-input" name="wallet-import-salt" type="password" autocomplete="off"
-							placeholder="Optional" />
-					</div>
-					<div id="wallet-import-password" class="flex-x left mid">
-						<label for="wallet-import-password-input">Lock</label>
-						<input id="wallet-import-password-input" name="wallet-import-password" type="password" autocomplete="off"
-							placeholder="Password" required />
-					</div>
-					<hr />
-					<div class="grid">
-						<div class="col-3"></div>
-						<button id="wallet-import-cancel" class="cancel col-3">Cancel</button>
-						<button id="wallet-import-ok" class="col-3"
-							onclick="importWallet().then(w => { console.log(w) })">OK</button>
-					</div>
+			<h1>Import Wallet</h1>
+			<div class="flex-y stretch">
+				<div id="wallet-import-name" class="flex-x left mid">
+					<label for="wallet-import-name-input">Name</label>
+					<input id="wallet-import-name-input" name="wallet-import-name" autocomplete="off" maxlength="80"
+						pattern="[^_].*" placeholder="My Wallet" />
+				</div>
+				<div id="wallet-import-algorithm" class="flex-x left mid">
+					<label for="wallet-import-algorithm-select">Algorithm</label>
+					<select id="wallet-import-algorithm-select" name="wallet-import-algorithm" autocomplete="off"
+						onchange="updateWalletForm('wallet-import')" required>
+						<option disabled selected value>Choose...</option>
+						<option value="bip44">BIP-44</option>
+						<option value="blake2b">BLAKE2b</option>
+					</select>
+				</div>
+				<div id="wallet-import-type" class="flex-x left mid hide">
+					<label for="wallet-import-type-select">Type</label>
+					<select id="wallet-import-type-select" name="wallet-import-type" autocomplete="off"
+						onchange="updateWalletForm('wallet-import')" required>
+						<option disabled selected value>Choose...</option>
+						<option value="mnemonic">Import mnemonic</option>
+						<option value="seed">Import seed</option>
+					</select>
+				</div>
+				<div id="wallet-import-value" class="flex-x left mid hide">
+					<label for="wallet-import-value-input" style="text-transform:capitalize"></label>
+					<input id="wallet-import-value-input" name="wallet-import-value" type="password" autocomplete="off"
+						placeholder="Password" required />
+				</div>
+				<div id="wallet-import-salt" class="flex-x left mid hide">
+					<label for="wallet-import-salt-input">Salt</label>
+					<input id="wallet-import-salt-input" name="wallet-import-salt" type="password" autocomplete="off"
+						placeholder="Optional" />
+				</div>
+				<div id="wallet-import-password" class="flex-x left mid">
+					<label for="wallet-import-password-input">Lock</label>
+					<input id="wallet-import-password-input" name="wallet-import-password" type="password" autocomplete="off"
+						placeholder="Password" required />
+				</div>
+				<hr />
+				<div class="grid">
+					<div class="col-3"></div>
+					<button id="wallet-import-cancel" class="cancel col-3">Cancel</button>
+					<button id="wallet-import-ok" class="col-3"
+						onclick="importWallet().then(w => { console.log(w) })">OK</button>
 				</div>
-			</form>
+			</div>
 		</div>
 
 		<!-- New Account Form -->
 
 		<div id="account-new" class="page">
-			<form id="account-new-form">
-				<h1>New Account</h1>
-				<div class="flex-y stretch">
-					<div id="account-new-name" class="flex-x left mid">
-						<label for="account-new-name-input">Name</label>
-						<input id="account-new-name-input" name="account-new-name" form="account-new-form" autocomplete="off" maxlength="80"
-							pattern="[^_].*" placeholder="My Account" />
-					</div>
-					<div id="account-new-index" class="flex-x left mid">
-						<label for="account-new-index-input">Index</label>
-						<input id="account-new-index-input" name="account-new-index" form="account-new-form" type="number" autocomplete="off" min="0"
-							max="2147483647" required value="0" />
-					</div>
-					<div id="account-new-password" class="flex-x left mid">
-						<label for="account-new-password-input">Unlock</label>
-						<input id="account-new-password-input" name="account-new-password" form="account-new-form" autocomplete="off" type="password"
-							placeholder="Password" required />
-					</div>
-					<div class="grid">
-						<div class="col-3"></div>
-						<button id="account-new-cancel" form="account-new-form" class="cancel col-3" type="reset">Cancel</button>
-						<button id="account-new-ok" form="account-new-form" class="col-3"
-							onclick="createAccount().then(a => { console.log(a) })">OK</button>
-					</div>
+			<h1>New Account</h1>
+			<div class="flex-y stretch">
+				<div id="account-new-name" class="flex-x left mid">
+					<label for="account-new-name-input">Name</label>
+					<input id="account-new-name-input" name="account-new-name" autocomplete="off" maxlength="80"
+						pattern="[^_].*" placeholder="My Account" />
+				</div>
+				<div id="account-new-index" class="flex-x left mid">
+					<label for="account-new-index-input">Index</label>
+					<input id="account-new-index-input" name="account-new-index" type="number" autocomplete="off" min="0"
+						max="2147483647" required value="0" />
+				</div>
+				<div id="account-new-password" class="flex-x left mid">
+					<label for="account-new-password-input">Unlock</label>
+					<input id="account-new-password-input" name="account-new-password" autocomplete="off" type="password"
+						placeholder="Password" required />
 				</div>
-			</form>
+				<div class="grid">
+					<div class="col-3"></div>
+					<button id="account-new-cancel" class="cancel col-3" type="reset">Cancel</button>
+					<button id="account-new-ok" class="col-3"
+						onclick="createAccount().then(a => { console.log(a) })">OK</button>
+				</div>
+			</div>
 		</div>
 
 		<!-- Exchange Page -->
@@ -858,7 +872,7 @@
 
 		<div id="history" class="page">
 			<h1>History</h1>
-			<iframe id="history-iframe" src="" loading=" lazy"></iframe>
+			<iframe id="history-iframe" src="" loading="eager"></iframe>
 			<!--
 			<details name="transaction">
 				<summary>Sent 1 to nano_12345...67890</summary>
@@ -886,7 +900,7 @@
 		<!-- Settings Page -->
 
 		<div id="settings" class="page">
-			<form class="flex-y left mid">
+			<div class="flex-y left mid">
 				<h1>Settings</h1>
 				<label for="theme-checkbox">Theme</label>
 				<div class="toggle">
@@ -895,7 +909,7 @@
 				<button id="clear-storage-button">
 					Clear Storage
 				</button>
-			</form>
+			</div>
 			<article>
 				<h2>Licenses</h2>
 				<cite>
-- 
2.34.1