From: Chris Duncan <chris@zoso.dev>
Date: Sat, 2 Nov 2024 08:11:11 +0000 (-0700)
Subject: Fix cancel button on wallet/account forms. Fix bare specifier error and load buffer... 
X-Git-Url: https://zoso.dev/?a=commitdiff_plain;h=0c47467a4bee7e70870e299000d1ef1b425f0a5d;p=nemo-wallet.git

Fix cancel button on wallet/account forms. Fix bare specifier error and load buffer in its own script tag. Start building out support for Ledger.
---

diff --git a/nemo-wallet.html b/nemo-wallet.html
index 562ff9c..041b17a 100644
--- a/nemo-wallet.html
+++ b/nemo-wallet.html
@@ -5,6 +5,10 @@
 	<meta lang="en" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 	<script type="module" src="https://cdn.jsdelivr.net/npm/barcode-detector@2.2.11/dist/es/side-effects.min.js"></script>
+	<script type="module">
+		import { Buffer } from 'https://esm.run/buffer-browser@6.0.4/index.js'
+		globalThis.Buffer = Buffer
+	</script>
 	<script type="module" src="https://cdn.jsdelivr.net/npm/libnemo@0.0.17/dist/global.min.js"></script>
 	<script>
 		// const barcodeDetector = new BarcodeDetector({
@@ -30,18 +34,11 @@
 			} catch (err) {
 				location.hash = '#transact'
 			}
-			await loadDependencies()
 			await loadData()
 			await loadUi()
 			console.log('done')
 		})
 
-		async function loadDependencies () {
-			console.log('loading dependencies')
-			globalThis.Buffer ??= (await import('https://cdn.jsdelivr.net/npm/buffer-esm@1.2.0/esm/index.js')).Buffer
-			console.log('loaded dependencies')
-		}
-
 		async function loadData () {
 			console.log('loading data')
 			const walletSelect = document.querySelector('#wallet')
@@ -63,12 +60,12 @@
 			const themeCheckbox = document.getElementById('theme-checkbox')
 			themeCheckbox.addEventListener('change', selectTheme)
 			selectTheme()
-			const forms = document.querySelectorAll('form')
+			const forms = document.querySelectorAll('.form')
 			for (const form of forms) {
 				const cancelButtons = form.querySelectorAll('button.cancel')
 				for (const cancelButton of cancelButtons) {
 					cancelButton.addEventListener('click', (event) => {
-						cancelForm(form.parentElement.id)
+						cancelForm(form.id)
 					})
 				}
 			}
@@ -156,6 +153,9 @@
 
 		function getWalletClass (algorithm) {
 			switch (algorithm) {
+				case 'ledger': {
+					return libnemo.LedgerWallet
+				}
 				case 'blake2b': {
 					return libnemo.Blake2bWallet
 				}
@@ -200,7 +200,15 @@
 				}
 				case '_ledger': {
 					try {
-						await libnemo.LedgerWallet.create()
+						const walletId = await libnemo.LedgerWallet.create()
+						const walletData = {
+							id: wallet.id,
+							name: 'Ledger',
+							algorithm: 'ledger'
+						}
+						await addToStorage(`wallets`, JSON.stringify(walletData))
+						updateAccountForm('account-new')
+						await reloadAccountSelect()
 					} catch (err) {
 						walletSelect.value = ''
 						console.error(err)
@@ -232,7 +240,7 @@
 
 		async function loadWallet () {
 			const walletSelect = document.getElementById('wallet')
-			if (walletSelect?.value) {
+			if (walletSelect?.value?.substring(0, 1) !== '_') {
 				const wallets = await loadWallets()
 				const { id, algorithm } = wallets.find(w => w.id === walletSelect.value)
 				const walletClass = getWalletClass(algorithm)
@@ -361,6 +369,23 @@
 			await resetSelectOptions('account', accountOptions)
 		}
 
+		function updateAccountForm (id) {
+			const form = document.getElementById(id)
+			if (!form) {
+				notify.error(`Form ID not found, contact developer`)
+				return
+			}
+			const walletSelect = document.getElementById('wallet')
+			const passwordContainer = document.getElementById(`${id}-password`)
+			const password = document.getElementById(`${id}-password-input`)
+			if (walletSelect?.value === '_ledger') {
+				password.value = ''
+				passwordContainer.classList.add('hide')
+			} else {
+				passwordContainer.classList.remove('hide')
+			}
+		}
+
 		async function resetSelectOptions (id, options) {
 			try {
 				if (!Array.isArray(options)) {
@@ -564,7 +589,8 @@
 			text-align: center;
 		}
 		hr {
-			margin: revert !important;
+			border: 10px solid var(--theme-content) !important;
+			height: 10px !important;
 		}
 		label {
 			margin-right: 0.5em;
@@ -580,6 +606,7 @@
 			position: fixed;
 			top: 0.5rem;
 			width: 100%;
+			z-index: 100;
 		}
 		#notifications > dialog[open] {
 			background-color: var(--theme-highlight);
@@ -594,7 +621,6 @@
 			position: relative;
 			padding: 0.5rem;
 			width: fit-content;
-			z-index: 100;
 		}
 		.page {
 			display: none;
@@ -632,7 +658,7 @@
 		select:focus {
 			background-color: var(--theme-primary);
 			border: 1px solid var(--theme-content);
-			color: var(--theme-text);
+			color: var(--theme-content);
 			font-size: calc(16px + 0.1dvh);  /* prevents input focus zoom on mobile */
 		}
 		input:disabled,
@@ -727,7 +753,7 @@
 					<option value="_new">New</option>
 					<option value="_import">Import</option>
 					<hr />
-					<option disabled value="_ledger">Ledger</option>
+					<option value="_ledger">Ledger</option>
 					<hr />
 				</select>
 			</div>
@@ -753,7 +779,7 @@
 
 		<!-- New Wallet Form -->
 
-		<div id="wallet-new" class="page">
+		<div id="wallet-new" class="form page">
 			<h1>New Wallet</h1>
 			<div class="flex-y stretch">
 				<div id="wallet-new-name" class="flex-x left mid">
@@ -791,7 +817,7 @@
 
 		<!-- Import Wallet Form -->
 
-		<div id="wallet-import" class="page">
+		<div id="wallet-import" class="form page">
 			<h1>Import Wallet</h1>
 			<div class="flex-y stretch">
 				<div id="wallet-import-name" class="flex-x left mid">
@@ -843,7 +869,7 @@
 
 		<!-- New Account Form -->
 
-		<div id="account-new" class="page">
+		<div id="account-new" class="form page">
 			<h1>New Account</h1>
 			<div class="flex-y stretch">
 				<div id="account-new-name" class="flex-x left mid">