Refactor popup into shared modules, wire up real ERC-20 tokens
All checks were successful
check / check (push) Successful in 13s
All checks were successful
check / check (push) Successful in 13s
Split popup/index.js (784 lines) into focused modules: - shared/state.js: state management, storage persistence - shared/wallet.js: mnemonic gen, HD derivation, signing - shared/prices.js: price cache (5min TTL), USD formatting, value aggregation (address → wallet → total) - shared/balances.js: ETH + ERC-20 balance cache (60s TTL), ENS lookup, token contract metadata lookup - shared/vault.js: unchanged (libsodium encryption) - shared/tokens.js: unchanged (token list + CoinDesk client) - popup/index.js: view switching and event wiring only Token tracking is now app-wide: trackedTokens stored in state, balances fetched for all tracked tokens across all addresses. Add Token now calls the real contract to read name/symbol/decimals. Total portfolio value shown in 2x type on Home screen.
This commit is contained in:
@@ -1,21 +1,37 @@
|
||||
// AutistMask popup UI — view management and event wiring
|
||||
const {
|
||||
Mnemonic,
|
||||
HDNodeWallet,
|
||||
Wallet,
|
||||
JsonRpcProvider,
|
||||
formatEther,
|
||||
parseEther,
|
||||
} = require("ethers");
|
||||
const { TOKENS, getTopTokenPrices } = require("../shared/tokens");
|
||||
const { encryptWithPassword, decryptWithPassword } = require("../shared/vault");
|
||||
// AutistMask popup UI — view switching and event wiring only.
|
||||
// All business logic lives in src/shared/*.
|
||||
|
||||
const { parseEther } = require("ethers");
|
||||
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 { 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 VIEWS = [
|
||||
"welcome",
|
||||
@@ -30,6 +46,21 @@ const VIEWS = [
|
||||
"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}`);
|
||||
@@ -45,228 +76,63 @@ function showView(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;
|
||||
}
|
||||
|
||||
// -- caching layer --
|
||||
const PRICE_CACHE_TTL = 300000; // 5 minutes
|
||||
const BALANCE_CACHE_TTL = 60000; // 60 seconds
|
||||
|
||||
const cache = {
|
||||
prices: { data: {}, fetchedAt: 0 },
|
||||
balances: { fetchedAt: 0 },
|
||||
};
|
||||
|
||||
// { "ETH": 1234.56, "LINK": 8.60, ... }
|
||||
const prices = {};
|
||||
|
||||
async function refreshPrices() {
|
||||
const now = Date.now();
|
||||
if (now - cache.prices.fetchedAt < PRICE_CACHE_TTL) return;
|
||||
try {
|
||||
const fetched = await getTopTokenPrices(25);
|
||||
Object.assign(prices, fetched);
|
||||
cache.prices.fetchedAt = now;
|
||||
} catch (e) {
|
||||
// prices stay stale 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 now = Date.now();
|
||||
if (now - cache.balances.fetchedAt < BALANCE_CACHE_TTL) return;
|
||||
const provider = getProvider();
|
||||
const updates = [];
|
||||
for (const wallet of state.wallets) {
|
||||
for (const addr of wallet.addresses) {
|
||||
updates.push(
|
||||
provider
|
||||
.getBalance(addr.address)
|
||||
.then((bal) => {
|
||||
addr.balance = formatBalance(bal);
|
||||
})
|
||||
.catch(() => {}),
|
||||
);
|
||||
updates.push(
|
||||
provider
|
||||
.lookupAddress(addr.address)
|
||||
.then((name) => {
|
||||
addr.ensName = name || null;
|
||||
})
|
||||
.catch(() => {
|
||||
addr.ensName = null;
|
||||
}),
|
||||
);
|
||||
}
|
||||
}
|
||||
await Promise.all(updates);
|
||||
cache.balances.fetchedAt = now;
|
||||
await saveState();
|
||||
}
|
||||
|
||||
function getAddressValueUsd(addr) {
|
||||
let total = 0;
|
||||
const ethBal = parseFloat(addr.balance || "0");
|
||||
if (prices.ETH) {
|
||||
total += ethBal * prices.ETH;
|
||||
}
|
||||
for (const token of addr.tokens || []) {
|
||||
const tokenBal = parseFloat(token.balance || "0");
|
||||
if (tokenBal > 0 && prices[token.symbol]) {
|
||||
total += tokenBal * prices[token.symbol];
|
||||
}
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
function getWalletValueUsd(wallet) {
|
||||
let total = 0;
|
||||
for (const addr of wallet.addresses) {
|
||||
total += getAddressValueUsd(addr);
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
function getTotalValueUsd() {
|
||||
let total = 0;
|
||||
for (const wallet of state.wallets) {
|
||||
total += getWalletValueUsd(wallet);
|
||||
}
|
||||
return total;
|
||||
}
|
||||
|
||||
// -- rendering --
|
||||
function renderTotalValue() {
|
||||
const el = $("total-value");
|
||||
if (!el) return;
|
||||
el.textContent = formatUsd(getTotalValueUsd());
|
||||
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 =
|
||||
'<div class="text-muted text-xs py-1">No tokens added yet. Use "+ Add" to track a token.</div>';
|
||||
return;
|
||||
}
|
||||
list.innerHTML = balances
|
||||
.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 renderSendTokenSelect(addr) {
|
||||
const sel = $("send-token");
|
||||
sel.innerHTML = '<option value="ETH">ETH</option>';
|
||||
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");
|
||||
}
|
||||
|
||||
// -- render wallet list on main view --
|
||||
function renderWalletList() {
|
||||
const container = $("wallet-list");
|
||||
if (state.wallets.length === 0) {
|
||||
@@ -294,8 +160,7 @@ function renderWalletList() {
|
||||
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 addrUsd = getAddressValueUsd(addr);
|
||||
html += `<span class="text-xs text-muted">${formatUsd(addrUsd)}</span>`;
|
||||
html += `<span class="text-xs text-muted">${formatUsd(getAddressValueUsd(addr))}</span>`;
|
||||
html += `</div>`;
|
||||
html += `</div>`;
|
||||
});
|
||||
@@ -324,7 +189,7 @@ function renderWalletList() {
|
||||
wallet.addresses.push({
|
||||
address: newAddr,
|
||||
balance: "0.0000",
|
||||
tokens: [],
|
||||
tokenBalances: [],
|
||||
});
|
||||
wallet.nextIndex++;
|
||||
await saveState();
|
||||
@@ -335,62 +200,6 @@ function renderWalletList() {
|
||||
renderTotalValue();
|
||||
}
|
||||
|
||||
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");
|
||||
}
|
||||
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;
|
||||
@@ -401,6 +210,8 @@ async function addWalletAndGoToMain(wallet) {
|
||||
|
||||
function showAddWalletView() {
|
||||
$("wallet-mnemonic").value = "";
|
||||
$("add-wallet-password").value = "";
|
||||
$("add-wallet-password-confirm").value = "";
|
||||
$("add-wallet-phrase-warning").classList.add("hidden");
|
||||
hideError("add-wallet-error");
|
||||
showView("add-wallet");
|
||||
@@ -408,6 +219,8 @@ function showAddWalletView() {
|
||||
|
||||
function showImportKeyView() {
|
||||
$("import-private-key").value = "";
|
||||
$("import-key-password").value = "";
|
||||
$("import-key-password-confirm").value = "";
|
||||
hideError("import-key-error");
|
||||
showView("import-key");
|
||||
}
|
||||
@@ -421,6 +234,15 @@ function backFromWalletAdd() {
|
||||
}
|
||||
}
|
||||
|
||||
async function doRefreshAndRender() {
|
||||
await Promise.all([
|
||||
refreshPrices(),
|
||||
refreshBalances(state.wallets, state.trackedTokens, state.rpcUrl),
|
||||
]);
|
||||
await saveState();
|
||||
renderWalletList();
|
||||
}
|
||||
|
||||
// -- init --
|
||||
async function init() {
|
||||
if (DEBUG) {
|
||||
@@ -439,18 +261,15 @@ async function init() {
|
||||
} else {
|
||||
renderWalletList();
|
||||
showView("main");
|
||||
// Fetch prices and balances in parallel, re-render as each completes
|
||||
refreshPrices().then(() => renderWalletList());
|
||||
refreshBalances().then(() => renderWalletList());
|
||||
doRefreshAndRender();
|
||||
}
|
||||
|
||||
// -- Welcome --
|
||||
$("btn-welcome-add").addEventListener("click", showAddWalletView);
|
||||
|
||||
// -- Add wallet (unified create/import) --
|
||||
// -- Add wallet --
|
||||
$("btn-generate-phrase").addEventListener("click", () => {
|
||||
const phrase = generateMnemonic();
|
||||
$("wallet-mnemonic").value = phrase;
|
||||
$("wallet-mnemonic").value = generateMnemonic();
|
||||
$("add-wallet-phrase-warning").classList.remove("hidden");
|
||||
});
|
||||
|
||||
@@ -473,7 +292,7 @@ async function init() {
|
||||
);
|
||||
return;
|
||||
}
|
||||
if (!Mnemonic.isValidMnemonic(mnemonic)) {
|
||||
if (!isValidMnemonic(mnemonic)) {
|
||||
showError(
|
||||
"add-wallet-error",
|
||||
"Invalid recovery phrase. Please check for typos.",
|
||||
@@ -498,7 +317,6 @@ async function init() {
|
||||
return;
|
||||
}
|
||||
hideError("add-wallet-error");
|
||||
|
||||
const encrypted = await encryptWithPassword(mnemonic, pw);
|
||||
const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
|
||||
const walletNum = state.wallets.length + 1;
|
||||
@@ -509,7 +327,7 @@ async function init() {
|
||||
encryptedSecret: encrypted,
|
||||
nextIndex: 1,
|
||||
addresses: [
|
||||
{ address: firstAddress, balance: "0.0000", tokens: [] },
|
||||
{ address: firstAddress, balance: "0.0000", tokenBalances: [] },
|
||||
],
|
||||
});
|
||||
});
|
||||
@@ -555,7 +373,9 @@ async function init() {
|
||||
type: "key",
|
||||
name: "Wallet " + walletNum,
|
||||
encryptedSecret: encrypted,
|
||||
addresses: [{ address: addr, balance: "0.0000", tokens: [] }],
|
||||
addresses: [
|
||||
{ address: addr, balance: "0.0000", tokenBalances: [] },
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
@@ -642,21 +462,19 @@ async function init() {
|
||||
$("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 provider = getProvider(state.rpcUrl);
|
||||
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;
|
||||
@@ -684,8 +502,12 @@ async function init() {
|
||||
}
|
||||
statusEl.textContent = "Sending...";
|
||||
try {
|
||||
const signer = getSignerForCurrentAddress(decryptedSecret);
|
||||
const provider = getProvider();
|
||||
const signer = getSignerForAddress(
|
||||
wallet,
|
||||
state.selectedAddress,
|
||||
decryptedSecret,
|
||||
);
|
||||
const provider = getProvider(state.rpcUrl);
|
||||
const connectedSigner = signer.connect(provider);
|
||||
const tx = await connectedSigner.sendTransaction({
|
||||
to: resolvedTo,
|
||||
@@ -698,28 +520,22 @@ async function init() {
|
||||
receipt.blockNumber +
|
||||
". Tx: " +
|
||||
receipt.hash;
|
||||
// Refresh balance after send
|
||||
refreshBalances().then(() => renderWalletList());
|
||||
invalidateBalanceCache();
|
||||
doRefreshAndRender();
|
||||
} catch (e) {
|
||||
statusEl.textContent = "Failed: " + (e.shortMessage || e.message);
|
||||
}
|
||||
});
|
||||
|
||||
$("btn-send-back").addEventListener("click", () => {
|
||||
showAddressDetail();
|
||||
});
|
||||
$("btn-send-back").addEventListener("click", () => showAddressDetail());
|
||||
|
||||
// -- Receive --
|
||||
$("btn-receive-copy").addEventListener("click", () => {
|
||||
const addr = $("receive-address").textContent;
|
||||
if (addr) {
|
||||
navigator.clipboard.writeText(addr);
|
||||
}
|
||||
if (addr) navigator.clipboard.writeText(addr);
|
||||
});
|
||||
|
||||
$("btn-receive-back").addEventListener("click", () => {
|
||||
showAddressDetail();
|
||||
});
|
||||
$("btn-receive-back").addEventListener("click", () => showAddressDetail());
|
||||
|
||||
// -- Add Token --
|
||||
$("btn-add-token-confirm").addEventListener("click", async () => {
|
||||
@@ -731,24 +547,50 @@ async function init() {
|
||||
);
|
||||
return;
|
||||
}
|
||||
// Check if already tracked
|
||||
const already = state.trackedTokens.find(
|
||||
(t) => t.address.toLowerCase() === contractAddr.toLowerCase(),
|
||||
);
|
||||
if (already) {
|
||||
showError(
|
||||
"add-token-error",
|
||||
already.symbol + " is already being tracked.",
|
||||
);
|
||||
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",
|
||||
const infoEl = $("add-token-info");
|
||||
infoEl.textContent = "Looking up token...";
|
||||
infoEl.classList.remove("hidden");
|
||||
try {
|
||||
const info = await lookupTokenInfo(contractAddr, state.rpcUrl);
|
||||
state.trackedTokens.push({
|
||||
address: contractAddr,
|
||||
symbol: info.symbol,
|
||||
decimals: info.decimals,
|
||||
name: info.name,
|
||||
});
|
||||
await saveState();
|
||||
invalidateBalanceCache();
|
||||
await refreshBalances(
|
||||
state.wallets,
|
||||
state.trackedTokens,
|
||||
state.rpcUrl,
|
||||
);
|
||||
await saveState();
|
||||
showAddressDetail();
|
||||
} catch (e) {
|
||||
showError(
|
||||
"add-token-error",
|
||||
"Could not read token contract. Check the address.",
|
||||
);
|
||||
infoEl.classList.add("hidden");
|
||||
}
|
||||
showAddressDetail();
|
||||
});
|
||||
|
||||
$("btn-add-token-back").addEventListener("click", () => {
|
||||
showAddressDetail();
|
||||
});
|
||||
$("btn-add-token-back").addEventListener("click", () =>
|
||||
showAddressDetail(),
|
||||
);
|
||||
|
||||
// -- Settings --
|
||||
$("btn-save-rpc").addEventListener("click", async () => {
|
||||
@@ -763,13 +605,11 @@ async function init() {
|
||||
|
||||
// -- 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");
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user