async function loadUx () {
const notification = document.getElementById('notification')
observer.observe(notification, { attributes: true })
+ if (location.hash) {
+ const page = document.querySelector(location.hash)
+ page.classList.add('show')
+ } else {
+ location += '#transact'
+ }
+ }
+ function switchPage (evt) {
+ console.log(evt)
+ const oldHash = new URL(evt.oldURL)?.hash
+ const newHash = new URL(evt.newURL)?.hash
+ if (oldHash) {
+ document.querySelector(oldHash).classList.remove('show')
+ }
+ if (newHash) {
+ document.querySelector(newHash).classList.add('show')
+ }
}
function getWalletType (type) {
switch (type) {
}
}
}
- async function createWallet (el, type) {
- const label = el.firstElementChild
+ async function createWallet (elm, type) {
+ const label = elm.firstElementChild
const spinner = document.createElement('x-throbber')
spinner.size = 'small'
spinner.style.width = `${label.scrollWidth}px`
- el.replaceChildren(spinner)
+ elm.replaceChildren(spinner)
const walletType = getWalletType(type)
let wallet
try {
} catch (err) {
notify.error(err.msg)
} finally {
- el.replaceChildren(label)
+ elm.replaceChildren(label)
return wallet
}
}
error: (msg) => notify.show(`🚫 ${msg}`, 'Tomato')
}
</script>
- <script src="" type="module"></script>
<meta name="xel-theme" content="https://unpkg.com/xel@latest/themes/adwaita-dark.css" />
- <meta name="xel-accent-color" content="blue" />
- <meta name="xel-icons" content="https://unpkg.com/xel@latest/icons/fluent-outlined.svg" />
+ <meta name="xel-accent-color" content="#209CE9" />
+ <meta name="xel-icons" content="https://unpkg.com/bootstrap-icons@latest/bootstrap-icons.svg" />
+ <link rel="preload" as="image" href="https://unpkg.com/bootstrap-icons@latest/bootstrap-icons.svg" />
+
<style>
- x-tab x-box:is([vertical]) x-icon + x-label {
- margin-left: 0
+ body {
+ background-color: slategrey;
+ }
+ .page {
+ display: none;
}
- x-box.centered {
- align-items: center;
+ .page.show {
+ display: initial;
}
- x-tabs.full-width > x-tab {
- flex-grow: 1
+ nav {
+ align-items: flex-end;
+ bottom: 0;
+ display: flex;
+ justify-content: space-evenly;
+ position: absolute;
+ width: 100%;
+ }
+ nav > a {
+ border: 0;
+ display: flex;
+ flex: 1 0 auto;
+ justify-content: center;
+ max-height: 10vh;
+ padding: 1rem;
+ }
+ #xno {
+ border: 0;
+ color: #209CE9;
+ fill: #209CE9;
+ flex: 1.5 0 auto;
+ }
+ nav > a > * {
+ height: 10vh;
+ max-height: 10vh;
+ width: 100%;
}
</style>
</head>
-<body onload="load()" style="visibility:hidden;">
+<body onload="load()" onhashchange="switchPage(event)" style="visibility:hidden;">
<main>
<x-notification id="notification"></x-notification>
- <x-box id="wallets">
- <x-button>
- <x-label>Wallets</x-label>
- <x-menu>
- <x-menuitem>
- <x-button>
- <x-label>New</x-label>
- <dialog>
- <x-radios>
- <x-label>Type</x-label>
- <x-radio value="bip44" toggled><x-label>BIP-44</x-label></x-radio>
- <x-radio value="blake2b"><x-label>BLAKE2b</x-label></x-radio>
- </x-radios>
- <x-input type="password" required="true">Password</x-input>
- <x-button
- onclick="createWallet(this, this.closest('dialog').querySelector('x-radios').value).then(w => { console.log(w);showWallets() })"></x-button>
- </dialog>
- </x-button>
- </x-menuitem>
- <x-menuitem>
- <x-button>
- <x-label>Import</x-label>
- <dialog>
- </dialog>
- </x-button>
- </x-menuitem>
- </x-menu>
- </x-button>
+ <x-select id="wallets">
+ <x-menu>
+ <x-menuitem value="new">
+ <x-button>
+ <x-label>New Wallet</x-label>
+ <dialog>
+ <x-input type="text">Name</x-input>
+ <x-radios>
+ <x-label>Type</x-label>
+ <x-radio value="bip44" toggled><x-label>BIP-44</x-label></x-radio>
+ <x-radio value="blake2b"><x-label>BLAKE2b</x-label></x-radio>
+ </x-radios>
+ <x-input type="password" required="true">Password</x-input>
+ <x-button
+ onclick="createWallet(this, this.closest('dialog').querySelector('x-radios').value).then(w => { console.log(w);showWallets() })"></x-button>
+ </dialog>
+ </x-button>
+ </x-menuitem>
+ <x-menuitem value="import">
+ <x-label>Import Wallet</x-label>
+ <dialog>
+ </dialog>
+ </x-menuitem>
+ <hr>
+ </x-menu>
+ </x-select><!-- end #wallets-->
+ <x-select>
+ <x-menu>
+ <x-menuitem value="new">
+ <x-label>New</x-label>
+ </x-menuitem>
+ <hr>
+ </x-menu>
+ </x-select>
</x-box>
- <x-card id="walletCard">
- </x-card>
- <x-button onclick="clearStorage()">
- <x-label>Clear Storage</x-label>
- </x-button>
+ <x-box id="exchange" class="page">
+ Exchange
+ </x-box><!-- end #exchange -->
+ <x-box id="history" class="page">
+ History
+ </x-box><!-- end #history -->
+ <x-box id="transact" class="page">
+ Transact
+ <x-card id="walletCard">
+ </x-card>
+ </x-box><!-- end #transact -->
+ <x-box id="rolodex" class="page">
+ Rolodex
+ </x-box><!-- end #rolodex -->
+ <x-box id="settings" class="page">
+ <h1>Settings</h1>
+ <x-button onclick="clearStorage()">
+ <x-label>Clear Storage</x-label>
+ </x-button>
+ </x-box><!-- end #settings -->
</main>
<nav>
- <x-tabs class="full-width">
- <x-tab>
- <x-box vertical class="centered">
- <x-icon href="#earth"></x-icon>
- <x-label>Exchange</x-label>
- </x-box>
- </x-tab>
- <x-tab>
- <x-box vertical class="centered">
- <x-icon href="#bars"></x-icon>
- <x-label>History</x-label>
- </x-box>
- </x-tab>
- <x-tab>
- <x-box vertical class="centered">
- <x-icon href="#credit-card"></x-icon>
- <x-label>Transact</x-label>
- </x-box>
- </x-tab>
- <x-tab>
- <x-box vertical class="centered">
- <x-icon href="#person"></x-icon>
- <x-label>Rolodex</x-label>
- </x-box>
- </x-tab>
- <x-tab>
- <x-box vertical class="centered">
- <x-icon href="#settings"></x-icon>
- <x-label>Settings</x-label>
- </x-box>
- </x-tab>
- </x-tabs>
+ <a href="#exchange">
+ <x-icon href="#currency-exchange"></x-icon>
+ </a>
+ <a href="#history">
+ <x-icon href="#book-half"></x-icon>
+ </a>
+ <a href="#transact" id="xno">
+ <svg width="0px" height="0px" viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg">
+ <circle cx="540" cy="540" r="540" fill="#209CE9" />
+ <circle cx="540" cy="540" r="540" fill="#209CE9" />
+ <path
+ d="M792.911 881H740.396L541.099 570.561L338.761 881H286.68L513.452 529.3L306.882 206.222H360.42L541.95 490.393L727.322 206.222H777.555L568.762 528.379L792.911 881Z"
+ fill="white" />
+ <path
+ d="M336.487 508.737H744.807V547.116H336.487V508.737ZM336.487 623.872H744.824V662.251H336.47L336.487 623.872Z"
+ fill="white" />
+ </svg>
+ </a>
+ <a href="#rolodex">
+ <x-icon href="#person-rolodex"></x-icon>
+ </a>
+ <a href="#settings">
+ <img src="bootstrap-icons.svg" />
+ <svg viewBox="0 0 16 16">
+ <use href="https://unpkg.com/bootstrap-icons@latest/bootstrap-icons.svg#gear" fill="#209CE9"></use>
+ </svg>
+ </a>
</nav>
</body>
projects / nemo-wallet.git / commitdiff