Compare commits
115 Commits
02eefa8f80
...
fix/consis
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
efc299d542 | ||
| 3b6b18d168 | |||
| 33ae5784e2 | |||
| cd30d94040 | |||
| 62bb54556c | |||
| 8e1856415a | |||
| 9444b06b52 | |||
| c2fdb3e0c1 | |||
|
|
9de7791553 | ||
|
|
ef2f862d23 | ||
| a655c546b7 | |||
| 0e68279037 | |||
| 2bb7fc5786 | |||
|
|
4157732f4b | ||
| e8ede7010a | |||
|
|
0c1150ac4d | ||
| a2fbb0e30d | |||
| 72a4dd3382 | |||
|
|
d3d9f9a8b0 | ||
| 24464ffe33 | |||
| 34c66d19c4 | |||
| e09904147b | |||
|
|
b02a1d3a55 | ||
|
|
9a7aa1f4fc | ||
| 9788db95f2 | |||
|
|
9981be6986 | ||
| 16f9e98b25 | |||
| bbf5945ff1 | |||
|
|
607d2349b0 | ||
|
|
3c2d553070 | ||
|
|
55346b484b | ||
|
|
93565c7196 | ||
|
|
71ef08fe85 | ||
|
|
8d230aceb6 | ||
| 6031c3e76c | |||
|
|
436fe22296 | ||
| 82a7db63b5 | |||
| 676109860a | |||
| 7c53c48cb1 | |||
| 4d9a8a49b9 | |||
|
|
996003fd79 | ||
|
|
2c9a34aff6 | ||
|
|
173d75c57a | ||
|
|
3daba279d2 | ||
|
|
70a8ac6f99 | ||
|
|
68bd909345 | ||
|
|
91c3b4e394 | ||
|
|
41794f8bf5 | ||
|
|
ca78da2e07 | ||
| fb67359b3f | |||
| 1986704569 | |||
| 49c29f6bb3 | |||
| cdb7f478e2 | |||
| cbe77d0224 | |||
|
|
2abb720d54 | ||
|
|
bf9a483031 | ||
| 79fec8551f | |||
|
|
da428a3815 | ||
| 171b21c5d8 | |||
| e7a960c601 | |||
| b69eec40ef | |||
| cacf2c683c | |||
|
|
15e856e63f | ||
| 43e10521ef | |||
| 04ba926d43 | |||
| 4fdbc5adae | |||
| 85427e1fd4 | |||
| 8226495994 | |||
| 2f57370155 | |||
| c6d5cf4e64 | |||
| 34e29d7659 | |||
| 6d0531f1b4 | |||
| 8893f5dce7 | |||
| 2bffa91045 | |||
| 2b0b889b01 | |||
| 5936199676 | |||
|
|
8824237db6 | ||
|
|
aaeb38d7c6 | ||
| f2e44ff4ab | |||
| 107c243f65 | |||
| 655b90c7df | |||
| 34cd72be88 | |||
|
|
689bcbf171 | ||
| 4eefe4c1af | |||
| 3b419c7517 | |||
| 8b7d73cc35 | |||
| 3fd3e30f44 | |||
|
|
76059c3674 | ||
| 8332570758 | |||
| 7b004ddda4 | |||
| 91eefa1667 | |||
| 0ed7b8e61d | |||
|
|
560065dd77 | ||
|
|
27f16191b4 | ||
| 909543e943 | |||
| 04a34d1a5e | |||
| 98f68adb11 | |||
| 0413c52229 | |||
| b01df0639b | |||
| 8beb3cd70c | |||
| 31b22c1325 | |||
| eec96f9054 | |||
| f13cd0fd47 | |||
| b478d9efa9 | |||
| d59ebfd461 | |||
| 13e2bdb0b0 | |||
| 95314ff229 | |||
| 1237cf8491 | |||
| afc4868001 | |||
| a6017ce32c | |||
| 9cceca8576 | |||
| 6a3be80379 | |||
| 3d8feb4c5a | |||
| aca8c4b2a7 | |||
|
|
2244b52f5f |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -25,3 +25,4 @@ dist/
|
|||||||
|
|
||||||
# Yarn
|
# Yarn
|
||||||
.yarn-integrity
|
.yarn-integrity
|
||||||
|
package-lock.json
|
||||||
|
|||||||
29
README.md
29
README.md
@@ -15,9 +15,10 @@ Hence, a minimally viable ERC20 browser wallet/signer that works cross-platform.
|
|||||||
Everything you need, nothing you don't. We import as few libraries as possible,
|
Everything you need, nothing you don't. We import as few libraries as possible,
|
||||||
don't implement any crypto, and don't send user-specific data anywhere but a
|
don't implement any crypto, and don't send user-specific data anywhere but a
|
||||||
(user-configurable) Ethereum RPC endpoint (which defaults to a public node). The
|
(user-configurable) Ethereum RPC endpoint (which defaults to a public node). The
|
||||||
extension contacts precisely two external services: the configured RPC node for
|
extension contacts exactly three external services: the configured RPC node for
|
||||||
blockchain interactions, and a public CoinDesk API (no API key) to get realtime
|
blockchain interactions, a public CoinDesk API (no API key) for realtime price
|
||||||
price information.
|
information, and a Blockscout block-explorer API for transaction history and
|
||||||
|
token balances. All three endpoints are user-configurable.
|
||||||
|
|
||||||
In the extension is a hardcoded list of the top ERC20 contract addresses. You
|
In the extension is a hardcoded list of the top ERC20 contract addresses. You
|
||||||
can add any ERC20 contract by contract address if you wish, but the hardcoded
|
can add any ERC20 contract by contract address if you wish, but the hardcoded
|
||||||
@@ -534,7 +535,7 @@ transitions.
|
|||||||
### External Services
|
### External Services
|
||||||
|
|
||||||
AutistMask is not a fully self-contained offline tool. It necessarily
|
AutistMask is not a fully self-contained offline tool. It necessarily
|
||||||
communicates with two external services to function as a wallet:
|
communicates with three external services to function as a wallet:
|
||||||
|
|
||||||
- **Ethereum JSON-RPC endpoint**: The extension needs an Ethereum node to query
|
- **Ethereum JSON-RPC endpoint**: The extension needs an Ethereum node to query
|
||||||
balances (`eth_getBalance`), read ERC-20 token contracts (`eth_call`),
|
balances (`eth_getBalance`), read ERC-20 token contracts (`eth_call`),
|
||||||
@@ -543,11 +544,24 @@ communicates with two external services to function as a wallet:
|
|||||||
receipts. The default endpoint is a public RPC (configurable by the user to
|
receipts. The default endpoint is a public RPC (configurable by the user to
|
||||||
any endpoint they prefer, including a local node). By default the extension
|
any endpoint they prefer, including a local node). By default the extension
|
||||||
talks to `https://ethereum-rpc.publicnode.com`.
|
talks to `https://ethereum-rpc.publicnode.com`.
|
||||||
|
- **Data sent**: Ethereum addresses, transaction data, contract call
|
||||||
|
parameters. The RPC endpoint can see all on-chain queries and submitted
|
||||||
|
transactions.
|
||||||
|
|
||||||
- **CoinDesk CADLI price API**: Used to fetch ETH/USD and token/USD prices for
|
- **CoinDesk CADLI price API**: Used to fetch ETH/USD and token/USD prices for
|
||||||
displaying fiat values. The price is cached for 5 minutes to avoid excessive
|
displaying fiat values. The price is cached for 5 minutes to avoid excessive
|
||||||
requests. No API key required. No user data is sent — only a list of token
|
requests. No API key required. No user data is sent — only a list of token
|
||||||
symbols. Note that CoinDesk will receive your client IP.
|
symbols. Note that CoinDesk will receive your client IP.
|
||||||
|
- **Data sent**: Token symbol strings only (e.g. "ETH", "USDC"). No
|
||||||
|
addresses or user-specific data.
|
||||||
|
|
||||||
|
- **Blockscout block-explorer API**: Used to fetch transaction history (normal
|
||||||
|
transactions and ERC-20 token transfers), ERC-20 token balances, and token
|
||||||
|
holder counts (for spam filtering). The default endpoint is
|
||||||
|
`https://eth.blockscout.com/api/v2` (configurable by the user in Settings).
|
||||||
|
- **Data sent**: Ethereum addresses. Blockscout receives the user's
|
||||||
|
addresses to query their transaction history and token balances. No
|
||||||
|
private keys, passwords, or signing operations are sent.
|
||||||
|
|
||||||
What the extension does NOT do:
|
What the extension does NOT do:
|
||||||
|
|
||||||
@@ -557,9 +571,10 @@ What the extension does NOT do:
|
|||||||
- No Infura/Alchemy dependency (any JSON-RPC endpoint works)
|
- No Infura/Alchemy dependency (any JSON-RPC endpoint works)
|
||||||
- No backend servers operated by the developer
|
- No backend servers operated by the developer
|
||||||
|
|
||||||
The user's RPC endpoint and the CoinDesk price API are the only external
|
These three services (RPC endpoint, CoinDesk price API, and Blockscout API) are
|
||||||
services. Users who want maximum privacy can point the RPC at their own node
|
the only external services. All three endpoints are user-configurable. Users who
|
||||||
(price fetching can be disabled in a future version).
|
want maximum privacy can point the RPC and Blockscout URLs at their own
|
||||||
|
self-hosted instances (price fetching can be disabled in a future version).
|
||||||
|
|
||||||
### Dependencies
|
### Dependencies
|
||||||
|
|
||||||
|
|||||||
7
RULES.md
7
RULES.md
@@ -1,3 +1,8 @@
|
|||||||
|
> **⚠️ THIS FILE MUST NEVER BE MODIFIED BY AGENTS.** RULES.md is maintained
|
||||||
|
> exclusively by the project owner. AI agents, bots, and automated tools must
|
||||||
|
> treat this file as read-only. If an audit finds a divergence between the code
|
||||||
|
> and this file, the code must be changed to match — never the other way around.
|
||||||
|
|
||||||
# AutistMask Rules Checklist
|
# AutistMask Rules Checklist
|
||||||
|
|
||||||
This file is derived from README.md and REPO_POLICIES.md for use as an audit
|
This file is derived from README.md and REPO_POLICIES.md for use as an audit
|
||||||
@@ -18,7 +23,7 @@ contradicts either, the originals govern.
|
|||||||
## External Communication
|
## External Communication
|
||||||
|
|
||||||
- [ ] Extension contacts exactly three external services: configured RPC
|
- [ ] Extension contacts exactly three external services: configured RPC
|
||||||
endpoint, CoinDesk price API, and configured Blockscout API
|
endpoint, CoinDesk price API, and Blockscout block-explorer API
|
||||||
- [ ] No analytics, telemetry, or tracking
|
- [ ] No analytics, telemetry, or tracking
|
||||||
- [ ] No user-specific data sent except to the configured RPC endpoint
|
- [ ] No user-specific data sent except to the configured RPC endpoint
|
||||||
- [ ] No Infura/Alchemy hard dependency
|
- [ ] No Infura/Alchemy hard dependency
|
||||||
|
|||||||
@@ -30,7 +30,6 @@ const connectedSites = {};
|
|||||||
|
|
||||||
// Pending approval requests: { id: { origin, hostname, resolve } }
|
// Pending approval requests: { id: { origin, hostname, resolve } }
|
||||||
const pendingApprovals = {};
|
const pendingApprovals = {};
|
||||||
let nextApprovalId = 1;
|
|
||||||
|
|
||||||
async function getState() {
|
async function getState() {
|
||||||
const result = await storageApi.get("autistmask");
|
const result = await storageApi.get("autistmask");
|
||||||
@@ -94,11 +93,13 @@ function resetPopupUrl() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Fallback: open approval in a separate window (used when openPopup is unavailable)
|
// Open approval in a separate popup window.
|
||||||
|
// This is the primary mechanism for tx/sign approvals (triggered programmatically,
|
||||||
|
// not from a user gesture) and the fallback for site-connection approvals.
|
||||||
function openApprovalWindow(id) {
|
function openApprovalWindow(id) {
|
||||||
const popupUrl = runtime.getURL("src/popup/index.html?approval=" + id);
|
const popupUrl = runtime.getURL("src/popup/index.html?approval=" + id);
|
||||||
const popupWidth = 400;
|
const popupWidth = 360;
|
||||||
const popupHeight = 500;
|
const popupHeight = 600;
|
||||||
|
|
||||||
windowsApi.getLastFocused((currentWin) => {
|
windowsApi.getLastFocused((currentWin) => {
|
||||||
const opts = {
|
const opts = {
|
||||||
@@ -127,7 +128,7 @@ function openApprovalWindow(id) {
|
|||||||
// Prefers the browser-action popup (anchored to toolbar, no macOS Space switch).
|
// Prefers the browser-action popup (anchored to toolbar, no macOS Space switch).
|
||||||
function requestApproval(origin, hostname) {
|
function requestApproval(origin, hostname) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const id = nextApprovalId++;
|
const id = crypto.randomUUID();
|
||||||
pendingApprovals[id] = { origin, hostname, resolve };
|
pendingApprovals[id] = { origin, hostname, resolve };
|
||||||
|
|
||||||
if (actionApi && typeof actionApi.openPopup === "function") {
|
if (actionApi && typeof actionApi.openPopup === "function") {
|
||||||
@@ -149,10 +150,12 @@ function requestApproval(origin, hostname) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Open a tx-approval popup and return a promise that resolves with txHash or error.
|
// Open a tx-approval popup and return a promise that resolves with txHash or error.
|
||||||
// Uses the toolbar popup only — no fallback window.
|
// Uses windows.create() directly because tx approvals are triggered programmatically
|
||||||
|
// (from a dApp RPC call), not from a user gesture, so action.openPopup() is
|
||||||
|
// unreliable in this context.
|
||||||
function requestTxApproval(origin, hostname, txParams) {
|
function requestTxApproval(origin, hostname, txParams) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const id = nextApprovalId++;
|
const id = crypto.randomUUID();
|
||||||
pendingApprovals[id] = {
|
pendingApprovals[id] = {
|
||||||
origin,
|
origin,
|
||||||
hostname,
|
hostname,
|
||||||
@@ -161,30 +164,17 @@ function requestTxApproval(origin, hostname, txParams) {
|
|||||||
type: "tx",
|
type: "tx",
|
||||||
};
|
};
|
||||||
|
|
||||||
if (actionApi && typeof actionApi.setPopup === "function") {
|
openApprovalWindow(id);
|
||||||
actionApi.setPopup({
|
|
||||||
popup: "src/popup/index.html?approval=" + id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (actionApi && typeof actionApi.openPopup === "function") {
|
|
||||||
try {
|
|
||||||
const result = actionApi.openPopup();
|
|
||||||
if (result && typeof result.catch === "function") {
|
|
||||||
result.catch(() => {});
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// openPopup unsupported — user clicks toolbar icon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Open a sign-approval popup and return a promise that resolves with { signature } or { error }.
|
// Open a sign-approval popup and return a promise that resolves with { signature } or { error }.
|
||||||
// Uses the toolbar popup only — no fallback window. If openPopup() fails the
|
// Uses windows.create() directly because sign approvals are triggered programmatically
|
||||||
// popup URL is still set, so the user can click the toolbar icon to respond.
|
// (from a dApp RPC call), not from a user gesture, so action.openPopup() is
|
||||||
|
// unreliable in this context.
|
||||||
function requestSignApproval(origin, hostname, signParams) {
|
function requestSignApproval(origin, hostname, signParams) {
|
||||||
return new Promise((resolve) => {
|
return new Promise((resolve) => {
|
||||||
const id = nextApprovalId++;
|
const id = crypto.randomUUID();
|
||||||
pendingApprovals[id] = {
|
pendingApprovals[id] = {
|
||||||
origin,
|
origin,
|
||||||
hostname,
|
hostname,
|
||||||
@@ -193,30 +183,17 @@ function requestSignApproval(origin, hostname, signParams) {
|
|||||||
type: "sign",
|
type: "sign",
|
||||||
};
|
};
|
||||||
|
|
||||||
if (actionApi && typeof actionApi.setPopup === "function") {
|
openApprovalWindow(id);
|
||||||
actionApi.setPopup({
|
|
||||||
popup: "src/popup/index.html?approval=" + id,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (actionApi && typeof actionApi.openPopup === "function") {
|
|
||||||
try {
|
|
||||||
const result = actionApi.openPopup();
|
|
||||||
if (result && typeof result.catch === "function") {
|
|
||||||
result.catch(() => {});
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// openPopup unsupported — user clicks toolbar icon
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// Detect when an approval popup (browser-action) closes without a response.
|
// Detect when an approval popup (browser-action) closes without a response.
|
||||||
// TX and sign approvals are NOT auto-rejected on disconnect because toolbar
|
// TX and sign approvals now use windows.create() and are handled by the
|
||||||
// popups naturally close on focus loss and the user can reopen them.
|
// windowsApi.onRemoved listener below, but we still handle site-connection
|
||||||
|
// approval disconnects here.
|
||||||
runtime.onConnect.addListener((port) => {
|
runtime.onConnect.addListener((port) => {
|
||||||
if (port.name.startsWith("approval:")) {
|
if (port.name.startsWith("approval:")) {
|
||||||
const id = parseInt(port.name.split(":")[1], 10);
|
const id = port.name.split(":")[1];
|
||||||
port.onDisconnect.addListener(() => {
|
port.onDisconnect.addListener(() => {
|
||||||
const approval = pendingApprovals[id];
|
const approval = pendingApprovals[id];
|
||||||
if (approval) {
|
if (approval) {
|
||||||
@@ -442,6 +419,13 @@ async function handleRpc(method, params, origin) {
|
|||||||
? { method, message: params[0], from: params[1] }
|
? { method, message: params[0], from: params[1] }
|
||||||
: { method, message: params[1], from: params[0] };
|
: { method, message: params[1], from: params[0] };
|
||||||
|
|
||||||
|
if (method === "eth_sign") {
|
||||||
|
signParams.dangerWarning =
|
||||||
|
"\u26a0\ufe0f DANGER: This site is requesting to sign a raw hash. " +
|
||||||
|
"This can be used to sign transactions that drain your funds. " +
|
||||||
|
"Only proceed if you fully understand what you are signing.";
|
||||||
|
}
|
||||||
|
|
||||||
const decision = await requestSignApproval(
|
const decision = await requestSignApproval(
|
||||||
origin,
|
origin,
|
||||||
hostname,
|
hostname,
|
||||||
@@ -611,12 +595,39 @@ if (windowsApi && windowsApi.onRemoved) {
|
|||||||
// Listen for messages from content scripts and popup
|
// Listen for messages from content scripts and popup
|
||||||
runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
||||||
if (msg.type === "AUTISTMASK_RPC") {
|
if (msg.type === "AUTISTMASK_RPC") {
|
||||||
handleRpc(msg.method, msg.params, msg.origin).then((response) => {
|
// Derive origin from trusted sender info to prevent origin spoofing.
|
||||||
|
// Chrome MV3 provides sender.origin; Firefox MV2 fallback uses sender.tab.url.
|
||||||
|
let trustedOrigin = msg.origin; // fallback only if sender info unavailable
|
||||||
|
if (sender.origin) {
|
||||||
|
trustedOrigin = sender.origin;
|
||||||
|
} else if (sender.tab && sender.tab.url) {
|
||||||
|
try {
|
||||||
|
trustedOrigin = new URL(sender.tab.url).origin;
|
||||||
|
} catch {
|
||||||
|
// keep fallback
|
||||||
|
}
|
||||||
|
}
|
||||||
|
handleRpc(msg.method, msg.params, trustedOrigin).then((response) => {
|
||||||
sendResponse(response);
|
sendResponse(response);
|
||||||
});
|
});
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Validate that popup-only messages originate from the extension itself.
|
||||||
|
const POPUP_ONLY_TYPES = [
|
||||||
|
"AUTISTMASK_GET_APPROVAL",
|
||||||
|
"AUTISTMASK_APPROVAL_RESPONSE",
|
||||||
|
"AUTISTMASK_TX_RESPONSE",
|
||||||
|
"AUTISTMASK_SIGN_RESPONSE",
|
||||||
|
];
|
||||||
|
if (POPUP_ONLY_TYPES.includes(msg.type)) {
|
||||||
|
const extUrl = runtime.getURL("");
|
||||||
|
if (!sender.url || !sender.url.startsWith(extUrl)) {
|
||||||
|
sendResponse({ error: "Unauthorized sender" });
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (msg.type === "AUTISTMASK_GET_APPROVAL") {
|
if (msg.type === "AUTISTMASK_GET_APPROVAL") {
|
||||||
const approval = pendingApprovals[msg.id];
|
const approval = pendingApprovals[msg.id];
|
||||||
if (approval) {
|
if (approval) {
|
||||||
@@ -681,7 +692,8 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
|||||||
if (wallet) break;
|
if (wallet) break;
|
||||||
}
|
}
|
||||||
if (!wallet) throw new Error("Wallet not found");
|
if (!wallet) throw new Error("Wallet not found");
|
||||||
const decrypted = await decryptWithPassword(
|
// TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
|
||||||
|
let decrypted = await decryptWithPassword(
|
||||||
wallet.encryptedSecret,
|
wallet.encryptedSecret,
|
||||||
msg.password,
|
msg.password,
|
||||||
);
|
);
|
||||||
@@ -690,6 +702,10 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
|||||||
addrIndex,
|
addrIndex,
|
||||||
decrypted,
|
decrypted,
|
||||||
);
|
);
|
||||||
|
// Best-effort: clear decrypted secret after use.
|
||||||
|
// Note: JS strings are immutable; this nulls the reference but
|
||||||
|
// the original string may persist in memory until GC.
|
||||||
|
decrypted = null;
|
||||||
const provider = getProvider(state.rpcUrl);
|
const provider = getProvider(state.rpcUrl);
|
||||||
const connected = signer.connect(provider);
|
const connected = signer.connect(provider);
|
||||||
const tx = await connected.sendTransaction(approval.txParams);
|
const tx = await connected.sendTransaction(approval.txParams);
|
||||||
@@ -735,7 +751,8 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
|||||||
if (wallet) break;
|
if (wallet) break;
|
||||||
}
|
}
|
||||||
if (!wallet) throw new Error("Wallet not found");
|
if (!wallet) throw new Error("Wallet not found");
|
||||||
const decrypted = await decryptWithPassword(
|
// TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
|
||||||
|
let decrypted = await decryptWithPassword(
|
||||||
wallet.encryptedSecret,
|
wallet.encryptedSecret,
|
||||||
msg.password,
|
msg.password,
|
||||||
);
|
);
|
||||||
@@ -744,6 +761,10 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
|
|||||||
addrIndex,
|
addrIndex,
|
||||||
decrypted,
|
decrypted,
|
||||||
);
|
);
|
||||||
|
// Best-effort: clear decrypted secret after use.
|
||||||
|
// Note: JS strings are immutable; this nulls the reference but
|
||||||
|
// the original string may persist in memory until GC.
|
||||||
|
decrypted = null;
|
||||||
|
|
||||||
const sp = approval.signParams;
|
const sp = approval.signParams;
|
||||||
let signature;
|
let signature;
|
||||||
|
|||||||
@@ -13,6 +13,26 @@ if (typeof browser !== "undefined") {
|
|||||||
(document.head || document.documentElement).appendChild(script);
|
(document.head || document.documentElement).appendChild(script);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Send the persisted EIP-6963 provider UUID to the inpage script.
|
||||||
|
// Generated once at install time and stored in chrome.storage.local.
|
||||||
|
(function sendProviderUuid() {
|
||||||
|
const storage =
|
||||||
|
typeof browser !== "undefined"
|
||||||
|
? browser.storage.local
|
||||||
|
: chrome.storage.local;
|
||||||
|
storage.get("eip6963Uuid", (items) => {
|
||||||
|
let uuid = items?.eip6963Uuid;
|
||||||
|
if (!uuid) {
|
||||||
|
uuid = crypto.randomUUID();
|
||||||
|
storage.set({ eip6963Uuid: uuid });
|
||||||
|
}
|
||||||
|
window.postMessage(
|
||||||
|
{ type: "AUTISTMASK_PROVIDER_UUID", uuid },
|
||||||
|
location.origin,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
})();
|
||||||
|
|
||||||
// Relay requests from the page to the background script
|
// Relay requests from the page to the background script
|
||||||
window.addEventListener("message", (event) => {
|
window.addEventListener("message", (event) => {
|
||||||
if (event.source !== window) return;
|
if (event.source !== window) return;
|
||||||
|
|||||||
@@ -9,7 +9,7 @@
|
|||||||
const pending = {};
|
const pending = {};
|
||||||
|
|
||||||
// Listen for responses from the content script
|
// Listen for responses from the content script
|
||||||
window.addEventListener("message", (event) => {
|
window.addEventListener("message", function onUuid(event) {
|
||||||
if (event.source !== window) return;
|
if (event.source !== window) return;
|
||||||
if (event.data?.type !== "AUTISTMASK_RESPONSE") return;
|
if (event.data?.type !== "AUTISTMASK_RESPONSE") return;
|
||||||
const { id, result, error } = event.data;
|
const { id, result, error } = event.data;
|
||||||
@@ -24,7 +24,7 @@
|
|||||||
});
|
});
|
||||||
|
|
||||||
// Listen for events pushed from the extension
|
// Listen for events pushed from the extension
|
||||||
window.addEventListener("message", (event) => {
|
window.addEventListener("message", function onUuid(event) {
|
||||||
if (event.source !== window) return;
|
if (event.source !== window) return;
|
||||||
if (event.data?.type !== "AUTISTMASK_EVENT") return;
|
if (event.data?.type !== "AUTISTMASK_EVENT") return;
|
||||||
const { eventName, data } = event.data;
|
const { eventName, data } = event.data;
|
||||||
@@ -134,7 +134,7 @@
|
|||||||
// Some dApps (wagmi) check this to confirm MetaMask-like behavior
|
// Some dApps (wagmi) check this to confirm MetaMask-like behavior
|
||||||
_metamask: {
|
_metamask: {
|
||||||
isUnlocked() {
|
isUnlocked() {
|
||||||
return Promise.resolve(true);
|
return Promise.resolve(provider.selectedAddress !== null);
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
@@ -155,21 +155,38 @@
|
|||||||
"</svg>",
|
"</svg>",
|
||||||
);
|
);
|
||||||
|
|
||||||
const providerInfo = {
|
let providerUuid = crypto.randomUUID(); // fallback until real UUID arrives
|
||||||
uuid: "f3c5b2a1-8d4e-4f6a-9c7b-1e2d3a4b5c6d",
|
|
||||||
name: "AutistMask",
|
function buildProviderInfo() {
|
||||||
icon: ICON_SVG,
|
return {
|
||||||
rdns: "berlin.sneak.autistmask",
|
uuid: providerUuid,
|
||||||
};
|
name: "AutistMask",
|
||||||
|
icon: ICON_SVG,
|
||||||
|
rdns: "berlin.sneak.autistmask",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
function announceProvider() {
|
function announceProvider() {
|
||||||
window.dispatchEvent(
|
window.dispatchEvent(
|
||||||
new CustomEvent("eip6963:announceProvider", {
|
new CustomEvent("eip6963:announceProvider", {
|
||||||
detail: Object.freeze({ info: providerInfo, provider }),
|
detail: Object.freeze({
|
||||||
|
info: buildProviderInfo(),
|
||||||
|
provider,
|
||||||
|
}),
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Listen for the persisted UUID from the content script
|
||||||
|
function onProviderUuid(event) {
|
||||||
|
if (event.source !== window) return;
|
||||||
|
if (event.data?.type !== "AUTISTMASK_PROVIDER_UUID") return;
|
||||||
|
window.removeEventListener("message", onProviderUuid);
|
||||||
|
providerUuid = event.data.uuid;
|
||||||
|
announceProvider();
|
||||||
|
}
|
||||||
|
window.addEventListener("message", onProviderUuid);
|
||||||
|
|
||||||
window.addEventListener("eip6963:requestProvider", announceProvider);
|
window.addEventListener("eip6963:requestProvider", announceProvider);
|
||||||
announceProvider();
|
announceProvider();
|
||||||
})();
|
})();
|
||||||
|
|||||||
@@ -71,7 +71,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<textarea
|
<textarea
|
||||||
id="wallet-recovery-phrase"
|
id="wallet-mnemonic"
|
||||||
rows="3"
|
rows="3"
|
||||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg resize-y"
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg resize-y"
|
||||||
placeholder="word word word ..."
|
placeholder="word word word ..."
|
||||||
@@ -104,6 +104,10 @@
|
|||||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
id="add-wallet-error"
|
||||||
|
class="text-xs min-h-[1.25rem] mb-2"
|
||||||
|
></div>
|
||||||
<button
|
<button
|
||||||
id="btn-add-wallet-confirm"
|
id="btn-add-wallet-confirm"
|
||||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
@@ -162,6 +166,10 @@
|
|||||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div
|
||||||
|
id="import-key-error"
|
||||||
|
class="text-xs min-h-[1.25rem] mb-2"
|
||||||
|
></div>
|
||||||
<button
|
<button
|
||||||
id="btn-import-key-confirm"
|
id="btn-import-key-confirm"
|
||||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
@@ -305,6 +313,26 @@
|
|||||||
>
|
>
|
||||||
+ Token
|
+ Token
|
||||||
</button>
|
</button>
|
||||||
|
<div class="relative">
|
||||||
|
<button
|
||||||
|
id="btn-more-menu"
|
||||||
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
|
aria-label="More actions"
|
||||||
|
>
|
||||||
|
···
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
id="more-menu-dropdown"
|
||||||
|
class="hidden absolute right-0 top-full mt-1 border border-border bg-bg z-50 whitespace-nowrap py-1"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
id="btn-export-privkey"
|
||||||
|
class="block w-full text-left px-4 py-1.5 text-xs font-light text-muted hover:bg-hover hover:text-fg cursor-pointer"
|
||||||
|
>
|
||||||
|
Export Private Key
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- transactions -->
|
<!-- transactions -->
|
||||||
@@ -318,6 +346,60 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ============ EXPORT PRIVATE KEY VIEW ============ -->
|
||||||
|
<div id="view-export-privkey" class="view hidden">
|
||||||
|
<button
|
||||||
|
id="btn-export-privkey-back"
|
||||||
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
||||||
|
>
|
||||||
|
< Back
|
||||||
|
</button>
|
||||||
|
<div
|
||||||
|
id="export-privkey-jazzicon"
|
||||||
|
class="flex justify-center mt-1 mb-3"
|
||||||
|
></div>
|
||||||
|
<h2 class="font-bold mb-1">Export Private Key</h2>
|
||||||
|
<p class="text-xs mb-1" id="export-privkey-title"></p>
|
||||||
|
<p class="text-xs mb-3">
|
||||||
|
<span id="export-privkey-dot"></span>
|
||||||
|
<span
|
||||||
|
id="export-privkey-address"
|
||||||
|
class="cursor-pointer"
|
||||||
|
title="Click to copy"
|
||||||
|
></span>
|
||||||
|
</p>
|
||||||
|
<p class="text-xs mb-3 text-muted">
|
||||||
|
Warning: anyone with this private key can access and
|
||||||
|
transfer all funds from this address. Never share it.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
id="export-privkey-error"
|
||||||
|
class="text-xs min-h-[1.25rem] mb-2"
|
||||||
|
></div>
|
||||||
|
<div id="export-privkey-password-section" class="mb-2">
|
||||||
|
<label class="block mb-1">Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="export-privkey-password"
|
||||||
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
|
placeholder="Enter your password to continue"
|
||||||
|
/>
|
||||||
|
<button
|
||||||
|
id="btn-export-privkey-confirm"
|
||||||
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mt-2"
|
||||||
|
>
|
||||||
|
Reveal
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div id="export-privkey-result" class="hidden">
|
||||||
|
<div
|
||||||
|
id="export-privkey-value"
|
||||||
|
class="bg-danger-well rounded p-2 font-mono text-xs break-all cursor-pointer mb-1"
|
||||||
|
title="Click to copy"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ============ ADDRESS-TOKEN DETAIL VIEW ============ -->
|
<!-- ============ ADDRESS-TOKEN DETAIL VIEW ============ -->
|
||||||
<div id="view-address-token" class="view hidden">
|
<div id="view-address-token" class="view hidden">
|
||||||
<button
|
<button
|
||||||
@@ -374,6 +456,12 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- token contract details (ERC-20 only) -->
|
||||||
|
<div
|
||||||
|
id="address-token-contract-info"
|
||||||
|
class="bg-hover rounded-md mx-1 p-3 mb-3 text-xs hidden"
|
||||||
|
></div>
|
||||||
|
|
||||||
<!-- token-filtered transactions -->
|
<!-- token-filtered transactions -->
|
||||||
<div class="mt-3">
|
<div class="mt-3">
|
||||||
<div class="border-b border-border pb-1 mb-1">
|
<div class="border-b border-border pb-1 mb-1">
|
||||||
@@ -416,6 +504,11 @@
|
|||||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
placeholder="Address (0x...) or ENS name"
|
placeholder="Address (0x...) or ENS name"
|
||||||
/>
|
/>
|
||||||
|
<div
|
||||||
|
id="send-to-error"
|
||||||
|
class="text-xs"
|
||||||
|
style="min-height: 1.25rem; color: #cc0000"
|
||||||
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="mb-2">
|
<div class="mb-2">
|
||||||
<div class="flex justify-between mb-1">
|
<div class="flex justify-between mb-1">
|
||||||
@@ -525,6 +618,7 @@
|
|||||||
<!-- ============ TX SUCCESS ============ -->
|
<!-- ============ TX SUCCESS ============ -->
|
||||||
<div id="view-success-tx" class="view hidden">
|
<div id="view-success-tx" class="view hidden">
|
||||||
<h2 class="font-bold mb-2">Transaction Confirmed</h2>
|
<h2 class="font-bold mb-2">Transaction Confirmed</h2>
|
||||||
|
<div id="success-tx-decoded" class="mb-3 hidden text-xs"></div>
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<div class="text-xs text-muted mb-1">Amount</div>
|
<div class="text-xs text-muted mb-1">Amount</div>
|
||||||
<div id="success-tx-summary" class="font-bold"></div>
|
<div id="success-tx-summary" class="font-bold"></div>
|
||||||
@@ -630,9 +724,10 @@
|
|||||||
<div class="flex justify-center mb-3">
|
<div class="flex justify-center mb-3">
|
||||||
<canvas id="receive-qr"></canvas>
|
<canvas id="receive-qr"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="border border-border p-2 break-all mb-3 text-xs">
|
<div
|
||||||
<span id="receive-dot"></span>
|
class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
|
||||||
<span id="receive-address" class="select-all"></span>
|
>
|
||||||
|
<span id="receive-address-block" class="select-all"></span>
|
||||||
<span id="receive-etherscan-link"></span>
|
<span id="receive-etherscan-link"></span>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
@@ -702,9 +797,7 @@
|
|||||||
|
|
||||||
<div class="bg-well p-3 mx-1 mb-3">
|
<div class="bg-well p-3 mx-1 mb-3">
|
||||||
<h3 class="font-bold mb-1">Wallets</h3>
|
<h3 class="font-bold mb-1">Wallets</h3>
|
||||||
<p class="text-xs text-muted mb-2">
|
<div id="settings-wallet-list" class="mb-2"></div>
|
||||||
Add a new wallet from a recovery phrase or private key.
|
|
||||||
</p>
|
|
||||||
<button
|
<button
|
||||||
id="btn-main-add-wallet"
|
id="btn-main-add-wallet"
|
||||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
@@ -713,6 +806,21 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="bg-well p-3 mx-1 mb-3">
|
||||||
|
<h3 class="font-bold mb-1">Tracked Tokens</h3>
|
||||||
|
<p class="text-xs text-muted mb-2">
|
||||||
|
ERC-20 tokens whose balances are tracked across all
|
||||||
|
addresses.
|
||||||
|
</p>
|
||||||
|
<div id="settings-tracked-tokens"></div>
|
||||||
|
<button
|
||||||
|
id="btn-settings-add-token"
|
||||||
|
class="border border-border px-2 py-1 mt-2 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
|
>
|
||||||
|
+ Add token
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="bg-well p-3 mx-1 mb-3">
|
<div class="bg-well p-3 mx-1 mb-3">
|
||||||
<h3 class="font-bold mb-1">Display</h3>
|
<h3 class="font-bold mb-1">Display</h3>
|
||||||
<label
|
<label
|
||||||
@@ -824,6 +932,108 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<!-- ============ DELETE WALLET CONFIRM ============ -->
|
||||||
|
<div id="view-delete-wallet-confirm" class="view hidden">
|
||||||
|
<button
|
||||||
|
id="btn-delete-wallet-back"
|
||||||
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
||||||
|
>
|
||||||
|
< Back
|
||||||
|
</button>
|
||||||
|
<h2 class="font-bold mb-3">Delete Wallet</h2>
|
||||||
|
<p class="text-xs mb-3">
|
||||||
|
Deleting
|
||||||
|
<strong id="delete-wallet-name"></strong> is permanent. Any
|
||||||
|
funds will be unrecoverable without your recovery phrase.
|
||||||
|
</p>
|
||||||
|
<div
|
||||||
|
id="delete-wallet-error"
|
||||||
|
class="text-xs min-h-[1.25rem] mb-2"
|
||||||
|
></div>
|
||||||
|
<div class="mb-2">
|
||||||
|
<label class="block mb-1">Password</label>
|
||||||
|
<input
|
||||||
|
type="password"
|
||||||
|
id="delete-wallet-password"
|
||||||
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
|
placeholder="Enter your password to confirm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
id="btn-delete-wallet-confirm"
|
||||||
|
class="border border-border text-red-500 px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
|
>
|
||||||
|
Confirm Delete
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- ============ SETTINGS: ADD TOKEN ============ -->
|
||||||
|
<div id="view-settings-addtoken" class="view hidden">
|
||||||
|
<button
|
||||||
|
id="btn-settings-addtoken-back"
|
||||||
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
||||||
|
>
|
||||||
|
< Back
|
||||||
|
</button>
|
||||||
|
<h2 class="font-bold mb-2">Add Token</h2>
|
||||||
|
<p class="text-xs text-muted mb-3">
|
||||||
|
Pick a common token or enter a contract address manually.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<!-- top 10 quick-pick buttons -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="block mb-1 text-xs text-muted"
|
||||||
|
>Top tokens:</label
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
id="settings-addtoken-top10"
|
||||||
|
class="flex flex-wrap gap-1"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- top 100 dropdown -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="block mb-1 text-xs text-muted"
|
||||||
|
>Or pick from top 100:</label
|
||||||
|
>
|
||||||
|
<select
|
||||||
|
id="settings-addtoken-select"
|
||||||
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
|
>
|
||||||
|
<option value="">-- select --</option>
|
||||||
|
</select>
|
||||||
|
<button
|
||||||
|
id="btn-settings-addtoken-select"
|
||||||
|
class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
|
>
|
||||||
|
Add selected
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- manual contract address -->
|
||||||
|
<div class="mb-3">
|
||||||
|
<label class="block mb-1 text-xs text-muted"
|
||||||
|
>Or enter contract address:</label
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
id="settings-addtoken-address"
|
||||||
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
|
placeholder="0x..."
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
id="settings-addtoken-info"
|
||||||
|
class="text-xs text-muted mt-1 hidden"
|
||||||
|
></div>
|
||||||
|
<button
|
||||||
|
id="btn-settings-addtoken-manual"
|
||||||
|
class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||||
|
>
|
||||||
|
Add
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<!-- ============ TRANSACTION DETAIL ============ -->
|
<!-- ============ TRANSACTION DETAIL ============ -->
|
||||||
<div id="view-transaction" class="view hidden">
|
<div id="view-transaction" class="view hidden">
|
||||||
<button
|
<button
|
||||||
@@ -832,7 +1042,13 @@
|
|||||||
>
|
>
|
||||||
< Back
|
< Back
|
||||||
</button>
|
</button>
|
||||||
<h2 class="font-bold mb-2">Transaction</h2>
|
<h2 id="tx-detail-heading" class="font-bold mb-2">
|
||||||
|
Transaction
|
||||||
|
</h2>
|
||||||
|
<div id="tx-detail-type-section" class="mb-4 hidden">
|
||||||
|
<div class="text-xs text-muted mb-1">Type</div>
|
||||||
|
<div id="tx-detail-type" class="text-xs font-bold"></div>
|
||||||
|
</div>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="text-xs text-muted mb-1">Status</div>
|
<div class="text-xs text-muted mb-1">Status</div>
|
||||||
<div id="tx-detail-status" class="text-xs"></div>
|
<div id="tx-detail-status" class="text-xs"></div>
|
||||||
@@ -857,10 +1073,33 @@
|
|||||||
<div class="text-xs text-muted mb-1">To</div>
|
<div class="text-xs text-muted mb-1">To</div>
|
||||||
<div id="tx-detail-to" class="text-xs break-all"></div>
|
<div id="tx-detail-to" class="text-xs break-all"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="tx-detail-calldata-section" class="mb-4 hidden">
|
||||||
|
<div
|
||||||
|
id="tx-detail-calldata-well"
|
||||||
|
class="mb-3 border border-border border-dashed p-2"
|
||||||
|
>
|
||||||
|
<div class="text-xs text-muted mb-1">Action</div>
|
||||||
|
<div
|
||||||
|
id="tx-detail-calldata-action"
|
||||||
|
class="text-xs font-bold mb-2"
|
||||||
|
></div>
|
||||||
|
<div
|
||||||
|
id="tx-detail-calldata-details"
|
||||||
|
class="text-xs"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="mb-4">
|
<div class="mb-4">
|
||||||
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
||||||
<div id="tx-detail-hash" class="text-xs break-all"></div>
|
<div id="tx-detail-hash" class="text-xs break-all"></div>
|
||||||
</div>
|
</div>
|
||||||
|
<div id="tx-detail-rawdata-section" class="mb-4 hidden">
|
||||||
|
<div class="text-xs text-muted mb-1">Raw data</div>
|
||||||
|
<div
|
||||||
|
id="tx-detail-rawdata"
|
||||||
|
class="text-xs break-all font-mono border border-border border-dashed p-2"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- ============ TRANSACTION APPROVAL ============ -->
|
<!-- ============ TRANSACTION APPROVAL ============ -->
|
||||||
@@ -908,7 +1147,10 @@
|
|||||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div id="approve-tx-error" class="text-xs hidden mb-2"></div>
|
<div
|
||||||
|
id="approve-tx-error"
|
||||||
|
class="text-xs min-h-[1.25rem] mb-2"
|
||||||
|
></div>
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<button
|
<button
|
||||||
id="btn-approve-tx"
|
id="btn-approve-tx"
|
||||||
@@ -933,6 +1175,17 @@
|
|||||||
wants you to sign a message.
|
wants you to sign a message.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<div
|
||||||
|
id="approve-sign-danger-warning"
|
||||||
|
class="hidden mb-3 p-2 text-xs font-bold"
|
||||||
|
style="
|
||||||
|
background: #fee2e2;
|
||||||
|
color: #991b1b;
|
||||||
|
border: 2px solid #dc2626;
|
||||||
|
border-radius: 6px;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
|
||||||
<div class="mb-3">
|
<div class="mb-3">
|
||||||
<div class="text-xs text-muted mb-1">Type</div>
|
<div class="text-xs text-muted mb-1">Type</div>
|
||||||
<div id="approve-sign-type" class="text-xs font-bold"></div>
|
<div id="approve-sign-type" class="text-xs font-bold"></div>
|
||||||
@@ -960,7 +1213,10 @@
|
|||||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div id="approve-sign-error" class="text-xs hidden mb-2"></div>
|
<div
|
||||||
|
id="approve-sign-error"
|
||||||
|
class="text-xs min-h-[1.25rem] mb-2"
|
||||||
|
></div>
|
||||||
<div class="flex justify-between">
|
<div class="flex justify-between">
|
||||||
<button
|
<button
|
||||||
id="btn-approve-sign"
|
id="btn-approve-sign"
|
||||||
|
|||||||
@@ -20,6 +20,7 @@ const transactionDetail = require("./views/transactionDetail");
|
|||||||
const receive = require("./views/receive");
|
const receive = require("./views/receive");
|
||||||
const addToken = require("./views/addToken");
|
const addToken = require("./views/addToken");
|
||||||
const settings = require("./views/settings");
|
const settings = require("./views/settings");
|
||||||
|
const settingsAddToken = require("./views/settingsAddToken");
|
||||||
const approval = require("./views/approval");
|
const approval = require("./views/approval");
|
||||||
|
|
||||||
function renderWalletList() {
|
function renderWalletList() {
|
||||||
@@ -60,6 +61,8 @@ const ctx = {
|
|||||||
showConfirmTx: (txInfo) => confirmTx.show(txInfo),
|
showConfirmTx: (txInfo) => confirmTx.show(txInfo),
|
||||||
showReceive: () => receive.show(),
|
showReceive: () => receive.show(),
|
||||||
showTransactionDetail: (tx) => transactionDetail.show(tx),
|
showTransactionDetail: (tx) => transactionDetail.show(tx),
|
||||||
|
showSettingsView: () => settings.show(),
|
||||||
|
showSettingsAddTokenView: () => settingsAddToken.show(),
|
||||||
};
|
};
|
||||||
|
|
||||||
// Views that can be fully re-rendered from persisted state.
|
// Views that can be fully re-rendered from persisted state.
|
||||||
@@ -70,6 +73,7 @@ const RESTORABLE_VIEWS = new Set([
|
|||||||
"address-token",
|
"address-token",
|
||||||
"receive",
|
"receive",
|
||||||
"settings",
|
"settings",
|
||||||
|
"settings-addtoken",
|
||||||
"transaction",
|
"transaction",
|
||||||
"success-tx",
|
"success-tx",
|
||||||
"error-tx",
|
"error-tx",
|
||||||
@@ -120,6 +124,9 @@ function restoreView() {
|
|||||||
case "settings":
|
case "settings":
|
||||||
settings.show();
|
settings.show();
|
||||||
break;
|
break;
|
||||||
|
case "settings-addtoken":
|
||||||
|
settingsAddToken.show();
|
||||||
|
break;
|
||||||
case "transaction":
|
case "transaction":
|
||||||
if (state.viewData && state.viewData.tx) {
|
if (state.viewData && state.viewData.tx) {
|
||||||
transactionDetail.render();
|
transactionDetail.render();
|
||||||
@@ -182,7 +189,7 @@ async function init() {
|
|||||||
const params = new URLSearchParams(window.location.search);
|
const params = new URLSearchParams(window.location.search);
|
||||||
const approvalId = params.get("approval");
|
const approvalId = params.get("approval");
|
||||||
if (approvalId) {
|
if (approvalId) {
|
||||||
approval.show(parseInt(approvalId, 10));
|
approval.show(approvalId);
|
||||||
showView("approve-site");
|
showView("approve-site");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@@ -212,6 +219,7 @@ async function init() {
|
|||||||
receive.init(ctx);
|
receive.init(ctx);
|
||||||
addToken.init(ctx);
|
addToken.init(ctx);
|
||||||
settings.init(ctx);
|
settings.init(ctx);
|
||||||
|
settingsAddToken.init(ctx);
|
||||||
|
|
||||||
if (!state.hasWallet) {
|
if (!state.hasWallet) {
|
||||||
showView("welcome");
|
showView("welcome");
|
||||||
|
|||||||
@@ -11,6 +11,7 @@
|
|||||||
--color-border-light: #cccccc;
|
--color-border-light: #cccccc;
|
||||||
--color-hover: #eeeeee;
|
--color-hover: #eeeeee;
|
||||||
--color-well: #f5f5f5;
|
--color-well: #f5f5f5;
|
||||||
|
--color-danger-well: #fef2f2;
|
||||||
--color-section: #dddddd;
|
--color-section: #dddddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,64 +1,72 @@
|
|||||||
const { $, showView, showFlash } = require("./helpers");
|
const { $, showView, showFlash, showError, hideError } = require("./helpers");
|
||||||
const {
|
const {
|
||||||
generateRecoveryPhrase,
|
generateMnemonic,
|
||||||
hdWalletFromRecoveryPhrase,
|
hdWalletFromMnemonic,
|
||||||
isValidRecoveryPhrase,
|
isValidMnemonic,
|
||||||
} = require("../../shared/wallet");
|
} = require("../../shared/wallet");
|
||||||
const { encryptWithPassword } = require("../../shared/vault");
|
const { encryptWithPassword } = require("../../shared/vault");
|
||||||
const { state, saveState } = require("../../shared/state");
|
const { state, saveState } = require("../../shared/state");
|
||||||
const { scanForAddresses } = require("../../shared/balances");
|
const { scanForAddresses } = require("../../shared/balances");
|
||||||
|
|
||||||
function show() {
|
function show() {
|
||||||
$("wallet-recovery-phrase").value = "";
|
$("wallet-mnemonic").value = "";
|
||||||
$("add-wallet-password").value = "";
|
$("add-wallet-password").value = "";
|
||||||
$("add-wallet-password-confirm").value = "";
|
$("add-wallet-password-confirm").value = "";
|
||||||
$("add-wallet-phrase-warning").classList.add("hidden");
|
$("add-wallet-phrase-warning").classList.add("hidden");
|
||||||
|
hideError("add-wallet-error");
|
||||||
showView("add-wallet");
|
showView("add-wallet");
|
||||||
}
|
}
|
||||||
|
|
||||||
function init(ctx) {
|
function init(ctx) {
|
||||||
$("btn-generate-phrase").addEventListener("click", () => {
|
$("btn-generate-phrase").addEventListener("click", () => {
|
||||||
$("wallet-recovery-phrase").value = generateRecoveryPhrase();
|
$("wallet-mnemonic").value = generateMnemonic();
|
||||||
$("add-wallet-phrase-warning").classList.remove("hidden");
|
$("add-wallet-phrase-warning").classList.remove("hidden");
|
||||||
});
|
});
|
||||||
|
|
||||||
$("btn-add-wallet-confirm").addEventListener("click", async () => {
|
$("btn-add-wallet-confirm").addEventListener("click", async () => {
|
||||||
const recoveryPhrase = $("wallet-recovery-phrase").value.trim();
|
const mnemonic = $("wallet-mnemonic").value.trim();
|
||||||
if (!recoveryPhrase) {
|
if (!mnemonic) {
|
||||||
showFlash(
|
showError(
|
||||||
|
"add-wallet-error",
|
||||||
"Enter a recovery phrase or press the die to generate one.",
|
"Enter a recovery phrase or press the die to generate one.",
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const words = recoveryPhrase.split(/\s+/);
|
const words = mnemonic.split(/\s+/);
|
||||||
if (words.length !== 12 && words.length !== 24) {
|
if (words.length !== 12 && words.length !== 24) {
|
||||||
showFlash(
|
showError(
|
||||||
|
"add-wallet-error",
|
||||||
"Recovery phrase must be 12 or 24 words. You entered " +
|
"Recovery phrase must be 12 or 24 words. You entered " +
|
||||||
words.length +
|
words.length +
|
||||||
".",
|
".",
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (!isValidRecoveryPhrase(recoveryPhrase)) {
|
if (!isValidMnemonic(mnemonic)) {
|
||||||
showFlash("Invalid recovery phrase. Check for typos.");
|
showError(
|
||||||
|
"add-wallet-error",
|
||||||
|
"Invalid recovery phrase. Check for typos.",
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const pw = $("add-wallet-password").value;
|
const pw = $("add-wallet-password").value;
|
||||||
const pw2 = $("add-wallet-password-confirm").value;
|
const pw2 = $("add-wallet-password-confirm").value;
|
||||||
if (!pw) {
|
if (!pw) {
|
||||||
showFlash("Please choose a password.");
|
showError("add-wallet-error", "Please choose a password.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (pw.length < 8) {
|
if (pw.length < 12) {
|
||||||
showFlash("Password must be at least 8 characters.");
|
showError(
|
||||||
|
"add-wallet-error",
|
||||||
|
"Password must be at least 12 characters.",
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (pw !== pw2) {
|
if (pw !== pw2) {
|
||||||
showFlash("Passwords do not match.");
|
showError("add-wallet-error", "Passwords do not match.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const { xpub, firstAddress } =
|
const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
|
||||||
hdWalletFromRecoveryPhrase(recoveryPhrase);
|
|
||||||
const duplicate = state.wallets.find(
|
const duplicate = state.wallets.find(
|
||||||
(w) =>
|
(w) =>
|
||||||
w.type === "hd" &&
|
w.type === "hd" &&
|
||||||
@@ -67,14 +75,15 @@ function init(ctx) {
|
|||||||
firstAddress.toLowerCase(),
|
firstAddress.toLowerCase(),
|
||||||
);
|
);
|
||||||
if (duplicate) {
|
if (duplicate) {
|
||||||
showFlash(
|
showError(
|
||||||
|
"add-wallet-error",
|
||||||
"This recovery phrase is already added (" +
|
"This recovery phrase is already added (" +
|
||||||
duplicate.name +
|
duplicate.name +
|
||||||
").",
|
").",
|
||||||
);
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const encrypted = await encryptWithPassword(recoveryPhrase, pw);
|
const encrypted = await encryptWithPassword(mnemonic, pw);
|
||||||
const walletNum = state.wallets.length + 1;
|
const walletNum = state.wallets.length + 1;
|
||||||
const wallet = {
|
const wallet = {
|
||||||
type: "hd",
|
type: "hd",
|
||||||
|
|||||||
@@ -2,12 +2,13 @@ const {
|
|||||||
$,
|
$,
|
||||||
showView,
|
showView,
|
||||||
showFlash,
|
showFlash,
|
||||||
|
showError,
|
||||||
|
hideError,
|
||||||
balanceLinesForAddress,
|
balanceLinesForAddress,
|
||||||
addressDotHtml,
|
addressDotHtml,
|
||||||
|
addressTitle,
|
||||||
escapeHtml,
|
escapeHtml,
|
||||||
truncateMiddle,
|
truncateMiddle,
|
||||||
isoDate,
|
|
||||||
timeAgo,
|
|
||||||
} = require("./helpers");
|
} = require("./helpers");
|
||||||
const { state, currentAddress, saveState } = require("../../shared/state");
|
const { state, currentAddress, saveState } = require("../../shared/state");
|
||||||
const { formatUsd, getAddressValueUsd } = require("../../shared/prices");
|
const { formatUsd, getAddressValueUsd } = require("../../shared/prices");
|
||||||
@@ -16,9 +17,15 @@ const {
|
|||||||
filterTransactions,
|
filterTransactions,
|
||||||
} = require("../../shared/transactions");
|
} = require("../../shared/transactions");
|
||||||
const { resolveEnsNames } = require("../../shared/ens");
|
const { resolveEnsNames } = require("../../shared/ens");
|
||||||
const { updateSendBalance, renderSendTokenSelect } = require("./send");
|
const {
|
||||||
|
updateSendBalance,
|
||||||
|
renderSendTokenSelect,
|
||||||
|
resetSendValidation,
|
||||||
|
} = require("./send");
|
||||||
const { log } = require("../../shared/log");
|
const { log } = require("../../shared/log");
|
||||||
const makeBlockie = require("ethereum-blockies-base64");
|
const makeBlockie = require("ethereum-blockies-base64");
|
||||||
|
const { decryptWithPassword } = require("../../shared/vault");
|
||||||
|
const { getSignerForAddress } = require("../../shared/wallet");
|
||||||
|
|
||||||
let ctx;
|
let ctx;
|
||||||
|
|
||||||
@@ -86,6 +93,41 @@ function show() {
|
|||||||
loadTransactions(addr.address);
|
loadTransactions(addr.address);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isoDate(timestamp) {
|
||||||
|
const d = new Date(timestamp * 1000);
|
||||||
|
const pad = (n) => String(n).padStart(2, "0");
|
||||||
|
return (
|
||||||
|
d.getFullYear() +
|
||||||
|
"-" +
|
||||||
|
pad(d.getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
pad(d.getDate()) +
|
||||||
|
" " +
|
||||||
|
pad(d.getHours()) +
|
||||||
|
":" +
|
||||||
|
pad(d.getMinutes()) +
|
||||||
|
":" +
|
||||||
|
pad(d.getSeconds())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeAgo(timestamp) {
|
||||||
|
const seconds = Math.floor(Date.now() / 1000 - timestamp);
|
||||||
|
if (seconds < 60) return seconds + " seconds ago";
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
if (minutes < 60)
|
||||||
|
return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
|
||||||
|
const days = Math.floor(hours / 24);
|
||||||
|
if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
|
||||||
|
const months = Math.floor(days / 30);
|
||||||
|
if (months < 12)
|
||||||
|
return months + " month" + (months !== 1 ? "s" : "") + " ago";
|
||||||
|
const years = Math.floor(days / 365);
|
||||||
|
return years + " year" + (years !== 1 ? "s" : "") + " ago";
|
||||||
|
}
|
||||||
|
|
||||||
let loadedTxs = [];
|
let loadedTxs = [];
|
||||||
|
|
||||||
let ensNameMap = new Map();
|
let ensNameMap = new Map();
|
||||||
@@ -117,11 +159,11 @@ async function loadTransactions(address) {
|
|||||||
|
|
||||||
loadedTxs = txs;
|
loadedTxs = txs;
|
||||||
|
|
||||||
// Collect unique counterparty addresses for ENS resolution.
|
// Collect ALL unique addresses (from + to) for ENS resolution so
|
||||||
|
// that reverse lookups work for every displayed address, not just
|
||||||
|
// the ones that were originally entered as ENS names.
|
||||||
const counterparties = [
|
const counterparties = [
|
||||||
...new Set(
|
...new Set(txs.flatMap((tx) => [tx.from, tx.to].filter(Boolean))),
|
||||||
txs.map((tx) => (tx.direction === "sent" ? tx.to : tx.from)),
|
|
||||||
),
|
|
||||||
];
|
];
|
||||||
if (counterparties.length > 0) {
|
if (counterparties.length > 0) {
|
||||||
try {
|
try {
|
||||||
@@ -152,14 +194,23 @@ function renderTransactions(txs) {
|
|||||||
let html = "";
|
let html = "";
|
||||||
let i = 0;
|
let i = 0;
|
||||||
for (const tx of txs) {
|
for (const tx of txs) {
|
||||||
const counterparty = tx.direction === "sent" ? tx.to : tx.from;
|
// 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;
|
||||||
const ensName = ensNameMap.get(counterparty) || null;
|
const ensName = ensNameMap.get(counterparty) || null;
|
||||||
|
const title = addressTitle(counterparty, state.wallets);
|
||||||
const dirLabel = tx.directionLabel;
|
const dirLabel = tx.directionLabel;
|
||||||
const amountStr = tx.value
|
const amountStr = tx.value
|
||||||
? escapeHtml(tx.value + " " + tx.symbol)
|
? escapeHtml(tx.value + " " + tx.symbol)
|
||||||
: escapeHtml(tx.symbol);
|
: escapeHtml(tx.symbol);
|
||||||
const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
|
const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
|
||||||
const displayAddr = ensName || truncateMiddle(counterparty, maxAddr);
|
const displayAddr =
|
||||||
|
title || ensName || truncateMiddle(counterparty, maxAddr);
|
||||||
const addrStr = escapeHtml(displayAddr);
|
const addrStr = escapeHtml(displayAddr);
|
||||||
const dot = addressDotHtml(counterparty);
|
const dot = addressDotHtml(counterparty);
|
||||||
const err = tx.isError ? " (failed)" : "";
|
const err = tx.isError ? " (failed)" : "";
|
||||||
@@ -167,7 +218,7 @@ function renderTransactions(txs) {
|
|||||||
const ago = escapeHtml(timeAgo(tx.timestamp));
|
const ago = escapeHtml(timeAgo(tx.timestamp));
|
||||||
const iso = escapeHtml(isoDate(tx.timestamp));
|
const iso = escapeHtml(isoDate(tx.timestamp));
|
||||||
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
||||||
html += `<div class="flex justify-between"><span class="text-muted">${iso} (${ago})</span><span>${dirLabel}${err}</span></div>`;
|
html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
|
||||||
html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
|
html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
|
||||||
html += `</div>`;
|
html += `</div>`;
|
||||||
i++;
|
i++;
|
||||||
@@ -214,6 +265,7 @@ function init(_ctx) {
|
|||||||
$("send-token").classList.remove("hidden");
|
$("send-token").classList.remove("hidden");
|
||||||
$("send-token-static").classList.add("hidden");
|
$("send-token-static").classList.add("hidden");
|
||||||
updateSendBalance();
|
updateSendBalance();
|
||||||
|
resetSendValidation();
|
||||||
showView("send");
|
showView("send");
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -222,6 +274,99 @@ function init(_ctx) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
$("btn-add-token").addEventListener("click", ctx.showAddTokenView);
|
$("btn-add-token").addEventListener("click", ctx.showAddTokenView);
|
||||||
|
|
||||||
|
// More menu dropdown
|
||||||
|
const moreBtn = $("btn-more-menu");
|
||||||
|
const moreDropdown = $("more-menu-dropdown");
|
||||||
|
moreBtn.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
const isOpen = !moreDropdown.classList.toggle("hidden");
|
||||||
|
moreBtn.classList.toggle("bg-fg", isOpen);
|
||||||
|
moreBtn.classList.toggle("text-bg", isOpen);
|
||||||
|
});
|
||||||
|
document.addEventListener("click", () => {
|
||||||
|
moreDropdown.classList.add("hidden");
|
||||||
|
moreBtn.classList.remove("bg-fg", "text-bg");
|
||||||
|
});
|
||||||
|
moreDropdown.addEventListener("click", (e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("btn-export-privkey").addEventListener("click", () => {
|
||||||
|
moreDropdown.classList.add("hidden");
|
||||||
|
moreBtn.classList.remove("bg-fg", "text-bg");
|
||||||
|
const wallet = state.wallets[state.selectedWallet];
|
||||||
|
const addr = wallet.addresses[state.selectedAddress];
|
||||||
|
const blockieEl = $("export-privkey-jazzicon");
|
||||||
|
blockieEl.innerHTML = "";
|
||||||
|
const bImg = document.createElement("img");
|
||||||
|
bImg.src = makeBlockie(addr.address);
|
||||||
|
bImg.width = 48;
|
||||||
|
bImg.height = 48;
|
||||||
|
bImg.style.imageRendering = "pixelated";
|
||||||
|
bImg.style.borderRadius = "50%";
|
||||||
|
blockieEl.appendChild(bImg);
|
||||||
|
$("export-privkey-title").textContent =
|
||||||
|
wallet.name + " \u2014 Address " + (state.selectedAddress + 1);
|
||||||
|
$("export-privkey-dot").innerHTML = addressDotHtml(addr.address);
|
||||||
|
$("export-privkey-address").textContent = addr.address;
|
||||||
|
$("export-privkey-address").dataset.full = addr.address;
|
||||||
|
$("export-privkey-password").value = "";
|
||||||
|
hideError("export-privkey-error");
|
||||||
|
$("export-privkey-password-section").classList.remove("hidden");
|
||||||
|
$("export-privkey-result").classList.add("hidden");
|
||||||
|
$("export-privkey-value").textContent = "";
|
||||||
|
showView("export-privkey");
|
||||||
|
});
|
||||||
|
|
||||||
|
$("btn-export-privkey-confirm").addEventListener("click", async () => {
|
||||||
|
const password = $("export-privkey-password").value;
|
||||||
|
if (!password) {
|
||||||
|
showError("export-privkey-error", "Password is required.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const wallet = state.wallets[state.selectedWallet];
|
||||||
|
try {
|
||||||
|
const secret = await decryptWithPassword(
|
||||||
|
wallet.encryptedSecret,
|
||||||
|
password,
|
||||||
|
);
|
||||||
|
const signer = getSignerForAddress(
|
||||||
|
wallet,
|
||||||
|
state.selectedAddress,
|
||||||
|
secret,
|
||||||
|
);
|
||||||
|
const privateKey = signer.privateKey;
|
||||||
|
$("export-privkey-password-section").classList.add("hidden");
|
||||||
|
$("export-privkey-value").textContent = privateKey;
|
||||||
|
$("export-privkey-result").classList.remove("hidden");
|
||||||
|
hideError("export-privkey-error");
|
||||||
|
} catch {
|
||||||
|
showError("export-privkey-error", "Wrong password.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("export-privkey-value").addEventListener("click", () => {
|
||||||
|
const key = $("export-privkey-value").textContent;
|
||||||
|
if (key) {
|
||||||
|
navigator.clipboard.writeText(key);
|
||||||
|
showFlash("Copied!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("export-privkey-address").addEventListener("click", () => {
|
||||||
|
const full = $("export-privkey-address").dataset.full;
|
||||||
|
if (full) {
|
||||||
|
navigator.clipboard.writeText(full);
|
||||||
|
showFlash("Copied!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$("btn-export-privkey-back").addEventListener("click", () => {
|
||||||
|
$("export-privkey-value").textContent = "";
|
||||||
|
$("export-privkey-password").value = "";
|
||||||
|
show();
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = { init, show };
|
module.exports = { init, show };
|
||||||
|
|||||||
@@ -6,13 +6,13 @@ const {
|
|||||||
showView,
|
showView,
|
||||||
showFlash,
|
showFlash,
|
||||||
addressDotHtml,
|
addressDotHtml,
|
||||||
|
addressTitle,
|
||||||
escapeHtml,
|
escapeHtml,
|
||||||
truncateMiddle,
|
truncateMiddle,
|
||||||
balanceLine,
|
balanceLine,
|
||||||
isoDate,
|
|
||||||
timeAgo,
|
|
||||||
} = require("./helpers");
|
} = require("./helpers");
|
||||||
const { state, currentAddress, saveState } = require("../../shared/state");
|
const { state, currentAddress, saveState } = require("../../shared/state");
|
||||||
|
const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
|
||||||
const {
|
const {
|
||||||
formatUsd,
|
formatUsd,
|
||||||
getPrice,
|
getPrice,
|
||||||
@@ -23,7 +23,11 @@ const {
|
|||||||
filterTransactions,
|
filterTransactions,
|
||||||
} = require("../../shared/transactions");
|
} = require("../../shared/transactions");
|
||||||
const { resolveEnsNames } = require("../../shared/ens");
|
const { resolveEnsNames } = require("../../shared/ens");
|
||||||
const { updateSendBalance, renderSendTokenSelect } = require("./send");
|
const {
|
||||||
|
updateSendBalance,
|
||||||
|
renderSendTokenSelect,
|
||||||
|
resetSendValidation,
|
||||||
|
} = require("./send");
|
||||||
const { log } = require("../../shared/log");
|
const { log } = require("../../shared/log");
|
||||||
const makeBlockie = require("ethereum-blockies-base64");
|
const makeBlockie = require("ethereum-blockies-base64");
|
||||||
|
|
||||||
@@ -40,6 +44,41 @@ function etherscanAddressLink(address) {
|
|||||||
return `https://etherscan.io/address/${address}`;
|
return `https://etherscan.io/address/${address}`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isoDate(timestamp) {
|
||||||
|
const d = new Date(timestamp * 1000);
|
||||||
|
const pad = (n) => String(n).padStart(2, "0");
|
||||||
|
return (
|
||||||
|
d.getFullYear() +
|
||||||
|
"-" +
|
||||||
|
pad(d.getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
pad(d.getDate()) +
|
||||||
|
" " +
|
||||||
|
pad(d.getHours()) +
|
||||||
|
":" +
|
||||||
|
pad(d.getMinutes()) +
|
||||||
|
":" +
|
||||||
|
pad(d.getSeconds())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeAgo(timestamp) {
|
||||||
|
const seconds = Math.floor(Date.now() / 1000 - timestamp);
|
||||||
|
if (seconds < 60) return seconds + " seconds ago";
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
if (minutes < 60)
|
||||||
|
return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
|
||||||
|
const days = Math.floor(hours / 24);
|
||||||
|
if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
|
||||||
|
const months = Math.floor(days / 30);
|
||||||
|
if (months < 12)
|
||||||
|
return months + " month" + (months !== 1 ? "s" : "") + " ago";
|
||||||
|
const years = Math.floor(days / 365);
|
||||||
|
return years + " year" + (years !== 1 ? "s" : "") + " ago";
|
||||||
|
}
|
||||||
|
|
||||||
let loadedTxs = [];
|
let loadedTxs = [];
|
||||||
let ensNameMap = new Map();
|
let ensNameMap = new Map();
|
||||||
let currentSymbol = null;
|
let currentSymbol = null;
|
||||||
@@ -52,6 +91,7 @@ function show() {
|
|||||||
|
|
||||||
// Determine token symbol and balance
|
// Determine token symbol and balance
|
||||||
let symbol, amount, price;
|
let symbol, amount, price;
|
||||||
|
const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
|
||||||
if (tokenId === "ETH") {
|
if (tokenId === "ETH") {
|
||||||
symbol = "ETH";
|
symbol = "ETH";
|
||||||
amount = parseFloat(addr.balance || "0");
|
amount = parseFloat(addr.balance || "0");
|
||||||
@@ -60,7 +100,11 @@ function show() {
|
|||||||
const tb = (addr.tokenBalances || []).find(
|
const tb = (addr.tokenBalances || []).find(
|
||||||
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
|
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
|
||||||
);
|
);
|
||||||
symbol = tb ? tb.symbol : "?";
|
symbol = resolveSymbol(
|
||||||
|
tokenId,
|
||||||
|
addr.tokenBalances,
|
||||||
|
state.trackedTokens,
|
||||||
|
);
|
||||||
amount = tb ? parseFloat(tb.balance || "0") : 0;
|
amount = tb ? parseFloat(tb.balance || "0") : 0;
|
||||||
price = getPrice(symbol);
|
price = getPrice(symbol);
|
||||||
}
|
}
|
||||||
@@ -97,6 +141,62 @@ function show() {
|
|||||||
// Single token balance line (no tokenId — not clickable here)
|
// Single token balance line (no tokenId — not clickable here)
|
||||||
$("address-token-balance").innerHTML = balanceLine(symbol, amount, price);
|
$("address-token-balance").innerHTML = balanceLine(symbol, amount, price);
|
||||||
|
|
||||||
|
// Token contract details (ERC-20 only)
|
||||||
|
const contractInfo = $("address-token-contract-info");
|
||||||
|
if (tokenId !== "ETH") {
|
||||||
|
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 tokenHolders = tb && tb.holders != null ? tb.holders : null;
|
||||||
|
const dot = addressDotHtml(tokenId);
|
||||||
|
const tokenLink = `https://etherscan.io/token/${escapeHtml(tokenId)}`;
|
||||||
|
const projectUrl = knownToken && knownToken.url ? knownToken.url : null;
|
||||||
|
let infoHtml = `<div class="font-bold mb-2">Contract Address</div>`;
|
||||||
|
infoHtml +=
|
||||||
|
`<div class="flex items-center mb-2">${dot}` +
|
||||||
|
`<span class="break-all underline decoration-dashed cursor-pointer" id="address-token-contract-copy" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
|
||||||
|
`<a href="${tokenLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
|
||||||
|
`</div>`;
|
||||||
|
if (tokenName)
|
||||||
|
infoHtml += `<div class="mb-1"><span class="text-muted">Name:</span> ${tokenName}</div>`;
|
||||||
|
if (tokenSymbol)
|
||||||
|
infoHtml += `<div class="mb-1"><span class="text-muted">Symbol:</span> ${tokenSymbol}</div>`;
|
||||||
|
if (tokenDecimals != null)
|
||||||
|
infoHtml += `<div class="mb-1"><span class="text-muted">Decimals:</span> ${tokenDecimals}</div>`;
|
||||||
|
if (tokenHolders != null)
|
||||||
|
infoHtml += `<div class="mb-1"><span class="text-muted">Holders:</span> ${Number(tokenHolders).toLocaleString()}</div>`;
|
||||||
|
if (projectUrl)
|
||||||
|
infoHtml += `<div class="mb-1"><span class="text-muted">Website:</span> <a href="${escapeHtml(projectUrl)}" target="_blank" rel="noopener" class="underline decoration-dashed">${escapeHtml(projectUrl)}</a></div>`;
|
||||||
|
contractInfo.innerHTML = infoHtml;
|
||||||
|
contractInfo.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
contractInfo.innerHTML = "";
|
||||||
|
contractInfo.classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
// Transactions
|
// Transactions
|
||||||
$("address-token-tx-list").innerHTML =
|
$("address-token-tx-list").innerHTML =
|
||||||
'<div class="text-muted text-xs py-1">Loading...</div>';
|
'<div class="text-muted text-xs py-1">Loading...</div>';
|
||||||
@@ -142,11 +242,10 @@ async function loadTransactions(address, tokenId) {
|
|||||||
|
|
||||||
loadedTxs = txs;
|
loadedTxs = txs;
|
||||||
|
|
||||||
// Collect unique counterparty addresses for ENS resolution
|
// Collect ALL unique addresses for ENS resolution so reverse
|
||||||
|
// lookups work for every displayed address.
|
||||||
const counterparties = [
|
const counterparties = [
|
||||||
...new Set(
|
...new Set(txs.flatMap((tx) => [tx.from, tx.to].filter(Boolean))),
|
||||||
txs.map((tx) => (tx.direction === "sent" ? tx.to : tx.from)),
|
|
||||||
),
|
|
||||||
];
|
];
|
||||||
if (counterparties.length > 0) {
|
if (counterparties.length > 0) {
|
||||||
try {
|
try {
|
||||||
@@ -179,12 +278,14 @@ function renderTransactions(txs) {
|
|||||||
for (const tx of txs) {
|
for (const tx of txs) {
|
||||||
const counterparty = tx.direction === "sent" ? tx.to : tx.from;
|
const counterparty = tx.direction === "sent" ? tx.to : tx.from;
|
||||||
const ensName = ensNameMap.get(counterparty) || null;
|
const ensName = ensNameMap.get(counterparty) || null;
|
||||||
|
const title = addressTitle(counterparty, state.wallets);
|
||||||
const dirLabel = tx.directionLabel;
|
const dirLabel = tx.directionLabel;
|
||||||
const amountStr = tx.value
|
const amountStr = tx.value
|
||||||
? escapeHtml(tx.value + " " + tx.symbol)
|
? escapeHtml(tx.value + " " + tx.symbol)
|
||||||
: escapeHtml(tx.symbol);
|
: escapeHtml(tx.symbol);
|
||||||
const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
|
const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
|
||||||
const displayAddr = ensName || truncateMiddle(counterparty, maxAddr);
|
const displayAddr =
|
||||||
|
title || ensName || truncateMiddle(counterparty, maxAddr);
|
||||||
const addrStr = escapeHtml(displayAddr);
|
const addrStr = escapeHtml(displayAddr);
|
||||||
const dot = addressDotHtml(counterparty);
|
const dot = addressDotHtml(counterparty);
|
||||||
const err = tx.isError ? " (failed)" : "";
|
const err = tx.isError ? " (failed)" : "";
|
||||||
@@ -192,7 +293,7 @@ function renderTransactions(txs) {
|
|||||||
const ago = escapeHtml(timeAgo(tx.timestamp));
|
const ago = escapeHtml(timeAgo(tx.timestamp));
|
||||||
const iso = escapeHtml(isoDate(tx.timestamp));
|
const iso = escapeHtml(isoDate(tx.timestamp));
|
||||||
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
||||||
html += `<div class="flex justify-between"><span class="text-muted">${iso} (${ago})</span><span>${dirLabel}${err}</span></div>`;
|
html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
|
||||||
html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
|
html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
|
||||||
html += `</div>`;
|
html += `</div>`;
|
||||||
i++;
|
i++;
|
||||||
@@ -219,6 +320,14 @@ function init(_ctx) {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
$("address-token-contract-info").addEventListener("click", (e) => {
|
||||||
|
const copyEl = e.target.closest("[data-copy]");
|
||||||
|
if (copyEl) {
|
||||||
|
navigator.clipboard.writeText(copyEl.dataset.copy);
|
||||||
|
showFlash("Copied!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$("btn-address-token-back").addEventListener("click", () => {
|
$("btn-address-token-back").addEventListener("click", () => {
|
||||||
ctx.showAddressDetail();
|
ctx.showAddressDetail();
|
||||||
});
|
});
|
||||||
@@ -267,6 +376,7 @@ function init(_ctx) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
updateSendBalance();
|
updateSendBalance();
|
||||||
|
resetSendValidation();
|
||||||
showView("send");
|
showView("send");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,12 @@
|
|||||||
const { $, addressDotHtml, escapeHtml, showView } = require("./helpers");
|
const {
|
||||||
|
$,
|
||||||
|
addressDotHtml,
|
||||||
|
addressTitle,
|
||||||
|
escapeHtml,
|
||||||
|
showView,
|
||||||
|
showError,
|
||||||
|
hideError,
|
||||||
|
} = require("./helpers");
|
||||||
const { state, saveState } = require("../../shared/state");
|
const { state, saveState } = require("../../shared/state");
|
||||||
const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
|
const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
|
||||||
const { ERC20_ABI } = require("../../shared/constants");
|
const { ERC20_ABI } = require("../../shared/constants");
|
||||||
@@ -22,7 +30,15 @@ function approvalAddressHtml(address) {
|
|||||||
const dot = addressDotHtml(address);
|
const dot = addressDotHtml(address);
|
||||||
const link = `https://etherscan.io/address/${address}`;
|
const link = `https://etherscan.io/address/${address}`;
|
||||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||||
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
|
const title = addressTitle(address, state.wallets);
|
||||||
|
let html = "";
|
||||||
|
if (title) {
|
||||||
|
html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
|
||||||
|
html += `<div class="break-all">${escapeHtml(address)}${extLink}</div>`;
|
||||||
|
} else {
|
||||||
|
html += `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
|
||||||
|
}
|
||||||
|
return html;
|
||||||
}
|
}
|
||||||
|
|
||||||
function formatTxValue(val) {
|
function formatTxValue(val) {
|
||||||
@@ -64,10 +80,12 @@ function decodeCalldata(data, toAddress) {
|
|||||||
"0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
|
"0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
|
||||||
);
|
);
|
||||||
const isUnlimited = rawAmount === maxUint;
|
const isUnlimited = rawAmount === maxUint;
|
||||||
|
const amountRaw = isUnlimited
|
||||||
|
? "Unlimited"
|
||||||
|
: formatTxValue(formatUnits(rawAmount, tokenDecimals));
|
||||||
const amountStr = isUnlimited
|
const amountStr = isUnlimited
|
||||||
? "Unlimited"
|
? "Unlimited"
|
||||||
: formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
|
: amountRaw + (tokenSymbol ? " " + tokenSymbol : "");
|
||||||
(tokenSymbol ? " " + tokenSymbol : "");
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: "Token Approval",
|
name: "Token Approval",
|
||||||
@@ -86,7 +104,11 @@ function decodeCalldata(data, toAddress) {
|
|||||||
value: spender,
|
value: spender,
|
||||||
address: spender,
|
address: spender,
|
||||||
},
|
},
|
||||||
{ label: "Amount", value: amountStr },
|
{
|
||||||
|
label: "Amount",
|
||||||
|
value: amountStr,
|
||||||
|
rawValue: amountRaw,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -94,9 +116,11 @@ function decodeCalldata(data, toAddress) {
|
|||||||
if (parsed.name === "transfer") {
|
if (parsed.name === "transfer") {
|
||||||
const to = parsed.args[0];
|
const to = parsed.args[0];
|
||||||
const rawAmount = parsed.args[1];
|
const rawAmount = parsed.args[1];
|
||||||
|
const amountRaw = formatTxValue(
|
||||||
|
formatUnits(rawAmount, tokenDecimals),
|
||||||
|
);
|
||||||
const amountStr =
|
const amountStr =
|
||||||
formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
|
amountRaw + (tokenSymbol ? " " + tokenSymbol : "");
|
||||||
(tokenSymbol ? " " + tokenSymbol : "");
|
|
||||||
|
|
||||||
return {
|
return {
|
||||||
name: "Token Transfer",
|
name: "Token Transfer",
|
||||||
@@ -111,7 +135,11 @@ function decodeCalldata(data, toAddress) {
|
|||||||
isToken: true,
|
isToken: true,
|
||||||
},
|
},
|
||||||
{ label: "Recipient", value: to, address: to },
|
{ label: "Recipient", value: to, address: to },
|
||||||
{ label: "Amount", value: amountStr },
|
{
|
||||||
|
label: "Amount",
|
||||||
|
value: amountStr,
|
||||||
|
rawValue: amountRaw,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -149,7 +177,7 @@ function showTxApproval(details) {
|
|||||||
pendingTxDetails.to = d.address;
|
pendingTxDetails.to = d.address;
|
||||||
}
|
}
|
||||||
if (d.label === "Amount") {
|
if (d.label === "Amount") {
|
||||||
pendingTxDetails.amount = d.value;
|
pendingTxDetails.amount = d.rawValue || d.value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (token) {
|
if (token) {
|
||||||
@@ -158,6 +186,15 @@ function showTxApproval(details) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Carry decoded calldata info through to success/error views
|
||||||
|
if (decoded) {
|
||||||
|
pendingTxDetails.decoded = {
|
||||||
|
name: decoded.name,
|
||||||
|
description: decoded.description,
|
||||||
|
details: decoded.details,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
$("approve-tx-hostname").textContent = details.hostname;
|
$("approve-tx-hostname").textContent = details.hostname;
|
||||||
$("approve-tx-from").innerHTML = approvalAddressHtml(state.activeAddress);
|
$("approve-tx-from").innerHTML = approvalAddressHtml(state.activeAddress);
|
||||||
|
|
||||||
@@ -294,8 +331,20 @@ function showSignApproval(details) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Display danger warning for eth_sign (raw hash signing)
|
||||||
|
const warningEl = $("approve-sign-danger-warning");
|
||||||
|
if (warningEl) {
|
||||||
|
if (sp.dangerWarning) {
|
||||||
|
warningEl.textContent = sp.dangerWarning;
|
||||||
|
warningEl.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
warningEl.textContent = "";
|
||||||
|
warningEl.classList.add("hidden");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
$("approve-sign-password").value = "";
|
$("approve-sign-password").value = "";
|
||||||
$("approve-sign-error").classList.add("hidden");
|
hideError("approve-sign-error");
|
||||||
$("btn-approve-sign").disabled = false;
|
$("btn-approve-sign").disabled = false;
|
||||||
$("btn-approve-sign").classList.remove("text-muted");
|
$("btn-approve-sign").classList.remove("text-muted");
|
||||||
|
|
||||||
@@ -360,11 +409,10 @@ function init(ctx) {
|
|||||||
$("btn-approve-tx").addEventListener("click", () => {
|
$("btn-approve-tx").addEventListener("click", () => {
|
||||||
const password = $("approve-tx-password").value;
|
const password = $("approve-tx-password").value;
|
||||||
if (!password) {
|
if (!password) {
|
||||||
$("approve-tx-error").textContent = "Please enter your password.";
|
showError("approve-tx-error", "Please enter your password.");
|
||||||
$("approve-tx-error").classList.remove("hidden");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$("approve-tx-error").classList.add("hidden");
|
hideError("approve-tx-error");
|
||||||
$("btn-approve-tx").disabled = true;
|
$("btn-approve-tx").disabled = true;
|
||||||
$("btn-approve-tx").classList.add("text-muted");
|
$("btn-approve-tx").classList.add("text-muted");
|
||||||
|
|
||||||
@@ -373,6 +421,7 @@ function init(ctx) {
|
|||||||
type: "AUTISTMASK_TX_RESPONSE",
|
type: "AUTISTMASK_TX_RESPONSE",
|
||||||
id: approvalId,
|
id: approvalId,
|
||||||
approved: true,
|
approved: true,
|
||||||
|
// TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
|
||||||
password: password,
|
password: password,
|
||||||
},
|
},
|
||||||
(response) => {
|
(response) => {
|
||||||
@@ -399,11 +448,10 @@ function init(ctx) {
|
|||||||
$("btn-approve-sign").addEventListener("click", () => {
|
$("btn-approve-sign").addEventListener("click", () => {
|
||||||
const password = $("approve-sign-password").value;
|
const password = $("approve-sign-password").value;
|
||||||
if (!password) {
|
if (!password) {
|
||||||
$("approve-sign-error").textContent = "Please enter your password.";
|
showError("approve-sign-error", "Please enter your password.");
|
||||||
$("approve-sign-error").classList.remove("hidden");
|
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
$("approve-sign-error").classList.add("hidden");
|
hideError("approve-sign-error");
|
||||||
$("btn-approve-sign").disabled = true;
|
$("btn-approve-sign").disabled = true;
|
||||||
$("btn-approve-sign").classList.add("text-muted");
|
$("btn-approve-sign").classList.add("text-muted");
|
||||||
|
|
||||||
@@ -412,6 +460,7 @@ function init(ctx) {
|
|||||||
type: "AUTISTMASK_SIGN_RESPONSE",
|
type: "AUTISTMASK_SIGN_RESPONSE",
|
||||||
id: approvalId,
|
id: approvalId,
|
||||||
approved: true,
|
approved: true,
|
||||||
|
// TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
|
||||||
password: password,
|
password: password,
|
||||||
},
|
},
|
||||||
(response) => {
|
(response) => {
|
||||||
@@ -420,8 +469,7 @@ function init(ctx) {
|
|||||||
} else {
|
} else {
|
||||||
const msg =
|
const msg =
|
||||||
(response && response.error) || "Signing failed.";
|
(response && response.error) || "Signing failed.";
|
||||||
$("approve-sign-error").textContent = msg;
|
showError("approve-sign-error", msg);
|
||||||
$("approve-sign-error").classList.remove("hidden");
|
|
||||||
$("btn-approve-sign").disabled = false;
|
$("btn-approve-sign").disabled = false;
|
||||||
$("btn-approve-sign").classList.remove("text-muted");
|
$("btn-approve-sign").classList.remove("text-muted");
|
||||||
}
|
}
|
||||||
@@ -439,4 +487,4 @@ function init(ctx) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = { init, show };
|
module.exports = { init, show, decodeCalldata };
|
||||||
|
|||||||
@@ -14,6 +14,7 @@ const {
|
|||||||
showError,
|
showError,
|
||||||
hideError,
|
hideError,
|
||||||
showView,
|
showView,
|
||||||
|
showFlash,
|
||||||
addressTitle,
|
addressTitle,
|
||||||
addressDotHtml,
|
addressDotHtml,
|
||||||
escapeHtml,
|
escapeHtml,
|
||||||
@@ -95,11 +96,22 @@ function show(txInfo) {
|
|||||||
// Token contract section (ERC-20 only)
|
// Token contract section (ERC-20 only)
|
||||||
const tokenSection = $("confirm-token-section");
|
const tokenSection = $("confirm-token-section");
|
||||||
if (isErc20) {
|
if (isErc20) {
|
||||||
|
const dot = addressDotHtml(txInfo.token);
|
||||||
const link = etherscanTokenLink(txInfo.token);
|
const link = etherscanTokenLink(txInfo.token);
|
||||||
$("confirm-token-contract").innerHTML =
|
$("confirm-token-contract").innerHTML =
|
||||||
escapeHtml(txInfo.token) +
|
`<div class="flex items-center">${dot}` +
|
||||||
` <a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
`<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(txInfo.token)}">${escapeHtml(txInfo.token)}</span>` +
|
||||||
|
`<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
|
||||||
|
`</div>`;
|
||||||
tokenSection.classList.remove("hidden");
|
tokenSection.classList.remove("hidden");
|
||||||
|
// Attach click-to-copy on the contract address
|
||||||
|
const copyEl = tokenSection.querySelector("[data-copy]");
|
||||||
|
if (copyEl) {
|
||||||
|
copyEl.onclick = () => {
|
||||||
|
navigator.clipboard.writeText(copyEl.dataset.copy);
|
||||||
|
showFlash("Copied!");
|
||||||
|
};
|
||||||
|
}
|
||||||
} else {
|
} else {
|
||||||
tokenSection.classList.add("hidden");
|
tokenSection.classList.add("hidden");
|
||||||
}
|
}
|
||||||
@@ -334,8 +346,13 @@ function init(ctx) {
|
|||||||
tx = await contract.transfer(pendingTx.to, amount);
|
tx = await contract.transfer(pendingTx.to, amount);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Best-effort: clear decrypted secret after use.
|
||||||
|
// Note: JS strings are immutable; this nulls the reference but
|
||||||
|
// the original string may persist in memory until GC.
|
||||||
|
decryptedSecret = null;
|
||||||
txStatus.showWait(pendingTx, tx.hash);
|
txStatus.showWait(pendingTx, tx.hash);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
|
decryptedSecret = null;
|
||||||
const hash = tx ? tx.hash : null;
|
const hash = tx ? tx.hash : null;
|
||||||
txStatus.showError(pendingTx, hash, e.shortMessage || e.message);
|
txStatus.showError(pendingTx, hash, e.shortMessage || e.message);
|
||||||
}
|
}
|
||||||
|
|||||||
87
src/popup/views/deleteWallet.js
Normal file
87
src/popup/views/deleteWallet.js
Normal file
@@ -0,0 +1,87 @@
|
|||||||
|
const { $, showView, showFlash, showError, hideError } = require("./helpers");
|
||||||
|
const { state, saveState } = require("../../shared/state");
|
||||||
|
const { decryptWithPassword } = require("../../shared/vault");
|
||||||
|
|
||||||
|
let deleteWalletIndex = null;
|
||||||
|
let ctx = null;
|
||||||
|
|
||||||
|
function show(walletIdx) {
|
||||||
|
deleteWalletIndex = walletIdx;
|
||||||
|
const wallet = state.wallets[walletIdx];
|
||||||
|
$("delete-wallet-name").textContent =
|
||||||
|
wallet.name || "Wallet " + (walletIdx + 1);
|
||||||
|
$("delete-wallet-password").value = "";
|
||||||
|
hideError("delete-wallet-error");
|
||||||
|
showView("delete-wallet-confirm");
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(_ctx) {
|
||||||
|
ctx = _ctx;
|
||||||
|
|
||||||
|
$("btn-delete-wallet-back").addEventListener("click", () => {
|
||||||
|
deleteWalletIndex = null;
|
||||||
|
ctx.showSettingsView();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("btn-delete-wallet-confirm").addEventListener("click", async () => {
|
||||||
|
const pw = $("delete-wallet-password").value;
|
||||||
|
if (!pw) {
|
||||||
|
showError("delete-wallet-error", "Please enter your password.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (deleteWalletIndex === null) {
|
||||||
|
showError(
|
||||||
|
"delete-wallet-error",
|
||||||
|
"No wallet selected for deletion.",
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const walletIdx = deleteWalletIndex;
|
||||||
|
const wallet = state.wallets[walletIdx];
|
||||||
|
|
||||||
|
// Verify password against the wallet's encrypted data
|
||||||
|
try {
|
||||||
|
await decryptWithPassword(wallet.encryptedSecret, pw);
|
||||||
|
} catch (_e) {
|
||||||
|
showError("delete-wallet-error", "Wrong password.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// Collect addresses to clean up from allowedSites/deniedSites
|
||||||
|
const addresses = (wallet.addresses || []).map((a) => a.address);
|
||||||
|
|
||||||
|
// Remove wallet
|
||||||
|
state.wallets.splice(walletIdx, 1);
|
||||||
|
|
||||||
|
// Clean up site permissions for deleted addresses
|
||||||
|
for (const addr of addresses) {
|
||||||
|
delete state.allowedSites[addr];
|
||||||
|
delete state.deniedSites[addr];
|
||||||
|
}
|
||||||
|
|
||||||
|
deleteWalletIndex = null;
|
||||||
|
|
||||||
|
if (state.wallets.length === 0) {
|
||||||
|
// No wallets left — reset selection and show welcome
|
||||||
|
state.selectedWallet = null;
|
||||||
|
state.selectedAddress = null;
|
||||||
|
state.activeAddress = null;
|
||||||
|
await saveState();
|
||||||
|
showView("welcome");
|
||||||
|
} else {
|
||||||
|
// Switch to first wallet if deleted wallet was active
|
||||||
|
state.selectedWallet = 0;
|
||||||
|
state.selectedAddress = 0;
|
||||||
|
state.activeAddress =
|
||||||
|
state.wallets[0].addresses[0]?.address || null;
|
||||||
|
await saveState();
|
||||||
|
ctx.renderWalletList();
|
||||||
|
ctx.showSettingsView();
|
||||||
|
showFlash("Wallet deleted.");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { init, show };
|
||||||
@@ -8,6 +8,8 @@ const {
|
|||||||
} = require("../../shared/prices");
|
} = require("../../shared/prices");
|
||||||
const { state, saveState } = require("../../shared/state");
|
const { state, saveState } = require("../../shared/state");
|
||||||
|
|
||||||
|
// When views are added, removed, or transitions between them change,
|
||||||
|
// update the view-navigation documentation in README.md to match.
|
||||||
const VIEWS = [
|
const VIEWS = [
|
||||||
"welcome",
|
"welcome",
|
||||||
"add-wallet",
|
"add-wallet",
|
||||||
@@ -23,10 +25,13 @@ const VIEWS = [
|
|||||||
"receive",
|
"receive",
|
||||||
"add-token",
|
"add-token",
|
||||||
"settings",
|
"settings",
|
||||||
|
"delete-wallet-confirm",
|
||||||
|
"settings-addtoken",
|
||||||
"transaction",
|
"transaction",
|
||||||
"approve-site",
|
"approve-site",
|
||||||
"approve-tx",
|
"approve-tx",
|
||||||
"approve-sign",
|
"approve-sign",
|
||||||
|
"export-privkey",
|
||||||
];
|
];
|
||||||
|
|
||||||
function $(id) {
|
function $(id) {
|
||||||
@@ -82,7 +87,7 @@ function showFlash(msg, duration = 2000) {
|
|||||||
|
|
||||||
function balanceLine(symbol, amount, price, tokenId) {
|
function balanceLine(symbol, amount, price, tokenId) {
|
||||||
const qty = amount.toFixed(4);
|
const qty = amount.toFixed(4);
|
||||||
const usd = price ? formatUsd(amount * price) : "";
|
const usd = price ? formatUsd(amount * price) || " " : " ";
|
||||||
const tokenAttr = tokenId ? ` data-token="${tokenId}"` : "";
|
const tokenAttr = tokenId ? ` data-token="${tokenId}"` : "";
|
||||||
const clickClass = tokenId
|
const clickClass = tokenId
|
||||||
? " cursor-pointer hover:bg-hover balance-row"
|
? " cursor-pointer hover:bg-hover balance-row"
|
||||||
@@ -93,7 +98,7 @@ function balanceLine(symbol, amount, price, tokenId) {
|
|||||||
`<span>${symbol}</span>` +
|
`<span>${symbol}</span>` +
|
||||||
`<span>${qty}</span>` +
|
`<span>${qty}</span>` +
|
||||||
`</span>` +
|
`</span>` +
|
||||||
`<span class="text-right text-muted flex-1">${usd || " "}</span>` +
|
`<span class="text-right text-muted flex-1">${usd}</span>` +
|
||||||
`</div>`
|
`</div>`
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -147,41 +152,6 @@ function truncateMiddle(str, maxLen) {
|
|||||||
return str.slice(0, half) + "\u2026" + str.slice(-(maxLen - 1 - half));
|
return str.slice(0, half) + "\u2026" + str.slice(-(maxLen - 1 - half));
|
||||||
}
|
}
|
||||||
|
|
||||||
function isoDate(timestamp) {
|
|
||||||
const d = new Date(timestamp * 1000);
|
|
||||||
const pad = (n) => String(n).padStart(2, "0");
|
|
||||||
return (
|
|
||||||
d.getFullYear() +
|
|
||||||
"-" +
|
|
||||||
pad(d.getMonth() + 1) +
|
|
||||||
"-" +
|
|
||||||
pad(d.getDate()) +
|
|
||||||
" " +
|
|
||||||
pad(d.getHours()) +
|
|
||||||
":" +
|
|
||||||
pad(d.getMinutes()) +
|
|
||||||
":" +
|
|
||||||
pad(d.getSeconds())
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function timeAgo(timestamp) {
|
|
||||||
const seconds = Math.floor(Date.now() / 1000 - timestamp);
|
|
||||||
if (seconds < 60) return seconds + " seconds ago";
|
|
||||||
const minutes = Math.floor(seconds / 60);
|
|
||||||
if (minutes < 60)
|
|
||||||
return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
|
|
||||||
const hours = Math.floor(minutes / 60);
|
|
||||||
if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
|
|
||||||
const days = Math.floor(hours / 24);
|
|
||||||
if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
|
|
||||||
const months = Math.floor(days / 30);
|
|
||||||
if (months < 12)
|
|
||||||
return months + " month" + (months !== 1 ? "s" : "") + " ago";
|
|
||||||
const years = Math.floor(days / 365);
|
|
||||||
return years + " year" + (years !== 1 ? "s" : "") + " ago";
|
|
||||||
}
|
|
||||||
|
|
||||||
// 16 colors evenly spaced around the hue wheel (22.5° apart),
|
// 16 colors evenly spaced around the hue wheel (22.5° apart),
|
||||||
// all at HSL saturation 70%, lightness 50% for uniform vibrancy.
|
// all at HSL saturation 70%, lightness 50% for uniform vibrancy.
|
||||||
const ADDRESS_COLORS = [
|
const ADDRESS_COLORS = [
|
||||||
@@ -254,6 +224,41 @@ function formatAddressHtml(address, ensName, maxLen, title) {
|
|||||||
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
|
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function isoDate(timestamp) {
|
||||||
|
const d = new Date(timestamp * 1000);
|
||||||
|
const pad = (n) => String(n).padStart(2, "0");
|
||||||
|
return (
|
||||||
|
d.getFullYear() +
|
||||||
|
"-" +
|
||||||
|
pad(d.getMonth() + 1) +
|
||||||
|
"-" +
|
||||||
|
pad(d.getDate()) +
|
||||||
|
" " +
|
||||||
|
pad(d.getHours()) +
|
||||||
|
":" +
|
||||||
|
pad(d.getMinutes()) +
|
||||||
|
":" +
|
||||||
|
pad(d.getSeconds())
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function timeAgo(timestamp) {
|
||||||
|
const seconds = Math.floor(Date.now() / 1000 - timestamp);
|
||||||
|
if (seconds < 60) return seconds + " seconds ago";
|
||||||
|
const minutes = Math.floor(seconds / 60);
|
||||||
|
if (minutes < 60)
|
||||||
|
return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
|
||||||
|
const hours = Math.floor(minutes / 60);
|
||||||
|
if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
|
||||||
|
const days = Math.floor(hours / 24);
|
||||||
|
if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
|
||||||
|
const months = Math.floor(days / 30);
|
||||||
|
if (months < 12)
|
||||||
|
return months + " month" + (months !== 1 ? "s" : "") + " ago";
|
||||||
|
const years = Math.floor(days / 365);
|
||||||
|
return years + " year" + (years !== 1 ? "s" : "") + " ago";
|
||||||
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
$,
|
$,
|
||||||
showError,
|
showError,
|
||||||
|
|||||||
@@ -3,14 +3,19 @@ const {
|
|||||||
showView,
|
showView,
|
||||||
showFlash,
|
showFlash,
|
||||||
balanceLinesForAddress,
|
balanceLinesForAddress,
|
||||||
addressDotHtml,
|
|
||||||
escapeHtml,
|
|
||||||
truncateMiddle,
|
|
||||||
isoDate,
|
isoDate,
|
||||||
timeAgo,
|
timeAgo,
|
||||||
|
addressDotHtml,
|
||||||
|
addressTitle,
|
||||||
|
escapeHtml,
|
||||||
|
truncateMiddle,
|
||||||
} = require("./helpers");
|
} = require("./helpers");
|
||||||
const { state, saveState, currentAddress } = require("../../shared/state");
|
const { state, saveState, currentAddress } = require("../../shared/state");
|
||||||
const { updateSendBalance, renderSendTokenSelect } = require("./send");
|
const {
|
||||||
|
updateSendBalance,
|
||||||
|
renderSendTokenSelect,
|
||||||
|
resetSendValidation,
|
||||||
|
} = require("./send");
|
||||||
const { deriveAddressFromXpub } = require("../../shared/wallet");
|
const { deriveAddressFromXpub } = require("../../shared/wallet");
|
||||||
const {
|
const {
|
||||||
formatUsd,
|
formatUsd,
|
||||||
@@ -102,13 +107,22 @@ function renderHomeTxList(ctx) {
|
|||||||
let html = "";
|
let html = "";
|
||||||
let i = 0;
|
let i = 0;
|
||||||
for (const tx of homeTxs) {
|
for (const tx of homeTxs) {
|
||||||
const counterparty = tx.direction === "sent" ? tx.to : tx.from;
|
// 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;
|
||||||
const dirLabel = tx.directionLabel;
|
const dirLabel = tx.directionLabel;
|
||||||
const amountStr = tx.value
|
const amountStr = tx.value
|
||||||
? escapeHtml(tx.value + " " + tx.symbol)
|
? escapeHtml(tx.value + " " + tx.symbol)
|
||||||
: escapeHtml(tx.symbol);
|
: escapeHtml(tx.symbol);
|
||||||
|
const title = addressTitle(counterparty, state.wallets);
|
||||||
const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
|
const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
|
||||||
const displayAddr = truncateMiddle(counterparty, maxAddr);
|
const displayAddr = title || truncateMiddle(counterparty, maxAddr);
|
||||||
const addrStr = escapeHtml(displayAddr);
|
const addrStr = escapeHtml(displayAddr);
|
||||||
const dot = addressDotHtml(counterparty);
|
const dot = addressDotHtml(counterparty);
|
||||||
const err = tx.isError ? " (failed)" : "";
|
const err = tx.isError ? " (failed)" : "";
|
||||||
@@ -116,7 +130,7 @@ function renderHomeTxList(ctx) {
|
|||||||
const ago = escapeHtml(timeAgo(tx.timestamp));
|
const ago = escapeHtml(timeAgo(tx.timestamp));
|
||||||
const iso = escapeHtml(isoDate(tx.timestamp));
|
const iso = escapeHtml(isoDate(tx.timestamp));
|
||||||
html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
|
||||||
html += `<div class="flex justify-between"><span class="text-muted">${iso} (${ago})</span><span>${dirLabel}${err}</span></div>`;
|
html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
|
||||||
html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
|
html += `<div class="flex justify-between"><span class="flex items-center">${dot}${addrStr}</span><span>${amountStr}</span></div>`;
|
||||||
html += `</div>`;
|
html += `</div>`;
|
||||||
i++;
|
i++;
|
||||||
@@ -378,6 +392,7 @@ function init(ctx) {
|
|||||||
$("send-token-static").classList.add("hidden");
|
$("send-token-static").classList.add("hidden");
|
||||||
renderSendTokenSelect(addr);
|
renderSendTokenSelect(addr);
|
||||||
updateSendBalance();
|
updateSendBalance();
|
||||||
|
resetSendValidation();
|
||||||
showView("send");
|
showView("send");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
const { $, showView, showFlash } = require("./helpers");
|
const { $, showView, showError, hideError } = require("./helpers");
|
||||||
const { addressFromPrivateKey } = require("../../shared/wallet");
|
const { addressFromPrivateKey } = require("../../shared/wallet");
|
||||||
const { encryptWithPassword } = require("../../shared/vault");
|
const { encryptWithPassword } = require("../../shared/vault");
|
||||||
const { state, saveState } = require("../../shared/state");
|
const { state, saveState } = require("../../shared/state");
|
||||||
@@ -7,6 +7,7 @@ function show() {
|
|||||||
$("import-private-key").value = "";
|
$("import-private-key").value = "";
|
||||||
$("import-key-password").value = "";
|
$("import-key-password").value = "";
|
||||||
$("import-key-password-confirm").value = "";
|
$("import-key-password-confirm").value = "";
|
||||||
|
hideError("import-key-error");
|
||||||
showView("import-key");
|
showView("import-key");
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -14,28 +15,31 @@ function init(ctx) {
|
|||||||
$("btn-import-key-confirm").addEventListener("click", async () => {
|
$("btn-import-key-confirm").addEventListener("click", async () => {
|
||||||
const key = $("import-private-key").value.trim();
|
const key = $("import-private-key").value.trim();
|
||||||
if (!key) {
|
if (!key) {
|
||||||
showFlash("Please enter your private key.");
|
showError("import-key-error", "Please enter your private key.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let addr;
|
let addr;
|
||||||
try {
|
try {
|
||||||
addr = addressFromPrivateKey(key);
|
addr = addressFromPrivateKey(key);
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
showFlash("Invalid private key.");
|
showError("import-key-error", "Invalid private key.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const pw = $("import-key-password").value;
|
const pw = $("import-key-password").value;
|
||||||
const pw2 = $("import-key-password-confirm").value;
|
const pw2 = $("import-key-password-confirm").value;
|
||||||
if (!pw) {
|
if (!pw) {
|
||||||
showFlash("Please choose a password.");
|
showError("import-key-error", "Please choose a password.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (pw.length < 8) {
|
if (pw.length < 12) {
|
||||||
showFlash("Password must be at least 8 characters.");
|
showError(
|
||||||
|
"import-key-error",
|
||||||
|
"Password must be at least 12 characters.",
|
||||||
|
);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
if (pw !== pw2) {
|
if (pw !== pw2) {
|
||||||
showFlash("Passwords do not match.");
|
showError("import-key-error", "Passwords do not match.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
const encrypted = await encryptWithPassword(key, pw);
|
const encrypted = await encryptWithPassword(key, pw);
|
||||||
|
|||||||
@@ -1,4 +1,10 @@
|
|||||||
const { $, showView, showFlash, addressDotHtml } = require("./helpers");
|
const {
|
||||||
|
$,
|
||||||
|
showView,
|
||||||
|
showFlash,
|
||||||
|
formatAddressHtml,
|
||||||
|
addressTitle,
|
||||||
|
} = require("./helpers");
|
||||||
const { state, currentAddress } = require("../../shared/state");
|
const { state, currentAddress } = require("../../shared/state");
|
||||||
const QRCode = require("qrcode");
|
const QRCode = require("qrcode");
|
||||||
|
|
||||||
@@ -12,8 +18,12 @@ const EXT_ICON =
|
|||||||
function show() {
|
function show() {
|
||||||
const addr = currentAddress();
|
const addr = currentAddress();
|
||||||
const address = addr ? addr.address : "";
|
const address = addr ? addr.address : "";
|
||||||
$("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
|
const title = address ? addressTitle(address, state.wallets) : null;
|
||||||
$("receive-address").textContent = address;
|
const ensName = addr ? addr.ensName || null : null;
|
||||||
|
$("receive-address-block").innerHTML = address
|
||||||
|
? formatAddressHtml(address, ensName, null, title)
|
||||||
|
: "";
|
||||||
|
$("receive-address-block").dataset.full = address;
|
||||||
const link = address ? `https://etherscan.io/address/${address}` : "";
|
const link = address ? `https://etherscan.io/address/${address}` : "";
|
||||||
$("receive-etherscan-link").innerHTML = link
|
$("receive-etherscan-link").innerHTML = link
|
||||||
? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
|
? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
|
||||||
@@ -50,8 +60,16 @@ function show() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function init(ctx) {
|
function init(ctx) {
|
||||||
|
$("receive-address-block").addEventListener("click", () => {
|
||||||
|
const addr = $("receive-address-block").dataset.full;
|
||||||
|
if (addr) {
|
||||||
|
navigator.clipboard.writeText(addr);
|
||||||
|
showFlash("Copied!");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
$("btn-receive-copy").addEventListener("click", () => {
|
$("btn-receive-copy").addEventListener("click", () => {
|
||||||
const addr = $("receive-address").textContent;
|
const addr = $("receive-address-block").dataset.full;
|
||||||
if (addr) {
|
if (addr) {
|
||||||
navigator.clipboard.writeText(addr);
|
navigator.clipboard.writeText(addr);
|
||||||
showFlash("Copied!");
|
showFlash("Copied!");
|
||||||
|
|||||||
@@ -1,10 +1,117 @@
|
|||||||
// Send view: collect To, Amount, Token. Then go to confirmation.
|
// Send view: collect To, Amount, Token. Then go to confirmation.
|
||||||
|
|
||||||
const { $, showFlash, addressDotHtml, escapeHtml } = require("./helpers");
|
const {
|
||||||
|
$,
|
||||||
|
showFlash,
|
||||||
|
addressDotHtml,
|
||||||
|
addressTitle,
|
||||||
|
escapeHtml,
|
||||||
|
} = require("./helpers");
|
||||||
const { state, currentAddress } = require("../../shared/state");
|
const { state, currentAddress } = require("../../shared/state");
|
||||||
let ctx;
|
let ctx;
|
||||||
const { getProvider } = require("../../shared/balances");
|
const { getProvider } = require("../../shared/balances");
|
||||||
const { KNOWN_SYMBOLS } = require("../../shared/tokenList");
|
const { KNOWN_SYMBOLS, resolveSymbol } = require("../../shared/tokenList");
|
||||||
|
const { getAddress } = require("ethers");
|
||||||
|
|
||||||
|
const ZERO_ADDRESS = "0x0000000000000000000000000000000000000000";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Validate a destination address string.
|
||||||
|
* Returns { valid: true } or { valid: false, error: "..." }.
|
||||||
|
*/
|
||||||
|
function validateToAddress(value) {
|
||||||
|
const v = value.trim();
|
||||||
|
if (!v) return { valid: false, error: "" };
|
||||||
|
|
||||||
|
// ENS names: contains a dot and doesn't start with 0x
|
||||||
|
if (v.includes(".") && !v.startsWith("0x")) {
|
||||||
|
// Basic ENS format check: at least one label before and after dot
|
||||||
|
if (/^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+$/.test(v)) {
|
||||||
|
return { valid: true };
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
error: "Please enter a valid ENS name.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Must look like an Ethereum address
|
||||||
|
if (!/^0x[0-9a-fA-F]{40}$/.test(v)) {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
error: "Please enter a valid Ethereum address.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// Reject zero address
|
||||||
|
if (v.toLowerCase() === ZERO_ADDRESS) {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
error: "Sending to the zero address is not allowed.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// EIP-55 checksum validation: all-lowercase is ok, otherwise must match checksum
|
||||||
|
if (v !== v.toLowerCase()) {
|
||||||
|
try {
|
||||||
|
const checksummed = getAddress(v);
|
||||||
|
if (checksummed !== v) {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
error: "Address checksum is invalid. Please double-check the address.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
error: "Address checksum is invalid. Please double-check the address.",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Warn if sending to own address
|
||||||
|
const addr = currentAddress();
|
||||||
|
if (addr && v.toLowerCase() === addr.address.toLowerCase()) {
|
||||||
|
// Allow but will warn — we return valid with a warning
|
||||||
|
return {
|
||||||
|
valid: true,
|
||||||
|
warning: "This is your own address. Are you sure?",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return { valid: true };
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateToValidation() {
|
||||||
|
const input = $("send-to");
|
||||||
|
const errorEl = $("send-to-error");
|
||||||
|
const btn = $("btn-send-review");
|
||||||
|
const value = input.value.trim();
|
||||||
|
|
||||||
|
if (!value) {
|
||||||
|
errorEl.textContent = "";
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.classList.add("opacity-50");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const result = validateToAddress(value);
|
||||||
|
if (!result.valid) {
|
||||||
|
errorEl.textContent = result.error;
|
||||||
|
errorEl.style.color = "#cc0000";
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.classList.add("opacity-50");
|
||||||
|
} else if (result.warning) {
|
||||||
|
errorEl.textContent = result.warning;
|
||||||
|
errorEl.style.color = "#b8860b";
|
||||||
|
btn.disabled = false;
|
||||||
|
btn.classList.remove("opacity-50");
|
||||||
|
} else {
|
||||||
|
errorEl.textContent = "";
|
||||||
|
btn.disabled = false;
|
||||||
|
btn.classList.remove("opacity-50");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
const EXT_ICON =
|
const EXT_ICON =
|
||||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||||
@@ -44,8 +151,15 @@ function updateSendBalance() {
|
|||||||
const dot = addressDotHtml(addr.address);
|
const dot = addressDotHtml(addr.address);
|
||||||
const link = `https://etherscan.io/address/${addr.address}`;
|
const link = `https://etherscan.io/address/${addr.address}`;
|
||||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||||
|
const title = addressTitle(addr.address, state.wallets);
|
||||||
let fromHtml = "";
|
let fromHtml = "";
|
||||||
if (addr.ensName) {
|
if (title) {
|
||||||
|
fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
|
||||||
|
if (addr.ensName) {
|
||||||
|
fromHtml += `<div>${escapeHtml(addr.ensName)}</div>`;
|
||||||
|
}
|
||||||
|
fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
|
||||||
|
} else if (addr.ensName) {
|
||||||
fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(addr.ensName)}</div>`;
|
fromHtml += `<div class="flex items-center font-bold">${dot}${escapeHtml(addr.ensName)}</div>`;
|
||||||
fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
|
fromHtml += `<div class="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
|
||||||
} else {
|
} else {
|
||||||
@@ -60,7 +174,11 @@ function updateSendBalance() {
|
|||||||
const tb = (addr.tokenBalances || []).find(
|
const tb = (addr.tokenBalances || []).find(
|
||||||
(t) => t.address.toLowerCase() === token.toLowerCase(),
|
(t) => t.address.toLowerCase() === token.toLowerCase(),
|
||||||
);
|
);
|
||||||
const symbol = tb ? tb.symbol : "?";
|
const symbol = resolveSymbol(
|
||||||
|
token,
|
||||||
|
addr.tokenBalances,
|
||||||
|
state.trackedTokens,
|
||||||
|
);
|
||||||
const bal = tb ? tb.balance || "0" : "0";
|
const bal = tb ? tb.balance || "0" : "0";
|
||||||
$("send-balance").textContent =
|
$("send-balance").textContent =
|
||||||
"Current balance: " + bal + " " + symbol;
|
"Current balance: " + bal + " " + symbol;
|
||||||
@@ -71,6 +189,13 @@ function init(_ctx) {
|
|||||||
ctx = _ctx;
|
ctx = _ctx;
|
||||||
$("send-token").addEventListener("change", updateSendBalance);
|
$("send-token").addEventListener("change", updateSendBalance);
|
||||||
|
|
||||||
|
// Initial state: disable review button until address is entered
|
||||||
|
$("btn-send-review").disabled = true;
|
||||||
|
$("btn-send-review").classList.add("opacity-50");
|
||||||
|
|
||||||
|
// Validate address on input
|
||||||
|
$("send-to").addEventListener("input", updateToValidation);
|
||||||
|
|
||||||
$("btn-send-review").addEventListener("click", async () => {
|
$("btn-send-review").addEventListener("click", async () => {
|
||||||
const to = $("send-to").value.trim();
|
const to = $("send-to").value.trim();
|
||||||
const amount = $("send-amount").value.trim();
|
const amount = $("send-amount").value.trim();
|
||||||
@@ -78,6 +203,15 @@ function init(_ctx) {
|
|||||||
showFlash("Please enter a recipient address.");
|
showFlash("Please enter a recipient address.");
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Re-validate before proceeding
|
||||||
|
const validation = validateToAddress(to);
|
||||||
|
if (!validation.valid) {
|
||||||
|
showFlash(
|
||||||
|
validation.error || "Please enter a valid Ethereum address.",
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
|
if (!amount || isNaN(parseFloat(amount)) || parseFloat(amount) <= 0) {
|
||||||
showFlash("Please enter a valid amount.");
|
showFlash("Please enter a valid amount.");
|
||||||
return;
|
return;
|
||||||
@@ -111,7 +245,11 @@ function init(_ctx) {
|
|||||||
const tb = (addr.tokenBalances || []).find(
|
const tb = (addr.tokenBalances || []).find(
|
||||||
(t) => t.address.toLowerCase() === token.toLowerCase(),
|
(t) => t.address.toLowerCase() === token.toLowerCase(),
|
||||||
);
|
);
|
||||||
tokenSymbol = tb ? tb.symbol : "?";
|
tokenSymbol = resolveSymbol(
|
||||||
|
token,
|
||||||
|
addr.tokenBalances,
|
||||||
|
state.trackedTokens,
|
||||||
|
);
|
||||||
tokenBalance = tb ? tb.balance || "0" : "0";
|
tokenBalance = tb ? tb.balance || "0" : "0";
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -138,4 +276,19 @@ function init(_ctx) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = { init, updateSendBalance, renderSendTokenSelect };
|
function resetSendValidation() {
|
||||||
|
const errorEl = $("send-to-error");
|
||||||
|
const btn = $("btn-send-review");
|
||||||
|
if (errorEl) errorEl.textContent = "";
|
||||||
|
if (btn) {
|
||||||
|
btn.disabled = true;
|
||||||
|
btn.classList.add("opacity-50");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
init,
|
||||||
|
updateSendBalance,
|
||||||
|
renderSendTokenSelect,
|
||||||
|
resetSendValidation,
|
||||||
|
};
|
||||||
|
|||||||
@@ -1,7 +1,8 @@
|
|||||||
const { $, showView, showFlash } = require("./helpers");
|
const { $, showView, showFlash, escapeHtml } = require("./helpers");
|
||||||
const { state, saveState } = require("../../shared/state");
|
const { state, saveState } = require("../../shared/state");
|
||||||
const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
|
const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
|
||||||
const { log, debugFetch } = require("../../shared/log");
|
const { log, debugFetch } = require("../../shared/log");
|
||||||
|
const deleteWallet = require("./deleteWallet");
|
||||||
|
|
||||||
const runtime =
|
const runtime =
|
||||||
typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
|
typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
|
||||||
@@ -38,10 +39,95 @@ function renderSiteList(containerId, siteMap, stateKey) {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function renderTrackedTokens() {
|
||||||
|
const container = $("settings-tracked-tokens");
|
||||||
|
if (state.trackedTokens.length === 0) {
|
||||||
|
container.innerHTML = '<p class="text-xs text-muted">None</p>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let html = "";
|
||||||
|
state.trackedTokens.forEach((token, idx) => {
|
||||||
|
const label = token.name
|
||||||
|
? escapeHtml(token.name) + " (" + escapeHtml(token.symbol) + ")"
|
||||||
|
: escapeHtml(token.symbol);
|
||||||
|
html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
|
||||||
|
html += `<span>${label}</span>`;
|
||||||
|
html += `<button class="btn-remove-token border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;
|
||||||
|
html += `</div>`;
|
||||||
|
});
|
||||||
|
container.innerHTML = html;
|
||||||
|
container.querySelectorAll(".btn-remove-token").forEach((btn) => {
|
||||||
|
btn.addEventListener("click", async () => {
|
||||||
|
const idx = parseInt(btn.dataset.idx, 10);
|
||||||
|
state.trackedTokens.splice(idx, 1);
|
||||||
|
await saveState();
|
||||||
|
renderTrackedTokens();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderWalletListSettings() {
|
||||||
|
const container = $("settings-wallet-list");
|
||||||
|
if (state.wallets.length === 0) {
|
||||||
|
container.innerHTML = '<p class="text-xs text-muted">No wallets.</p>';
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let html = "";
|
||||||
|
state.wallets.forEach((wallet, idx) => {
|
||||||
|
const name = escapeHtml(wallet.name || "Wallet " + (idx + 1));
|
||||||
|
html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
|
||||||
|
html += `<span class="settings-wallet-name cursor-pointer underline decoration-dashed" data-idx="${idx}">${name}</span>`;
|
||||||
|
html += `<button class="btn-delete-wallet border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;
|
||||||
|
html += `</div>`;
|
||||||
|
});
|
||||||
|
container.innerHTML = html;
|
||||||
|
container.querySelectorAll(".btn-delete-wallet").forEach((btn) => {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const idx = parseInt(btn.dataset.idx, 10);
|
||||||
|
deleteWallet.show(idx);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Inline rename on click
|
||||||
|
container.querySelectorAll(".settings-wallet-name").forEach((span) => {
|
||||||
|
span.addEventListener("click", () => {
|
||||||
|
const idx = parseInt(span.dataset.idx, 10);
|
||||||
|
const wallet = state.wallets[idx];
|
||||||
|
const input = document.createElement("input");
|
||||||
|
input.type = "text";
|
||||||
|
input.className =
|
||||||
|
"border border-border p-0 text-xs bg-bg text-fg w-full";
|
||||||
|
input.value = wallet.name || "Wallet " + (idx + 1);
|
||||||
|
span.replaceWith(input);
|
||||||
|
input.focus();
|
||||||
|
input.select();
|
||||||
|
const finish = async () => {
|
||||||
|
const val = input.value.trim();
|
||||||
|
if (val && val !== wallet.name) {
|
||||||
|
wallet.name = val;
|
||||||
|
await saveState();
|
||||||
|
}
|
||||||
|
renderWalletListSettings();
|
||||||
|
};
|
||||||
|
input.addEventListener("blur", finish);
|
||||||
|
input.addEventListener("keydown", (e) => {
|
||||||
|
if (e.key === "Enter") input.blur();
|
||||||
|
if (e.key === "Escape") {
|
||||||
|
input.value = wallet.name || "Wallet " + (idx + 1);
|
||||||
|
input.blur();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
function show() {
|
function show() {
|
||||||
$("settings-rpc").value = state.rpcUrl;
|
$("settings-rpc").value = state.rpcUrl;
|
||||||
$("settings-blockscout").value = state.blockscoutUrl;
|
$("settings-blockscout").value = state.blockscoutUrl;
|
||||||
|
renderTrackedTokens();
|
||||||
renderSiteLists();
|
renderSiteLists();
|
||||||
|
renderWalletListSettings();
|
||||||
|
|
||||||
showView("settings");
|
showView("settings");
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -55,6 +141,8 @@ function renderSiteLists() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function init(ctx) {
|
function init(ctx) {
|
||||||
|
deleteWallet.init(ctx);
|
||||||
|
|
||||||
$("btn-save-rpc").addEventListener("click", async () => {
|
$("btn-save-rpc").addEventListener("click", async () => {
|
||||||
const url = $("settings-rpc").value.trim();
|
const url = $("settings-rpc").value.trim();
|
||||||
if (!url) {
|
if (!url) {
|
||||||
@@ -155,6 +243,11 @@ function init(ctx) {
|
|||||||
|
|
||||||
$("btn-main-add-wallet").addEventListener("click", ctx.showAddWalletView);
|
$("btn-main-add-wallet").addEventListener("click", ctx.showAddWalletView);
|
||||||
|
|
||||||
|
$("btn-settings-add-token").addEventListener(
|
||||||
|
"click",
|
||||||
|
ctx.showSettingsAddTokenView,
|
||||||
|
);
|
||||||
|
|
||||||
$("btn-settings-back").addEventListener("click", () => {
|
$("btn-settings-back").addEventListener("click", () => {
|
||||||
ctx.renderWalletList();
|
ctx.renderWalletList();
|
||||||
showView("main");
|
showView("main");
|
||||||
|
|||||||
159
src/popup/views/settingsAddToken.js
Normal file
159
src/popup/views/settingsAddToken.js
Normal file
@@ -0,0 +1,159 @@
|
|||||||
|
const { $, showView, showFlash } = require("./helpers");
|
||||||
|
const { getTopTokens } = require("../../shared/tokenList");
|
||||||
|
const { state, saveState } = require("../../shared/state");
|
||||||
|
const { lookupTokenInfo } = require("../../shared/balances");
|
||||||
|
const { isScamAddress } = require("../../shared/scamlist");
|
||||||
|
const { log } = require("../../shared/log");
|
||||||
|
|
||||||
|
let ctx;
|
||||||
|
|
||||||
|
function isTracked(address) {
|
||||||
|
const lower = address.toLowerCase();
|
||||||
|
return state.trackedTokens.some((t) => t.address.toLowerCase() === lower);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tokenLabel(t) {
|
||||||
|
return t.name ? t.name + " (" + t.symbol + ")" : t.symbol;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderTop10() {
|
||||||
|
const el = $("settings-addtoken-top10");
|
||||||
|
el.innerHTML = getTopTokens(10)
|
||||||
|
.map((t) => {
|
||||||
|
const tracked = isTracked(t.address);
|
||||||
|
const cls = tracked
|
||||||
|
? "border border-border px-1 text-xs opacity-40 cursor-default"
|
||||||
|
: "border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs";
|
||||||
|
return (
|
||||||
|
`<button class="settings-addtoken-quick ${cls}"` +
|
||||||
|
` data-address="${t.address}"` +
|
||||||
|
` data-symbol="${t.symbol}"` +
|
||||||
|
` data-decimals="${t.decimals}"` +
|
||||||
|
` data-name="${(t.name || "").replace(/"/g, """)}"` +
|
||||||
|
`${tracked ? " disabled" : ""}>${t.symbol}</button>`
|
||||||
|
);
|
||||||
|
})
|
||||||
|
.join("");
|
||||||
|
el.querySelectorAll(".settings-addtoken-quick:not([disabled])").forEach(
|
||||||
|
(btn) => {
|
||||||
|
btn.addEventListener("click", async () => {
|
||||||
|
const token = {
|
||||||
|
address: btn.dataset.address,
|
||||||
|
symbol: btn.dataset.symbol,
|
||||||
|
decimals: parseInt(btn.dataset.decimals, 10),
|
||||||
|
name: btn.dataset.name || btn.dataset.symbol,
|
||||||
|
};
|
||||||
|
state.trackedTokens.push(token);
|
||||||
|
await saveState();
|
||||||
|
showFlash("Added " + token.symbol);
|
||||||
|
renderTop10();
|
||||||
|
renderDropdown();
|
||||||
|
ctx.doRefreshAndRender();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderDropdown() {
|
||||||
|
const sel = $("settings-addtoken-select");
|
||||||
|
const tokens = getTopTokens(100);
|
||||||
|
let html = '<option value="">-- select --</option>';
|
||||||
|
for (const t of tokens) {
|
||||||
|
const tracked = isTracked(t.address);
|
||||||
|
const label = tokenLabel(t) + (tracked ? " (tracked)" : "");
|
||||||
|
html +=
|
||||||
|
`<option value="${t.address}"` +
|
||||||
|
` data-symbol="${t.symbol}"` +
|
||||||
|
` data-decimals="${t.decimals}"` +
|
||||||
|
` data-name="${(t.name || "").replace(/"/g, """)}"` +
|
||||||
|
`${tracked ? " disabled" : ""}>${label}</option>`;
|
||||||
|
}
|
||||||
|
sel.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
function show() {
|
||||||
|
$("settings-addtoken-address").value = "";
|
||||||
|
$("settings-addtoken-info").classList.add("hidden");
|
||||||
|
renderTop10();
|
||||||
|
renderDropdown();
|
||||||
|
showView("settings-addtoken");
|
||||||
|
}
|
||||||
|
|
||||||
|
function init(_ctx) {
|
||||||
|
ctx = _ctx;
|
||||||
|
|
||||||
|
$("btn-settings-addtoken-back").addEventListener("click", () => {
|
||||||
|
ctx.showSettingsView();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("btn-settings-addtoken-select").addEventListener("click", async () => {
|
||||||
|
const sel = $("settings-addtoken-select");
|
||||||
|
const opt = sel.options[sel.selectedIndex];
|
||||||
|
if (!opt || !opt.value) {
|
||||||
|
showFlash("Please select a token.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isTracked(opt.value)) {
|
||||||
|
showFlash("Already tracked.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const token = {
|
||||||
|
address: opt.value,
|
||||||
|
symbol: opt.dataset.symbol,
|
||||||
|
decimals: parseInt(opt.dataset.decimals, 10),
|
||||||
|
name: opt.dataset.name || opt.dataset.symbol,
|
||||||
|
};
|
||||||
|
state.trackedTokens.push(token);
|
||||||
|
await saveState();
|
||||||
|
showFlash("Added " + token.symbol);
|
||||||
|
renderTop10();
|
||||||
|
renderDropdown();
|
||||||
|
ctx.doRefreshAndRender();
|
||||||
|
});
|
||||||
|
|
||||||
|
$("btn-settings-addtoken-manual").addEventListener("click", async () => {
|
||||||
|
const addr = $("settings-addtoken-address").value.trim();
|
||||||
|
if (!addr || !addr.startsWith("0x")) {
|
||||||
|
showFlash(
|
||||||
|
"Please enter a valid contract address starting with 0x.",
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isTracked(addr)) {
|
||||||
|
showFlash("Already tracked.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (isScamAddress(addr)) {
|
||||||
|
showFlash("This address is on a known scam/fraud list.");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const infoEl = $("settings-addtoken-info");
|
||||||
|
infoEl.textContent = "Looking up token...";
|
||||||
|
infoEl.classList.remove("hidden");
|
||||||
|
log.debugf("Looking up token contract", addr);
|
||||||
|
try {
|
||||||
|
const info = await lookupTokenInfo(addr, state.rpcUrl);
|
||||||
|
log.infof("Adding token", info.symbol, addr);
|
||||||
|
state.trackedTokens.push({
|
||||||
|
address: addr,
|
||||||
|
symbol: info.symbol,
|
||||||
|
decimals: info.decimals,
|
||||||
|
name: info.name,
|
||||||
|
});
|
||||||
|
await saveState();
|
||||||
|
showFlash("Added " + info.symbol);
|
||||||
|
$("settings-addtoken-address").value = "";
|
||||||
|
infoEl.classList.add("hidden");
|
||||||
|
renderTop10();
|
||||||
|
renderDropdown();
|
||||||
|
ctx.doRefreshAndRender();
|
||||||
|
} catch (e) {
|
||||||
|
const detail = e.shortMessage || e.message || String(e);
|
||||||
|
log.errorf("Token lookup failed for", addr, detail);
|
||||||
|
showFlash(detail);
|
||||||
|
infoEl.classList.add("hidden");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
module.exports = { init, show };
|
||||||
@@ -13,6 +13,8 @@ const {
|
|||||||
} = require("./helpers");
|
} = require("./helpers");
|
||||||
const { state } = require("../../shared/state");
|
const { state } = require("../../shared/state");
|
||||||
const makeBlockie = require("ethereum-blockies-base64");
|
const makeBlockie = require("ethereum-blockies-base64");
|
||||||
|
const { log, debugFetch } = require("../../shared/log");
|
||||||
|
const { decodeCalldata } = require("./approval");
|
||||||
|
|
||||||
const EXT_ICON =
|
const EXT_ICON =
|
||||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||||
@@ -35,27 +37,35 @@ function blockieHtml(address) {
|
|||||||
return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
|
return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function etherscanLinkHtml(url) {
|
||||||
|
return (
|
||||||
|
`<a href="${url}" target="_blank" rel="noopener" ` +
|
||||||
|
`class="inline-flex items-center"` +
|
||||||
|
`>${EXT_ICON}</a>`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
function txAddressHtml(address, ensName, title) {
|
function txAddressHtml(address, ensName, title) {
|
||||||
const blockie = blockieHtml(address);
|
const blockie = blockieHtml(address);
|
||||||
const dot = addressDotHtml(address);
|
const dot = addressDotHtml(address);
|
||||||
const link = `https://etherscan.io/address/${address}`;
|
const link = `https://etherscan.io/address/${address}`;
|
||||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
const extLink = etherscanLinkHtml(link);
|
||||||
let html = `<div class="mb-1">${blockie}</div>`;
|
let html = `<div class="mb-1">${blockie}</div>`;
|
||||||
if (title) {
|
if (title) {
|
||||||
html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
|
html += `<div class="font-bold">${escapeHtml(title)}</div>`;
|
||||||
}
|
}
|
||||||
if (ensName) {
|
if (ensName) {
|
||||||
html +=
|
html +=
|
||||||
`<div class="flex items-center">${title ? "" : dot}` +
|
`<div class="flex items-center">${dot}` +
|
||||||
copyableHtml(ensName, "") +
|
copyableHtml(ensName, "") +
|
||||||
extLink +
|
|
||||||
`</div>` +
|
`</div>` +
|
||||||
`<div class="break-all">` +
|
`<div class="flex items-center">${dot}` +
|
||||||
copyableHtml(address, "break-all") +
|
copyableHtml(address, "break-all") +
|
||||||
|
extLink +
|
||||||
`</div>`;
|
`</div>`;
|
||||||
} else {
|
} else {
|
||||||
html +=
|
html +=
|
||||||
`<div class="flex items-center">${title ? "" : dot}` +
|
`<div class="flex items-center">${dot}` +
|
||||||
copyableHtml(address, "break-all") +
|
copyableHtml(address, "break-all") +
|
||||||
extLink +
|
extLink +
|
||||||
`</div>`;
|
`</div>`;
|
||||||
@@ -65,7 +75,7 @@ function txAddressHtml(address, ensName, title) {
|
|||||||
|
|
||||||
function txHashHtml(hash) {
|
function txHashHtml(hash) {
|
||||||
const link = `https://etherscan.io/tx/${hash}`;
|
const link = `https://etherscan.io/tx/${hash}`;
|
||||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
const extLink = etherscanLinkHtml(link);
|
||||||
return copyableHtml(hash, "break-all") + extLink;
|
return copyableHtml(hash, "break-all") + extLink;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -85,6 +95,9 @@ function show(tx) {
|
|||||||
fromEns: tx.fromEns || null,
|
fromEns: tx.fromEns || null,
|
||||||
toEns: tx.toEns || null,
|
toEns: tx.toEns || null,
|
||||||
directionLabel: tx.directionLabel || null,
|
directionLabel: tx.directionLabel || null,
|
||||||
|
direction: tx.direction || null,
|
||||||
|
isContractCall: tx.isContractCall || false,
|
||||||
|
method: tx.method || null,
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
render();
|
render();
|
||||||
@@ -121,6 +134,30 @@ function render() {
|
|||||||
nativeEl.parentElement.classList.add("hidden");
|
nativeEl.parentElement.classList.add("hidden");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Show type label for contract interactions (Swap, Execute, etc.)
|
||||||
|
const typeSection = $("tx-detail-type-section");
|
||||||
|
const typeEl = $("tx-detail-type");
|
||||||
|
const headingEl = $("tx-detail-heading");
|
||||||
|
if (tx.direction === "contract" && tx.directionLabel) {
|
||||||
|
if (typeSection) {
|
||||||
|
typeEl.textContent = tx.directionLabel;
|
||||||
|
typeSection.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (typeSection) typeSection.classList.add("hidden");
|
||||||
|
}
|
||||||
|
if (headingEl) headingEl.textContent = "Transaction";
|
||||||
|
|
||||||
|
// Hide calldata and raw data sections; re-fetch if this is a contract call
|
||||||
|
const calldataSection = $("tx-detail-calldata-section");
|
||||||
|
if (calldataSection) calldataSection.classList.add("hidden");
|
||||||
|
const rawDataSection = $("tx-detail-rawdata-section");
|
||||||
|
if (rawDataSection) rawDataSection.classList.add("hidden");
|
||||||
|
|
||||||
|
if (tx.isContractCall || tx.direction === "contract") {
|
||||||
|
loadCalldata(tx.hash, tx.to);
|
||||||
|
}
|
||||||
|
|
||||||
$("tx-detail-time").textContent =
|
$("tx-detail-time").textContent =
|
||||||
isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
|
isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
|
||||||
$("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
|
$("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
|
||||||
@@ -137,6 +174,87 @@ function render() {
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
async function loadCalldata(txHash, toAddress) {
|
||||||
|
const section = $("tx-detail-calldata-section");
|
||||||
|
const actionEl = $("tx-detail-calldata-action");
|
||||||
|
const detailsEl = $("tx-detail-calldata-details");
|
||||||
|
const wellEl = $("tx-detail-calldata-well");
|
||||||
|
const rawSection = $("tx-detail-rawdata-section");
|
||||||
|
const rawEl = $("tx-detail-rawdata");
|
||||||
|
if (!section || !actionEl || !detailsEl) return;
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp = await debugFetch(
|
||||||
|
state.blockscoutUrl + "/transactions/" + txHash,
|
||||||
|
);
|
||||||
|
if (!resp.ok) return;
|
||||||
|
const txData = await resp.json();
|
||||||
|
const inputData = txData.raw_input || txData.input || null;
|
||||||
|
if (!inputData || inputData === "0x") return;
|
||||||
|
|
||||||
|
const decoded = decodeCalldata(inputData, toAddress || "");
|
||||||
|
if (decoded) {
|
||||||
|
// Render decoded calldata matching approval view style
|
||||||
|
actionEl.textContent = decoded.name;
|
||||||
|
let detailsHtml = "";
|
||||||
|
if (decoded.description) {
|
||||||
|
detailsHtml += `<div class="mb-2">${escapeHtml(decoded.description)}</div>`;
|
||||||
|
}
|
||||||
|
for (const d of decoded.details || []) {
|
||||||
|
detailsHtml += `<div class="mb-2">`;
|
||||||
|
detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
|
||||||
|
if (d.address && d.isToken) {
|
||||||
|
// Token entry: show symbol on its own line, then dot + address + Etherscan link
|
||||||
|
const dot = addressDotHtml(d.address);
|
||||||
|
const tokenSymbol = d.value.match(/^(\S+)\s*\(/)?.[1];
|
||||||
|
if (tokenSymbol) {
|
||||||
|
detailsHtml += `<div class="font-bold">${escapeHtml(tokenSymbol)}</div>`;
|
||||||
|
}
|
||||||
|
const etherscanUrl = `https://etherscan.io/token/${d.address}`;
|
||||||
|
detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.address, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
|
||||||
|
} else if (d.address) {
|
||||||
|
// Protocol/contract entry: show name + Etherscan link
|
||||||
|
const dot = addressDotHtml(d.address);
|
||||||
|
const etherscanUrl = `https://etherscan.io/address/${d.address}`;
|
||||||
|
detailsHtml += `<div class="flex items-center">${dot}${copyableHtml(d.value, "break-all")}${etherscanLinkHtml(etherscanUrl)}</div>`;
|
||||||
|
} else {
|
||||||
|
detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
|
||||||
|
}
|
||||||
|
detailsHtml += `</div>`;
|
||||||
|
}
|
||||||
|
detailsEl.innerHTML = detailsHtml;
|
||||||
|
if (wellEl) wellEl.classList.remove("hidden");
|
||||||
|
} else {
|
||||||
|
// Unknown contract call — show method name in well
|
||||||
|
const method = txData.method || "Unknown contract call";
|
||||||
|
actionEl.textContent = method;
|
||||||
|
detailsEl.innerHTML = "";
|
||||||
|
if (wellEl) wellEl.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
// Always show raw data
|
||||||
|
if (rawSection && rawEl) {
|
||||||
|
rawEl.innerHTML = copyableHtml(inputData, "break-all");
|
||||||
|
rawSection.classList.remove("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
|
section.classList.remove("hidden");
|
||||||
|
|
||||||
|
// Bind copy handlers for new elements (including raw data now outside section)
|
||||||
|
const copyTargets = [section, rawSection].filter(Boolean);
|
||||||
|
for (const container of copyTargets) {
|
||||||
|
container.querySelectorAll("[data-copy]").forEach((el) => {
|
||||||
|
el.onclick = () => {
|
||||||
|
navigator.clipboard.writeText(el.dataset.copy);
|
||||||
|
showFlash("Copied!");
|
||||||
|
};
|
||||||
|
});
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
log.errorf("loadCalldata failed:", e.message);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
function init(_ctx) {
|
function init(_ctx) {
|
||||||
ctx = _ctx;
|
ctx = _ctx;
|
||||||
$("btn-tx-back").addEventListener("click", () => {
|
$("btn-tx-back").addEventListener("click", () => {
|
||||||
|
|||||||
@@ -5,8 +5,10 @@ const {
|
|||||||
showView,
|
showView,
|
||||||
showFlash,
|
showFlash,
|
||||||
addressDotHtml,
|
addressDotHtml,
|
||||||
|
addressTitle,
|
||||||
escapeHtml,
|
escapeHtml,
|
||||||
} = require("./helpers");
|
} = require("./helpers");
|
||||||
|
const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
|
||||||
const { state, saveState } = require("../../shared/state");
|
const { state, saveState } = require("../../shared/state");
|
||||||
const { getProvider } = require("../../shared/balances");
|
const { getProvider } = require("../../shared/balances");
|
||||||
const { log } = require("../../shared/log");
|
const { log } = require("../../shared/log");
|
||||||
@@ -37,6 +39,13 @@ function toAddressHtml(address) {
|
|||||||
const dot = addressDotHtml(address);
|
const dot = addressDotHtml(address);
|
||||||
const link = `https://etherscan.io/address/${address}`;
|
const link = `https://etherscan.io/address/${address}`;
|
||||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||||
|
const title = addressTitle(address, state.wallets);
|
||||||
|
if (title) {
|
||||||
|
return (
|
||||||
|
`<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
|
||||||
|
`<div class="break-all">${escapeHtml(address)}${extLink}</div>`
|
||||||
|
);
|
||||||
|
}
|
||||||
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
|
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(address)}</span>${extLink}</div>`;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -113,11 +122,51 @@ function showSuccess(txInfo, txHash, blockNumber) {
|
|||||||
to: txInfo.to,
|
to: txInfo.to,
|
||||||
hash: txHash,
|
hash: txHash,
|
||||||
blockNumber: blockNumber,
|
blockNumber: blockNumber,
|
||||||
|
decoded: txInfo.decoded || null,
|
||||||
};
|
};
|
||||||
renderSuccess();
|
renderSuccess();
|
||||||
ctx.doRefreshAndRender();
|
ctx.doRefreshAndRender();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function tokenLabel(address) {
|
||||||
|
const t = TOKEN_BY_ADDRESS.get(address.toLowerCase());
|
||||||
|
return t ? t.symbol : null;
|
||||||
|
}
|
||||||
|
|
||||||
|
function etherscanTokenLink(address) {
|
||||||
|
return `https://etherscan.io/token/${address}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function decodedDetailsHtml(decoded) {
|
||||||
|
if (!decoded || !decoded.details) return "";
|
||||||
|
let html = "";
|
||||||
|
if (decoded.name) {
|
||||||
|
html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Action</div>`;
|
||||||
|
html += `<div class="font-bold">${escapeHtml(decoded.name)}</div></div>`;
|
||||||
|
}
|
||||||
|
if (decoded.description) {
|
||||||
|
html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Description</div>`;
|
||||||
|
html += `<div>${escapeHtml(decoded.description)}</div></div>`;
|
||||||
|
}
|
||||||
|
for (const d of decoded.details) {
|
||||||
|
html += `<div class="mb-2">`;
|
||||||
|
html += `<div class="text-xs text-muted mb-1">${escapeHtml(d.label)}</div>`;
|
||||||
|
if (d.address) {
|
||||||
|
if (d.isToken) {
|
||||||
|
const sym = tokenLabel(d.address) || "Unknown token";
|
||||||
|
html += `<div class="font-bold">${escapeHtml(sym)}</div>`;
|
||||||
|
html += toAddressHtml(d.address);
|
||||||
|
} else {
|
||||||
|
html += toAddressHtml(d.address);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
html += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
|
||||||
|
}
|
||||||
|
html += `</div>`;
|
||||||
|
}
|
||||||
|
return html;
|
||||||
|
}
|
||||||
|
|
||||||
function renderSuccess() {
|
function renderSuccess() {
|
||||||
const d = state.viewData;
|
const d = state.viewData;
|
||||||
if (!d || !d.hash) return;
|
if (!d || !d.hash) return;
|
||||||
@@ -125,6 +174,16 @@ function renderSuccess() {
|
|||||||
$("success-tx-to").innerHTML = toAddressHtml(d.to);
|
$("success-tx-to").innerHTML = toAddressHtml(d.to);
|
||||||
$("success-tx-block").textContent = String(d.blockNumber);
|
$("success-tx-block").textContent = String(d.blockNumber);
|
||||||
$("success-tx-hash").innerHTML = txHashHtml(d.hash);
|
$("success-tx-hash").innerHTML = txHashHtml(d.hash);
|
||||||
|
|
||||||
|
// Show decoded calldata details if present
|
||||||
|
const decodedEl = $("success-tx-decoded");
|
||||||
|
if (decodedEl && d.decoded) {
|
||||||
|
decodedEl.innerHTML = decodedDetailsHtml(d.decoded);
|
||||||
|
decodedEl.classList.remove("hidden");
|
||||||
|
} else if (decodedEl) {
|
||||||
|
decodedEl.classList.add("hidden");
|
||||||
|
}
|
||||||
|
|
||||||
attachCopyHandlers("view-success-tx");
|
attachCopyHandlers("view-success-tx");
|
||||||
showView("success-tx");
|
showView("success-tx");
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -85,6 +85,7 @@ async function fetchTokenBalances(address, blockscoutUrl, trackedTokens) {
|
|||||||
|
|
||||||
balances.push({
|
balances.push({
|
||||||
address: item.token.address_hash,
|
address: item.token.address_hash,
|
||||||
|
name: item.token.name || "",
|
||||||
symbol: item.token.symbol || "???",
|
symbol: item.token.symbol || "???",
|
||||||
decimals: decimals,
|
decimals: decimals,
|
||||||
balance: bal,
|
balance: bal,
|
||||||
@@ -123,15 +124,27 @@ async function refreshBalances(wallets, rpcUrl, blockscoutUrl, trackedTokens) {
|
|||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
// ENS reverse lookup
|
// ENS reverse lookup — only overwrite on success so that
|
||||||
|
// transient RPC errors don't wipe a previously resolved name.
|
||||||
updates.push(
|
updates.push(
|
||||||
provider
|
provider
|
||||||
.lookupAddress(addr.address)
|
.lookupAddress(addr.address)
|
||||||
.then((name) => {
|
.then((name) => {
|
||||||
addr.ensName = name || null;
|
addr.ensName = name || null;
|
||||||
|
log.debugf(
|
||||||
|
"ENS reverse",
|
||||||
|
addr.address,
|
||||||
|
"->",
|
||||||
|
addr.ensName,
|
||||||
|
);
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch((e) => {
|
||||||
addr.ensName = null;
|
log.errorf(
|
||||||
|
"ENS reverse failed",
|
||||||
|
addr.address,
|
||||||
|
e.message,
|
||||||
|
);
|
||||||
|
// Keep existing addr.ensName if we had one
|
||||||
}),
|
}),
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -192,6 +205,10 @@ async function lookupTokenInfo(contractAddress, rpcUrl) {
|
|||||||
name = symbol;
|
name = symbol;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Truncate to prevent storage of excessively long values from RPC
|
||||||
|
name = String(name).slice(0, 64);
|
||||||
|
symbol = String(symbol).slice(0, 12);
|
||||||
|
|
||||||
log.infof("Token resolved:", symbol, "decimals", Number(decimals));
|
log.infof("Token resolved:", symbol, "decimals", Number(decimals));
|
||||||
return { name, symbol, decimals: Number(decimals) };
|
return { name, symbol, decimals: Number(decimals) };
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
const DEBUG = true;
|
const DEBUG = true;
|
||||||
const DEBUG_RECOVERY_PHRASE =
|
const DEBUG_MNEMONIC =
|
||||||
"cube evolve unfold result inch risk jealous skill hotel bulb night wreck";
|
"cube evolve unfold result inch risk jealous skill hotel bulb night wreck";
|
||||||
|
|
||||||
const ETHEREUM_MAINNET_CHAIN_ID = "0x1";
|
const ETHEREUM_MAINNET_CHAIN_ID = "0x1";
|
||||||
@@ -22,7 +22,7 @@ const ERC20_ABI = [
|
|||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
DEBUG,
|
DEBUG,
|
||||||
DEBUG_RECOVERY_PHRASE,
|
DEBUG_MNEMONIC,
|
||||||
ETHEREUM_MAINNET_CHAIN_ID,
|
ETHEREUM_MAINNET_CHAIN_ID,
|
||||||
DEFAULT_RPC_URL,
|
DEFAULT_RPC_URL,
|
||||||
DEFAULT_BLOCKSCOUT_URL,
|
DEFAULT_BLOCKSCOUT_URL,
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ async function resolveEnsName(address, rpcUrl) {
|
|||||||
return name;
|
return name;
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
log.errorf("ENS reverse lookup failed", address, e.message);
|
log.errorf("ENS reverse lookup failed", address, e.message);
|
||||||
setCache(address, null);
|
// Don't cache failures — let subsequent lookups retry
|
||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,8 +1,10 @@
|
|||||||
// Leveled logger. Outputs to console with [AutistMask] prefix.
|
// Leveled logger. Outputs to console with [AutistMask] prefix.
|
||||||
// Level is DEBUG when the DEBUG constant is true, INFO otherwise.
|
// Level is DEBUG when the DEBUG constant is true, INFO otherwise.
|
||||||
|
|
||||||
|
const { DEBUG } = require("./constants");
|
||||||
|
|
||||||
const LEVELS = { debug: 0, info: 1, warn: 2, error: 3 };
|
const LEVELS = { debug: 0, info: 1, warn: 2, error: 3 };
|
||||||
const threshold = LEVELS.info;
|
const threshold = DEBUG ? LEVELS.debug : LEVELS.info;
|
||||||
|
|
||||||
function emit(level, method, args) {
|
function emit(level, method, args) {
|
||||||
if (LEVELS[level] >= threshold) {
|
if (LEVELS[level] >= threshold) {
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -37,7 +37,21 @@ function parseTx(tx, addrLower) {
|
|||||||
if (token) {
|
if (token) {
|
||||||
symbol = token.symbol;
|
symbol = token.symbol;
|
||||||
}
|
}
|
||||||
const label = method.charAt(0).toUpperCase() + method.slice(1);
|
// Map known DEX methods to "Swap" for cleaner display
|
||||||
|
const SWAP_METHODS = new Set([
|
||||||
|
"execute",
|
||||||
|
"swap",
|
||||||
|
"swapExactTokensForTokens",
|
||||||
|
"swapTokensForExactTokens",
|
||||||
|
"swapExactETHForTokens",
|
||||||
|
"swapTokensForExactETH",
|
||||||
|
"swapExactTokensForETH",
|
||||||
|
"swapETHForExactTokens",
|
||||||
|
"multicall",
|
||||||
|
]);
|
||||||
|
const label = SWAP_METHODS.has(method)
|
||||||
|
? "Swap"
|
||||||
|
: method.charAt(0).toUpperCase() + method.slice(1);
|
||||||
direction = "contract";
|
direction = "contract";
|
||||||
directionLabel = label;
|
directionLabel = label;
|
||||||
value = "";
|
value = "";
|
||||||
@@ -139,10 +153,26 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
|
|||||||
|
|
||||||
// When a token transfer shares a hash with a normal tx, the normal tx
|
// When a token transfer shares a hash with a normal tx, the normal tx
|
||||||
// is the contract call (0 ETH) and the token transfer has the real
|
// is the contract call (0 ETH) and the token transfer has the real
|
||||||
// amount and symbol. Replace the normal tx with the token transfer.
|
// amount and symbol. A single transaction (e.g. a swap) can produce
|
||||||
|
// multiple token transfers (one per token involved), so we key token
|
||||||
|
// transfers by hash + contract address to keep all of them. We also
|
||||||
|
// preserve contract-call metadata (direction, label, method) from the
|
||||||
|
// matching normal tx so swaps display correctly.
|
||||||
for (const tt of ttJson.items || []) {
|
for (const tt of ttJson.items || []) {
|
||||||
const parsed = parseTokenTransfer(tt, addrLower);
|
const parsed = parseTokenTransfer(tt, addrLower);
|
||||||
txsByHash.set(parsed.hash, parsed);
|
const existing = txsByHash.get(parsed.hash);
|
||||||
|
if (existing && existing.direction === "contract") {
|
||||||
|
parsed.direction = "contract";
|
||||||
|
parsed.directionLabel = existing.directionLabel;
|
||||||
|
parsed.isContractCall = true;
|
||||||
|
parsed.method = existing.method;
|
||||||
|
// Remove the bare-hash normal tx so it doesn't appear as a
|
||||||
|
// duplicate with empty value; token transfers replace it.
|
||||||
|
txsByHash.delete(parsed.hash);
|
||||||
|
}
|
||||||
|
// Use composite key so multiple token transfers per tx are kept.
|
||||||
|
const ttKey = parsed.hash + ":" + (parsed.contractAddress || "");
|
||||||
|
txsByHash.set(ttKey, parsed);
|
||||||
}
|
}
|
||||||
|
|
||||||
const txs = [...txsByHash.values()];
|
const txs = [...txsByHash.values()];
|
||||||
|
|||||||
@@ -161,6 +161,157 @@ function decodeWrapEth(input) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// V4 inner action IDs
|
||||||
|
const V4_SWAP_EXACT_IN_SINGLE = 0x06;
|
||||||
|
const V4_SWAP_EXACT_IN = 0x07;
|
||||||
|
const V4_SWAP_EXACT_OUT_SINGLE = 0x08;
|
||||||
|
const V4_SWAP_EXACT_OUT = 0x09;
|
||||||
|
const V4_SETTLE = 0x0b;
|
||||||
|
const V4_TAKE = 0x0e;
|
||||||
|
|
||||||
|
// Decode V4_SWAP (command 0x10) input bytes.
|
||||||
|
// The input is ABI-encoded as (bytes actions, bytes[] params).
|
||||||
|
// We extract token addresses from SETTLE (input) and TAKE (output) sub-actions,
|
||||||
|
// and swap amounts from the swap sub-actions.
|
||||||
|
function decodeV4Swap(input) {
|
||||||
|
try {
|
||||||
|
const d = coder.decode(["bytes", "bytes[]"], input);
|
||||||
|
const actions = getBytes(d[0]);
|
||||||
|
const params = d[1];
|
||||||
|
|
||||||
|
let settleToken = null;
|
||||||
|
let takeToken = null;
|
||||||
|
let amountIn = null;
|
||||||
|
let amountOutMin = null;
|
||||||
|
|
||||||
|
for (let i = 0; i < actions.length; i++) {
|
||||||
|
const actionId = actions[i];
|
||||||
|
try {
|
||||||
|
if (actionId === V4_SETTLE) {
|
||||||
|
// SETTLE: (address currency, uint256 maxAmount, bool payerIsUser)
|
||||||
|
const s = coder.decode(
|
||||||
|
["address", "uint256", "bool"],
|
||||||
|
params[i],
|
||||||
|
);
|
||||||
|
settleToken = s[0];
|
||||||
|
} else if (actionId === V4_TAKE) {
|
||||||
|
// TAKE: (address currency, address recipient, uint256 amount)
|
||||||
|
const t = coder.decode(
|
||||||
|
["address", "address", "uint256"],
|
||||||
|
params[i],
|
||||||
|
);
|
||||||
|
takeToken = t[0];
|
||||||
|
} else if (
|
||||||
|
actionId === V4_SWAP_EXACT_IN ||
|
||||||
|
actionId === V4_SWAP_EXACT_IN_SINGLE
|
||||||
|
) {
|
||||||
|
// Extract amounts from exact-in swap actions
|
||||||
|
if (actionId === V4_SWAP_EXACT_IN) {
|
||||||
|
// ExactInputParams: (address currencyIn,
|
||||||
|
// tuple(address,uint24,int24,address,bytes)[] path,
|
||||||
|
// uint128 amountIn, uint128 amountOutMin)
|
||||||
|
try {
|
||||||
|
const s = coder.decode(
|
||||||
|
[
|
||||||
|
"tuple(address,tuple(address,uint24,int24,address,bytes)[],uint128,uint128)",
|
||||||
|
],
|
||||||
|
params[i],
|
||||||
|
);
|
||||||
|
if (!settleToken) settleToken = s[0][0];
|
||||||
|
const path = s[0][1];
|
||||||
|
if (path.length > 0 && !takeToken) {
|
||||||
|
takeToken = path[path.length - 1][0];
|
||||||
|
}
|
||||||
|
if (!amountIn) amountIn = s[0][2];
|
||||||
|
if (!amountOutMin) amountOutMin = s[0][3];
|
||||||
|
} catch {
|
||||||
|
// Fall through — SETTLE/TAKE will provide tokens
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// ExactInputSingleParams: (tuple(address,address,uint24,int24,address) poolKey,
|
||||||
|
// bool zeroForOne, uint128 amountIn, uint128 amountOutMin, bytes hookData)
|
||||||
|
try {
|
||||||
|
const s = coder.decode(
|
||||||
|
[
|
||||||
|
"tuple(tuple(address,address,uint24,int24,address),bool,uint128,uint128,bytes)",
|
||||||
|
],
|
||||||
|
params[i],
|
||||||
|
);
|
||||||
|
const poolKey = s[0][0];
|
||||||
|
const zeroForOne = s[0][1];
|
||||||
|
if (!settleToken)
|
||||||
|
settleToken = zeroForOne
|
||||||
|
? poolKey[0]
|
||||||
|
: poolKey[1];
|
||||||
|
if (!takeToken)
|
||||||
|
takeToken = zeroForOne
|
||||||
|
? poolKey[1]
|
||||||
|
: poolKey[0];
|
||||||
|
if (!amountIn) amountIn = s[0][2];
|
||||||
|
if (!amountOutMin) amountOutMin = s[0][3];
|
||||||
|
} catch {
|
||||||
|
// Fall through
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else if (
|
||||||
|
actionId === V4_SWAP_EXACT_OUT ||
|
||||||
|
actionId === V4_SWAP_EXACT_OUT_SINGLE
|
||||||
|
) {
|
||||||
|
if (actionId === V4_SWAP_EXACT_OUT) {
|
||||||
|
try {
|
||||||
|
const s = coder.decode(
|
||||||
|
[
|
||||||
|
"tuple(address,tuple(address,uint24,int24,address,bytes)[],uint128,uint128)",
|
||||||
|
],
|
||||||
|
params[i],
|
||||||
|
);
|
||||||
|
if (!takeToken) takeToken = s[0][0];
|
||||||
|
const path = s[0][1];
|
||||||
|
if (path.length > 0 && !settleToken) {
|
||||||
|
settleToken = path[path.length - 1][0];
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Fall through
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
try {
|
||||||
|
const s = coder.decode(
|
||||||
|
[
|
||||||
|
"tuple(tuple(address,address,uint24,int24,address),bool,uint128,uint128,bytes)",
|
||||||
|
],
|
||||||
|
params[i],
|
||||||
|
);
|
||||||
|
const poolKey = s[0][0];
|
||||||
|
const zeroForOne = s[0][1];
|
||||||
|
if (!settleToken)
|
||||||
|
settleToken = zeroForOne
|
||||||
|
? poolKey[0]
|
||||||
|
: poolKey[1];
|
||||||
|
if (!takeToken)
|
||||||
|
takeToken = zeroForOne
|
||||||
|
? poolKey[1]
|
||||||
|
: poolKey[0];
|
||||||
|
} catch {
|
||||||
|
// Fall through
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch {
|
||||||
|
// Skip sub-actions we can't decode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
tokenIn: settleToken,
|
||||||
|
tokenOut: takeToken,
|
||||||
|
amountIn,
|
||||||
|
amountOutMin,
|
||||||
|
};
|
||||||
|
} catch {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Try to decode a Universal Router execute() call.
|
// Try to decode a Universal Router execute() call.
|
||||||
// Returns { name, description, details } matching the format used by
|
// Returns { name, description, details } matching the format used by
|
||||||
// the approval UI, or null if the calldata is not a recognised execute().
|
// the approval UI, or null if the calldata is not a recognised execute().
|
||||||
@@ -233,6 +384,19 @@ function decode(data, toAddress) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (cmdId === 0x10) {
|
||||||
|
const v4 = decodeV4Swap(inputs[i]);
|
||||||
|
if (v4) {
|
||||||
|
if (!inputToken && v4.tokenIn) inputToken = v4.tokenIn;
|
||||||
|
if (!outputToken && v4.tokenOut)
|
||||||
|
outputToken = v4.tokenOut;
|
||||||
|
if (!inputAmount && v4.amountIn)
|
||||||
|
inputAmount = v4.amountIn;
|
||||||
|
if (!minOutput && v4.amountOutMin)
|
||||||
|
minOutput = v4.amountOutMin;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (cmdId === 0x0c) {
|
if (cmdId === 0x0c) {
|
||||||
hasUnwrapWeth = true;
|
hasUnwrapWeth = true;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
// Wallet operations: recovery phrase generation, HD derivation, signing.
|
// Wallet operations: mnemonic generation, HD derivation, signing.
|
||||||
// All crypto delegated to ethers.js.
|
// All crypto delegated to ethers.js.
|
||||||
|
|
||||||
const { Mnemonic, HDNodeWallet, Wallet } = require("ethers");
|
const { Mnemonic, HDNodeWallet, Wallet } = require("ethers");
|
||||||
const { DEBUG, DEBUG_RECOVERY_PHRASE, BIP44_ETH_PATH } = require("./constants");
|
const { DEBUG, DEBUG_MNEMONIC, BIP44_ETH_PATH } = require("./constants");
|
||||||
|
|
||||||
function generateRecoveryPhrase() {
|
function generateMnemonic() {
|
||||||
if (DEBUG) return DEBUG_RECOVERY_PHRASE;
|
if (DEBUG) return DEBUG_MNEMONIC;
|
||||||
const m = Mnemonic.fromEntropy(
|
const m = Mnemonic.fromEntropy(
|
||||||
globalThis.crypto.getRandomValues(new Uint8Array(16)),
|
globalThis.crypto.getRandomValues(new Uint8Array(16)),
|
||||||
);
|
);
|
||||||
@@ -17,8 +17,8 @@ function deriveAddressFromXpub(xpub, index) {
|
|||||||
return node.deriveChild(index).address;
|
return node.deriveChild(index).address;
|
||||||
}
|
}
|
||||||
|
|
||||||
function hdWalletFromRecoveryPhrase(recoveryPhrase) {
|
function hdWalletFromMnemonic(mnemonic) {
|
||||||
const node = HDNodeWallet.fromPhrase(recoveryPhrase, "", BIP44_ETH_PATH);
|
const node = HDNodeWallet.fromPhrase(mnemonic, "", BIP44_ETH_PATH);
|
||||||
const xpub = node.neuter().extendedKey;
|
const xpub = node.neuter().extendedKey;
|
||||||
const firstAddress = node.deriveChild(0).address;
|
const firstAddress = node.deriveChild(0).address;
|
||||||
return { xpub, firstAddress };
|
return { xpub, firstAddress };
|
||||||
@@ -41,15 +41,15 @@ function getSignerForAddress(walletData, addrIndex, decryptedSecret) {
|
|||||||
return new Wallet(decryptedSecret);
|
return new Wallet(decryptedSecret);
|
||||||
}
|
}
|
||||||
|
|
||||||
function isValidRecoveryPhrase(phrase) {
|
function isValidMnemonic(mnemonic) {
|
||||||
return Mnemonic.isValidMnemonic(phrase);
|
return Mnemonic.isValidMnemonic(mnemonic);
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
generateRecoveryPhrase,
|
generateMnemonic,
|
||||||
deriveAddressFromXpub,
|
deriveAddressFromXpub,
|
||||||
hdWalletFromRecoveryPhrase,
|
hdWalletFromMnemonic,
|
||||||
addressFromPrivateKey,
|
addressFromPrivateKey,
|
||||||
getSignerForAddress,
|
getSignerForAddress,
|
||||||
isValidRecoveryPhrase,
|
isValidMnemonic,
|
||||||
};
|
};
|
||||||
|
|||||||
@@ -1,9 +1,10 @@
|
|||||||
const { AbiCoder, Interface, solidityPacked } = require("ethers");
|
const { AbiCoder, Interface, solidityPacked, getBytes } = require("ethers");
|
||||||
const uniswap = require("../src/shared/uniswap");
|
const uniswap = require("../src/shared/uniswap");
|
||||||
|
|
||||||
const ROUTER_ADDR = "0x66a9893cc07d91d95644aedd05d03f95e1dba8af";
|
const ROUTER_ADDR = "0x66a9893cc07d91d95644aedd05d03f95e1dba8af";
|
||||||
const USDT_ADDR = "0xdAC17F958D2ee523a2206206994597C13D831ec7";
|
const USDT_ADDR = "0xdAC17F958D2ee523a2206206994597C13D831ec7";
|
||||||
const WETH_ADDR = "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
|
const WETH_ADDR = "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
|
||||||
|
const USDC_ADDR = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
|
||||||
const USER_ADDR = "0x66133E8ea0f5D1d612D2502a968757D1048c214a";
|
const USER_ADDR = "0x66133E8ea0f5D1d612D2502a968757D1048c214a";
|
||||||
|
|
||||||
// AutistMask's first-ever swap, 2026-02-27.
|
// AutistMask's first-ever swap, 2026-02-27.
|
||||||
@@ -256,6 +257,87 @@ describe("uniswap decoder", () => {
|
|||||||
expect(amount.value).toBe("5.0000 USDT");
|
expect(amount.value).toBe("5.0000 USDT");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// This test validates the decodeV4Swap() fix: a V4 ERC20→ERC20 swap
|
||||||
|
// (USDT→USDC) where the token addresses are ONLY discoverable inside
|
||||||
|
// the V4_SWAP sub-actions (SETTLE/TAKE). Before decodeV4Swap() was added,
|
||||||
|
// command 0x10 was opaque and this would decode as "Uniswap Swap" with
|
||||||
|
// no token info (or "ETH → ETH"). Now it correctly shows "USDT → USDC".
|
||||||
|
test("decodes V4_SWAP ERC20→ERC20 tokens via SETTLE/TAKE (regression: #59)", () => {
|
||||||
|
// Build a V4_SWAP input with SETTLE(USDT) + SWAP_EXACT_IN_SINGLE + TAKE(USDC)
|
||||||
|
const V4_SETTLE = 0x0b;
|
||||||
|
const V4_SWAP_EXACT_IN_SINGLE = 0x06;
|
||||||
|
const V4_TAKE = 0x0e;
|
||||||
|
|
||||||
|
// actions: SETTLE, SWAP_EXACT_IN_SINGLE, TAKE
|
||||||
|
const actions = new Uint8Array([
|
||||||
|
V4_SETTLE,
|
||||||
|
V4_SWAP_EXACT_IN_SINGLE,
|
||||||
|
V4_TAKE,
|
||||||
|
]);
|
||||||
|
|
||||||
|
// SETTLE params: (address currency, uint256 maxAmount, bool payerIsUser)
|
||||||
|
const settleParam = coder.encode(
|
||||||
|
["address", "uint256", "bool"],
|
||||||
|
[USDT_ADDR, 5000000n, true],
|
||||||
|
);
|
||||||
|
|
||||||
|
// SWAP_EXACT_IN_SINGLE params:
|
||||||
|
// (tuple(address,address,uint24,int24,address) poolKey, bool zeroForOne, uint128 amountIn, uint128 amountOutMin, bytes hookData)
|
||||||
|
const swapParam = coder.encode(
|
||||||
|
[
|
||||||
|
"tuple(tuple(address,address,uint24,int24,address),bool,uint128,uint128,bytes)",
|
||||||
|
],
|
||||||
|
[
|
||||||
|
[
|
||||||
|
[
|
||||||
|
USDT_ADDR,
|
||||||
|
USDC_ADDR,
|
||||||
|
100, // fee
|
||||||
|
1, // tickSpacing
|
||||||
|
"0x0000000000000000000000000000000000000000", // hooks
|
||||||
|
],
|
||||||
|
true, // zeroForOne
|
||||||
|
5000000n, // amountIn (5 USDT)
|
||||||
|
4900000n, // amountOutMin (4.9 USDC)
|
||||||
|
"0x", // hookData
|
||||||
|
],
|
||||||
|
],
|
||||||
|
);
|
||||||
|
|
||||||
|
// TAKE params: (address currency, address recipient, uint256 amount)
|
||||||
|
const takeParam = coder.encode(
|
||||||
|
["address", "address", "uint256"],
|
||||||
|
[USDC_ADDR, USER_ADDR, 0n],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Encode the V4_SWAP input: (bytes actions, bytes[] params)
|
||||||
|
const v4Input = coder.encode(
|
||||||
|
["bytes", "bytes[]"],
|
||||||
|
[actions, [settleParam, swapParam, takeParam]],
|
||||||
|
);
|
||||||
|
|
||||||
|
// Build execute() with PERMIT2_PERMIT (0x0a) + V4_SWAP (0x10)
|
||||||
|
// The permit provides the input token, but V4_SWAP must provide
|
||||||
|
// the OUTPUT token — without decodeV4Swap, output would be unknown.
|
||||||
|
const data = buildExecute(
|
||||||
|
solidityPacked(["uint8", "uint8"], [0x0a, 0x10]),
|
||||||
|
[encodePermit2(USDT_ADDR, 5000000n, ROUTER_ADDR), v4Input],
|
||||||
|
9999999999n,
|
||||||
|
);
|
||||||
|
|
||||||
|
const result = uniswap.decode(data, ROUTER_ADDR);
|
||||||
|
expect(result).not.toBeNull();
|
||||||
|
// Before decodeV4Swap fix: name would be "Swap USDT → ETH" or "Uniswap Swap"
|
||||||
|
// After fix: correctly identifies both tokens from V4 sub-actions
|
||||||
|
expect(result.name).toBe("Swap USDT \u2192 USDC");
|
||||||
|
|
||||||
|
const tokenIn = result.details.find((d) => d.label === "Token In");
|
||||||
|
expect(tokenIn.value).toContain("USDT");
|
||||||
|
|
||||||
|
const steps = result.details.find((d) => d.label === "Steps");
|
||||||
|
expect(steps.value).toContain("V4 Swap");
|
||||||
|
});
|
||||||
|
|
||||||
test("handles unknown tokens gracefully", () => {
|
test("handles unknown tokens gracefully", () => {
|
||||||
const fakeToken = "0x1111111111111111111111111111111111111111";
|
const fakeToken = "0x1111111111111111111111111111111111111111";
|
||||||
const data = buildExecute(
|
const data = buildExecute(
|
||||||
|
|||||||
Reference in New Issue
Block a user