diff --git a/src/popup/index.js b/src/popup/index.js
index e928554..f11cddf 100644
--- a/src/popup/index.js
+++ b/src/popup/index.js
@@ -1,237 +1,25 @@
-// AutistMask popup UI — view switching and event wiring only.
-// All business logic lives in src/shared/*.
+// AutistMask popup entry point.
+// Loads state, initializes views, triggers first render.
-const { parseEther } = require("ethers");
-const QRCode = require("qrcode");
-const { TOKENS } = require("../shared/tokens");
-const {
- state,
- saveState,
- loadState,
- currentAddress,
-} = require("../shared/state");
-const {
- DEBUG,
- generateMnemonic,
- deriveAddressFromXpub,
- hdWalletFromMnemonic,
- addressFromPrivateKey,
- getSignerForAddress,
- isValidMnemonic,
-} = require("../shared/wallet");
-const {
- refreshPrices,
- formatUsd,
- getAddressValueUsd,
- getTotalValueUsd,
-} = require("../shared/prices");
-const {
- refreshBalances,
- lookupTokenInfo,
- invalidateBalanceCache,
- getProvider,
-} = require("../shared/balances");
-const { encryptWithPassword, decryptWithPassword } = require("../shared/vault");
+const { DEBUG } = require("../shared/wallet");
+const { state, saveState, loadState } = require("../shared/state");
+const { refreshPrices } = require("../shared/prices");
+const { refreshBalances } = require("../shared/balances");
+const { showView } = require("./views/helpers");
-const VIEWS = [
- "welcome",
- "add-wallet",
- "import-key",
- "main",
- "address",
- "send",
- "receive",
- "add-token",
- "settings",
- "approve",
-];
-
-// -- DOM 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 showView(name) {
- for (const v of VIEWS) {
- const el = document.getElementById(`view-${v}`);
- if (el) {
- el.classList.toggle("hidden", v !== name);
- }
- }
- if (DEBUG) {
- const banner = document.getElementById("debug-banner");
- if (banner) {
- banner.textContent = "DEBUG / INSECURE (" + name + ")";
- }
- }
-}
-
-// -- rendering --
-function renderTotalValue() {
- const el = $("total-value");
- if (!el) return;
- el.textContent = formatUsd(getTotalValueUsd(state.wallets));
-}
-
-function renderTokenList(addr) {
- const list = $("token-list");
- const balances = addr.tokenBalances || [];
- if (balances.length === 0 && state.trackedTokens.length === 0) {
- list.innerHTML =
- 'No tokens added yet. Use "+ Add" to track a token.
';
- return;
- }
- list.innerHTML = balances
- .map(
- (t) =>
- `` +
- `${t.symbol}` +
- `${t.balance || "0"}` +
- `
`,
- )
- .join("");
-}
-
-function renderSendTokenSelect(addr) {
- const sel = $("send-token");
- sel.innerHTML = '';
- for (const t of addr.tokenBalances || []) {
- const opt = document.createElement("option");
- opt.value = t.address;
- opt.textContent = t.symbol;
- sel.appendChild(opt);
- }
-}
-
-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;
- $("address-usd-value").textContent = formatUsd(getAddressValueUsd(addr));
- const ensEl = $("address-ens");
- if (addr.ensName) {
- ensEl.textContent = addr.ensName;
- ensEl.classList.remove("hidden");
- } else {
- ensEl.classList.add("hidden");
- }
- renderTokenList(addr);
- renderSendTokenSelect(addr);
- showView("address");
-}
+const home = require("./views/home");
+const welcome = require("./views/welcome");
+const addWallet = require("./views/addWallet");
+const importKey = require("./views/importKey");
+const addressDetail = require("./views/addressDetail");
+const send = require("./views/send");
+const receive = require("./views/receive");
+const addToken = require("./views/addToken");
+const settings = require("./views/settings");
+const approval = require("./views/approval");
function renderWalletList() {
- const container = $("wallet-list");
- if (state.wallets.length === 0) {
- container.innerHTML =
- 'No wallets yet. Add one to get started.
';
- renderTotalValue();
- return;
- }
-
- let html = "";
- state.wallets.forEach((wallet, wi) => {
- html += ``;
- html += `
`;
- html += `${wallet.name}`;
- if (wallet.type === "hd") {
- html += ``;
- }
- html += `
`;
-
- wallet.addresses.forEach((addr, ai) => {
- html += `
`;
- if (addr.ensName) {
- html += `
${addr.ensName}
`;
- }
- html += `
${addr.address}
`;
- html += `
`;
- html += `${addr.balance} ETH`;
- html += `${formatUsd(getAddressValueUsd(addr))}`;
- html += `
`;
- html += `
`;
- });
-
- html += `
No tokens added yet. Use "+ Add" to track a token.
';
+ return;
+ }
+ list.innerHTML = balances
+ .map(
+ (t) =>
+ `` +
+ `${t.symbol}` +
+ `${t.balance || "0"}` +
+ `
`,
+ )
+ .join("");
+}
+
+function renderSendTokenSelect(addr) {
+ const sel = $("send-token");
+ sel.innerHTML = '';
+ for (const t of addr.tokenBalances || []) {
+ const opt = document.createElement("option");
+ opt.value = t.address;
+ opt.textContent = t.symbol;
+ sel.appendChild(opt);
+ }
+}
+
+function init(ctx) {
+ $("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", () => {
+ ctx.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", ctx.showAddTokenView);
+}
+
+module.exports = { init, show };
diff --git a/src/popup/views/approval.js b/src/popup/views/approval.js
new file mode 100644
index 0000000..fde0269
--- /dev/null
+++ b/src/popup/views/approval.js
@@ -0,0 +1,15 @@
+const { $, showView } = require("./helpers");
+
+function init(ctx) {
+ $("btn-approve").addEventListener("click", () => {
+ ctx.renderWalletList();
+ showView("main");
+ });
+
+ $("btn-reject").addEventListener("click", () => {
+ ctx.renderWalletList();
+ showView("main");
+ });
+}
+
+module.exports = { init };
diff --git a/src/popup/views/helpers.js b/src/popup/views/helpers.js
new file mode 100644
index 0000000..dd4ac02
--- /dev/null
+++ b/src/popup/views/helpers.js
@@ -0,0 +1,47 @@
+// Shared DOM helpers used by all views.
+
+const { DEBUG } = require("../../shared/wallet");
+
+const VIEWS = [
+ "welcome",
+ "add-wallet",
+ "import-key",
+ "main",
+ "address",
+ "send",
+ "receive",
+ "add-token",
+ "settings",
+ "approve",
+];
+
+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 showView(name) {
+ for (const v of VIEWS) {
+ const el = document.getElementById(`view-${v}`);
+ if (el) {
+ el.classList.toggle("hidden", v !== name);
+ }
+ }
+ if (DEBUG) {
+ const banner = document.getElementById("debug-banner");
+ if (banner) {
+ banner.textContent = "DEBUG / INSECURE (" + name + ")";
+ }
+ }
+}
+
+module.exports = { $, showError, hideError, showView };
diff --git a/src/popup/views/home.js b/src/popup/views/home.js
new file mode 100644
index 0000000..ed59985
--- /dev/null
+++ b/src/popup/views/home.js
@@ -0,0 +1,88 @@
+const { $, showView } = require("./helpers");
+const { state, saveState } = require("../../shared/state");
+const { deriveAddressFromXpub } = require("../../shared/wallet");
+const {
+ formatUsd,
+ getAddressValueUsd,
+ getTotalValueUsd,
+} = require("../../shared/prices");
+
+function renderTotalValue() {
+ const el = $("total-value");
+ if (!el) return;
+ el.textContent = formatUsd(getTotalValueUsd(state.wallets));
+}
+
+function render(ctx) {
+ const container = $("wallet-list");
+ if (state.wallets.length === 0) {
+ container.innerHTML =
+ 'No wallets yet. Add one to get started.
';
+ renderTotalValue();
+ return;
+ }
+
+ let html = "";
+ state.wallets.forEach((wallet, wi) => {
+ html += ``;
+ html += `
`;
+ html += `${wallet.name}`;
+ if (wallet.type === "hd") {
+ html += ``;
+ }
+ html += `
`;
+
+ wallet.addresses.forEach((addr, ai) => {
+ html += `
`;
+ if (addr.ensName) {
+ html += `
${addr.ensName}
`;
+ }
+ html += `
${addr.address}
`;
+ html += `
`;
+ html += `${addr.balance} ETH`;
+ html += `${formatUsd(getAddressValueUsd(addr))}`;
+ html += `
`;
+ html += `
`;
+ });
+
+ html += `