Unify create/import into single Add Wallet view
All checks were successful
check / check (push) Successful in 13s
All checks were successful
check / check (push) Successful in 13s
Merge "Create new wallet" and "Import recovery phrase" into one "Add wallet" screen. The recovery phrase textarea starts empty. A clickable die button generates a random phrase and shows a backup warning. Users who already have a phrase just paste it. Welcome screen simplified to two options: "Add wallet" and "Import private key". README updated to match.
This commit is contained in:
@@ -41,48 +41,59 @@
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
Welcome to AutistMask
|
||||
</h1>
|
||||
<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>
|
||||
<p class="mb-3">To get started, add a wallet.</p>
|
||||
<div class="flex flex-col gap-2">
|
||||
<button
|
||||
id="btn-welcome-new"
|
||||
id="btn-welcome-add"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Create a new wallet
|
||||
</button>
|
||||
<button
|
||||
id="btn-welcome-recovery"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
I have a recovery phrase
|
||||
Add wallet
|
||||
</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
|
||||
Import private key
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ CREATE NEW WALLET ============ -->
|
||||
<div id="view-create" class="view hidden">
|
||||
<!-- ============ ADD WALLET (unified create/import) ============ -->
|
||||
<div id="view-add-wallet" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
Create New Wallet
|
||||
Add Wallet
|
||||
</h1>
|
||||
<p class="mb-2">
|
||||
These 12 words are your recovery phrase. Write them down on
|
||||
Enter your 12 or 24 word recovery phrase below, or press the
|
||||
die to generate a new one.
|
||||
</p>
|
||||
<div class="mb-1 flex justify-end">
|
||||
<button
|
||||
id="btn-generate-phrase"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
|
||||
title="Generate a random recovery phrase"
|
||||
>
|
||||
[⚀]
|
||||
</button>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<textarea
|
||||
id="wallet-mnemonic"
|
||||
rows="3"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg resize-y"
|
||||
placeholder="word word word ..."
|
||||
></textarea>
|
||||
</div>
|
||||
<div
|
||||
id="add-wallet-phrase-warning"
|
||||
class="text-xs mb-2 border border-border border-dashed p-2 hidden"
|
||||
>
|
||||
These 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 break-all select-all leading-relaxed"
|
||||
></div>
|
||||
<div class="mb-2">
|
||||
</div>
|
||||
<div class="mb-2" id="add-wallet-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. It is not
|
||||
@@ -90,90 +101,34 @@
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
id="create-password"
|
||||
id="add-wallet-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="mb-2" id="add-wallet-password-confirm-section">
|
||||
<label class="block mb-1">Confirm password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="create-password-confirm"
|
||||
id="add-wallet-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-create-confirm"
|
||||
id="btn-add-wallet-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
I wrote it down — continue
|
||||
Add
|
||||
</button>
|
||||
<button
|
||||
id="btn-create-back"
|
||||
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
|
||||
id="create-error"
|
||||
class="mt-2 border border-border border-dashed p-1 hidden"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<!-- ============ IMPORT RECOVERY PHRASE ============ -->
|
||||
<div id="view-import-phrase" class="view hidden">
|
||||
<h1 class="font-bold border-b border-border pb-1 mb-3">
|
||||
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">
|
||||
<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="word word word ..."
|
||||
></textarea>
|
||||
</div>
|
||||
<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-phrase-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2" id="import-phrase-password-confirm-section">
|
||||
<label class="block mb-1">Confirm password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="import-phrase-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-phrase-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
<button
|
||||
id="btn-import-phrase-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="import-phrase-error"
|
||||
id="add-wallet-error"
|
||||
class="mt-2 border border-border border-dashed p-1 hidden"
|
||||
></div>
|
||||
</div>
|
||||
@@ -262,58 +217,18 @@
|
||||
<div id="wallet-list"></div>
|
||||
|
||||
<!-- add wallet button -->
|
||||
<div class="mt-3 border-t border-border pt-2">
|
||||
<div class="mt-3 border-t border-border pt-2 flex gap-2">
|
||||
<button
|
||||
id="btn-add-wallet"
|
||||
id="btn-main-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"
|
||||
id="btn-main-import-key"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Back
|
||||
+ Import private key
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user