Fix cancel button on wallet/account forms. Fix bare specifier error and load buffer...

diff --git a/nemo-wallet.html b/nemo-wallet.html
index 562ff9c5bf8bc9b3f7fb2ad072daddcb5a0ddc8d..041b17a654f1f2a2a3c719daaf9df763f390fd28 100644 (file)
--- 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">