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
13 changed files with 230 additions and 267 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

@@ -186,14 +186,10 @@ function renderTransactions(txs) {
let html = "";
let i = 0;
for (const tx of txs) {
// For swap transactions, show the user's own labelled wallet
// address instead of the contract address (see issue #55).
const counterparty =
tx.direction === "contract" && tx.directionLabel === "Swap"
? tx.from
: tx.direction === "sent" || tx.direction === "contract"
? tx.to
: tx.from;
tx.direction === "sent" || tx.direction === "contract"
? tx.to
: tx.from;
const ensName = ensNameMap.get(counterparty) || null;
const title = addressTitle(counterparty, state.wallets);
const dirLabel = tx.directionLabel;
@@ -265,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

@@ -87,7 +87,6 @@ function show() {
// Determine token symbol and balance
let symbol, amount, price;
const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
if (tokenId === "ETH") {
symbol = "ETH";
amount = parseFloat(addr.balance || "0");
@@ -96,14 +95,7 @@ function show() {
const tb = (addr.tokenBalances || []).find(
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
);
const tracked = (state.trackedTokens || []).find(
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
);
symbol =
(tb && tb.symbol) ||
(tracked && tracked.symbol) ||
(knownToken && knownToken.symbol) ||
"?";
symbol = tb ? tb.symbol : "?";
amount = tb ? parseFloat(tb.balance || "0") : 0;
price = getPrice(symbol);
}
@@ -146,32 +138,13 @@ function show() {
const tb = (addr.tokenBalances || []).find(
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
);
const tracked = (state.trackedTokens || []).find(
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
);
const rawName =
(tb && tb.name) ||
(tracked && tracked.name) ||
(knownToken && knownToken.name) ||
null;
const rawSymbol =
(tb && tb.symbol) ||
(tracked && tracked.symbol) ||
(knownToken && knownToken.symbol) ||
null;
const tokenName = rawName ? escapeHtml(rawName) : null;
const tokenSymbol = rawSymbol ? escapeHtml(rawSymbol) : null;
const tokenDecimals =
tb && tb.decimals != null
? tb.decimals
: tracked && tracked.decimals != null
? tracked.decimals
: knownToken && knownToken.decimals != null
? knownToken.decimals
: null;
const tokenName = tb && tb.name ? escapeHtml(tb.name) : null;
const tokenSymbol = tb && tb.symbol ? escapeHtml(tb.symbol) : null;
const tokenDecimals = tb && tb.decimals != null ? tb.decimals : null;
const tokenHolders = tb && tb.holders != null ? tb.holders : null;
const dot = addressDotHtml(tokenId);
const tokenLink = `https://etherscan.io/token/${escapeHtml(tokenId)}`;
const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
const projectUrl = knownToken && knownToken.url ? knownToken.url : null;
let infoHtml = `<div class="font-bold mb-2">Contract Address</div>`;
infoHtml +=

View File

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

View File

@@ -103,15 +103,10 @@ function renderHomeTxList(ctx) {
let html = "";
let i = 0;
for (const tx of homeTxs) {
// For swap transactions, show the user's own labelled wallet
// address (the one that initiated the swap) instead of the
// contract address which is not useful in the list view.
const counterparty =
tx.direction === "contract" && tx.directionLabel === "Swap"
? tx.from
: tx.direction === "sent" || tx.direction === "contract"
? tx.to
: tx.from;
tx.direction === "sent" || tx.direction === "contract"
? tx.to
: tx.from;
const dirLabel = tx.directionLabel;
const amountStr = tx.value
? escapeHtml(tx.value + " " + tx.symbol)
@@ -235,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

@@ -10,7 +10,7 @@ const {
const { state, currentAddress } = require("../../shared/state");
let ctx;
const { getProvider } = require("../../shared/balances");
const { KNOWN_SYMBOLS, TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
const { KNOWN_SYMBOLS } = require("../../shared/tokenList");
const EXT_ICON =
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -73,15 +73,7 @@ function updateSendBalance() {
const tb = (addr.tokenBalances || []).find(
(t) => t.address.toLowerCase() === token.toLowerCase(),
);
const knownToken = TOKEN_BY_ADDRESS.get(token.toLowerCase());
const tracked = (state.trackedTokens || []).find(
(t) => t.address.toLowerCase() === token.toLowerCase(),
);
const symbol =
(tb && tb.symbol) ||
(tracked && tracked.symbol) ||
(knownToken && knownToken.symbol) ||
"?";
const symbol = tb ? tb.symbol : "?";
const bal = tb ? tb.balance || "0" : "0";
$("send-balance").textContent =
"Current balance: " + bal + " " + symbol;
@@ -132,15 +124,7 @@ function init(_ctx) {
const tb = (addr.tokenBalances || []).find(
(t) => t.address.toLowerCase() === token.toLowerCase(),
);
const knownTk = TOKEN_BY_ADDRESS.get(token.toLowerCase());
const trackedTk = (state.trackedTokens || []).find(
(t) => t.address.toLowerCase() === token.toLowerCase(),
);
tokenSymbol =
(tb && tb.symbol) ||
(trackedTk && trackedTk.symbol) ||
(knownTk && knownTk.symbol) ||
"?";
tokenSymbol = tb ? tb.symbol : "?";
tokenBalance = tb ? tb.balance || "0" : "0";
}

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

@@ -85,7 +85,6 @@ async function fetchTokenBalances(address, blockscoutUrl, trackedTokens) {
balances.push({
address: item.token.address_hash,
name: item.token.name || "",
symbol: item.token.symbol || "???",
decimals: decimals,
balance: bal,

View File

@@ -24,26 +24,6 @@ function hdWalletFromMnemonic(mnemonic) {
return { xpub, firstAddress };
}
function hdWalletFromXprv(xprv) {
const root = HDNodeWallet.fromExtendedKey(xprv);
if (!root.privateKey) {
throw new Error("Not an extended private key (xprv).");
}
const node = root.derivePath("44'/60'/0'/0");
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;
@@ -58,14 +38,21 @@ function getSignerForAddress(walletData, addrIndex, decryptedSecret) {
);
return node.deriveChild(addrIndex);
}
if (walletData.type === "xprv") {
const root = HDNodeWallet.fromExtendedKey(decryptedSecret);
const node = root.derivePath("44'/60'/0'/0");
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);
}
@@ -74,9 +61,8 @@ module.exports = {
generateMnemonic,
deriveAddressFromXpub,
hdWalletFromMnemonic,
hdWalletFromXprv,
isValidXprv,
addressFromPrivateKey,
getSignerForAddress,
getPrivateKeyForAddress,
isValidMnemonic,
};