Redesign UI for non-technical users
All checks were successful
check / check (push) Successful in 13s
All checks were successful
check / check (push) Successful in 13s
Replace jargon-heavy terminal-style UI with plain-language views. New data model: wallets (HD or private key) contain addresses. Main view lists all addresses grouped by wallet with balances. HD wallets get a "+" to add addresses; key wallets have one. Two import paths: recovery phrase and private key. All labels use plain English, full-sentence errors, inline help text. README updated with full UI philosophy, language guide, data model, and navigation docs.
This commit is contained in:
@@ -11,22 +11,24 @@
|
||||
<!-- ============ LOCK SCREEN ============ -->
|
||||
<div id="view-lock" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [locked]
|
||||
AutistMask
|
||||
</h1>
|
||||
<p class="mb-3">
|
||||
Your wallet is locked. Enter your password to continue.
|
||||
</p>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Password:</label>
|
||||
<label class="block mb-1">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="unlock-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="enter password to unlock"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
id="btn-unlock"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
unlock
|
||||
Unlock
|
||||
</button>
|
||||
<div
|
||||
id="unlock-error"
|
||||
@@ -34,57 +36,70 @@
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SETUP: WELCOME ============ -->
|
||||
<div id="view-setup" class="view hidden">
|
||||
<!-- ============ WELCOME / FIRST USE ============ -->
|
||||
<div id="view-welcome" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [setup]
|
||||
Welcome to AutistMask
|
||||
</h1>
|
||||
<p class="mb-3">No wallet found. Create or import one.</p>
|
||||
<div class="flex gap-2">
|
||||
<p class="mb-3">
|
||||
To get started, add a wallet. You can create a brand new one
|
||||
or bring in one you already have.
|
||||
</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<button
|
||||
id="btn-setup-create"
|
||||
id="btn-welcome-new"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
create new wallet
|
||||
Create a new wallet
|
||||
</button>
|
||||
<button
|
||||
id="btn-setup-import"
|
||||
id="btn-welcome-recovery"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
import seed phrase
|
||||
I have a recovery phrase
|
||||
</button>
|
||||
<button
|
||||
id="btn-welcome-key"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
I have a private key
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SETUP: CREATE ============ -->
|
||||
<!-- ============ CREATE NEW WALLET ============ -->
|
||||
<div id="view-create" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [create wallet]
|
||||
Create New Wallet
|
||||
</h1>
|
||||
<p class="mb-2">
|
||||
Write down this seed phrase and store it safely. It is the
|
||||
only way to recover your wallet.
|
||||
These 12 words are your recovery phrase. Write them down on
|
||||
paper and keep them somewhere safe. Anyone with these words
|
||||
can access your funds. If you lose them, your wallet cannot
|
||||
be recovered.
|
||||
</p>
|
||||
<div
|
||||
id="create-mnemonic"
|
||||
class="border border-border p-2 mb-3 font-mono break-all select-all"
|
||||
class="border border-border p-2 mb-3 break-all select-all leading-relaxed"
|
||||
></div>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Set password:</label>
|
||||
<label class="block mb-1">Choose a password</label>
|
||||
<p class="text-xs text-muted mb-1">
|
||||
This password locks the wallet on this device. It is not
|
||||
the same as your recovery phrase.
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
id="create-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="password"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Confirm password:</label>
|
||||
<label class="block mb-1">Confirm password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="create-password-confirm"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="confirm password"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
@@ -92,13 +107,13 @@
|
||||
id="btn-create-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
i backed it up, create wallet
|
||||
I wrote it down — continue
|
||||
</button>
|
||||
<button
|
||||
id="btn-create-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
back
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
@@ -107,61 +122,119 @@
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SETUP: IMPORT ============ -->
|
||||
<div id="view-import" class="view hidden">
|
||||
<!-- ============ IMPORT RECOVERY PHRASE ============ -->
|
||||
<div id="view-import-phrase" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [import wallet]
|
||||
Import Recovery Phrase
|
||||
</h1>
|
||||
<p class="mb-2">
|
||||
Enter the 12 or 24 word recovery phrase from your existing
|
||||
wallet. Separate each word with a space.
|
||||
</p>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1"
|
||||
>Seed phrase (12 or 24 words):</label
|
||||
>
|
||||
<textarea
|
||||
id="import-mnemonic"
|
||||
rows="3"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg resize-y"
|
||||
placeholder="word1 word2 word3 ..."
|
||||
placeholder="word word word ..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Set password:</label>
|
||||
<div class="mb-2" id="import-phrase-password-section">
|
||||
<label class="block mb-1">Choose a password</label>
|
||||
<p class="text-xs text-muted mb-1">
|
||||
This password locks the wallet on this device.
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
id="import-password"
|
||||
id="import-phrase-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="password"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Confirm password:</label>
|
||||
<div class="mb-2" id="import-phrase-password-confirm-section">
|
||||
<label class="block mb-1">Confirm password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="import-password-confirm"
|
||||
id="import-phrase-password-confirm"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="confirm password"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
id="btn-import-confirm"
|
||||
id="btn-import-phrase-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
import wallet
|
||||
Import
|
||||
</button>
|
||||
<button
|
||||
id="btn-import-back"
|
||||
id="btn-import-phrase-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
back
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="import-error"
|
||||
id="import-phrase-error"
|
||||
class="mt-2 border border-border border-dashed p-1 hidden"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ MAIN / ACCOUNT VIEW ============ -->
|
||||
<!-- ============ IMPORT PRIVATE KEY ============ -->
|
||||
<div id="view-import-key" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
Import Private Key
|
||||
</h1>
|
||||
<p class="mb-2">
|
||||
Paste your private key below. This wallet will have a single
|
||||
address.
|
||||
</p>
|
||||
<div class="mb-2">
|
||||
<input
|
||||
type="password"
|
||||
id="import-private-key"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="0x..."
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2" id="import-key-password-section">
|
||||
<label class="block mb-1">Choose a password</label>
|
||||
<p class="text-xs text-muted mb-1">
|
||||
This password locks the wallet on this device.
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
id="import-key-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2" id="import-key-password-confirm-section">
|
||||
<label class="block mb-1">Confirm password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="import-key-password-confirm"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
id="btn-import-key-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
<button
|
||||
id="btn-import-key-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="import-key-error"
|
||||
class="mt-2 border border-border border-dashed p-1 hidden"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
|
||||
<div id="view-main" class="view hidden">
|
||||
<div
|
||||
class="flex justify-between items-center border-b border-border pb-1 mb-2"
|
||||
@@ -171,61 +244,128 @@
|
||||
<button
|
||||
id="btn-settings"
|
||||
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
title="settings"
|
||||
title="Settings"
|
||||
>
|
||||
[=]
|
||||
Settings
|
||||
</button>
|
||||
<button
|
||||
id="btn-lock"
|
||||
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
title="lock"
|
||||
title="Lock wallet"
|
||||
>
|
||||
[x]
|
||||
Lock
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- account selector -->
|
||||
<div class="mb-2">
|
||||
<div class="flex justify-between items-center">
|
||||
<select
|
||||
id="account-selector"
|
||||
class="border border-border p-1 font-mono text-sm bg-bg text-fg flex-1 mr-2"
|
||||
></select>
|
||||
<button
|
||||
id="btn-copy-address"
|
||||
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
|
||||
title="copy address"
|
||||
>
|
||||
[cp]
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="current-address"
|
||||
class="text-xs text-muted mt-1 break-all"
|
||||
></div>
|
||||
<!-- wallet list -->
|
||||
<div id="wallet-list"></div>
|
||||
|
||||
<!-- add wallet button -->
|
||||
<div class="mt-3 border-t border-border pt-2">
|
||||
<button
|
||||
id="btn-add-wallet"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
+ Add wallet
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ADD WALLET (from main view) ============ -->
|
||||
<div id="view-add-wallet" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
Add Wallet
|
||||
</h1>
|
||||
<p class="mb-3">What kind of wallet do you want to add?</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<button
|
||||
id="btn-add-wallet-new"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-left"
|
||||
>
|
||||
Create a new wallet
|
||||
<span class="block text-xs text-muted"
|
||||
>Generates a new recovery phrase with one
|
||||
address</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
id="btn-add-wallet-phrase"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-left"
|
||||
>
|
||||
Import recovery phrase
|
||||
<span class="block text-xs text-muted"
|
||||
>Use an existing 12 or 24 word recovery phrase</span
|
||||
>
|
||||
</button>
|
||||
<button
|
||||
id="btn-add-wallet-key"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-left"
|
||||
>
|
||||
Import private key
|
||||
<span class="block text-xs text-muted"
|
||||
>A single address from a private key</span
|
||||
>
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-3">
|
||||
<button
|
||||
id="btn-add-wallet-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ADDRESS DETAIL VIEW ============ -->
|
||||
<div id="view-address" class="view hidden">
|
||||
<div
|
||||
class="flex justify-between items-center border-b border-border pb-1 mb-2"
|
||||
>
|
||||
<h1 class="font-bold" id="address-title">Address</h1>
|
||||
<button
|
||||
id="btn-address-back"
|
||||
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div
|
||||
id="address-full"
|
||||
class="text-xs break-all mb-1 cursor-pointer"
|
||||
title="Click to copy"
|
||||
></div>
|
||||
<div
|
||||
class="text-xs text-muted mb-3"
|
||||
id="address-copied-msg"
|
||||
></div>
|
||||
|
||||
<!-- balance -->
|
||||
<div class="border-b border-border-light pb-2 mb-2">
|
||||
<div class="text-base font-bold">
|
||||
<span id="eth-balance">0.0000</span> ETH
|
||||
<span id="address-eth-balance">0.0000</span> ETH
|
||||
</div>
|
||||
<div
|
||||
class="text-xs text-muted"
|
||||
id="address-usd-value"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- action buttons -->
|
||||
<!-- actions -->
|
||||
<div class="flex gap-2 mb-3">
|
||||
<button
|
||||
id="btn-send"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
||||
>
|
||||
send
|
||||
Send
|
||||
</button>
|
||||
<button
|
||||
id="btn-receive"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
||||
>
|
||||
receive
|
||||
Receive
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -239,24 +379,22 @@
|
||||
id="btn-add-token"
|
||||
class="border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
|
||||
>
|
||||
[+]
|
||||
+ Add
|
||||
</button>
|
||||
</div>
|
||||
<div id="token-list">
|
||||
<div class="text-muted text-xs py-1">
|
||||
no tokens added
|
||||
No tokens added yet. Use "+ Add" to track a token.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SEND VIEW ============ -->
|
||||
<!-- ============ SEND ============ -->
|
||||
<div id="view-send" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [send]
|
||||
</h1>
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">Send</h1>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Token:</label>
|
||||
<label class="block mb-1">What to send</label>
|
||||
<select
|
||||
id="send-token"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
@@ -265,16 +403,16 @@
|
||||
</select>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">To address:</label>
|
||||
<label class="block mb-1">To</label>
|
||||
<input
|
||||
type="text"
|
||||
id="send-to"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="0x..."
|
||||
placeholder="Recipient address (0x...)"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Amount:</label>
|
||||
<label class="block mb-1">Amount</label>
|
||||
<input
|
||||
type="text"
|
||||
id="send-amount"
|
||||
@@ -283,7 +421,7 @@
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="send-gas-estimate"
|
||||
id="send-fee-estimate"
|
||||
class="text-xs text-muted mb-2 hidden"
|
||||
></div>
|
||||
<div class="flex gap-2">
|
||||
@@ -291,13 +429,13 @@
|
||||
id="btn-send-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
send
|
||||
Send
|
||||
</button>
|
||||
<button
|
||||
id="btn-send-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
back
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
@@ -306,39 +444,46 @@
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ RECEIVE VIEW ============ -->
|
||||
<!-- ============ RECEIVE ============ -->
|
||||
<div id="view-receive" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [receive]
|
||||
Receive
|
||||
</h1>
|
||||
<p class="mb-2">Your address:</p>
|
||||
<p class="mb-2">
|
||||
Share this address with the sender. Make sure you only use
|
||||
this address to receive Ethereum tokens.
|
||||
</p>
|
||||
<div
|
||||
id="receive-address"
|
||||
class="border border-border p-2 font-mono break-all select-all mb-3"
|
||||
class="border border-border p-2 break-all select-all mb-3"
|
||||
></div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
id="btn-receive-copy"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
copy to clipboard
|
||||
Copy address
|
||||
</button>
|
||||
<button
|
||||
id="btn-receive-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
back
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ ADD TOKEN VIEW ============ -->
|
||||
<!-- ============ ADD TOKEN ============ -->
|
||||
<div id="view-add-token" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [add token]
|
||||
Add Token
|
||||
</h1>
|
||||
<p class="mb-2">
|
||||
Enter the contract address of the token you want to track.
|
||||
You can find this on the token's page on Etherscan.
|
||||
</p>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1">Token contract address:</label>
|
||||
<label class="block mb-1">Contract address</label>
|
||||
<input
|
||||
type="text"
|
||||
id="add-token-address"
|
||||
@@ -355,13 +500,13 @@
|
||||
id="btn-add-token-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
add token
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
id="btn-add-token-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
back
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
@@ -370,81 +515,50 @@
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SETTINGS VIEW ============ -->
|
||||
<!-- ============ SETTINGS ============ -->
|
||||
<div id="view-settings" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [settings]
|
||||
Settings
|
||||
</h1>
|
||||
|
||||
<h2 class="font-bold mb-1">RPC Endpoint</h2>
|
||||
<h2 class="font-bold mb-1">Network</h2>
|
||||
<p class="text-xs text-muted mb-1">
|
||||
The server used to talk to the Ethereum network. Change this
|
||||
if you run your own node or prefer a different provider.
|
||||
</p>
|
||||
<div class="mb-3">
|
||||
<input
|
||||
type="text"
|
||||
id="settings-rpc"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="https://..."
|
||||
/>
|
||||
<button
|
||||
id="btn-save-rpc"
|
||||
class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
save
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 class="font-bold mb-1">Accounts</h2>
|
||||
<div class="mb-3">
|
||||
<button
|
||||
id="btn-derive-account"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
derive next account
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<h2 class="font-bold mb-1">Wallets</h2>
|
||||
<div class="mb-3">
|
||||
<button
|
||||
id="btn-show-seed"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
show seed phrase
|
||||
</button>
|
||||
<button
|
||||
id="btn-import-additional"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
import another wallet
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="settings-seed-display"
|
||||
class="border border-border p-2 font-mono break-all mb-3 hidden"
|
||||
></div>
|
||||
|
||||
<h2 class="font-bold mb-1">Tokens</h2>
|
||||
<div id="settings-token-list" class="mb-3">
|
||||
<div class="text-muted text-xs">no tokens added</div>
|
||||
</div>
|
||||
|
||||
<div class="border-t border-border pt-2">
|
||||
<button
|
||||
id="btn-settings-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
back
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ APPROVAL VIEW ============ -->
|
||||
<!-- ============ APPROVAL ============ -->
|
||||
<div id="view-approve" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
AutistMask [approve request]
|
||||
A website is requesting access
|
||||
</h1>
|
||||
<div class="mb-2">
|
||||
<div class="text-xs text-muted mb-1">
|
||||
Site: <span id="approve-origin"></span>
|
||||
From:
|
||||
<span id="approve-origin" class="font-bold"></span>
|
||||
</div>
|
||||
<div class="font-bold mb-1" id="approve-type"></div>
|
||||
</div>
|
||||
@@ -457,13 +571,13 @@
|
||||
id="btn-approve"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
approve
|
||||
Allow
|
||||
</button>
|
||||
<button
|
||||
id="btn-reject"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
reject
|
||||
Deny
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user