<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
- <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap" rel="stylesheet">
+ <link rel="stylesheet"
+ href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
<script>
let libnemo, css
}
</script>
<style>
- html {
+ html {
--color-blue: #209CE9;
- --color-dark: #20204C;
+ --color-dark: #20204C;
--color-light: #F4FAFF;
--color-gray: #676686;
--color-black: #070707;
--color-white: #FFFFFF;
--text-body: 'Open Sans';
--text-heading: 'Montserrat';
- }
- body {
+ }
+ body {
background-color: var(--color-dark);
- color: var(--color-light);
- fill: var(--color-blue);
+ color: var(--color-light);
+ fill: var(--color-blue);
font-family: var(--text-body);
+ font-size: 16px; /* required to prevent zoom on input focus on mobile */
margin: 0;
- }
+ }
h1, h2, h3, h4, h5, h6 {
font-family: var(--text-heading);
}
label {
margin-right: 0.5em;
}
- #notifications {
- align-items: center;
- display: flex;
- flex-direction: column;
+ #notifications {
+ align-items: center;
+ display: flex;
+ flex-direction: column;
margin: 0 auto;
pointer-events: none;
- position: fixed;
- top: 1rem;
+ position: fixed;
+ top: 1rem;
width: 100%;
- }
- #notifications > dialog[open] {
+ }
+ #notifications > dialog[open] {
background-color: var(--color-blue);
border: 1px solid var(--color-black);
border-radius: 0.5rem;
color: var(--color-light);
- display: flex;
- justify-content: center;
- margin: 0.5rem 0;
+ display: flex;
+ justify-content: center;
+ margin: 0.5rem 0;
pointer-events: auto;
position: relative;
- padding: 0.5rem;
- width: fit-content;
- z-index: 100;
- }
- .page {
- display: none;
- }
- .page.show {
- display: initial;
- }
- .hide {
- display: none;
- }
- h1 {
- text-align: center;
- }
+ padding: 0.5rem;
+ width: fit-content;
+ z-index: 100;
+ }
+ .page {
+ display: none;
+ }
+ .page.show {
+ display: initial;
+ }
+ .hide {
+ display: none;
+ }
+ h1 {
+ text-align: center;
+ }
+ input[type='number'],
+ input[type='password'],
+ input[type='text'],
+ select:focus {
+ font-size: 16px; /* required to prevent zoom on input focus on mobile */
+ }
label:has(+ :required)::after {
color: red;
content: '*';
:required:invalid {
border: 1px solid red;
}
- 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;
- padding: 1rem;
- }
- #xno {
+ 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;
+ padding: 1rem;
+ }
+ #xno {
fill: var(--color-blue);
- flex: 1.5 0 auto;
- }
- nav > a > * {
- aspect-ratio: 1;
+ flex: 1.5 0 auto;
+ }
+ nav > a > * {
+ aspect-ratio: 1;
fill: var(--color-blue);
- height: 100%;
- max-height: 10vh;
- max-width: 10vh;
- width: 100%;
- }
- #xno > svg {
- max-height: 15vh;
- max-width: 15vh;
- }
- </style>
+ flex: 1 0 auto;
+ height: 100%;
+ max-height: 10vh;
+ max-width: 10vh;
+ width: 100%;
+ }
+ #xno > svg {
+ max-height: 15vh;
+ max-width: 15vh;
+ }
+ </style>
</head>
<body onhashchange="switchPage(event)" style="visibility:hidden;">
<div class="flex y-stretch">
<div id="wallet-new-name" class="flex x-left x-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" />
+ <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 x-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>
+ <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>
</div>
<div id="wallet-new-salt" class="flex x-left x-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" />
+ <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 x-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 />
+ <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="flex y-stretch">
<div id="wallet-import-name" class="flex x-left x-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" />
+ <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 x-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>
+ <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>
</div>
<div id="wallet-import-type" class="flex x-left x-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>
+ <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>
</div>
<div id="wallet-import-value" class="flex x-left x-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 />
+ <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 x-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" />
+ <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 x-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 />
+ <input id="wallet-import-password-input" name="wallet-import-password" type="password" autocomplete="off"
+ placeholder="Password" required />
</div>
<hr />
<div class="grid-x">
<div class="grid x-4"></div>
<button id="wallet-import-cancel" class="cancel grid x-4">Cancel</button>
- <button id="wallet-import-ok" class="grid x-4" onclick="importWallet().then(w => { console.log(w);showWallets() })">OK</button>
+ <button id="wallet-import-ok" class="grid x-4"
+ onclick="importWallet().then(w => { console.log(w);showWallets() })">OK</button>
</div>
</div>
</dialog>
<div class="flex y-stretch">
<div id="account-new-name" class="flex x-left x-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" />
+ <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 x-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 />
+ <input id="account-new-index-input" name="account-new-index" type="number" autocomplete="off" min="0"
+ max="2147483647" required />
</div>
<div id="account-new-password" class="flex x-left x-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 />
+ <input id="account-new-password-input" name="account-new-password" autocomplete="off" type="password"
+ placeholder="Password" required />
</div>
<div class="grid-x">
<div class="grid x-4"></div>
<button id="account-new-cancel" class="cancel grid x-4">Cancel</button>
- <button id="account-new-ok" class="grid x-4" onclick="createAccount().then(w => { console.log(w) })">OK</button>
+ <button id="account-new-ok" class="grid x-4"
+ onclick="createAccount().then(w => { console.log(w) })">OK</button>
</div>
</div>
</dialog>
<nav>
<a href="#exchange">
- <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-currency-exchange" viewBox="0 0 16 16">
- <path d="M0 5a5 5 0 0 0 4.027 4.905 6.5 6.5 0 0 1 .544-2.073C3.695 7.536 3.132 6.864 3 5.91h-.5v-.426h.466V5.05q-.001-.07.004-.135H2.5v-.427h.511C3.236 3.24 4.213 2.5 5.681 2.5c.316 0 .59.031.819.085v.733a3.5 3.5 0 0 0-.815-.082c-.919 0-1.538.466-1.734 1.252h1.917v.427h-1.98q-.004.07-.003.147v.422h1.983v.427H3.93c.118.602.468 1.03 1.005 1.229a6.5 6.5 0 0 1 4.97-3.113A5.002 5.002 0 0 0 0 5m16 5.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0m-7.75 1.322c.069.835.746 1.485 1.964 1.562V14h.54v-.62c1.259-.086 1.996-.74 1.996-1.69 0-.865-.563-1.31-1.57-1.54l-.426-.1V8.374c.54.06.884.347.966.745h.948c-.07-.804-.779-1.433-1.914-1.502V7h-.54v.629c-1.076.103-1.808.732-1.808 1.622 0 .787.544 1.288 1.45 1.493l.358.085v1.78c-.554-.08-.92-.376-1.003-.787zm1.96-1.895c-.532-.12-.82-.364-.82-.732 0-.41.311-.719.824-.809v1.54h-.005zm.622 1.044c.645.145.943.38.943.796 0 .474-.37.8-1.02.86v-1.674z" />
+ <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-currency-exchange"
+ viewBox="0 0 16 16">
+ <path
+ d="M0 5a5 5 0 0 0 4.027 4.905 6.5 6.5 0 0 1 .544-2.073C3.695 7.536 3.132 6.864 3 5.91h-.5v-.426h.466V5.05q-.001-.07.004-.135H2.5v-.427h.511C3.236 3.24 4.213 2.5 5.681 2.5c.316 0 .59.031.819.085v.733a3.5 3.5 0 0 0-.815-.082c-.919 0-1.538.466-1.734 1.252h1.917v.427h-1.98q-.004.07-.003.147v.422h1.983v.427H3.93c.118.602.468 1.03 1.005 1.229a6.5 6.5 0 0 1 4.97-3.113A5.002 5.002 0 0 0 0 5m16 5.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0m-7.75 1.322c.069.835.746 1.485 1.964 1.562V14h.54v-.62c1.259-.086 1.996-.74 1.996-1.69 0-.865-.563-1.31-1.57-1.54l-.426-.1V8.374c.54.06.884.347.966.745h.948c-.07-.804-.779-1.433-1.914-1.502V7h-.54v.629c-1.076.103-1.808.732-1.808 1.622 0 .787.544 1.288 1.45 1.493l.358.085v1.78c-.554-.08-.92-.376-1.003-.787zm1.96-1.895c-.532-.12-.82-.364-.82-.732 0-.41.311-.719.824-.809v1.54h-.005zm.622 1.044c.645.145.943.38.943.796 0 .474-.37.8-1.02.86v-1.674z" />
</svg>
</a>
<a href="#history">
- <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-book-half" viewBox="0 0 16 16">
- <path d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783" />
+ <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-book-half"
+ viewBox="0 0 16 16">
+ <path
+ d="M8.5 2.687c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783" />
</svg>
</a>
<a href="#transact" id="xno">
<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" viewBox="0 0 1080 1080">
<circle cx="540" cy="540" r="540" />
- <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" />
+ <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">
- <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-person-rolodex" viewBox="0 0 16 16">
+ <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-person-rolodex"
+ viewBox="0 0 16 16">
<path d="M8 9.05a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5" />
- <path d="M1 1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h.5a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h.5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H6.707L6 1.293A1 1 0 0 0 5.293 1zm0 1h4.293L6 2.707A1 1 0 0 0 6.707 3H15v10h-.085a1.5 1.5 0 0 0-2.4-.63C11.885 11.223 10.554 10 8 10c-2.555 0-3.886 1.224-4.514 2.37a1.5 1.5 0 0 0-2.4.63H1z" />
+ <path
+ d="M1 1a1 1 0 0 0-1 1v11a1 1 0 0 0 1 1h.5a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h9a.5.5 0 0 0 .5-.5.5.5 0 0 1 1 0 .5.5 0 0 0 .5.5h.5a1 1 0 0 0 1-1V3a1 1 0 0 0-1-1H6.707L6 1.293A1 1 0 0 0 5.293 1zm0 1h4.293L6 2.707A1 1 0 0 0 6.707 3H15v10h-.085a1.5 1.5 0 0 0-2.4-.63C11.885 11.223 10.554 10 8 10c-2.555 0-3.886 1.224-4.514 2.37a1.5 1.5 0 0 0-2.4.63H1z" />
</svg>
</a>
<a href="#settings">
- <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-gear" viewBox="0 0 16 16">
- <path d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0" />
- <path d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z" />
+ <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" fill="currentColor" class="bi bi-gear"
+ viewBox="0 0 16 16">
+ <path
+ d="M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0" />
+ <path
+ d="M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z" />
</svg>
</a>
</nav>
projects / nemo-wallet.git / commitdiff