Add transaction confirmation screen and password modal
All checks were successful
check / check (push) Successful in 13s

New send flow: Send → Confirm → Password → Broadcast.

Send view: collects To (with ENS resolution), Amount, Token.
"Review" button advances to confirmation. No password field.

Confirm Transaction view: shows From, To (with ENS name),
Amount (with USD value), and runs pre-send checks:
- Scam address warning (checked against local blocklist)
- Self-send warning
- Insufficient balance error (disables Send button)

Password modal: full-screen overlay, appears only after user
clicks Send on the confirmation screen. Decrypts the wallet
secret, signs and broadcasts the transaction. Wrong password
is caught inline.

scamlist.js: hardcoded set of known scam/fraud addresses
(Tornado Cash sanctioned, drainer contracts, address
poisoning). Checked locally, no external API.
This commit is contained in:
2026-02-25 18:55:42 +07:00
parent 023d8441bc
commit 2b2137716c
6 changed files with 349 additions and 83 deletions

View File

@@ -298,27 +298,12 @@
placeholder="0.0"
/>
</div>
<div
id="send-fee-estimate"
class="text-xs text-muted mb-2 hidden"
></div>
<div class="mb-2">
<label class="block mb-1">Password</label>
<p class="text-xs text-muted mb-1">
Required to authorize the transaction.
</p>
<input
type="password"
id="send-password"
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-send-confirm"
id="btn-send-review"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Send
Review
</button>
<button
id="btn-send-back"
@@ -328,11 +313,99 @@
</button>
</div>
<div
id="send-status"
id="send-error"
class="mt-2 border border-border border-dashed p-1 hidden"
></div>
</div>
<!-- ============ CONFIRM TRANSACTION ============ -->
<div id="view-confirm-tx" class="view hidden">
<h2 class="font-bold mb-2">Confirm Transaction</h2>
<div class="mb-2">
<div class="text-xs text-muted">From</div>
<div id="confirm-from" class="text-xs break-all"></div>
</div>
<div class="mb-2">
<div class="text-xs text-muted">To</div>
<div id="confirm-to" class="text-xs break-all"></div>
<div
id="confirm-to-ens"
class="text-xs text-muted hidden"
></div>
</div>
<div class="mb-2">
<div class="text-xs text-muted">Amount</div>
<div id="confirm-amount" class="font-bold"></div>
<div
id="confirm-amount-usd"
class="text-xs text-muted"
></div>
</div>
<div
id="confirm-fee"
class="mb-2 text-xs text-muted hidden"
></div>
<div id="confirm-warnings" class="mb-2 hidden"></div>
<div
id="confirm-errors"
class="mb-2 border border-border border-dashed p-2 hidden"
></div>
<div class="flex gap-2">
<button
id="btn-confirm-send"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Send
</button>
<button
id="btn-confirm-back"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Back
</button>
</div>
<div
id="confirm-status"
class="mt-2 border border-border p-1 hidden"
></div>
</div>
<!-- ============ PASSWORD MODAL ============ -->
<div
id="password-modal"
class="hidden fixed inset-0 bg-bg flex items-center justify-center z-50"
>
<div class="border border-border p-4 bg-bg w-80">
<h2 class="font-bold mb-2">Enter Password</h2>
<p class="text-xs text-muted mb-2">
Your password is needed to authorize this transaction.
</p>
<input
type="password"
id="modal-password"
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg mb-2"
/>
<div
id="modal-password-error"
class="text-xs mb-2 border border-border border-dashed p-1 hidden"
></div>
<div class="flex gap-2">
<button
id="btn-modal-confirm"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Confirm
</button>
<button
id="btn-modal-cancel"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Cancel
</button>
</div>
</div>
</div>
<!-- ============ RECEIVE ============ -->
<div id="view-receive" class="view hidden">
<h2 class="font-bold mb-2">Receive</h2>