Compare commits

..

1 Commits

Author SHA1 Message Date
user
78c050e1fa feat: add private key viewing for addresses
All checks were successful
check / check (push) Successful in 22s
Add a 'Show private key' button on the address detail view that opens
a dedicated password-prompt screen with a clear warning about key
sensitivity. After correct password entry, the derived private key is
displayed in a read-only well with a copy button.

- Add getPrivateKeyForAddress() to wallet.js
- Add showPrivateKey view with password verification
- Add clipboard policy section to README explaining why we never
  auto-clear the clipboard
- Register new view in helpers.js VIEWS array and wire up in index.js

Closes #19
2026-02-28 07:40:25 -08:00
10 changed files with 216 additions and 198 deletions

View File

@@ -213,6 +213,22 @@ create an address with the same visible characters and trick the user into
sending funds to it. Showing the complete identifier defeats this class of
attack.
#### Clipboard Policy
AutistMask never clears or overwrites the user's clipboard. When sensitive data
such as a private key is copied, it is the user's responsibility to manage their
clipboard afterwards. We deliberately avoid auto-clearing the clipboard for two
reasons:
1. **User expectations**: silently modifying the clipboard violates the
principle of least surprise. The user initiated the copy and knows the
content is sensitive.
2. **Data safety**: the user may have copied something else important in the
intervening time. A timed clipboard clear would destroy that unrelated data.
The warning shown before revealing a private key makes it clear that the key is
sensitive and that clipboard management is the user's responsibility.
#### Data Model
The core hierarchy is **Wallets → Addresses**:
@@ -316,15 +332,34 @@ transitions.
- Balance list: ETH + tracked ERC-20 tokens (4 decimal places, USD inline).
Each balance row is clickable → **AddressToken**
- Send / Receive / + Token buttons
- "Show private key" button
- Transaction list (with ENS resolution for counterparties)
- **Transitions**:
- Tap balance row → **AddressToken** (for that token)
- "Send" → **Send**
- "Receive" → **Receive**
- "+ Token" → **AddToken**
- "Show private key" → **ShowPrivateKey**
- Tap transaction row → **TransactionDetail**
- "Back" → **Home**
#### ShowPrivateKey
- **When**: User clicked "Show private key" on AddressDetail.
- **Elements**:
- "Back" button
- Title: "Display Private Key"
- Warning box (lock + money icons) explaining the key controls funds and
that the user is responsible for clipboard management
- Password input
- "Display Private Key" button (with lock + money icons)
- After reveal: private key in a read-only well (monospace, select-all),
Copy button, Done button
- **Transitions**:
- "Display Private Key" (correct password) → reveals key in-place
- "Copy" → copies key to clipboard
- "Done" / "Back" → **AddressDetail** (key cleared from DOM)
#### AddressToken
- **When**: User clicked a specific token balance on AddressDetail.

View File

@@ -119,15 +119,6 @@
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 ============ -->
@@ -179,55 +170,6 @@
</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"
>
&lt; 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>
</div>
<!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
<div id="view-main" class="view hidden">
<!-- active address headline -->
@@ -365,6 +307,15 @@
</button>
</div>
<div class="mb-3">
<button
id="btn-show-private-key"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
>
&#128274; Show private key
</button>
</div>
<!-- transactions -->
<div class="mt-3">
<div class="border-b border-border pb-1 mb-1">
@@ -376,6 +327,77 @@
</div>
</div>
<!-- ============ SHOW PRIVATE KEY ============ -->
<div id="view-show-private-key" class="view hidden">
<button
id="btn-show-pk-back"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
>
&lt; Back
</button>
<h2 class="font-bold mb-2">Display Private Key</h2>
<!-- password prompt section -->
<div id="show-pk-prompt">
<div
class="border border-border border-dashed p-3 mb-3 text-xs"
>
<p class="mb-1">
&#128274;&#128176; Your private key controls this
address and all its funds. Anyone who has it can
spend your tokens.
</p>
<p>
Do not share it. Do not paste it into websites. If
you copy it, you are responsible for clearing your
clipboard when you are done.
</p>
</div>
<div class="mb-2">
<label class="block mb-1">Password</label>
<input
type="password"
id="show-pk-password"
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
placeholder="Enter your password"
/>
</div>
<div
id="show-pk-error"
class="text-xs mb-2 border border-border border-dashed p-1 hidden"
></div>
<button
id="btn-show-pk-reveal"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
&#128274;&#128176; Display Private Key
</button>
</div>
<!-- revealed key section -->
<div id="show-pk-key-well" class="hidden">
<div
class="bg-well p-3 mx-1 mb-3 break-all font-mono text-xs select-all"
>
<span id="show-pk-key-value"></span>
</div>
<div class="flex gap-2">
<button
id="btn-show-pk-copy"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Copy
</button>
<button
id="btn-show-pk-done"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Done
</button>
</div>
</div>
</div>
<!-- ============ ADDRESS-TOKEN DETAIL VIEW ============ -->
<div id="view-address-token" class="view hidden">
<button

View File

@@ -11,7 +11,6 @@ const home = require("./views/home");
const welcome = require("./views/welcome");
const addWallet = require("./views/addWallet");
const importKey = require("./views/importKey");
const importXprv = require("./views/importXprv");
const addressDetail = require("./views/addressDetail");
const addressToken = require("./views/addressToken");
const send = require("./views/send");
@@ -20,6 +19,7 @@ const txStatus = require("./views/txStatus");
const transactionDetail = require("./views/transactionDetail");
const receive = require("./views/receive");
const addToken = require("./views/addToken");
const showPrivateKey = require("./views/showPrivateKey");
const settings = require("./views/settings");
const settingsAddToken = require("./views/settingsAddToken");
const approval = require("./views/approval");
@@ -56,8 +56,8 @@ const ctx = {
doRefreshAndRender,
showAddWalletView: () => addWallet.show(),
showImportKeyView: () => importKey.show(),
showImportXprvView: () => importXprv.show(),
showAddressDetail: () => addressDetail.show(),
showPrivateKey: () => showPrivateKey.show(),
showAddressToken: () => addressToken.show(),
showAddTokenView: () => addToken.show(),
showConfirmTx: (txInfo) => confirmTx.show(txInfo),
@@ -212,9 +212,9 @@ async function init() {
welcome.init(ctx);
addWallet.init(ctx);
importKey.init(ctx);
importXprv.init(ctx);
home.init(ctx);
addressDetail.init(ctx);
showPrivateKey.init(ctx);
addressToken.init(ctx);
send.init(ctx);
confirmTx.init(ctx);

View File

@@ -124,11 +124,6 @@ function init(ctx) {
"click",
ctx.showImportKeyView,
);
$("btn-add-wallet-import-xprv").addEventListener(
"click",
ctx.showImportXprvView,
);
}
module.exports = { init, show };

View File

@@ -261,6 +261,10 @@ function init(_ctx) {
});
$("btn-add-token").addEventListener("click", ctx.showAddTokenView);
$("btn-show-private-key").addEventListener("click", () => {
ctx.showPrivateKey();
});
}
module.exports = { init, show };

View File

@@ -16,6 +16,7 @@ const VIEWS = [
"import-key",
"main",
"address",
"show-private-key",
"address-token",
"send",
"confirm-tx",

View File

@@ -230,7 +230,7 @@ function render(ctx) {
html += `<div>`;
html += `<div class="flex justify-between items-center bg-section py-1 px-2" style="margin:0 -0.5rem">`;
html += `<span class="font-bold cursor-pointer wallet-name underline decoration-dashed" data-wallet="${wi}">${wallet.name}</span>`;
if (wallet.type === "hd" || wallet.type === "xprv") {
if (wallet.type === "hd") {
html += `<button class="btn-add-address border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs" data-wallet="${wi}" title="Add another address to this wallet">+</button>`;
}
html += `</div>`;

View File

@@ -1,106 +0,0 @@
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

@@ -0,0 +1,79 @@
const { $, showView, showFlash, showError, hideError } = require("./helpers");
const { state } = require("../../shared/state");
const { decryptWithPassword } = require("../../shared/vault");
const { getPrivateKeyForAddress } = require("../../shared/wallet");
let ctx;
let revealed = false;
function show() {
revealed = false;
$("show-pk-password").value = "";
$("show-pk-key-well").classList.add("hidden");
$("show-pk-key-value").textContent = "";
$("show-pk-prompt").classList.remove("hidden");
hideError("show-pk-error");
showView("show-private-key");
}
function init(_ctx) {
ctx = _ctx;
$("btn-show-pk-back").addEventListener("click", () => {
clearKey();
ctx.showAddressDetail();
});
$("btn-show-pk-reveal").addEventListener("click", async () => {
const pw = $("show-pk-password").value;
if (!pw) {
showError("show-pk-error", "Please enter your password.");
return;
}
const wallet = state.wallets[state.selectedWallet];
let decryptedSecret;
try {
decryptedSecret = await decryptWithPassword(
wallet.encryptedSecret,
pw,
);
} catch (_e) {
showError("show-pk-error", "Wrong password.");
return;
}
const privateKey = getPrivateKeyForAddress(
wallet,
state.selectedAddress,
decryptedSecret,
);
revealed = true;
$("show-pk-prompt").classList.add("hidden");
$("show-pk-key-well").classList.remove("hidden");
$("show-pk-key-value").textContent = privateKey;
hideError("show-pk-error");
});
$("btn-show-pk-copy").addEventListener("click", () => {
const key = $("show-pk-key-value").textContent;
if (key) {
navigator.clipboard.writeText(key);
showFlash("Copied!");
}
});
$("btn-show-pk-done").addEventListener("click", () => {
clearKey();
ctx.showAddressDetail();
});
}
function clearKey() {
revealed = false;
$("show-pk-key-value").textContent = "";
$("show-pk-password").value = "";
}
module.exports = { init, show };

View File

@@ -24,25 +24,6 @@ function hdWalletFromMnemonic(mnemonic) {
return { xpub, firstAddress };
}
function hdWalletFromXprv(xprv) {
const node = HDNodeWallet.fromExtendedKey(xprv);
if (!node.privateKey) {
throw new Error("Not an extended private key (xprv).");
}
const xpub = node.neuter().extendedKey;
const firstAddress = node.deriveChild(0).address;
return { xpub, firstAddress };
}
function isValidXprv(key) {
try {
const node = HDNodeWallet.fromExtendedKey(key);
return !!node.privateKey;
} catch {
return false;
}
}
function addressFromPrivateKey(key) {
const w = new Wallet(key);
return w.address;
@@ -57,13 +38,21 @@ function getSignerForAddress(walletData, addrIndex, decryptedSecret) {
);
return node.deriveChild(addrIndex);
}
if (walletData.type === "xprv") {
const node = HDNodeWallet.fromExtendedKey(decryptedSecret);
return node.deriveChild(addrIndex);
}
return new Wallet(decryptedSecret);
}
function getPrivateKeyForAddress(walletData, addrIndex, decryptedSecret) {
if (walletData.type === "hd") {
const node = HDNodeWallet.fromPhrase(
decryptedSecret,
"",
BIP44_ETH_PATH,
);
return node.deriveChild(addrIndex).privateKey;
}
return decryptedSecret;
}
function isValidMnemonic(mnemonic) {
return Mnemonic.isValidMnemonic(mnemonic);
}
@@ -72,9 +61,8 @@ module.exports = {
generateMnemonic,
deriveAddressFromXpub,
hdWalletFromMnemonic,
hdWalletFromXprv,
isValidXprv,
addressFromPrivateKey,
getSignerForAddress,
getPrivateKeyForAddress,
isValidMnemonic,
};