Files
AutistMask/src/popup/index.js
sneak f6a47a6cea
All checks were successful
check / check (push) Successful in 13s
Show $0.00 instead of < $0.01 for zero balances
2026-02-25 18:30:19 +07:00

714 lines
22 KiB
JavaScript

// AutistMask popup UI — view management and event wiring
const {
Mnemonic,
HDNodeWallet,
Wallet,
JsonRpcProvider,
formatEther,
parseEther,
} = require("ethers");
const { getTopTokenPrices } = require("../shared/tokens");
const { encryptWithPassword, decryptWithPassword } = require("../shared/vault");
const QRCode = require("qrcode");
const DEBUG = true;
const DEBUG_MNEMONIC =
"cube evolve unfold result inch risk jealous skill hotel bulb night wreck";
const BIP44_ETH_BASE = "m/44'/60'/0'/0";
const VIEWS = [
"welcome",
"add-wallet",
"import-key",
"main",
"address",
"send",
"receive",
"add-token",
"settings",
"approve",
];
function showView(name) {
for (const v of VIEWS) {
const el = document.getElementById(`view-${v}`);
if (el) {
el.classList.toggle("hidden", v !== name);
}
}
}
// Browser-agnostic storage API
const storageApi =
typeof browser !== "undefined"
? browser.storage.local
: chrome.storage.local;
// Persisted state (unencrypted, public data only):
// wallets[]: { type, name, xpub (for hd), addresses: [{ address, balance, tokens }], nextIndex }
// Mnemonic/private key will be stored encrypted separately (not yet implemented).
const DEFAULT_STATE = {
hasWallet: false,
wallets: [],
rpcUrl: "https://eth.llamarpc.com",
};
const state = {
...DEFAULT_STATE,
selectedWallet: null,
selectedAddress: null,
};
async function saveState() {
const persisted = {
hasWallet: state.hasWallet,
wallets: state.wallets,
rpcUrl: state.rpcUrl,
};
await storageApi.set({ autistmask: persisted });
}
async function loadState() {
const result = await storageApi.get("autistmask");
if (result.autistmask) {
const saved = result.autistmask;
state.hasWallet = saved.hasWallet;
state.wallets = saved.wallets || [];
state.rpcUrl = saved.rpcUrl || DEFAULT_STATE.rpcUrl;
}
}
// -- helpers --
function $(id) {
return document.getElementById(id);
}
function showError(id, msg) {
const el = $(id);
el.textContent = msg;
el.classList.remove("hidden");
}
function hideError(id) {
$(id).classList.add("hidden");
}
function generateMnemonic() {
if (DEBUG) return DEBUG_MNEMONIC;
const m = Mnemonic.fromEntropy(
globalThis.crypto.getRandomValues(new Uint8Array(16)),
);
return m.phrase;
}
// Derive an Ethereum address at index from an xpub string
function deriveAddressFromXpub(xpub, index) {
const node = HDNodeWallet.fromExtendedKey(xpub);
const child = node.deriveChild(index);
return child.address;
}
// Create an HD wallet from a mnemonic: returns { xpub, firstAddress }
function hdWalletFromMnemonic(mnemonic) {
const node = HDNodeWallet.fromPhrase(mnemonic, "", BIP44_ETH_BASE);
const xpub = node.neuter().extendedKey;
const firstAddress = node.deriveChild(0).address;
return { xpub, firstAddress };
}
// Get address from a private key
function addressFromPrivateKey(key) {
const w = new Wallet(key);
return w.address;
}
// -- price fetching --
// { "ETH": 1234.56, "LINK": 8.60, ... }
const prices = {};
async function refreshPrices() {
try {
const fetched = await getTopTokenPrices(25);
Object.assign(prices, fetched);
} catch (e) {
// prices stay empty on error
}
}
function formatUsd(amount) {
if (amount === null || amount === undefined || isNaN(amount)) return "";
if (amount === 0) return "$0.00";
if (amount < 0.01) return "< $0.01";
return (
"$" +
amount.toLocaleString("en-US", {
minimumFractionDigits: 2,
maximumFractionDigits: 2,
})
);
}
// Get an ethers Wallet (signer) for the currently selected address.
// Requires the decrypted secret (mnemonic or private key).
function getSignerForCurrentAddress(decryptedSecret) {
const wallet = state.wallets[state.selectedWallet];
const addrIndex = state.selectedAddress;
if (wallet.type === "hd") {
const node = HDNodeWallet.fromPhrase(
decryptedSecret,
"",
BIP44_ETH_BASE,
);
return node.deriveChild(addrIndex);
} else {
return new Wallet(decryptedSecret);
}
}
// -- balance fetching --
function getProvider() {
return new JsonRpcProvider(state.rpcUrl);
}
function formatBalance(wei) {
const eth = formatEther(wei);
// Show up to 6 decimal places, trim trailing zeros
const parts = eth.split(".");
if (parts.length === 1) return eth + ".0";
const dec = parts[1].slice(0, 6).replace(/0+$/, "") || "0";
return parts[0] + "." + dec;
}
async function refreshBalances() {
const provider = getProvider();
const updates = [];
for (const wallet of state.wallets) {
for (const addr of wallet.addresses) {
// Fetch ETH balance
updates.push(
provider
.getBalance(addr.address)
.then((bal) => {
addr.balance = formatBalance(bal);
})
.catch(() => {}),
);
// Reverse ENS lookup
updates.push(
provider
.lookupAddress(addr.address)
.then((name) => {
addr.ensName = name || null;
})
.catch(() => {
addr.ensName = null;
}),
);
}
}
await Promise.all(updates);
await saveState();
}
// -- render wallet list on main view --
function renderWalletList() {
const container = $("wallet-list");
if (state.wallets.length === 0) {
container.innerHTML =
'<p class="text-muted py-2">No wallets yet. Add one to get started.</p>';
return;
}
let html = "";
state.wallets.forEach((wallet, wi) => {
html += `<div class="mb-3">`;
html += `<div class="flex justify-between items-center border-b border-border pb-1 mb-1">`;
html += `<span class="font-bold">${wallet.name}</span>`;
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>`;
wallet.addresses.forEach((addr, ai) => {
html += `<div class="address-row py-1 border-b border-border-light cursor-pointer hover:bg-hover px-1" data-wallet="${wi}" data-address="${ai}">`;
if (addr.ensName) {
html += `<div class="text-xs font-bold">${addr.ensName}</div>`;
}
html += `<div class="text-xs break-all">${addr.address}</div>`;
html += `<div class="flex justify-between items-center">`;
html += `<span class="text-xs">${addr.balance} ETH</span>`;
const ethUsd = prices.ETH
? parseFloat(addr.balance) * prices.ETH
: null;
if (ethUsd !== null) {
html += `<span class="text-xs text-muted">${formatUsd(ethUsd)}</span>`;
}
html += `</div>`;
html += `</div>`;
});
html += `</div>`;
});
container.innerHTML = html;
container.querySelectorAll(".address-row").forEach((row) => {
row.addEventListener("click", () => {
state.selectedWallet = parseInt(row.dataset.wallet, 10);
state.selectedAddress = parseInt(row.dataset.address, 10);
showAddressDetail();
});
});
container.querySelectorAll(".btn-add-address").forEach((btn) => {
btn.addEventListener("click", async (e) => {
e.stopPropagation();
const wi = parseInt(btn.dataset.wallet, 10);
const wallet = state.wallets[wi];
const newAddr = deriveAddressFromXpub(
wallet.xpub,
wallet.nextIndex,
);
wallet.addresses.push({
address: newAddr,
balance: "0.0000",
tokens: [],
});
wallet.nextIndex++;
await saveState();
renderWalletList();
});
});
}
function showAddressDetail() {
const wallet = state.wallets[state.selectedWallet];
const addr = wallet.addresses[state.selectedAddress];
$("address-title").textContent = wallet.name;
$("address-full").textContent = addr.address;
$("address-copied-msg").textContent = "";
$("address-eth-balance").textContent = addr.balance;
const ethUsd = prices.ETH ? parseFloat(addr.balance) * prices.ETH : null;
$("address-usd-value").textContent =
ethUsd !== null ? formatUsd(ethUsd) : "";
const ensEl = $("address-ens");
if (addr.ensName) {
ensEl.textContent = addr.ensName;
ensEl.classList.remove("hidden");
} else {
ensEl.classList.add("hidden");
}
updateTokenList(addr);
updateSendTokenSelect(addr);
showView("address");
}
function updateTokenList(addr) {
const list = $("token-list");
if (addr.tokens.length === 0) {
list.innerHTML =
'<div class="text-muted text-xs py-1">No tokens added yet. Use "+ Add" to track a token.</div>';
return;
}
list.innerHTML = addr.tokens
.map(
(t) =>
`<div class="py-1 border-b border-border-light flex justify-between">` +
`<span>${t.symbol}</span>` +
`<span>${t.balance || "0"}</span>` +
`</div>`,
)
.join("");
}
function updateSendTokenSelect(addr) {
const sel = $("send-token");
sel.innerHTML = '<option value="ETH">ETH</option>';
addr.tokens.forEach((t) => {
const opt = document.createElement("option");
opt.value = t.contractAddress;
opt.textContent = t.symbol;
sel.appendChild(opt);
});
}
function currentAddress() {
if (state.selectedWallet === null || state.selectedAddress === null) {
return null;
}
return state.wallets[state.selectedWallet].addresses[state.selectedAddress];
}
async function addWalletAndGoToMain(wallet) {
state.wallets.push(wallet);
state.hasWallet = true;
await saveState();
renderWalletList();
showView("main");
}
function showAddWalletView() {
$("wallet-mnemonic").value = "";
$("add-wallet-phrase-warning").classList.add("hidden");
hideError("add-wallet-error");
showView("add-wallet");
}
function showImportKeyView() {
$("import-private-key").value = "";
hideError("import-key-error");
showView("import-key");
}
function backFromWalletAdd() {
if (!state.hasWallet) {
showView("welcome");
} else {
renderWalletList();
showView("main");
}
}
// -- init --
async function init() {
if (DEBUG) {
const banner = document.createElement("div");
banner.textContent = "DEBUG / INSECURE";
banner.style.cssText =
"background:#c00;color:#fff;text-align:center;font-size:10px;padding:1px 0;font-family:monospace;position:sticky;top:0;z-index:9999;";
document.body.prepend(banner);
}
await loadState();
if (!state.hasWallet) {
showView("welcome");
} else {
renderWalletList();
showView("main");
// Fetch prices and balances in parallel, re-render as each completes
refreshPrices().then(() => renderWalletList());
refreshBalances().then(() => renderWalletList());
}
// -- Welcome --
$("btn-welcome-add").addEventListener("click", showAddWalletView);
// -- Add wallet (unified create/import) --
$("btn-generate-phrase").addEventListener("click", () => {
const phrase = generateMnemonic();
$("wallet-mnemonic").value = phrase;
$("add-wallet-phrase-warning").classList.remove("hidden");
});
$("btn-add-wallet-confirm").addEventListener("click", async () => {
const mnemonic = $("wallet-mnemonic").value.trim();
if (!mnemonic) {
showError(
"add-wallet-error",
"Please enter a recovery phrase or press the die to generate one.",
);
return;
}
const words = mnemonic.split(/\s+/);
if (words.length !== 12 && words.length !== 24) {
showError(
"add-wallet-error",
"Recovery phrase must be 12 or 24 words. You entered " +
words.length +
".",
);
return;
}
if (!Mnemonic.isValidMnemonic(mnemonic)) {
showError(
"add-wallet-error",
"Invalid recovery phrase. Please check for typos.",
);
return;
}
const pw = $("add-wallet-password").value;
const pw2 = $("add-wallet-password-confirm").value;
if (!pw) {
showError("add-wallet-error", "Please choose a password.");
return;
}
if (pw.length < 8) {
showError(
"add-wallet-error",
"Password must be at least 8 characters.",
);
return;
}
if (pw !== pw2) {
showError("add-wallet-error", "Passwords do not match.");
return;
}
hideError("add-wallet-error");
const encrypted = await encryptWithPassword(mnemonic, pw);
const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
const walletNum = state.wallets.length + 1;
addWalletAndGoToMain({
type: "hd",
name: "Wallet " + walletNum,
xpub: xpub,
encryptedSecret: encrypted,
nextIndex: 1,
addresses: [
{ address: firstAddress, balance: "0.0000", tokens: [] },
],
});
});
$("btn-add-wallet-back").addEventListener("click", backFromWalletAdd);
$("btn-add-wallet-import-key").addEventListener("click", showImportKeyView);
// -- Import private key --
$("btn-import-key-confirm").addEventListener("click", async () => {
const key = $("import-private-key").value.trim();
if (!key) {
showError("import-key-error", "Please enter your private key.");
return;
}
let addr;
try {
addr = addressFromPrivateKey(key);
} catch (e) {
showError("import-key-error", "Invalid private key.");
return;
}
const pw = $("import-key-password").value;
const pw2 = $("import-key-password-confirm").value;
if (!pw) {
showError("import-key-error", "Please choose a password.");
return;
}
if (pw.length < 8) {
showError(
"import-key-error",
"Password must be at least 8 characters.",
);
return;
}
if (pw !== pw2) {
showError("import-key-error", "Passwords do not match.");
return;
}
hideError("import-key-error");
const encrypted = await encryptWithPassword(key, pw);
const walletNum = state.wallets.length + 1;
addWalletAndGoToMain({
type: "key",
name: "Wallet " + walletNum,
encryptedSecret: encrypted,
addresses: [{ address: addr, balance: "0.0000", tokens: [] }],
});
});
$("btn-import-key-back").addEventListener("click", backFromWalletAdd);
// -- Main view --
$("btn-settings").addEventListener("click", () => {
$("settings-rpc").value = state.rpcUrl;
showView("settings");
});
$("btn-main-add-wallet").addEventListener("click", showAddWalletView);
// -- Address detail --
$("address-full").addEventListener("click", () => {
const addr = $("address-full").textContent;
if (addr) {
navigator.clipboard.writeText(addr);
$("address-copied-msg").textContent = "Copied!";
setTimeout(() => {
$("address-copied-msg").textContent = "";
}, 2000);
}
});
$("btn-address-back").addEventListener("click", () => {
renderWalletList();
showView("main");
});
$("btn-send").addEventListener("click", () => {
$("send-to").value = "";
$("send-amount").value = "";
$("send-password").value = "";
$("send-fee-estimate").classList.add("hidden");
$("send-status").classList.add("hidden");
showView("send");
});
$("btn-receive").addEventListener("click", () => {
const addr = currentAddress();
const address = addr ? addr.address : "";
$("receive-address").textContent = address;
if (address) {
QRCode.toCanvas($("receive-qr"), address, {
width: 200,
margin: 2,
color: { dark: "#000000", light: "#ffffff" },
});
}
showView("receive");
});
$("btn-add-token").addEventListener("click", () => {
$("add-token-address").value = "";
$("add-token-info").classList.add("hidden");
hideError("add-token-error");
showView("add-token");
});
// -- Send --
$("btn-send-confirm").addEventListener("click", async () => {
const to = $("send-to").value.trim();
const amount = $("send-amount").value.trim();
if (!to) {
showError("send-status", "Please enter a recipient address.");
$("send-status").classList.remove("hidden");
return;
}
if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
showError("send-status", "Please enter a valid amount.");
$("send-status").classList.remove("hidden");
return;
}
// Resolve ENS name if it looks like one
let resolvedTo = to;
if (to.includes(".") && !to.startsWith("0x")) {
const statusEl = $("send-status");
statusEl.textContent = "Resolving " + to + "...";
statusEl.classList.remove("hidden");
try {
const provider = getProvider();
const resolved = await provider.resolveName(to);
if (!resolved) {
showError("send-status", "Could not resolve " + to);
return;
}
resolvedTo = resolved;
statusEl.textContent = to + " = " + resolvedTo;
} catch (e) {
showError("send-status", "Failed to resolve ENS name.");
return;
}
}
const password = $("send-password").value;
if (!password) {
showError("send-status", "Please enter your password.");
$("send-status").classList.remove("hidden");
return;
}
const wallet = state.wallets[state.selectedWallet];
let decryptedSecret;
const statusEl = $("send-status");
statusEl.textContent = "Decrypting...";
statusEl.classList.remove("hidden");
try {
decryptedSecret = await decryptWithPassword(
wallet.encryptedSecret,
password,
);
} catch (e) {
showError("send-status", "Wrong password.");
return;
}
statusEl.textContent = "Sending...";
try {
const signer = getSignerForCurrentAddress(decryptedSecret);
const provider = getProvider();
const connectedSigner = signer.connect(provider);
const tx = await connectedSigner.sendTransaction({
to: resolvedTo,
value: parseEther(amount),
});
statusEl.textContent = "Sent. Waiting for confirmation...";
const receipt = await tx.wait();
statusEl.textContent =
"Confirmed in block " +
receipt.blockNumber +
". Tx: " +
receipt.hash;
// Refresh balance after send
refreshBalances().then(() => renderWalletList());
} catch (e) {
statusEl.textContent = "Failed: " + (e.shortMessage || e.message);
}
});
$("btn-send-back").addEventListener("click", () => {
showAddressDetail();
});
// -- Receive --
$("btn-receive-copy").addEventListener("click", () => {
const addr = $("receive-address").textContent;
if (addr) {
navigator.clipboard.writeText(addr);
}
});
$("btn-receive-back").addEventListener("click", () => {
showAddressDetail();
});
// -- Add Token --
$("btn-add-token-confirm").addEventListener("click", async () => {
const contractAddr = $("add-token-address").value.trim();
if (!contractAddr || !contractAddr.startsWith("0x")) {
showError(
"add-token-error",
"Please enter a valid contract address starting with 0x.",
);
return;
}
hideError("add-token-error");
// TODO: look up token name/symbol/decimals from contract via RPC
const addr = currentAddress();
if (addr) {
addr.tokens.push({
contractAddress: contractAddr,
symbol: "TKN",
decimals: 18,
balance: "0",
});
await saveState();
}
showAddressDetail();
});
$("btn-add-token-back").addEventListener("click", () => {
showAddressDetail();
});
// -- Settings --
$("btn-save-rpc").addEventListener("click", async () => {
state.rpcUrl = $("settings-rpc").value.trim();
await saveState();
});
$("btn-settings-back").addEventListener("click", () => {
renderWalletList();
showView("main");
});
// -- Approval --
$("btn-approve").addEventListener("click", () => {
// TODO: send approval to background
renderWalletList();
showView("main");
});
$("btn-reject").addEventListener("click", () => {
// TODO: send rejection to background
renderWalletList();
showView("main");
});
}
document.addEventListener("DOMContentLoaded", init);