console.log('loaded libnemo')
}
async function loadUx () {
+ console.log('loading data')
+ const wallets = await getFromStorage('wallets')
+ for (const wallet of wallets) {
+ const { id, name } = JSON.parse(wallet)
+ const option = document.createElement('option')
+ option.value = id
+ option.innerText = name
+ wallet.appendChild(option)
+ }
+ const wallet = document.querySelector('#wallet')
+ if (wallet.value === '_new' || wallet.value === '_import') {
+ wallet.value = ''
+ }
+ const account = document.querySelector('#account')
+ if (account.value === '_new') {
+ account.value = ''
+ }
try {
document.querySelector(location.hash).classList.add('show')
} catch (err) {
location.hash = '#transact'
}
+ console.log('loaded data')
}
+
function switchPage (evt) {
console.log(evt)
const oldHash = new URL(evt.oldURL)?.hash
document.querySelector(oldHash)?.classList.remove('show')
}
try {
- if (newHash) {
- document.querySelector(newHash).classList.add('show')
+ if (newHash) {
+ document.querySelector(newHash).classList.add('show')
}
} catch (err) {
notify.warn(`Page not found`)
}
}
+
function getWalletClass (algorithm) {
switch (algorithm) {
case 'blake2b': {
async function updateWallet () {
const wallet = document.querySelector('#wallet')
const account = document.querySelector('#account')
+ if (wallet.value === '_new') {
+ return await document.querySelector('#wallet-new').showModal()
+ }
+ if (wallet.value === '_import') {
+ return await document.querySelector('#wallet-import').showModal()
+ }
if (wallet.value === '_ledger') {
try {
await LedgerWallet.create()
return await form.showModal()
}
- function spinner (btn) {
- const label = btn.firstElementChild
- const spinner = document.createElement('x-throbber')
- spinner.size = 'small'
- spinner.style.width = `${label.scrollWidth}px`
- btn.replaceChildren(spinner)
- // at some point then...
- // btn.replaceChildren(label)
+ async function updateAccount () {
+ const walletId = document.querySelector('#wallet').value
+ const account = document.querySelector('#account')
+ const wallets = await getFromStorage('wallets')
+ const { id, algorithm } = wallets.find(wallet => {
+ const { id } = JSON.parse(wallet)
+ return id === walletId
+ })
+ try {
+ const walletClass = getWalletClass(algorithm)
+ const wallet = await walletClass.fromId(id)
+ const accounts = await wallet.accounts()
+ } catch (err) {
+ notify.error(err)
+ return
+ }
+ const form = document.querySelector('#wallet-form')
+ const walletType = document.querySelector('#wallet-form-wallet-type')
+ const importType = document.querySelector('#wallet-form-import-type')
+ const importValue = document.querySelector('#wallet-form-import-value')
+ const salt = document.querySelector('#wallet-form-salt')
+ walletType.querySelector('x-radios').value = null
+ importType.querySelector('x-select').value = null
+ importValue.querySelector('x-input').value = null
+ salt.querySelector('x-input').value = null
+ if (wallet.value === '_new') {
+ importType.classList.add('hide')
+ importValue.classList.add('hide')
+ salt.classList.remove('hide')
+ }
+ if (wallet.value === '_import') {
+ importType.classList.remove('hide')
+ importValue.classList.remove('hide')
+ salt.classList.add('hide')
+ }
+ return await form.showModal()
}
async function createWallet () {
}
await addToStorage(`wallets`, JSON.stringify(walletData))
- const menu = document.querySelector('#wallet > x-menu')
- const menuitem = document.createElement('x-menuitem')
- menuitem.value = walletData.id
- menu.appendChild(menuitem)
- const label = document.createElement('x-label')
- label.innerText = walletData.name
- menuitem.appendChild(label)
+ const select = document.querySelector('#wallet')
+ const option = document.createElement('option')
+ option.value = walletData.id
+ option.innerText = walletData.name
+ select.appendChild(option)
walletSelect.value = walletData.id
} catch (err) {
label?.remove()
})
}
+ function getFromStorage (key) {
+ return new Promise((resolve, reject) => {
+ try {
+ const item = JSON.parse(sessionStorage.getItem(key) ?? '[]')
+ if (!Array.isArray(item)) {
+ throw new TypeError(`Storage item is not an array`)
+ }
+ resolve(item)
+ } catch (err) {
+ console.error(err)
+ reject(err)
+ }
+ })
+ }
+
function updateWalletForm (id) {
const form = document.querySelector(id)
if (!form) {
.page.show {
display: initial;
}
+ .hide {
+ display: none;
+ }
h1 {
text-align: center;
}
dialog {
padding: 1rem !important;
- }
- dialog .hide {
- display: none;
}
x-button[skin="nav"].menubtn {
justify-content: flex-start;
<!-- Wallet Select -->
<x-box id="wallets">
+ <label for="wallet">Wallet</label>
<select id="wallet" style="width:100%;" onchange="updateWallet()">
- <x-menu>
- <x-menuitem value toggled style="display: none;"><x-label>Wallets</x-label></x-menuitem>
-
- <x-button skin="nav" class="menubtn">
- <x-icon href="#folder-plus"></x-icon>
- <x-label>New Wallet</x-label>
-
- <!-- New Wallet Form -->
-
- <dialog id="wallet-new">
- <x-box vertical>
- <x-box id="wallet-new-name">
- <x-label>Name</x-label>
- <x-input type="text"></x-input>
- </x-box>
- <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">Optional</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="closeForm('#wallet-new')">
- Cancel
- </x-button>
- <x-button onclick="createWallet().then(w => { console.log(w);showWallets() })">
- OK
- </x-button>
- </x-buttons>
- </x-box>
- </x-box>
- </dialog>
- </x-button>
-
- <x-button skin="nav" class="menubtn">
- <x-icon href="#box-arrow-down"></x-icon>
- <x-label>Import Wallet</x-label>
-
- <!-- Import Wallet Form -->
-
- <dialog id="wallet-import">
- <x-box vertical>
- <x-box id="wallet-import-name">
- <x-label>Name</x-label>
- <x-input type="text"></x-input>
- </x-box>
- <x-box id="wallet-import-algorithm">
- <x-radios required onchange="updateWalletForm('#wallet-import')">
- <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-import-type" class="hide">
- <x-select onchange="updateWalletForm('#wallet-import')">
- <x-menu>
- <x-menuitem value="mnemonic"><x-label>Import mnemonic</x-label></x-menuitem>
- <x-menuitem value="seed"><x-label>Import seed</x-label></x-menuitem>
- </x-menu>
- </x-select>
- </x-box>
- <x-box id="wallet-import-value" class="hide">
- <x-label style="text-transform:capitalize"></x-label>
- <x-input type="password"></x-input>
- </x-box>
- <x-box id="wallet-import-salt" class="hide">
- <x-label>Salt</x-label>
- <x-input type="password">Optional</x-input>
- </x-box>
- <x-box id="wallet-import-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="closeForm('#wallet-import')">
- Cancel
- </x-button>
- <x-button onclick="importWallet().then(w => { console.log(w);showWallets() })">
- OK
- </x-button>
- </x-buttons>
- </x-box>
- </x-box>
- </dialog>
- </x-button>
- <hr />
- <x-menuitem>
- <x-icon href="#usb-drive"></x-icon>
- <x-label>Ledger</x-label>
- </x-menuitem>
- <hr />
- </x-menu>
- </x-select>
+ <option value="" disabled>Choose...</option>
+ <hr />
+ <option value="_new">New</option>
+ <option value="_import">Import</option>
+ <hr />
+ <option value="_ledger">Ledger</option>
+ <hr />
+ </select>
</x-box>
+ <!-- New Wallet Form -->
+
+ <dialog id="wallet-new">
+ <x-box vertical>
+ <x-box id="wallet-new-name">
+ <x-label>Name</x-label>
+ <x-input type="text"></x-input>
+ </x-box>
+ <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="closeForm('#wallet-new')">
+ Cancel
+ </x-button>
+ <x-button onclick="createWallet().then(w => { console.log(w);showWallets() })">
+ OK
+ </x-button>
+ </x-buttons>
+ </x-box>
+ </x-box>
+ </dialog>
+
+ <!-- Import Wallet Form -->
+
+ <dialog id="wallet-import">
+ <x-box vertical>
+ <x-box id="wallet-import-name">
+ <x-label>Name</x-label>
+ <x-input type="text"></x-input>
+ </x-box>
+ <x-box id="wallet-import-algorithm">
+ <x-radios required onchange="updateWalletForm('#wallet-import')">
+ <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-import-type" class="hide">
+ <x-select onchange="updateWalletForm('#wallet-import')">
+ <x-menu>
+ <x-menuitem value="mnemonic"><x-label>Import mnemonic</x-label></x-menuitem>
+ <x-menuitem value="seed"><x-label>Import seed</x-label></x-menuitem>
+ </x-menu>
+ </x-select>
+ </x-box>
+ <x-box id="wallet-import-value" class="hide">
+ <x-label style="text-transform:capitalize"></x-label>
+ <x-input type="password"></x-input>
+ </x-box>
+ <x-box id="wallet-import-salt" class="hide">
+ <x-label>Salt</x-label>
+ <x-input type="password">Optional</x-input>
+ </x-box>
+ <x-box id="wallet-import-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="closeForm('#wallet-import')">
+ Cancel
+ </x-button>
+ <x-button onclick="importWallet().then(w => { console.log(w);showWallets() })">
+ OK
+ </x-button>
+ </x-buttons>
+ </x-box>
+ </x-box>
+ </dialog>
+
<!-- Account Select -->
<x-box id="accounts">
- <x-select id="account" style="width:100%;" onchange="updateAccount()" disabled>
- <x-menu>
- <x-menuitem value toggled style="display: none;"><x-label>Accounts</x-label></x-menuitem>
- <x-button skin="nav" class="menubtn">
- <x-icon href="#cash-stack"></x-icon>
- <x-label>New Account</x-label>
-
- <!-- New Account Form -->
-
- <dialog id="account-new">
- <x-box vertical>
- <x-box>
- <x-label>Name</x-label>
- <x-input type="text"></x-input>
- </x-box>
- <x-box>
- <x-label>Index (optional)</x-label>
- <x-numberinput min="0" max="2147483647"></x-numberinput>
- </x-box>
- <x-buttons>
- <x-button onclick="document.querySelector('#account-new').close()">
- Cancel
- </x-button>
- <x-button onclick="deriveAccounts().then(w => { console.log(w);showWallets() })">
- OK
- </x-button>
- </x-buttons>
- </x-box>
- </dialog>
+ <label for="account">Account</label>
+ <select id="account" style="width:100%;" onchange="updateAccount()">
+ <option value="" disabled>Choose...</option>
+ <hr />
+ <option value="_new">New</option>
+ <hr />
+ </select>
+ </x-box><!-- New Account Form -->
+
+ <dialog id="account-new">
+ <x-box vertical>
+ <x-box>
+ <x-label>Name</x-label>
+ <x-input type="text"></x-input>
+ </x-box>
+ <x-box>
+ <x-label>Index (optional)</x-label>
+ <x-numberinput min="0" max="2147483647"></x-numberinput>
+ </x-box>
+ <x-buttons>
+ <x-button onclick="document.querySelector('#account-new').close()">
+ Cancel
</x-button>
- <hr />
- </x-menu>
- </x-select>
- </x-box>
+ <x-button onclick="deriveAccounts().then(w => { console.log(w);showWallets() })">
+ OK
+ </x-button>
+ </x-buttons>
+ </x-box>
+ </dialog>
</header>
<!-- Main Content Pages -->
projects / nemo-wallet.git / commitdiff