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>