From 68cdccfc60b2d460e6d568e0a756e0e2dc47294d Mon Sep 17 00:00:00 2001
From: Chris Duncan <chris@zoso.dev>
Date: Tue, 22 Oct 2024 22:41:33 -0700
Subject: [PATCH] Switch to jsdelivr from unpkg. Move more content away from
 xel. Lots of layout CSS.

---
 app/pages/nemo-wallet.html | 231 ++++++++++++++++++++++++++-----------
 1 file changed, 162 insertions(+), 69 deletions(-)

diff --git a/app/pages/nemo-wallet.html b/app/pages/nemo-wallet.html
index f70c951..0e702c2 100644
--- a/app/pages/nemo-wallet.html
+++ b/app/pages/nemo-wallet.html
@@ -4,7 +4,7 @@
 	<meta charset="utf-8" />
 	<meta lang="en" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
-	<meta name="xel-theme" content="https://unpkg.com/xel@latest/themes/adwaita-dark.css" />
+	<meta name="xel-theme" content="https://cdn.jsdelivr.net/npm/xel@0.28.13/themes/adwaita-dark.css" />
 	<meta name="xel-accent-color" content="blue" />
 	<meta name="xel-icons" content="https://unpkg.com/bootstrap-icons@latest/bootstrap-icons.svg" />
 	<script>
@@ -32,7 +32,7 @@
 
 		async function loadUi () {
 			console.log('loading xel')
-			Xel = await import('https://unpkg.com/xel@latest')
+			Xel = await import('https://cdn.jsdelivr.net/npm/xel@0.28.13')
 			await Xel.whenThemeReady
 			setTimeout(() => {
 				document.getElementsByTagName('body')[0].style.visibility = 'visible'
@@ -42,7 +42,7 @@
 
 		async function loadNemo () {
 			console.log('loading libnemo')
-			await ({ Account, Bip44Wallet, Blake2bWallet, SendBlock, ReceiveBlock, ChangeBlock, Node: rpc, Rolodex } = await import('https://unpkg.com/libnemo@latest'))
+			await ({ Account, Bip44Wallet, Blake2bWallet, SendBlock, ReceiveBlock, ChangeBlock, Node: rpc, Rolodex } = await import('https://cdn.jsdelivr.net/npm/libnemo@0.0.12'))
 			console.log('loaded libnemo')
 		}
 
@@ -218,15 +218,15 @@
 		async function createWallet () {
 			const walletSelect = document.querySelector('#wallet')
 			const form = document.querySelector('#wallet-new')
-			const name = form.querySelector('#wallet-new-name x-input').value
+			const name = form.querySelector('#wallet-new-name input').value
 			if (name.substring(0, 1) === '_') {
 				notify.error(`Wallet name cannot start with an underscore`)
 				return
 			}
-			const algorithm = form.querySelector('#wallet-new-algorithm x-radios').value
+			const algorithm = form.querySelector('#wallet-new-algorithm select').value
 			const walletClass = getWalletClass(algorithm)
-			const salt = form.querySelector('#wallet-new-salt x-input')?.value
-			const password = form.querySelector('#wallet-new-password x-input')?.value
+			const salt = form.querySelector('#wallet-new-salt input')?.value
+			const password = form.querySelector('#wallet-new-password input')?.value
 			if (!password) {
 				notify.error('Password is required')
 				return
@@ -258,12 +258,12 @@
 			const wallet = await updateWalletSelect()
 			const accountSelect = document.querySelector('#account')
 			const form = document.querySelector('#account-new')
-			const name = form.querySelector('#account-new-name x-input').value
+			const name = form.querySelector('#account-new-name input').value
 			if (name.substring(0, 1) === '_') {
 				notify.error(`Account name cannot start with an underscore`)
 				return
 			}
-			const index = form.querySelector('#account-new-index x-numberinput')?.value
+			const index = form.querySelector('#account-new-index input')?.value
 			let account
 			try {
 				account = await wallet.accounts(index)
@@ -292,18 +292,18 @@
 				return
 			}
 			const algorithmContainer = document.querySelector(`${id}-algorithm`)
-			const algorithm = document.querySelector(`${id}-algorithm x-radios`)
+			const algorithm = document.querySelector(`${id}-algorithm select`)
 			const typeContainer = document.querySelector(`${id}-type`)
-			const type = document.querySelector(`${id}-type x-select`)
+			const type = document.querySelector(`${id}-type select`)
 			const saltContainer = document.querySelector(`${id}-salt`)
-			const salt = document.querySelector(`${id}-salt x-input`)
+			const salt = document.querySelector(`${id}-salt input`)
 			if (algorithm.value === 'bip44' && type?.value !== 'seed') {
 				saltContainer.classList.remove('hide')
 			} else {
 				saltContainer.classList.add('hide')
 			}
-			const importValue = document.querySelector(`${id}-value x-input`)
-			const importValueLabel = document.querySelector(`${id}-value x-label`)
+			const importValue = document.querySelector(`${id}-value input`)
+			const importValueLabel = document.querySelector(`${id}-value label`)
 			if (importValueLabel) {
 				importValueLabel.innerText = type.value
 			}
@@ -311,7 +311,7 @@
 
 		async function formCancel (id) {
 			const form = document.querySelector(id)
-			const inputs = form.querySelectorAll('x-input')
+			const inputs = form.querySelectorAll('input')
 			for (const input of inputs) {
 				input.value = ''
 			}
@@ -384,37 +384,122 @@
 		.flex {
 			display: flex;
 		}
-		.flex.v-start {
-			flex-direction: column;
+		.flex.h-top {
+			align-items: flex-start;
+			flex-direction: row;
+			justify-content: center;
+		}
+		.flex.h-mid {
+			align-items: center;
+			flex-direction: row;
+			justify-content: center;
+		}
+		.flex.h-bottom {
+			align-items: flex-end;
+			flex-direction: row;
+			justify-content: center;
+		}
+		.flex.h-stretch {
+			align-items: stretch;
+			flex-direction: row;
+			justify-content: center;
+		}
+		.flex.h-left {
 			justify-content: flex-start;
 		}
-		.flex.v-mid {
-			flex-direction: column;
+		.flex.h-center {
 			justify-content: center;
 		}
-		.flex.v-end {
-			flex-direction: column;
+		.flex.h-right {
 			justify-content: flex-end;
 		}
-		.flex.v-stretch {
-			flex-direction: column;
-			justify-content: stretch;
+		.flex.h-full {
+			width: 100%;
 		}
-		.flex.h-start {
+		.flex.v-left {
 			align-items: flex-start;
-			flex-direction: row;
+			flex-direction: column;
+			justify-content: center;
 		}
-		.flex.h-mid {
+		.flex.v-center {
 			align-items: center;
-			flex-direction: row;
+			flex-direction: column;
+			justify-content: center;
 		}
-		.flex.h-end {
+		.flex.v-right {
 			align-items: flex-end;
-			flex-direction: row;
+			flex-direction: column;
+			justify-content: center;
 		}
-		.flex.h-stretch {
+		.flex.v-stretch {
 			align-items: stretch;
-			flex-direction: row;
+			flex-direction: column;
+			justify-content: center;
+		}
+		.grid-x {
+			display: grid;
+			grid-template-columns: repeat(12, 1fr);
+		}
+		.grid-y {
+			display: grid;
+			grid-template-rows: repeat(12, 1fr);
+		}
+		.grid.x-1 {
+			grid-column-start: auto;
+			grid-column-end: span 1;
+		}
+		.grid.x-2 {
+			grid-column-start: auto;
+			grid-column-end: span 2;
+		}
+		.grid.x-3 {
+			grid-column-start: auto;
+			grid-column-end: span 3;
+		}
+		.grid.x-4 {
+			grid-column-start: auto;
+			grid-column-end: span 4;
+		}
+		.grid.x-5 {
+			grid-column-start: auto;
+			grid-column-end: span 5;
+		}
+		.grid.x-6 {
+			grid-column-start: auto;
+			grid-column-end: span 6;
+		}
+		.grid.x-7 {
+			grid-column-start: auto;
+			grid-column-end: span 7;
+		}
+		.grid.x-8 {
+			grid-column-start: auto;
+			grid-column-end: span 8;
+		}
+		.grid.x-9 {
+			grid-column-start: auto;
+			grid-column-end: span 9;
+		}
+		.grid.x-10 {
+			grid-column-start: auto;
+			grid-column-end: span 10;
+		}
+		.grid.x-11 {
+			grid-column-start: auto;
+			grid-column-end: span 11;
+		}
+		.grid.x-12 {
+			grid-column-start: auto;
+			grid-column-end: span 12;
+		}
+		header {
+			padding: 0.5rem;
+		}
+		hr {
+			margin: revert !important;
+		}
+		label {
+			margin-right: 0.5em;
 		}
     #notifications {
       display: flex;
@@ -447,6 +532,13 @@
     dialog {
       padding: 1rem !important;
     }
+		label:has(+ input:required)::after {
+			color: red;
+			content: '*';
+		}
+		input:required:invalid {
+			border: 1px solid red;
+		}
 		x-button[skin="nav"].menubtn {
 			justify-content: flex-start;
       padding: 0 12px 0 23px;
@@ -485,15 +577,15 @@
 </head>
 
 <body onload="load()" onhashchange="switchPage(event)" style="visibility:hidden;">
-	<x-box id="notifications"></x-box>
+	<div id="notifications"></div>
 	<header>
 
 		<!-- Wallet Select -->
 
-		<x-box id="wallets">
-			<label for="wallet">Wallet</label>
-			<select id="wallet" style="width:100%;" onchange="updateWalletSelect()">
-				<option value="" disabled>Choose...</option>
+		<div id="wallets" class="grid-x">
+			<label for="wallet" class="grid x-2">Wallet</label>
+			<select id="wallet" class="grid x-10" onchange="updateWalletSelect()">
+				<option disabled value>Choose...</option>
 				<hr />
 				<option value="_new">New</option>
 				<option value="_import">Import</option>
@@ -501,41 +593,42 @@
 				<option disabled value="_ledger">Ledger</option>
 				<hr />
 			</select>
-		</x-box>
+		</div>
 
 		<!-- New Wallet Form -->
 
 		<dialog id="wallet-new">
 			<div class="flex v-stretch">
-				<div class="flex h-mid" id="wallet-new-name">
-					<x-label>Name</x-label>
-					<x-input type="text"></x-input>
+				<div id="wallet-new-name" class="flex h-left h-mid">
+					<label for="wallet-new-name-input">Name</label>
+					<input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" minlength="1" maxlength="80" pattern="[^_].*" placeholder="My Wallet" required />
+				</div>
+				<div id="wallet-new-algorithm" class="flex h-left h-mid h-full">
+					<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 h-left h-mid h-full 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 h-mid h-full">
+					<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-x">
+					<div class="grid x-4"></div>
+					<button class="grid x-4" onclick="formCancel('#wallet-new')">
+						Cancel
+					</button>
+					<button class="grid x-4" onclick="createWallet().then(w => { console.log(w);showWallets() })">
+						OK
+					</button>
 				</div>
-				<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="formCancel('#wallet-new')">
-							Cancel
-						</x-button>
-						<x-button onclick="createWallet().then(w => { console.log(w);showWallets() })">
-							OK
-						</x-button>
-					</x-buttons>
-				</x-box>
 			</div>
 		</dialog>
 
@@ -588,9 +681,9 @@
 
 		<!-- Account Select -->
 
-		<x-box id="accounts">
-			<label for="account">Account</label>
-			<select id="account" style="width:100%;" onchange="updateWalletSelect()">
+		<x-box id="accounts" class="grid-x">
+			<label for="account" class="grid x-2">Account</label>
+			<select id="account" class="grid x-10" disabled onchange="updateWalletSelect()">
 				<option value="" disabled>Choose...</option>
 				<hr />
 				<option value="_new">New</option>
-- 
2.34.1