Compare commits

..

15 Commits

Author SHA1 Message Date
user
3db8243a77 refactor: consolidate wallet import into unified add-wallet view with navigation stack
All checks were successful
check / check (push) Successful in 22s
- Merge mnemonic, private key, and xprv import into a single add-wallet view
  with tab-style mode selector instead of separate views with text links
- Add view navigation stack to helpers.js so back buttons return to the
  actual previous view instead of hardcoded destinations
- Remove separate import-key and import-xprv views from HTML
- Remove importKey.js and importXprv.js from index.js (files kept but unused)
- Fix import-xprv never rendering (was missing from VIEWS array)

Closes #20
2026-02-28 12:23:13 -08:00
8c1bd039fe fix: use formatAddressHtml in receive view for display consistency
The receive view was using raw textContent and a manually constructed
color dot instead of the shared formatAddressHtml helper used by other
views. This violated the display consistency policy ('Same data
formatted identically across all screens').

Changes:
- Use formatAddressHtml() to render address with color dot, title
  (e.g. 'Wallet 1 — Address 1'), and ENS name — matching addressDetail
- Make the address block itself click-to-copy (matching policy:
  'Clicking any address copies the full untruncated value')
- Replace separate receive-dot/receive-address spans with a single
  receive-address-block element
- Address is still shown in full (no truncation) as appropriate for
  the receive view

Closes #58
2026-02-28 12:23:13 -08:00
user
f796f71f2f fix: style private key as red well, remove explicit copy text
- Replace dashed border with light red well (bg-danger-well) and rounded corners
- Remove redundant 'Click to copy.' paragraph
- Add --color-danger-well theme token
2026-02-28 12:23:13 -08:00
user
e825f0ee29 fix: always use 'Transaction' as detail view heading
The transaction detail view was dynamically changing its title to match
the transaction type (e.g. 'Swap' for contract interactions), causing
inconsistency with the Screen Map specification. The heading is now
always 'Transaction' regardless of type. The action type is still
shown in the 'Action' detail section below.

Closes #65
2026-02-28 12:23:13 -08:00
clawbot
c8481c7a47 fix: resolve token symbols from multiple sources (closes #51)
When tokenBalances doesn't contain an entry for a token (e.g. before
balances are fetched), the symbol fell back to '?' in addressToken
and send views.

Add resolveSymbol() helper that checks tokenBalances → TOKEN_BY_ADDRESS
(known tokens) → trackedTokens → truncated address as last resort.

Fixes USDC and other known tokens showing '?' when balance data
hasn't loaded yet.
2026-02-28 12:23:13 -08:00
clawbot
d1ca378be8 fix: show decoded swap details on success-tx view (closes #63)
Carry decoded calldata info (action name, description, token details,
amounts, addresses) from the approval confirmation view through to the
success-tx view. For swap transactions, this now shows the same decoded
details (protocol, action, token symbols, amounts) that appeared on the
signing confirmation screen.

Changes:
- approval.js: store decoded calldata in pendingTxDetails.decoded
- txStatus.js: carry decoded through state.viewData, render in success view
- index.html: add success-tx-decoded container element
2026-02-28 12:23:13 -08:00
user
639bd15e1e fix: export-privkey view address display consistency
Add blockie identicon, wallet/address title, and color dot with full
address display to the export-privkey view, matching the pattern used
by AddressDetail and other views. Address is click-to-copy.
2026-02-28 12:23:13 -08:00
user
082b22328c style: rework overflow menu to look like menu items, not buttons
- Menu items now use text-xs font-light for smaller, lighter type
  that's clearly distinct from the pushbuttons in the action row
- The ··· button stays visually inverted (bg-fg text-bg) while the
  dropdown menu is open, reverting when closed
- Menu items styled as plain text rows with subtle hover background,
  no borders or button-like appearance
2026-02-28 12:23:13 -08:00
clawbot
e6b46ad1d2 style: dropdown menu with subtle grey hover and list padding
Use bg-hover token for grey mouseover instead of full fg/bg
inversion. Add py-1 padding to dropdown container and px-4 to
items for proper list appearance with margin around items.
2026-02-28 12:23:13 -08:00
user
f8db0e4cd5 fix: make overflow menu auto-width to prevent text wrapping 2026-02-28 12:23:13 -08:00
user
a095c2b74f refactor: move Export Private Key into overflow menu
Replace the muted text link at the bottom of AddressDetail with a
'···' overflow/more button in the action button row. Clicking it
opens a dropdown with 'Export Private Key' as an option. Clicking
outside closes the dropdown. The pattern is reusable for future
secondary actions.
2026-02-28 12:23:13 -08:00
user
7a6bf3af9a fix: make export key a subtle link, add view to VIEWS array
- Moved 'Export private key' from prominent button row to a small
  muted text link at the bottom of the address detail view
- Added 'export-privkey' to the VIEWS array in helpers.js — this was
  the cause of the blank view (showView toggled all known views but
  didn't know about export-privkey, so it was never unhidden)
2026-02-28 12:23:13 -08:00
user
f6356dd447 feat: add export private key from address detail view
Adds an 'Export Private Key' button to the address detail view.
Clicking it opens a password confirmation screen; after verification,
the derived private key is displayed in a copyable field with a
security warning. The key is cleared when navigating away.

Closes #19
2026-02-28 12:23:13 -08:00
user
3b9d3957b2 fix: derive xprv addresses from correct BIP44 path (m/44'/60'/0'/0)
All checks were successful
check / check (push) Successful in 9s
hdWalletFromXprv() and getSignerForAddress() for xprv type were deriving
addresses directly from the root key (m/N) instead of the standard BIP44
Ethereum path (m/44'/60'/0'/0/N). This caused imported xprv wallets to
generate completely wrong addresses.

Navigate to the BIP44 Ethereum derivation path before deriving child
addresses, matching the behavior of mnemonic-based wallet imports.
2026-02-28 11:33:56 -08:00
user
743d16c479 feat: add xprv wallet import support
Add the ability to import an existing HD wallet using an extended
private key (xprv) instead of a mnemonic phrase.

- New 'xprv' wallet type with full HD derivation and address scanning
- New importXprv view with password encryption
- Updated getSignerForAddress to handle xprv wallet type
- Added xprv link to the add-wallet view
- Allow adding derived addresses for xprv wallets

Closes #20
2026-02-28 11:33:56 -08:00
18 changed files with 412 additions and 2871 deletions

View File

@@ -58,32 +58,29 @@
<h2 class="font-bold mb-2">Add Wallet</h2> <h2 class="font-bold mb-2">Add Wallet</h2>
<!-- Mode selector tabs --> <!-- Mode selector tabs -->
<div <div class="flex gap-1 mb-3">
class="flex border-b border-border mb-3"
id="add-wallet-tabs"
>
<button <button
id="tab-mnemonic" id="btn-mode-mnemonic"
class="px-3 py-1.5 cursor-pointer text-xs font-bold border border-border border-b-bg bg-bg -mb-px" class="border border-border px-2 py-1 cursor-pointer text-xs bg-fg text-bg"
> >
From Phrase Recovery Phrase
</button> </button>
<button <button
id="tab-privkey" id="btn-mode-key"
class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg" class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
> >
From Key Private Key
</button> </button>
<button <button
id="tab-xprv" id="btn-mode-xprv"
class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg" class="border border-border px-2 py-1 cursor-pointer text-xs hover:bg-fg hover:text-bg"
> >
From xprv xprv
</button> </button>
</div> </div>
<!-- Mnemonic form section --> <!-- ---- Mnemonic mode ---- -->
<div id="add-wallet-section-mnemonic"> <div id="add-wallet-mode-mnemonic">
<p class="mb-2"> <p class="mb-2">
Enter your 12 or 24 word recovery phrase below, or click Enter your 12 or 24 word recovery phrase below, or click
the button to roll the die for a new one. the button to roll the die for a new one.
@@ -115,8 +112,8 @@
</div> </div>
</div> </div>
<!-- Private key form section --> <!-- ---- Private key mode ---- -->
<div id="add-wallet-section-privkey" class="hidden"> <div id="add-wallet-mode-key" class="hidden">
<p class="mb-2"> <p class="mb-2">
Paste your private key below. This wallet will have a Paste your private key below. This wallet will have a
single address. single address.
@@ -131,8 +128,8 @@
</div> </div>
</div> </div>
<!-- Extended key (xprv) form section --> <!-- ---- xprv mode ---- -->
<div id="add-wallet-section-xprv" class="hidden"> <div id="add-wallet-mode-xprv" class="hidden">
<p class="mb-2"> <p class="mb-2">
Paste your extended private key (xprv) below. This will Paste your extended private key (xprv) below. This will
import the HD wallet and scan for used addresses. import the HD wallet and scan for used addresses.
@@ -151,11 +148,11 @@
<div class="mb-2" id="add-wallet-password-section"> <div class="mb-2" id="add-wallet-password-section">
<label class="block mb-1">Choose a password</label> <label class="block mb-1">Choose a password</label>
<p <p
class="text-xs text-muted mb-1"
id="add-wallet-password-hint" id="add-wallet-password-hint"
class="text-xs text-muted mb-1"
> >
This password encrypts your recovery phrase on this This password encrypts your secret on this device. You
device. You will need it to send funds. will need it to send funds.
</p> </p>
<input <input
type="password" type="password"
@@ -175,7 +172,7 @@
id="btn-add-wallet-confirm" id="btn-add-wallet-confirm"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer" class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
> >
Import Add
</button> </button>
</div> </div>
@@ -505,11 +502,6 @@
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg" class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
placeholder="Address (0x...) or ENS name" placeholder="Address (0x...) or ENS name"
/> />
<div
id="send-to-error"
class="text-xs"
style="min-height: 1.25rem; color: #cc0000"
></div>
</div> </div>
<div class="mb-2"> <div class="mb-2">
<div class="flex justify-between mb-1"> <div class="flex justify-between mb-1">
@@ -586,40 +578,15 @@
<div id="confirm-fee-amount" class="text-xs"></div> <div id="confirm-fee-amount" class="text-xs"></div>
</div> </div>
<div id="confirm-warnings" class="mb-2 hidden"></div> <div id="confirm-warnings" class="mb-2 hidden"></div>
<div
id="confirm-recipient-warning"
class="mb-2"
style="visibility: hidden"
>
<div
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
>
WARNING: The recipient address has ZERO transaction
history. This may indicate a fresh or unused address.
Double-check the address before sending.
</div>
</div>
<div <div
id="confirm-errors" id="confirm-errors"
class="mb-2 border border-border border-dashed p-2 hidden" class="mb-2 border border-border border-dashed p-2 hidden"
></div> ></div>
<div class="mb-2">
<label class="block mb-1 text-xs">Password</label>
<input
type="password"
id="confirm-tx-password"
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
/>
</div>
<div
id="confirm-tx-password-error"
class="text-xs mb-2 min-h-[1.25rem]"
></div>
<button <button
id="btn-confirm-send" id="btn-confirm-send"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer" class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
> >
Sign &amp; Send Send
</button> </button>
</div> </div>
@@ -698,6 +665,42 @@
</button> </button>
</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 ============ --> <!-- ============ RECEIVE ============ -->
<div id="view-receive" class="view hidden"> <div id="view-receive" class="view hidden">
<button <button
@@ -1137,10 +1140,7 @@
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg" class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
/> />
</div> </div>
<div <div id="approve-tx-error" class="text-xs hidden mb-2"></div>
id="approve-tx-error"
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
></div>
<div class="flex justify-between"> <div class="flex justify-between">
<button <button
id="btn-approve-tx" id="btn-approve-tx"
@@ -1203,10 +1203,7 @@
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg" class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
/> />
</div> </div>
<div <div id="approve-sign-error" class="text-xs hidden mb-2"></div>
id="approve-sign-error"
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
></div>
<div class="flex justify-between"> <div class="flex justify-between">
<button <button
id="btn-approve-sign" id="btn-approve-sign"

View File

@@ -72,7 +72,6 @@ const RESTORABLE_VIEWS = new Set([
"receive", "receive",
"settings", "settings",
"settings-addtoken", "settings-addtoken",
"confirm-tx",
"transaction", "transaction",
"success-tx", "success-tx",
"error-tx", "error-tx",
@@ -126,13 +125,6 @@ function restoreView() {
case "settings-addtoken": case "settings-addtoken":
settingsAddToken.show(); settingsAddToken.show();
break; break;
case "confirm-tx":
if (state.viewData && state.viewData.pendingTx) {
confirmTx.restore();
} else {
fallbackView();
}
break;
case "transaction": case "transaction":
if (state.viewData && state.viewData.tx) { if (state.viewData && state.viewData.tx) {
transactionDetail.render(); transactionDetail.render();

View File

@@ -1,49 +1,36 @@
const { $, showView, showFlash } = require("./helpers"); const { $, showView, showFlash, goBack } = require("./helpers");
const { const {
generateMnemonic, generateMnemonic,
hdWalletFromMnemonic, hdWalletFromMnemonic,
isValidMnemonic,
addressFromPrivateKey,
hdWalletFromXprv, hdWalletFromXprv,
isValidMnemonic,
isValidXprv, isValidXprv,
addressFromPrivateKey,
} = require("../../shared/wallet"); } = require("../../shared/wallet");
const { encryptWithPassword } = require("../../shared/vault"); const { encryptWithPassword } = require("../../shared/vault");
const { state, saveState } = require("../../shared/state"); const { state, saveState } = require("../../shared/state");
const { scanForAddresses } = require("../../shared/balances"); const { scanForAddresses } = require("../../shared/balances");
let currentMode = "mnemonic"; let currentMode = "mnemonic"; // "mnemonic" | "key" | "xprv"
const MODES = ["mnemonic", "privkey", "xprv"]; const MODES = ["mnemonic", "key", "xprv"];
const PASSWORD_HINTS = { function setMode(mode) {
mnemonic:
"This password encrypts your recovery phrase on this device. You will need it to send funds.",
privkey:
"This password encrypts your private key on this device. You will need it to send funds.",
xprv: "This password encrypts your key on this device. You will need it to send funds.",
};
function switchMode(mode) {
currentMode = mode; currentMode = mode;
for (const m of MODES) { for (const m of MODES) {
$("add-wallet-section-" + m).classList.toggle("hidden", m !== mode); const section = $("add-wallet-mode-" + m);
const tab = $("tab-" + m); if (section) section.classList.toggle("hidden", m !== mode);
const isActive = m === mode; const btn = $("btn-mode-" + m);
// Active: bold, solid border on top/sides, no bottom border (connects to content) if (btn) {
tab.classList.toggle("font-bold", isActive); if (m === mode) {
tab.classList.toggle("border-solid", isActive); btn.classList.add("bg-fg", "text-bg");
tab.classList.toggle("border-border", isActive); btn.classList.remove("hover:bg-fg", "hover:text-bg");
tab.classList.toggle("border-b-bg", isActive); } else {
tab.classList.toggle("bg-bg", isActive); btn.classList.remove("bg-fg", "text-bg");
// Inactive: muted text, dashed border on top/sides, transparent bottom, hover invert btn.classList.add("hover:bg-fg", "hover:text-bg");
tab.classList.toggle("text-muted", !isActive); }
tab.classList.toggle("border-dashed", !isActive); }
tab.classList.toggle("border-border-light", !isActive);
tab.classList.toggle("border-b-transparent", !isActive);
tab.classList.toggle("hover:bg-fg", !isActive);
tab.classList.toggle("hover:text-bg", !isActive);
} }
$("add-wallet-password-hint").textContent = PASSWORD_HINTS[mode];
} }
function show() { function show() {
@@ -53,29 +40,58 @@ function show() {
$("add-wallet-password").value = ""; $("add-wallet-password").value = "";
$("add-wallet-password-confirm").value = ""; $("add-wallet-password-confirm").value = "";
$("add-wallet-phrase-warning").classList.add("hidden"); $("add-wallet-phrase-warning").classList.add("hidden");
switchMode("mnemonic"); setMode("mnemonic");
showView("add-wallet"); showView("add-wallet");
} }
function validatePassword() { function init(ctx) {
// Mode switching
$("btn-mode-mnemonic").addEventListener("click", () => setMode("mnemonic"));
$("btn-mode-key").addEventListener("click", () => setMode("key"));
$("btn-mode-xprv").addEventListener("click", () => setMode("xprv"));
$("btn-generate-phrase").addEventListener("click", () => {
$("wallet-mnemonic").value = generateMnemonic();
$("add-wallet-phrase-warning").classList.remove("hidden");
});
$("btn-add-wallet-confirm").addEventListener("click", async () => {
// Shared password validation
const pw = $("add-wallet-password").value; const pw = $("add-wallet-password").value;
const pw2 = $("add-wallet-password-confirm").value; const pw2 = $("add-wallet-password-confirm").value;
if (!pw) { if (!pw) {
showFlash("Please choose a password."); showFlash("Please choose a password.");
return null; return;
} }
if (pw.length < 12) { if (pw.length < 12) {
showFlash("Password must be at least 12 characters."); showFlash("Password must be at least 12 characters.");
return null; return;
} }
if (pw !== pw2) { if (pw !== pw2) {
showFlash("Passwords do not match."); showFlash("Passwords do not match.");
return null; return;
}
return pw;
} }
async function importMnemonic(ctx) { if (currentMode === "mnemonic") {
await handleMnemonic(ctx, pw);
} else if (currentMode === "key") {
await handlePrivateKey(ctx, pw);
} else if (currentMode === "xprv") {
await handleXprv(ctx, pw);
}
});
$("btn-add-wallet-back").addEventListener("click", () => {
if (!state.hasWallet) {
goBack("welcome");
} else {
ctx.renderWalletList();
goBack("main");
}
});
}
async function handleMnemonic(ctx, pw) {
const mnemonic = $("wallet-mnemonic").value.trim(); const mnemonic = $("wallet-mnemonic").value.trim();
if (!mnemonic) { if (!mnemonic) {
showFlash("Enter a recovery phrase or press the die to generate one."); showFlash("Enter a recovery phrase or press the die to generate one.");
@@ -94,8 +110,6 @@ async function importMnemonic(ctx) {
showFlash("Invalid recovery phrase. Check for typos."); showFlash("Invalid recovery phrase. Check for typos.");
return; return;
} }
const pw = validatePassword();
if (!pw) return;
const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic); const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
const duplicate = state.wallets.find( const duplicate = state.wallets.find(
(w) => (w) =>
@@ -127,7 +141,6 @@ async function importMnemonic(ctx) {
ctx.renderWalletList(); ctx.renderWalletList();
showView("main"); showView("main");
// Scan for used HD addresses beyond index 0.
showFlash("Scanning for addresses...", 30000); showFlash("Scanning for addresses...", 30000);
const scan = await scanForAddresses(xpub, state.rpcUrl); const scan = await scanForAddresses(xpub, state.rpcUrl);
if (scan.addresses.length > 1) { if (scan.addresses.length > 1) {
@@ -147,7 +160,7 @@ async function importMnemonic(ctx) {
ctx.doRefreshAndRender(); ctx.doRefreshAndRender();
} }
async function importPrivateKey(ctx) { async function handlePrivateKey(ctx, pw) {
const key = $("import-private-key").value.trim(); const key = $("import-private-key").value.trim();
if (!key) { if (!key) {
showFlash("Please enter your private key."); showFlash("Please enter your private key.");
@@ -160,20 +173,6 @@ async function importPrivateKey(ctx) {
showFlash("Invalid private key."); showFlash("Invalid private key.");
return; return;
} }
const pw = validatePassword();
if (!pw) return;
const duplicate = state.wallets.find(
(w) =>
w.type === "key" &&
w.addresses[0] &&
w.addresses[0].address.toLowerCase() === addr.toLowerCase(),
);
if (duplicate) {
showFlash(
"This private key is already added (" + duplicate.name + ").",
);
return;
}
const encrypted = await encryptWithPassword(key, pw); const encrypted = await encryptWithPassword(key, pw);
const walletNum = state.wallets.length + 1; const walletNum = state.wallets.length + 1;
state.wallets.push({ state.wallets.push({
@@ -190,7 +189,7 @@ async function importPrivateKey(ctx) {
ctx.doRefreshAndRender(); ctx.doRefreshAndRender();
} }
async function importXprvKey(ctx) { async function handleXprv(ctx, pw) {
const xprv = $("import-xprv-key").value.trim(); const xprv = $("import-xprv-key").value.trim();
if (!xprv) { if (!xprv) {
showFlash("Please enter your extended private key."); showFlash("Please enter your extended private key.");
@@ -218,8 +217,6 @@ async function importXprvKey(ctx) {
showFlash("This key is already added (" + duplicate.name + ")."); showFlash("This key is already added (" + duplicate.name + ").");
return; return;
} }
const pw = validatePassword();
if (!pw) return;
const encrypted = await encryptWithPassword(xprv, pw); const encrypted = await encryptWithPassword(xprv, pw);
const walletNum = state.wallets.length + 1; const walletNum = state.wallets.length + 1;
const wallet = { const wallet = {
@@ -238,7 +235,6 @@ async function importXprvKey(ctx) {
ctx.renderWalletList(); ctx.renderWalletList();
showView("main"); showView("main");
// Scan for used HD addresses beyond index 0.
showFlash("Scanning for addresses...", 30000); showFlash("Scanning for addresses...", 30000);
const scan = await scanForAddresses(xpub, state.rpcUrl); const scan = await scanForAddresses(xpub, state.rpcUrl);
if (scan.addresses.length > 1) { if (scan.addresses.length > 1) {
@@ -258,38 +254,4 @@ async function importXprvKey(ctx) {
ctx.doRefreshAndRender(); ctx.doRefreshAndRender();
} }
function init(ctx) {
// Tab click handlers
$("tab-mnemonic").addEventListener("click", () => switchMode("mnemonic"));
$("tab-privkey").addEventListener("click", () => switchMode("privkey"));
$("tab-xprv").addEventListener("click", () => switchMode("xprv"));
// Generate mnemonic
$("btn-generate-phrase").addEventListener("click", () => {
$("wallet-mnemonic").value = generateMnemonic();
$("add-wallet-phrase-warning").classList.remove("hidden");
});
// Import / confirm
$("btn-add-wallet-confirm").addEventListener("click", async () => {
if (currentMode === "mnemonic") {
await importMnemonic(ctx);
} else if (currentMode === "privkey") {
await importPrivateKey(ctx);
} else if (currentMode === "xprv") {
await importXprvKey(ctx);
}
});
// Back button
$("btn-add-wallet-back").addEventListener("click", () => {
if (!state.hasWallet) {
showView("welcome");
} else {
ctx.renderWalletList();
showView("main");
}
});
}
module.exports = { init, show }; module.exports = { init, show };

View File

@@ -15,11 +15,7 @@ const {
filterTransactions, filterTransactions,
} = require("../../shared/transactions"); } = require("../../shared/transactions");
const { resolveEnsNames } = require("../../shared/ens"); const { resolveEnsNames } = require("../../shared/ens");
const { const { updateSendBalance, renderSendTokenSelect } = require("./send");
updateSendBalance,
renderSendTokenSelect,
resetSendValidation,
} = require("./send");
const { log } = require("../../shared/log"); const { log } = require("../../shared/log");
const makeBlockie = require("ethereum-blockies-base64"); const makeBlockie = require("ethereum-blockies-base64");
const { decryptWithPassword } = require("../../shared/vault"); const { decryptWithPassword } = require("../../shared/vault");
@@ -263,7 +259,6 @@ function init(_ctx) {
$("send-token").classList.remove("hidden"); $("send-token").classList.remove("hidden");
$("send-token-static").classList.add("hidden"); $("send-token-static").classList.add("hidden");
updateSendBalance(); updateSendBalance();
resetSendValidation();
showView("send"); showView("send");
}); });
@@ -325,9 +320,6 @@ function init(_ctx) {
$("export-privkey-flash").classList.remove("hidden"); $("export-privkey-flash").classList.remove("hidden");
return; return;
} }
const btn = $("btn-export-privkey-confirm");
btn.disabled = true;
btn.classList.add("text-muted");
const wallet = state.wallets[state.selectedWallet]; const wallet = state.wallets[state.selectedWallet];
try { try {
const secret = await decryptWithPassword( const secret = await decryptWithPassword(
@@ -347,9 +339,6 @@ function init(_ctx) {
} catch { } catch {
$("export-privkey-flash").textContent = "Wrong password."; $("export-privkey-flash").textContent = "Wrong password.";
$("export-privkey-flash").classList.remove("hidden"); $("export-privkey-flash").classList.remove("hidden");
} finally {
btn.disabled = false;
btn.classList.remove("text-muted");
} }
}); });

View File

@@ -23,11 +23,7 @@ const {
filterTransactions, filterTransactions,
} = require("../../shared/transactions"); } = require("../../shared/transactions");
const { resolveEnsNames } = require("../../shared/ens"); const { resolveEnsNames } = require("../../shared/ens");
const { const { updateSendBalance, renderSendTokenSelect } = require("./send");
updateSendBalance,
renderSendTokenSelect,
resetSendValidation,
} = require("./send");
const { log } = require("../../shared/log"); const { log } = require("../../shared/log");
const makeBlockie = require("ethereum-blockies-base64"); const makeBlockie = require("ethereum-blockies-base64");
@@ -376,7 +372,6 @@ function init(_ctx) {
}); });
} }
updateSendBalance(); updateSendBalance();
resetSendValidation();
showView("send"); showView("send");
}); });

View File

@@ -4,8 +4,6 @@ const {
addressTitle, addressTitle,
escapeHtml, escapeHtml,
showView, showView,
showError,
hideError,
} = require("./helpers"); } = require("./helpers");
const { state, saveState } = require("../../shared/state"); const { state, saveState } = require("../../shared/state");
const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers"); const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
@@ -172,8 +170,6 @@ function showTxApproval(details) {
// If this is an ERC-20 call, try to extract the real recipient and amount // If this is an ERC-20 call, try to extract the real recipient and amount
const decoded = decodeCalldata(details.txParams.data, toAddr || ""); const decoded = decodeCalldata(details.txParams.data, toAddr || "");
if (decoded && decoded.details) { if (decoded && decoded.details) {
let decodedTokenAddr = null;
let decodedTokenSymbol = null;
for (const d of decoded.details) { for (const d of decoded.details) {
if (d.label === "Recipient" && d.address) { if (d.label === "Recipient" && d.address) {
pendingTxDetails.to = d.address; pendingTxDetails.to = d.address;
@@ -181,20 +177,10 @@ function showTxApproval(details) {
if (d.label === "Amount") { if (d.label === "Amount") {
pendingTxDetails.amount = d.rawValue || d.value; pendingTxDetails.amount = d.rawValue || d.value;
} }
if (d.label === "Token In" && d.isToken && d.address) {
const t = TOKEN_BY_ADDRESS.get(d.address.toLowerCase());
if (t) {
decodedTokenAddr = d.address;
decodedTokenSymbol = t.symbol;
}
}
} }
if (token) { if (token) {
pendingTxDetails.token = toAddr; pendingTxDetails.token = toAddr;
pendingTxDetails.tokenSymbol = token.symbol; pendingTxDetails.tokenSymbol = token.symbol;
} else if (decodedTokenAddr) {
pendingTxDetails.token = decodedTokenAddr;
pendingTxDetails.tokenSymbol = decodedTokenSymbol;
} }
} }
@@ -268,9 +254,6 @@ function showTxApproval(details) {
$("approve-tx-data-section").classList.add("hidden"); $("approve-tx-data-section").classList.add("hidden");
} }
$("approve-tx-password").value = "";
$("approve-tx-error").classList.add("hidden");
showView("approve-tx"); showView("approve-tx");
} }
@@ -359,7 +342,7 @@ function showSignApproval(details) {
} }
$("approve-sign-password").value = ""; $("approve-sign-password").value = "";
hideError("approve-sign-error"); $("approve-sign-error").classList.add("hidden");
$("btn-approve-sign").disabled = false; $("btn-approve-sign").disabled = false;
$("btn-approve-sign").classList.remove("text-muted"); $("btn-approve-sign").classList.remove("text-muted");
@@ -424,10 +407,11 @@ function init(ctx) {
$("btn-approve-tx").addEventListener("click", () => { $("btn-approve-tx").addEventListener("click", () => {
const password = $("approve-tx-password").value; const password = $("approve-tx-password").value;
if (!password) { if (!password) {
showError("approve-tx-error", "Please enter your password."); $("approve-tx-error").textContent = "Please enter your password.";
$("approve-tx-error").classList.remove("hidden");
return; return;
} }
hideError("approve-tx-error"); $("approve-tx-error").classList.add("hidden");
$("btn-approve-tx").disabled = true; $("btn-approve-tx").disabled = true;
$("btn-approve-tx").classList.add("text-muted"); $("btn-approve-tx").classList.add("text-muted");
@@ -463,10 +447,11 @@ function init(ctx) {
$("btn-approve-sign").addEventListener("click", () => { $("btn-approve-sign").addEventListener("click", () => {
const password = $("approve-sign-password").value; const password = $("approve-sign-password").value;
if (!password) { if (!password) {
showError("approve-sign-error", "Please enter your password."); $("approve-sign-error").textContent = "Please enter your password.";
$("approve-sign-error").classList.remove("hidden");
return; return;
} }
hideError("approve-sign-error"); $("approve-sign-error").classList.add("hidden");
$("btn-approve-sign").disabled = true; $("btn-approve-sign").disabled = true;
$("btn-approve-sign").classList.add("text-muted"); $("btn-approve-sign").classList.add("text-muted");
@@ -484,7 +469,8 @@ function init(ctx) {
} else { } else {
const msg = const msg =
(response && response.error) || "Signing failed."; (response && response.error) || "Signing failed.";
showError("approve-sign-error", msg); $("approve-sign-error").textContent = msg;
$("approve-sign-error").classList.remove("hidden");
$("btn-approve-sign").disabled = false; $("btn-approve-sign").disabled = false;
$("btn-approve-sign").classList.remove("text-muted"); $("btn-approve-sign").classList.remove("text-muted");
} }

View File

@@ -1,6 +1,6 @@
// Transaction confirmation view with inline password. // Transaction confirmation view + password modal.
// Shows transaction details, warnings, errors. On Sign & Send, // Shows transaction details, warnings, errors. On proceed, opens
// reads inline password, decrypts secret, signs and broadcasts. // password modal, decrypts secret, signs and broadcasts.
const { const {
parseEther, parseEther,
@@ -14,7 +14,6 @@ const {
showError, showError,
hideError, hideError,
showView, showView,
showFlash,
addressTitle, addressTitle,
addressDotHtml, addressDotHtml,
escapeHtml, escapeHtml,
@@ -24,7 +23,7 @@ const { getSignerForAddress } = require("../../shared/wallet");
const { decryptWithPassword } = require("../../shared/vault"); const { decryptWithPassword } = require("../../shared/vault");
const { formatUsd, getPrice } = require("../../shared/prices"); const { formatUsd, getPrice } = require("../../shared/prices");
const { getProvider } = require("../../shared/balances"); const { getProvider } = require("../../shared/balances");
const { isScamAddress, isNullOrBurnAddress } = require("../../shared/scamlist"); const { isScamAddress } = require("../../shared/scamlist");
const { ERC20_ABI } = require("../../shared/constants"); const { ERC20_ABI } = require("../../shared/constants");
const { log } = require("../../shared/log"); const { log } = require("../../shared/log");
const makeBlockie = require("ethereum-blockies-base64"); const makeBlockie = require("ethereum-blockies-base64");
@@ -38,35 +37,6 @@ const EXT_ICON =
`</svg></span>`; `</svg></span>`;
let pendingTx = null; let pendingTx = null;
// Track active warnings so async checks can append without overwriting.
let activeWarnings = [];
function renderWarnings(el, warnings) {
activeWarnings = warnings.slice();
if (warnings.length > 0) {
el.innerHTML = warnings
.map(
(w) =>
`<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w}</div>`,
)
.join("");
el.classList.remove("hidden");
} else {
el.classList.add("hidden");
}
}
function appendWarning(el, message) {
activeWarnings.push(message);
renderWarnings(el, activeWarnings);
}
function restore() {
const d = state.viewData;
if (d && d.pendingTx) {
show(d.pendingTx);
}
}
function etherscanTokenLink(address) { function etherscanTokenLink(address) {
return `https://etherscan.io/token/${address}`; return `https://etherscan.io/token/${address}`;
@@ -125,22 +95,11 @@ function show(txInfo) {
// Token contract section (ERC-20 only) // Token contract section (ERC-20 only)
const tokenSection = $("confirm-token-section"); const tokenSection = $("confirm-token-section");
if (isErc20) { if (isErc20) {
const dot = addressDotHtml(txInfo.token);
const link = etherscanTokenLink(txInfo.token); const link = etherscanTokenLink(txInfo.token);
$("confirm-token-contract").innerHTML = $("confirm-token-contract").innerHTML =
`<div class="flex items-center">${dot}` + escapeHtml(txInfo.token) +
`<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(txInfo.token)}">${escapeHtml(txInfo.token)}</span>` + ` <a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
`<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
`</div>`;
tokenSection.classList.remove("hidden"); tokenSection.classList.remove("hidden");
// Attach click-to-copy on the contract address
const copyEl = tokenSection.querySelector("[data-copy]");
if (copyEl) {
copyEl.onclick = () => {
navigator.clipboard.writeText(copyEl.dataset.copy);
showFlash("Copied!");
};
}
} else { } else {
tokenSection.classList.add("hidden"); tokenSection.classList.add("hidden");
} }
@@ -187,24 +146,29 @@ function show(txInfo) {
$("confirm-balance").textContent = valueWithUsd(bal + " ETH", balUsd); $("confirm-balance").textContent = valueWithUsd(bal + " ETH", balUsd);
} }
// Check for warnings (synchronous checks first, async checks added later) // Check for warnings
const warnings = []; const warnings = [];
if (isScamAddress(txInfo.to)) { if (isScamAddress(txInfo.to)) {
warnings.push( warnings.push(
"This address is on a known scam/fraud list. Do not send funds to this address.", "This address is on a known scam/fraud list. Do not send funds to this address.",
); );
} }
if (isNullOrBurnAddress(txInfo.to)) {
warnings.push(
"This is a null or burn address. Funds sent here will be permanently lost.",
);
}
if (txInfo.to.toLowerCase() === txInfo.from.toLowerCase()) { if (txInfo.to.toLowerCase() === txInfo.from.toLowerCase()) {
warnings.push("You are sending to your own address."); warnings.push("You are sending to your own address.");
} }
const warningsEl = $("confirm-warnings"); const warningsEl = $("confirm-warnings");
renderWarnings(warningsEl, warnings); if (warnings.length > 0) {
warningsEl.innerHTML = warnings
.map(
(w) =>
`<div class="border border-border border-dashed p-2 mb-1 text-xs font-bold">WARNING: ${w}</div>`,
)
.join("");
warningsEl.classList.remove("hidden");
} else {
warningsEl.classList.add("hidden");
}
// Check for errors // Check for errors
const errors = []; const errors = [];
@@ -250,24 +214,12 @@ function show(txInfo) {
sendBtn.classList.remove("text-muted"); sendBtn.classList.remove("text-muted");
} }
// Reset password field and error
$("confirm-tx-password").value = "";
hideError("confirm-tx-password-error");
// Gas estimate — show placeholder then fetch async // Gas estimate — show placeholder then fetch async
$("confirm-fee").classList.remove("hidden"); $("confirm-fee").classList.remove("hidden");
$("confirm-fee-amount").textContent = "Estimating..."; $("confirm-fee-amount").textContent = "Estimating...";
state.viewData = { pendingTx: txInfo };
showView("confirm-tx"); showView("confirm-tx");
// Hide the legacy recipient warning element (warnings now unified)
const legacyWarningEl = $("confirm-recipient-warning");
if (legacyWarningEl) {
legacyWarningEl.style.display = "none";
}
estimateGas(txInfo); estimateGas(txInfo);
checkRecipientHistory(txInfo);
} }
async function estimateGas(txInfo) { async function estimateGas(txInfo) {
@@ -310,45 +262,39 @@ async function estimateGas(txInfo) {
} }
} }
async function checkRecipientHistory(txInfo) { function showPasswordModal() {
const warningsEl = $("confirm-warnings"); $("modal-password").value = "";
try { hideError("modal-password-error");
const provider = getProvider(state.rpcUrl); $("password-modal").classList.remove("hidden");
const code = await provider.getCode(txInfo.to);
if (code && code !== "0x") {
// Recipient is a contract address — warn the user
appendWarning(
warningsEl,
"The recipient is a contract address. Sending tokens directly to a contract may result in permanent loss of funds.",
);
return;
}
const txCount = await provider.getTransactionCount(txInfo.to);
if (txCount === 0) {
appendWarning(
warningsEl,
"The recipient address has ZERO transaction history. This may indicate a fresh or unused address. Double-check the address before sending.",
);
}
} catch (e) {
log.errorf("recipient history check failed:", e.message);
} }
function hidePasswordModal() {
$("password-modal").classList.add("hidden");
} }
function init(ctx) { function init(ctx) {
$("btn-confirm-send").addEventListener("click", async () => { $("btn-confirm-send").addEventListener("click", () => {
const password = $("confirm-tx-password").value; showPasswordModal();
});
$("btn-confirm-back").addEventListener("click", () => {
showView("send");
});
$("btn-modal-cancel").addEventListener("click", () => {
hidePasswordModal();
});
$("btn-modal-confirm").addEventListener("click", async () => {
const password = $("modal-password").value;
if (!password) { if (!password) {
showError( showError("modal-password-error", "Please enter your password.");
"confirm-tx-password-error",
"Please enter your password.",
);
return; return;
} }
const wallet = state.wallets[state.selectedWallet]; const wallet = state.wallets[state.selectedWallet];
let decryptedSecret; let decryptedSecret;
hideError("confirm-tx-password-error"); hideError("modal-password-error");
try { try {
decryptedSecret = await decryptWithPassword( decryptedSecret = await decryptWithPassword(
@@ -356,12 +302,11 @@ function init(ctx) {
password, password,
); );
} catch (e) { } catch (e) {
showError("confirm-tx-password-error", "Wrong password."); showError("modal-password-error", "Wrong password.");
return; return;
} }
$("btn-confirm-send").disabled = true; hidePasswordModal();
$("btn-confirm-send").classList.add("text-muted");
let tx; let tx;
try { try {
@@ -398,15 +343,8 @@ function init(ctx) {
decryptedSecret = null; decryptedSecret = null;
const hash = tx ? tx.hash : null; const hash = tx ? tx.hash : null;
txStatus.showError(pendingTx, hash, e.shortMessage || e.message); txStatus.showError(pendingTx, hash, e.shortMessage || e.message);
} finally {
$("btn-confirm-send").disabled = false;
$("btn-confirm-send").classList.remove("text-muted");
} }
}); });
$("btn-confirm-back").addEventListener("click", () => {
showView("send");
});
} }
module.exports = { init, show, restore }; module.exports = { init, show };

View File

@@ -40,10 +40,6 @@ function init(_ctx) {
return; return;
} }
const btn = $("btn-delete-wallet-confirm");
btn.disabled = true;
btn.classList.add("text-muted");
const walletIdx = deleteWalletIndex; const walletIdx = deleteWalletIndex;
const wallet = state.wallets[walletIdx]; const wallet = state.wallets[walletIdx];
@@ -53,8 +49,6 @@ function init(_ctx) {
} catch (_e) { } catch (_e) {
$("delete-wallet-flash").textContent = "Wrong password."; $("delete-wallet-flash").textContent = "Wrong password.";
$("delete-wallet-flash").classList.remove("hidden"); $("delete-wallet-flash").classList.remove("hidden");
btn.disabled = false;
btn.classList.remove("text-muted");
return; return;
} }

View File

@@ -33,6 +33,9 @@ const VIEWS = [
"export-privkey", "export-privkey",
]; ];
// Simple view history stack for back-button navigation.
const viewStack = [];
function $(id) { function $(id) {
return document.getElementById(id); return document.getElementById(id);
} }
@@ -47,7 +50,13 @@ function hideError(id) {
$(id).classList.add("hidden"); $(id).classList.add("hidden");
} }
function showView(name) { function showView(name, opts) {
const skipPush = opts && opts.skipPush;
if (!skipPush && state.currentView && state.currentView !== name) {
viewStack.push(state.currentView);
// Keep the stack bounded to avoid unbounded growth.
if (viewStack.length > 20) viewStack.splice(0, viewStack.length - 20);
}
for (const v of VIEWS) { for (const v of VIEWS) {
const el = document.getElementById(`view-${v}`); const el = document.getElementById(`view-${v}`);
if (el) { if (el) {
@@ -65,6 +74,17 @@ function showView(name) {
} }
} }
// Navigate to the previous view in the stack. Falls back to fallbackView
// (default "main") when the stack is empty.
function goBack(fallbackView) {
const prev = viewStack.pop();
if (prev) {
showView(prev, { skipPush: true });
} else {
showView(fallbackView || "main", { skipPush: true });
}
}
let flashTimer = null; let flashTimer = null;
function clearFlash() { function clearFlash() {
@@ -263,6 +283,7 @@ module.exports = {
showError, showError,
hideError, hideError,
showView, showView,
goBack,
showFlash, showFlash,
balanceLine, balanceLine,
balanceLinesForAddress, balanceLinesForAddress,

View File

@@ -11,11 +11,7 @@ const {
truncateMiddle, truncateMiddle,
} = require("./helpers"); } = require("./helpers");
const { state, saveState, currentAddress } = require("../../shared/state"); const { state, saveState, currentAddress } = require("../../shared/state");
const { const { updateSendBalance, renderSendTokenSelect } = require("./send");
updateSendBalance,
renderSendTokenSelect,
resetSendValidation,
} = require("./send");
const { deriveAddressFromXpub } = require("../../shared/wallet"); const { deriveAddressFromXpub } = require("../../shared/wallet");
const { const {
formatUsd, formatUsd,
@@ -392,7 +388,6 @@ function init(ctx) {
$("send-token-static").classList.add("hidden"); $("send-token-static").classList.add("hidden");
renderSendTokenSelect(addr); renderSendTokenSelect(addr);
updateSendBalance(); updateSendBalance();
resetSendValidation();
showView("send"); showView("send");
}); });

View File

@@ -0,0 +1,69 @@
const { $, showView, showFlash } = require("./helpers");
const { addressFromPrivateKey } = require("../../shared/wallet");
const { encryptWithPassword } = require("../../shared/vault");
const { state, saveState } = require("../../shared/state");
function show() {
$("import-private-key").value = "";
$("import-key-password").value = "";
$("import-key-password-confirm").value = "";
showView("import-key");
}
function init(ctx) {
$("btn-import-key-confirm").addEventListener("click", async () => {
const key = $("import-private-key").value.trim();
if (!key) {
showFlash("Please enter your private key.");
return;
}
let addr;
try {
addr = addressFromPrivateKey(key);
} catch (e) {
showFlash("Invalid private key.");
return;
}
const pw = $("import-key-password").value;
const pw2 = $("import-key-password-confirm").value;
if (!pw) {
showFlash("Please choose a password.");
return;
}
if (pw.length < 12) {
showFlash("Password must be at least 12 characters.");
return;
}
if (pw !== pw2) {
showFlash("Passwords do not match.");
return;
}
const encrypted = await encryptWithPassword(key, pw);
const walletNum = state.wallets.length + 1;
state.wallets.push({
type: "key",
name: "Wallet " + walletNum,
encryptedSecret: encrypted,
addresses: [
{ address: addr, balance: "0.0000", tokenBalances: [] },
],
});
state.hasWallet = true;
await saveState();
ctx.renderWalletList();
showView("main");
ctx.doRefreshAndRender();
});
$("btn-import-key-back").addEventListener("click", () => {
if (!state.hasWallet) {
showView("welcome");
} else {
ctx.renderWalletList();
showView("main");
}
});
}
module.exports = { init, show };

View File

@@ -0,0 +1,106 @@
const { $, showView, showFlash } = require("./helpers");
const { hdWalletFromXprv, isValidXprv } = require("../../shared/wallet");
const { encryptWithPassword } = require("../../shared/vault");
const { state, saveState } = require("../../shared/state");
const { scanForAddresses } = require("../../shared/balances");
function show() {
$("import-xprv-key").value = "";
$("import-xprv-password").value = "";
$("import-xprv-password-confirm").value = "";
showView("import-xprv");
}
function init(ctx) {
$("btn-import-xprv-confirm").addEventListener("click", async () => {
const xprv = $("import-xprv-key").value.trim();
if (!xprv) {
showFlash("Please enter your extended private key.");
return;
}
if (!isValidXprv(xprv)) {
showFlash("Invalid extended private key.");
return;
}
let result;
try {
result = hdWalletFromXprv(xprv);
} catch (e) {
showFlash("Invalid extended private key.");
return;
}
const { xpub, firstAddress } = result;
const duplicate = state.wallets.find(
(w) =>
(w.type === "hd" || w.type === "xprv") &&
w.addresses[0] &&
w.addresses[0].address.toLowerCase() ===
firstAddress.toLowerCase(),
);
if (duplicate) {
showFlash("This key is already added (" + duplicate.name + ").");
return;
}
const pw = $("import-xprv-password").value;
const pw2 = $("import-xprv-password-confirm").value;
if (!pw) {
showFlash("Please choose a password.");
return;
}
if (pw.length < 12) {
showFlash("Password must be at least 12 characters.");
return;
}
if (pw !== pw2) {
showFlash("Passwords do not match.");
return;
}
const encrypted = await encryptWithPassword(xprv, pw);
const walletNum = state.wallets.length + 1;
const wallet = {
type: "xprv",
name: "Wallet " + walletNum,
xpub: xpub,
encryptedSecret: encrypted,
nextIndex: 1,
addresses: [
{ address: firstAddress, balance: "0.0000", tokenBalances: [] },
],
};
state.wallets.push(wallet);
state.hasWallet = true;
await saveState();
ctx.renderWalletList();
showView("main");
// Scan for used HD addresses beyond index 0.
showFlash("Scanning for addresses...", 30000);
const scan = await scanForAddresses(xpub, state.rpcUrl);
if (scan.addresses.length > 1) {
wallet.addresses = scan.addresses.map((a) => ({
address: a.address,
balance: "0.0000",
tokenBalances: [],
}));
wallet.nextIndex = scan.nextIndex;
await saveState();
ctx.renderWalletList();
showFlash("Found " + scan.addresses.length + " addresses.");
} else {
showFlash("Ready.", 1000);
}
ctx.doRefreshAndRender();
});
$("btn-import-xprv-back").addEventListener("click", () => {
if (!state.hasWallet) {
showView("welcome");
} else {
ctx.renderWalletList();
showView("main");
}
});
}
module.exports = { init, show };

View File

@@ -11,107 +11,6 @@ const { state, currentAddress } = require("../../shared/state");
let ctx; let ctx;
const { getProvider } = require("../../shared/balances"); const { getProvider } = require("../../shared/balances");
const { KNOWN_SYMBOLS, resolveSymbol } = require("../../shared/tokenList"); const { KNOWN_SYMBOLS, resolveSymbol } = require("../../shared/tokenList");
const { getAddress } = require("ethers");
const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
/**
* Validate a destination address string.
* Returns { valid: true } or { valid: false, error: "..." }.
*/
function validateToAddress(value) {
const v = value.trim();
if (!v) return { valid: false, error: "" };
// ENS names: contains a dot and doesn't start with 0x
if (v.includes(".") && !v.startsWith("0x")) {
// Basic ENS format check: at least one label before and after dot
if (/^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$/.test(v)) {
return { valid: true };
}
return {
valid: false,
error: "Please enter a valid ENS name.",
};
}
// Must look like an Ethereum address
if (!/^0x[0-9a-fA-F]{40}$/.test(v)) {
return {
valid: false,
error: "Please enter a valid Ethereum address.",
};
}
// Reject zero address
if (v.toLowerCase() === ZERO_ADDRESS) {
return {
valid: false,
error: "Sending to the zero address is not allowed.",
};
}
// EIP-55 checksum validation: all-lowercase is ok, otherwise must match checksum
if (v !== v.toLowerCase()) {
try {
const checksummed = getAddress(v);
if (checksummed !== v) {
return {
valid: false,
error: "Address checksum is invalid. Please double-check the address.",
};
}
} catch {
return {
valid: false,
error: "Address checksum is invalid. Please double-check the address.",
};
}
}
// Warn if sending to own address
const addr = currentAddress();
if (addr && v.toLowerCase() === addr.address.toLowerCase()) {
// Allow but will warn — we return valid with a warning
return {
valid: true,
warning: "This is your own address. Are you sure?",
};
}
return { valid: true };
}
function updateToValidation() {
const input = $("send-to");
const errorEl = $("send-to-error");
const btn = $("btn-send-review");
const value = input.value.trim();
if (!value) {
errorEl.textContent = "";
btn.disabled = true;
btn.classList.add("opacity-50");
return;
}
const result = validateToAddress(value);
if (!result.valid) {
errorEl.textContent = result.error;
errorEl.style.color = "#cc0000";
btn.disabled = true;
btn.classList.add("opacity-50");
} else if (result.warning) {
errorEl.textContent = result.warning;
errorEl.style.color = "#b8860b";
btn.disabled = false;
btn.classList.remove("opacity-50");
} else {
errorEl.textContent = "";
btn.disabled = false;
btn.classList.remove("opacity-50");
}
}
const EXT_ICON = const EXT_ICON =
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` + `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -189,13 +88,6 @@ function init(_ctx) {
ctx = _ctx; ctx = _ctx;
$("send-token").addEventListener("change", updateSendBalance); $("send-token").addEventListener("change", updateSendBalance);
// Initial state: disable review button until address is entered
$("btn-send-review").disabled = true;
$("btn-send-review").classList.add("opacity-50");
// Validate address on input
$("send-to").addEventListener("input", updateToValidation);
$("btn-send-review").addEventListener("click", async () => { $("btn-send-review").addEventListener("click", async () => {
const to = $("send-to").value.trim(); const to = $("send-to").value.trim();
const amount = $("send-amount").value.trim(); const amount = $("send-amount").value.trim();
@@ -203,15 +95,6 @@ function init(_ctx) {
showFlash("Please enter a recipient address."); showFlash("Please enter a recipient address.");
return; return;
} }
// Re-validate before proceeding
const validation = validateToAddress(to);
if (!validation.valid) {
showFlash(
validation.error || "Please enter a valid Ethereum address.",
);
return;
}
if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) { if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
showFlash("Please enter a valid amount."); showFlash("Please enter a valid amount.");
return; return;
@@ -276,19 +159,4 @@ function init(_ctx) {
}); });
} }
function resetSendValidation() { module.exports = { init, updateSendBalance, renderSendTokenSelect };
const errorEl = $("send-to-error");
const btn = $("btn-send-review");
if (errorEl) errorEl.textContent = "";
if (btn) {
btn.disabled = true;
btn.classList.add("opacity-50");
}
}
module.exports = {
init,
updateSendBalance,
renderSendTokenSelect,
resetSendValidation,
};

View File

@@ -158,9 +158,8 @@ function render() {
loadCalldata(tx.hash, tx.to); loadCalldata(tx.hash, tx.to);
} }
const isoStr = isoDate(tx.timestamp); $("tx-detail-time").textContent =
$("tx-detail-time").innerHTML = isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
$("tx-detail-status").textContent = tx.isError ? "Failed" : "Success"; $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
showView("transaction"); showView("transaction");

View File

@@ -43,11 +43,10 @@ function toAddressHtml(address) {
if (title) { if (title) {
return ( return (
`<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` + `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
`<div class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</div>` + `<div class="break-all">${escapeHtml(address)}${extLink}</div>`
extLink
); );
} }
return `<div class="flex items-center">${dot}<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`; return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
} }
function txHashHtml(hash) { function txHashHtml(hash) {
@@ -59,16 +58,6 @@ function txHashHtml(hash) {
); );
} }
function blockNumberHtml(blockNumber) {
const num = String(blockNumber);
const link = `https://etherscan.io/block/${num}`;
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
return (
`<span class="underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(num)}">${escapeHtml(num)}</span>` +
extLink
);
}
function attachCopyHandlers(viewId) { function attachCopyHandlers(viewId) {
document document
.getElementById(viewId) .getElementById(viewId)
@@ -150,7 +139,7 @@ function etherscanTokenLink(address) {
function decodedDetailsHtml(decoded) { function decodedDetailsHtml(decoded) {
if (!decoded || !decoded.details) return ""; if (!decoded || !decoded.details) return "";
let html = `<div class="border border-border border-dashed p-2 mb-3">`; let html = "";
if (decoded.name) { if (decoded.name) {
html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Action</div>`; html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Action</div>`;
html += `<div class="font-bold">${escapeHtml(decoded.name)}</div></div>`; html += `<div class="font-bold">${escapeHtml(decoded.name)}</div></div>`;
@@ -175,36 +164,20 @@ function decodedDetailsHtml(decoded) {
} }
html += `</div>`; html += `</div>`;
} }
html += `</div>`;
return html; return html;
} }
function renderSuccess() { function renderSuccess() {
const d = state.viewData; const d = state.viewData;
if (!d || !d.hash) return; if (!d || !d.hash) return;
const hasDecoded = d.decoded && d.decoded.details;
// When decoded details are present, the Amount and To are already
// shown inside the decoded well — hide the top-level duplicates.
const summarySection = $("success-tx-summary").parentElement;
const toSection = $("success-tx-to").parentElement;
if (hasDecoded) {
summarySection.classList.add("hidden");
toSection.classList.add("hidden");
} else {
summarySection.classList.remove("hidden");
toSection.classList.remove("hidden");
$("success-tx-summary").textContent = d.amount + " " + d.symbol; $("success-tx-summary").textContent = d.amount + " " + d.symbol;
$("success-tx-to").innerHTML = toAddressHtml(d.to); $("success-tx-to").innerHTML = toAddressHtml(d.to);
} $("success-tx-block").textContent = String(d.blockNumber);
$("success-tx-block").innerHTML = blockNumberHtml(d.blockNumber);
$("success-tx-hash").innerHTML = txHashHtml(d.hash); $("success-tx-hash").innerHTML = txHashHtml(d.hash);
// Show decoded calldata details if present // Show decoded calldata details if present
const decodedEl = $("success-tx-decoded"); const decodedEl = $("success-tx-decoded");
if (decodedEl && hasDecoded) { if (decodedEl && d.decoded) {
decodedEl.innerHTML = decodedDetailsHtml(d.decoded); decodedEl.innerHTML = decodedDetailsHtml(d.decoded);
decodedEl.classList.remove("hidden"); decodedEl.classList.remove("hidden");
} else if (decodedEl) { } else if (decodedEl) {

File diff suppressed because it is too large Load Diff

View File

@@ -153,11 +153,9 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
// When a token transfer shares a hash with a normal tx, the normal tx // When a token transfer shares a hash with a normal tx, the normal tx
// is the contract call (0 ETH) and the token transfer has the real // is the contract call (0 ETH) and the token transfer has the real
// amount and symbol. A single transaction (e.g. a swap) can produce // amount and symbol. Replace the normal tx with the token transfer,
// multiple token transfers (one per token involved), so we key token // but preserve contract call metadata (direction, label, method) so
// transfers by hash + contract address to keep all of them. We also // swaps and other contract interactions display correctly.
// preserve contract-call metadata (direction, label, method) from the
// matching normal tx so swaps display correctly.
for (const tt of ttJson.items || []) { for (const tt of ttJson.items || []) {
const parsed = parseTokenTransfer(tt, addrLower); const parsed = parseTokenTransfer(tt, addrLower);
const existing = txsByHash.get(parsed.hash); const existing = txsByHash.get(parsed.hash);
@@ -166,13 +164,8 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
parsed.directionLabel = existing.directionLabel; parsed.directionLabel = existing.directionLabel;
parsed.isContractCall = true; parsed.isContractCall = true;
parsed.method = existing.method; parsed.method = existing.method;
// Remove the bare-hash normal tx so it doesn't appear as a
// duplicate with empty value; token transfers replace it.
txsByHash.delete(parsed.hash);
} }
// Use composite key so multiple token transfers per tx are kept. txsByHash.set(parsed.hash, parsed);
const ttKey = parsed.hash + ":" + (parsed.contractAddress || "");
txsByHash.set(ttKey, parsed);
} }
const txs = [...txsByHash.values()]; const txs = [...txsByHash.values()];

View File

@@ -445,18 +445,12 @@ function decode(data, toAddress) {
const maxUint160 = BigInt( const maxUint160 = BigInt(
"0xffffffffffffffffffffffffffffffffffffffff", "0xffffffffffffffffffffffffffffffffffffffff",
); );
const isUnlimited = inputAmount >= maxUint160; const amountStr =
const amountRaw = isUnlimited inputAmount >= maxUint160
? "Unlimited" ? "Unlimited"
: formatAmount(inputAmount, inInfo.decimals); : formatAmount(inputAmount, inInfo.decimals) +
const amountStr = isUnlimited (inSymbol ? " " + inSymbol : "");
? "Unlimited" details.push({ label: "Amount", value: amountStr });
: amountRaw + (inSymbol ? " " + inSymbol : "");
details.push({
label: "Amount",
value: amountStr,
rawValue: amountRaw,
});
} }
if (outSymbol) { if (outSymbol) {