<meta charset="utf-8" />
<meta lang="en" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="xel-theme" content="https://unpkg.com/xel@latest/themes/adwaita-dark.css" />
+ <meta name="xel-theme" content="https://cdn.jsdelivr.net/npm/xel@0.28.13/themes/adwaita-dark.css" />
<meta name="xel-accent-color" content="blue" />
<meta name="xel-icons" content="https://unpkg.com/bootstrap-icons@latest/bootstrap-icons.svg" />
<script>
async function loadUi () {
console.log('loading xel')
- Xel = await import('https://unpkg.com/xel@latest')
+ Xel = await import('https://cdn.jsdelivr.net/npm/xel@0.28.13')
await Xel.whenThemeReady
setTimeout(() => {
document.getElementsByTagName('body')[0].style.visibility = 'visible'
async function loadNemo () {
console.log('loading libnemo')
- await ({ Account, Bip44Wallet, Blake2bWallet, SendBlock, ReceiveBlock, ChangeBlock, Node: rpc, Rolodex } = await import('https://unpkg.com/libnemo@latest'))
+ await ({ Account, Bip44Wallet, Blake2bWallet, SendBlock, ReceiveBlock, ChangeBlock, Node: rpc, Rolodex } = await import('https://cdn.jsdelivr.net/npm/libnemo@0.0.12'))
console.log('loaded libnemo')
}
async function createWallet () {
const walletSelect = document.querySelector('#wallet')
const form = document.querySelector('#wallet-new')
- const name = form.querySelector('#wallet-new-name x-input').value
+ const name = form.querySelector('#wallet-new-name input').value
if (name.substring(0, 1) === '_') {
notify.error(`Wallet name cannot start with an underscore`)
return
}
- const algorithm = form.querySelector('#wallet-new-algorithm x-radios').value
+ const algorithm = form.querySelector('#wallet-new-algorithm select').value
const walletClass = getWalletClass(algorithm)
- const salt = form.querySelector('#wallet-new-salt x-input')?.value
- const password = form.querySelector('#wallet-new-password x-input')?.value
+ const salt = form.querySelector('#wallet-new-salt input')?.value
+ const password = form.querySelector('#wallet-new-password input')?.value
if (!password) {
notify.error('Password is required')
return
const wallet = await updateWalletSelect()
const accountSelect = document.querySelector('#account')
const form = document.querySelector('#account-new')
- const name = form.querySelector('#account-new-name x-input').value
+ const name = form.querySelector('#account-new-name input').value
if (name.substring(0, 1) === '_') {
notify.error(`Account name cannot start with an underscore`)
return
}
- const index = form.querySelector('#account-new-index x-numberinput')?.value
+ const index = form.querySelector('#account-new-index input')?.value
let account
try {
account = await wallet.accounts(index)
return
}
const algorithmContainer = document.querySelector(`${id}-algorithm`)
- const algorithm = document.querySelector(`${id}-algorithm x-radios`)
+ const algorithm = document.querySelector(`${id}-algorithm select`)
const typeContainer = document.querySelector(`${id}-type`)
- const type = document.querySelector(`${id}-type x-select`)
+ const type = document.querySelector(`${id}-type select`)
const saltContainer = document.querySelector(`${id}-salt`)
- const salt = document.querySelector(`${id}-salt x-input`)
+ const salt = document.querySelector(`${id}-salt input`)
if (algorithm.value === 'bip44' && type?.value !== 'seed') {
saltContainer.classList.remove('hide')
} else {
saltContainer.classList.add('hide')
}
- const importValue = document.querySelector(`${id}-value x-input`)
- const importValueLabel = document.querySelector(`${id}-value x-label`)
+ const importValue = document.querySelector(`${id}-value input`)
+ const importValueLabel = document.querySelector(`${id}-value label`)
if (importValueLabel) {
importValueLabel.innerText = type.value
}
async function formCancel (id) {
const form = document.querySelector(id)
- const inputs = form.querySelectorAll('x-input')
+ const inputs = form.querySelectorAll('input')
for (const input of inputs) {
input.value = ''
}
.flex {
display: flex;
}
- .flex.v-start {
- flex-direction: column;
+ .flex.h-top {
+ align-items: flex-start;
+ flex-direction: row;
+ justify-content: center;
+ }
+ .flex.h-mid {
+ align-items: center;
+ flex-direction: row;
+ justify-content: center;
+ }
+ .flex.h-bottom {
+ align-items: flex-end;
+ flex-direction: row;
+ justify-content: center;
+ }
+ .flex.h-stretch {
+ align-items: stretch;
+ flex-direction: row;
+ justify-content: center;
+ }
+ .flex.h-left {
justify-content: flex-start;
}
- .flex.v-mid {
- flex-direction: column;
+ .flex.h-center {
justify-content: center;
}
- .flex.v-end {
- flex-direction: column;
+ .flex.h-right {
justify-content: flex-end;
}
- .flex.v-stretch {
- flex-direction: column;
- justify-content: stretch;
+ .flex.h-full {
+ width: 100%;
}
- .flex.h-start {
+ .flex.v-left {
align-items: flex-start;
- flex-direction: row;
+ flex-direction: column;
+ justify-content: center;
}
- .flex.h-mid {
+ .flex.v-center {
align-items: center;
- flex-direction: row;
+ flex-direction: column;
+ justify-content: center;
}
- .flex.h-end {
+ .flex.v-right {
align-items: flex-end;
- flex-direction: row;
+ flex-direction: column;
+ justify-content: center;
}
- .flex.h-stretch {
+ .flex.v-stretch {
align-items: stretch;
- flex-direction: row;
+ flex-direction: column;
+ justify-content: center;
+ }
+ .grid-x {
+ display: grid;
+ grid-template-columns: repeat(12, 1fr);
+ }
+ .grid-y {
+ display: grid;
+ grid-template-rows: repeat(12, 1fr);
+ }
+ .grid.x-1 {
+ grid-column-start: auto;
+ grid-column-end: span 1;
+ }
+ .grid.x-2 {
+ grid-column-start: auto;
+ grid-column-end: span 2;
+ }
+ .grid.x-3 {
+ grid-column-start: auto;
+ grid-column-end: span 3;
+ }
+ .grid.x-4 {
+ grid-column-start: auto;
+ grid-column-end: span 4;
+ }
+ .grid.x-5 {
+ grid-column-start: auto;
+ grid-column-end: span 5;
+ }
+ .grid.x-6 {
+ grid-column-start: auto;
+ grid-column-end: span 6;
+ }
+ .grid.x-7 {
+ grid-column-start: auto;
+ grid-column-end: span 7;
+ }
+ .grid.x-8 {
+ grid-column-start: auto;
+ grid-column-end: span 8;
+ }
+ .grid.x-9 {
+ grid-column-start: auto;
+ grid-column-end: span 9;
+ }
+ .grid.x-10 {
+ grid-column-start: auto;
+ grid-column-end: span 10;
+ }
+ .grid.x-11 {
+ grid-column-start: auto;
+ grid-column-end: span 11;
+ }
+ .grid.x-12 {
+ grid-column-start: auto;
+ grid-column-end: span 12;
+ }
+ header {
+ padding: 0.5rem;
+ }
+ hr {
+ margin: revert !important;
+ }
+ label {
+ margin-right: 0.5em;
}
#notifications {
display: flex;
dialog {
padding: 1rem !important;
}
+ label:has(+ input:required)::after {
+ color: red;
+ content: '*';
+ }
+ input:required:invalid {
+ border: 1px solid red;
+ }
x-button[skin="nav"].menubtn {
justify-content: flex-start;
padding: 0 12px 0 23px;
</head>
<body onload="load()" onhashchange="switchPage(event)" style="visibility:hidden;">
- <x-box id="notifications"></x-box>
+ <div id="notifications"></div>
<header>
<!-- Wallet Select -->
- <x-box id="wallets">
- <label for="wallet">Wallet</label>
- <select id="wallet" style="width:100%;" onchange="updateWalletSelect()">
- <option value="" disabled>Choose...</option>
+ <div id="wallets" class="grid-x">
+ <label for="wallet" class="grid x-2">Wallet</label>
+ <select id="wallet" class="grid x-10" onchange="updateWalletSelect()">
+ <option disabled value>Choose...</option>
<hr />
<option value="_new">New</option>
<option value="_import">Import</option>
<option disabled value="_ledger">Ledger</option>
<hr />
</select>
- </x-box>
+ </div>
<!-- New Wallet Form -->
<dialog id="wallet-new">
<div class="flex v-stretch">
- <div class="flex h-mid" id="wallet-new-name">
- <x-label>Name</x-label>
- <x-input type="text"></x-input>
+ <div id="wallet-new-name" class="flex h-left h-mid">
+ <label for="wallet-new-name-input">Name</label>
+ <input id="wallet-new-name-input" name="wallet-new-name" autocomplete="off" minlength="1" maxlength="80" pattern="[^_].*" placeholder="My Wallet" required />
+ </div>
+ <div id="wallet-new-algorithm" class="flex h-left h-mid h-full">
+ <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 h-left h-mid h-full 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 h-mid h-full">
+ <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-x">
+ <div class="grid x-4"></div>
+ <button class="grid x-4" onclick="formCancel('#wallet-new')">
+ Cancel
+ </button>
+ <button class="grid x-4" onclick="createWallet().then(w => { console.log(w);showWallets() })">
+ OK
+ </button>
</div>
- <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="formCancel('#wallet-new')">
- Cancel
- </x-button>
- <x-button onclick="createWallet().then(w => { console.log(w);showWallets() })">
- OK
- </x-button>
- </x-buttons>
- </x-box>
</div>
</dialog>
<!-- Account Select -->
- <x-box id="accounts">
- <label for="account">Account</label>
- <select id="account" style="width:100%;" onchange="updateWalletSelect()">
+ <x-box id="accounts" class="grid-x">
+ <label for="account" class="grid x-2">Account</label>
+ <select id="account" class="grid x-10" disabled onchange="updateWalletSelect()">
<option value="" disabled>Choose...</option>
<hr />
<option value="_new">New</option>
projects / nemo-wallet.git / commitdiff