]> zoso.dev Git - nemo-wallet.git/commitdiff
Fix form cancellation function call. Start building history loader, although iframe...
authorChris Duncan <chris@zoso.dev>
Wed, 30 Oct 2024 05:19:52 +0000 (22:19 -0700)
committerChris Duncan <chris@zoso.dev>
Wed, 30 Oct 2024 05:19:52 +0000 (22:19 -0700)
app/pages/nemo-wallet.html

index 2d3b4a10f800bbb6334e3d793821489b53353055..63c4e0fdece8292cb4d8c5ae01a436d19de3c74d 100644 (file)
                                option?.remove()
                                notify.error(err.msg)
                        } finally {
-                               await form.close()
+                               await cancelForm('wallet-new')
                                return wallet
                        }
                }
                                        }
                                }
                                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 => {
                        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')
                        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) {
                                console.error(err)
                                notify.error(`Error creating account`)
                        } finally {
-                               await form.close()
+                               await cancelForm('account-new')
                                return account
                        }
                }
                <!-- 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 -->
 
                <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>
                <!-- 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">
                                <button id="clear-storage-button">
                                        Clear Storage
                                </button>
-                       </form>
+                       </div>
                        <article>
                                <h2>Licenses</h2>
                                <cite>