<meta lang="en">
<script>
let Account, Bip44Wallet, Blake2bWallet, LedgerWallet, SendBlock, ReceiveBlock, ChangeBlock, rpc, Rolodex, Xel
+ const observer = new MutationObserver((mutations) => {
+ for (const mutation of mutations) {
+ if (mutation.type === "attributes") {
+ mutation.target.dispatchEvent(new Event('attributeschanged'))
+ }
+ }
+ })
function load () {
- loadUi().then(loadNemo).then(() => { console.log('done') })
+ loadUi().then(loadNemo).then(loadUx).then(() => { console.log('done') })
}
async function loadUi () {
console.log('loading xel')
await ({ Account, Bip44Wallet, Blake2bWallet, LedgerWallet, SendBlock, ReceiveBlock, ChangeBlock, Node: rpc, Rolodex } = await import('https://unpkg.com/libnemo@latest'))
console.log('loaded libnemo')
}
+ async function loadUx () {
+ const notification = document.getElementById('notification')
+ observer.observe(notification, { attributes: true })
+ }
async function createBip44Wallet () {
const wallet = await Bip44Wallet.create('password')
try {
async function clearStorage () {
console.log('clear()')
sessionStorage.clear()
- notify.ok('Session storage cleared')
+ notify.ok(`Session storage cleared ${Math.random()}`)
}
const notify = {
show: (msg, color) => {
- const notification = document.createElement('x-notification')
- notification.timeout = "5000"
- notification.style.backgroundColor = color ?? notification.style.backgroundColor
- notification.innerText = msg
+ const notification = document.getElementById('notification')
+ const text = document.createElement('x-label')
+ text.innerText = msg
+ text.style.color = color ?? text.style.color
+ text.addEventListener('click', () => {
+ if (notification.childElementCount > 1) {
+ text.remove()
+ } else {
+ notification.addEventListener('attributeschanged', () => {
+ if (
+ notification.getAttribute('animating') === null
+ && notification.childElementCount === 1
+ && !notification.opened
+ ) {
+ text.remove()
+ }
+ })
+ notification.opened = false
+ }
+ }, { once: true })
+ notification.appendChild(text)
notification.opened = true
- console.log(notification)
- const notifications = document.getElementById('notifications')
- notifications.appendChild(notification)
},
info: (msg) => notify.show(msg),
ok: (msg) => notify.show(msg, 'DarkCyan'),
<body onload="load()" style="visibility:hidden;">
<x-box id="main">
- <x-box id="notifications"></x-box>
+ <x-notification id="notification"></x-notification>
<x-button onclick="createBip44Wallet().then(w => { console.log(w);showWallets() })">
<x-label>Create BIP-44 Wallet</x-label>
</x-button>