refactor: unify add-wallet, import-key, and import-xprv into single view
Merge all three wallet import methods (recovery phrase, private key, extended key/xprv) into one tabbed add-wallet view with a mode selector. This fixes the blank import-xprv render (it was missing from the VIEWS array) and the broken back-button navigation from the separate import views. - Add tab selector: Recovery Phrase | Private Key | Extended Key (xprv) - Share password fields across all modes - Remove separate import-key and import-xprv views and modules - Add duplicate wallet detection for private key imports - All tabs follow affordance policy (visible border + hover state) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
user
@@ -56,37 +56,101 @@
|
||||
< Back
|
||||
</button>
|
||||
<h2 class="font-bold mb-2">Add Wallet</h2>
|
||||
<p class="mb-2">
|
||||
Enter your 12 or 24 word recovery phrase below, or click the
|
||||
button to roll the die for a new one.
|
||||
</p>
|
||||
<div class="mb-1 flex justify-end">
|
||||
|
||||
<!-- Mode selector tabs -->
|
||||
<div class="flex gap-1 mb-3">
|
||||
<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"
|
||||
id="tab-mnemonic"
|
||||
class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg bg-fg text-bg"
|
||||
>
|
||||
[⚀]
|
||||
Recovery Phrase
|
||||
</button>
|
||||
<button
|
||||
id="tab-privkey"
|
||||
class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
|
||||
>
|
||||
Private Key
|
||||
</button>
|
||||
<button
|
||||
id="tab-xprv"
|
||||
class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
|
||||
>
|
||||
Extended Key (xprv)
|
||||
</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>
|
||||
|
||||
<!-- Mnemonic form section -->
|
||||
<div id="add-wallet-section-mnemonic">
|
||||
<p class="mb-2">
|
||||
Enter your 12 or 24 word recovery phrase below, or click
|
||||
the button to roll the die for 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"
|
||||
>
|
||||
Write these words down and keep them safe. Anyone with
|
||||
them can take your funds; if you lose them, your wallet
|
||||
is gone.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="add-wallet-phrase-warning"
|
||||
class="text-xs mb-2 border border-border border-dashed p-2 hidden"
|
||||
>
|
||||
Write these words down and keep them safe. Anyone with them
|
||||
can take your funds; if you lose them, your wallet is gone.
|
||||
|
||||
<!-- Private key form section -->
|
||||
<div id="add-wallet-section-privkey" class="hidden">
|
||||
<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>
|
||||
|
||||
<!-- Extended key (xprv) form section -->
|
||||
<div id="add-wallet-section-xprv" class="hidden">
|
||||
<p class="mb-2">
|
||||
Paste your extended private key (xprv) below. This will
|
||||
import the HD wallet and scan for used addresses.
|
||||
</p>
|
||||
<div class="mb-2">
|
||||
<input
|
||||
type="password"
|
||||
id="import-xprv-key"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="xprv..."
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Shared password fields -->
|
||||
<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">
|
||||
<p
|
||||
class="text-xs text-muted mb-1"
|
||||
id="add-wallet-password-hint"
|
||||
>
|
||||
This password encrypts your recovery phrase on this
|
||||
device. You will need it to send funds.
|
||||
</p>
|
||||
@@ -107,122 +171,6 @@
|
||||
<button
|
||||
id="btn-add-wallet-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
<div class="mt-3 text-xs text-muted">
|
||||
Have a private key instead?
|
||||
<button
|
||||
id="btn-add-wallet-import-key"
|
||||
class="underline cursor-pointer bg-transparent border-none text-fg text-xs font-mono p-0"
|
||||
>
|
||||
Import private key
|
||||
</button>
|
||||
</div>
|
||||
<div class="mt-1 text-xs text-muted">
|
||||
Have an extended private key (xprv)?
|
||||
<button
|
||||
id="btn-add-wallet-import-xprv"
|
||||
class="underline cursor-pointer bg-transparent border-none text-fg text-xs font-mono p-0"
|
||||
>
|
||||
Import xprv
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ IMPORT PRIVATE KEY ============ -->
|
||||
<div id="view-import-key" class="view hidden">
|
||||
<button
|
||||
id="btn-import-key-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
||||
>
|
||||
< Back
|
||||
</button>
|
||||
<h2 class="font-bold mb-2">Import Private Key</h2>
|
||||
<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 encrypts your private key on this device.
|
||||
You will need it to send funds.
|
||||
</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>
|
||||
<button
|
||||
id="btn-import-key-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ============ IMPORT XPRV ============ -->
|
||||
<div id="view-import-xprv" class="view hidden">
|
||||
<button
|
||||
id="btn-import-xprv-back"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
||||
>
|
||||
< Back
|
||||
</button>
|
||||
<h2 class="font-bold mb-2">Import Extended Private Key</h2>
|
||||
<p class="mb-2">
|
||||
Paste your extended private key (xprv) below. This will
|
||||
import the HD wallet and scan for used addresses.
|
||||
</p>
|
||||
<div class="mb-2">
|
||||
<input
|
||||
type="password"
|
||||
id="import-xprv-key"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="xprv..."
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2" id="import-xprv-password-section">
|
||||
<label class="block mb-1">Choose a password</label>
|
||||
<p class="text-xs text-muted mb-1">
|
||||
This password encrypts your key on this device. You will
|
||||
need it to send funds.
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
id="import-xprv-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2" id="import-xprv-password-confirm-section">
|
||||
<label class="block mb-1">Confirm password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="import-xprv-password-confirm"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<button
|
||||
id="btn-import-xprv-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Import
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user