Compare commits
68 Commits
feature/sh
...
8c071ae508
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
8c071ae508 | ||
|
|
a3c2b8227a | ||
|
|
f9f3e7b85a | ||
| 812fc01a98 | |||
|
|
811c125cb9 | ||
|
|
3005813f2c | ||
|
|
5565e76796 | ||
| dc8ec7d28f | |||
|
|
2fbed343db | ||
| 699e080e3e | |||
|
|
8f2bf9618e | ||
| 069981baa0 | |||
|
|
886cd38a9b | ||
| 438d915f73 | |||
|
|
78f961f416 | ||
| 6a214f1c58 | |||
| ad2ce3d8ff | |||
| b826279d8f | |||
|
|
20ced62e1a | ||
|
|
9b69a60cca | ||
| 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 |
1
.gitignore
vendored
1
.gitignore
vendored
@@ -25,3 +25,4 @@ dist/
|
||||
|
||||
# Yarn
|
||||
.yarn-integrity
|
||||
package-lock.json
|
||||
|
||||
35
README.md
35
README.md
@@ -213,22 +213,6 @@ create an address with the same visible characters and trick the user into
|
||||
sending funds to it. Showing the complete identifier defeats this class of
|
||||
attack.
|
||||
|
||||
#### Clipboard Policy
|
||||
|
||||
AutistMask never clears or overwrites the user's clipboard. When sensitive data
|
||||
such as a private key is copied, it is the user's responsibility to manage their
|
||||
clipboard afterwards. We deliberately avoid auto-clearing the clipboard for two
|
||||
reasons:
|
||||
|
||||
1. **User expectations**: silently modifying the clipboard violates the
|
||||
principle of least surprise. The user initiated the copy and knows the
|
||||
content is sensitive.
|
||||
2. **Data safety**: the user may have copied something else important in the
|
||||
intervening time. A timed clipboard clear would destroy that unrelated data.
|
||||
|
||||
The warning shown before revealing a private key makes it clear that the key is
|
||||
sensitive and that clipboard management is the user's responsibility.
|
||||
|
||||
#### Data Model
|
||||
|
||||
The core hierarchy is **Wallets → Addresses**:
|
||||
@@ -332,34 +316,15 @@ transitions.
|
||||
- Balance list: ETH + tracked ERC-20 tokens (4 decimal places, USD inline).
|
||||
Each balance row is clickable → **AddressToken**
|
||||
- Send / Receive / + Token buttons
|
||||
- "Show private key" button
|
||||
- Transaction list (with ENS resolution for counterparties)
|
||||
- **Transitions**:
|
||||
- Tap balance row → **AddressToken** (for that token)
|
||||
- "Send" → **Send**
|
||||
- "Receive" → **Receive**
|
||||
- "+ Token" → **AddToken**
|
||||
- "Show private key" → **ShowPrivateKey**
|
||||
- Tap transaction row → **TransactionDetail**
|
||||
- "Back" → **Home**
|
||||
|
||||
#### ShowPrivateKey
|
||||
|
||||
- **When**: User clicked "Show private key" on AddressDetail.
|
||||
- **Elements**:
|
||||
- "Back" button
|
||||
- Title: "Display Private Key"
|
||||
- Warning box (lock + money icons) explaining the key controls funds and
|
||||
that the user is responsible for clipboard management
|
||||
- Password input
|
||||
- "Display Private Key" button (with lock + money icons)
|
||||
- After reveal: private key in a read-only well (monospace, select-all),
|
||||
Copy button, Done button
|
||||
- **Transitions**:
|
||||
- "Display Private Key" (correct password) → reveals key in-place
|
||||
- "Copy" → copies key to clipboard
|
||||
- "Done" / "Back" → **AddressDetail** (key cleared from DOM)
|
||||
|
||||
#### AddressToken
|
||||
|
||||
- **When**: User clicked a specific token balance on AddressDetail.
|
||||
|
||||
@@ -305,15 +305,26 @@
|
||||
>
|
||||
+ Token
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<div class="relative">
|
||||
<button
|
||||
id="btn-show-private-key"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
|
||||
id="btn-more-menu"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
aria-label="More actions"
|
||||
>
|
||||
🔒 Show private key
|
||||
···
|
||||
</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>
|
||||
|
||||
<!-- transactions -->
|
||||
@@ -327,74 +338,57 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ SHOW PRIVATE KEY ============ -->
|
||||
<div id="view-show-private-key" class="view hidden">
|
||||
<!-- ============ EXPORT PRIVATE KEY VIEW ============ -->
|
||||
<div id="view-export-privkey" class="view hidden">
|
||||
<button
|
||||
id="btn-show-pk-back"
|
||||
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>
|
||||
<h2 class="font-bold mb-2">Display Private Key</h2>
|
||||
|
||||
<!-- password prompt section -->
|
||||
<div id="show-pk-prompt">
|
||||
<div
|
||||
class="border border-border border-dashed p-3 mb-3 text-xs"
|
||||
>
|
||||
<p class="mb-1">
|
||||
🔒💰 Your private key controls this
|
||||
address and all its funds. Anyone who has it can
|
||||
spend your tokens.
|
||||
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>
|
||||
Do not share it. Do not paste it into websites. If
|
||||
you copy it, you are responsible for clearing your
|
||||
clipboard when you are done.
|
||||
<p 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>
|
||||
<div class="mb-2">
|
||||
<div
|
||||
id="export-privkey-flash"
|
||||
class="text-xs mb-2 hidden"
|
||||
></div>
|
||||
<div id="export-privkey-password-section" class="mb-2">
|
||||
<label class="block mb-1">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="show-pk-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"
|
||||
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="show-pk-error"
|
||||
class="text-xs mb-2 border border-border border-dashed p-1 hidden"
|
||||
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>
|
||||
<button
|
||||
id="btn-show-pk-reveal"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
🔒💰 Display Private Key
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- revealed key section -->
|
||||
<div id="show-pk-key-well" class="hidden">
|
||||
<div
|
||||
class="bg-well p-3 mx-1 mb-3 break-all font-mono text-xs select-all"
|
||||
>
|
||||
<span id="show-pk-key-value"></span>
|
||||
</div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
id="btn-show-pk-copy"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Copy
|
||||
</button>
|
||||
<button
|
||||
id="btn-show-pk-done"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -502,6 +496,11 @@
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
placeholder="Address (0x...) or ENS name"
|
||||
/>
|
||||
<div
|
||||
id="send-to-error"
|
||||
class="text-xs"
|
||||
style="min-height: 1.25rem; color: #cc0000"
|
||||
></div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<div class="flex justify-between mb-1">
|
||||
@@ -578,15 +577,40 @@
|
||||
<div id="confirm-fee-amount" class="text-xs"></div>
|
||||
</div>
|
||||
<div id="confirm-warnings" class="mb-2 hidden"></div>
|
||||
<div
|
||||
id="confirm-recipient-warning"
|
||||
class="mb-2"
|
||||
style="visibility: hidden"
|
||||
>
|
||||
<div
|
||||
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
|
||||
>
|
||||
WARNING: The recipient address has ZERO transaction
|
||||
history. This may indicate a fresh or unused address.
|
||||
Double-check the address before sending.
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="confirm-errors"
|
||||
class="mb-2 border border-border border-dashed p-2 hidden"
|
||||
></div>
|
||||
<div class="mb-2">
|
||||
<label class="block mb-1 text-xs">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="confirm-tx-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
id="confirm-tx-password-error"
|
||||
class="text-xs mb-2 min-h-[1.25rem]"
|
||||
></div>
|
||||
<button
|
||||
id="btn-confirm-send"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Send
|
||||
Sign & Send
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -611,6 +635,7 @@
|
||||
<!-- ============ TX SUCCESS ============ -->
|
||||
<div id="view-success-tx" class="view hidden">
|
||||
<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="text-xs text-muted mb-1">Amount</div>
|
||||
<div id="success-tx-summary" class="font-bold"></div>
|
||||
@@ -664,42 +689,6 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ============ PASSWORD MODAL ============ -->
|
||||
<div
|
||||
id="password-modal"
|
||||
class="hidden fixed inset-0 bg-bg flex items-center justify-center z-50"
|
||||
>
|
||||
<div class="border border-border p-4 bg-bg w-80">
|
||||
<h2 class="font-bold mb-2">Enter Password</h2>
|
||||
<p class="text-xs text-muted mb-2">
|
||||
Your password is needed to authorize this transaction.
|
||||
</p>
|
||||
<input
|
||||
type="password"
|
||||
id="modal-password"
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg mb-2"
|
||||
/>
|
||||
<div
|
||||
id="modal-password-error"
|
||||
class="text-xs mb-2 border border-border border-dashed p-1 hidden"
|
||||
></div>
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
id="btn-modal-confirm"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Confirm
|
||||
</button>
|
||||
<button
|
||||
id="btn-modal-cancel"
|
||||
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ RECEIVE ============ -->
|
||||
<div id="view-receive" class="view hidden">
|
||||
<button
|
||||
@@ -716,9 +705,10 @@
|
||||
<div class="flex justify-center mb-3">
|
||||
<canvas id="receive-qr"></canvas>
|
||||
</div>
|
||||
<div class="border border-border p-2 break-all mb-3 text-xs">
|
||||
<span id="receive-dot"></span>
|
||||
<span id="receive-address" class="select-all"></span>
|
||||
<div
|
||||
class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
|
||||
>
|
||||
<span id="receive-address-block" class="select-all"></span>
|
||||
<span id="receive-etherscan-link"></span>
|
||||
</div>
|
||||
<button
|
||||
@@ -1079,7 +1069,12 @@
|
||||
class="text-xs"
|
||||
></div>
|
||||
</div>
|
||||
<div id="tx-detail-rawdata-section" class="hidden">
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
||||
<div id="tx-detail-hash" class="text-xs break-all"></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"
|
||||
@@ -1087,11 +1082,6 @@
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
||||
<div id="tx-detail-hash" class="text-xs break-all"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ============ TRANSACTION APPROVAL ============ -->
|
||||
<div id="view-approve-tx" class="view hidden">
|
||||
@@ -1138,7 +1128,10 @@
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div id="approve-tx-error" class="text-xs hidden mb-2"></div>
|
||||
<div
|
||||
id="approve-tx-error"
|
||||
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
|
||||
></div>
|
||||
<div class="flex justify-between">
|
||||
<button
|
||||
id="btn-approve-tx"
|
||||
@@ -1201,7 +1194,10 @@
|
||||
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
||||
/>
|
||||
</div>
|
||||
<div id="approve-sign-error" class="text-xs hidden mb-2"></div>
|
||||
<div
|
||||
id="approve-sign-error"
|
||||
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem] hidden"
|
||||
></div>
|
||||
<div class="flex justify-between">
|
||||
<button
|
||||
id="btn-approve-sign"
|
||||
|
||||
@@ -19,7 +19,6 @@ const txStatus = require("./views/txStatus");
|
||||
const transactionDetail = require("./views/transactionDetail");
|
||||
const receive = require("./views/receive");
|
||||
const addToken = require("./views/addToken");
|
||||
const showPrivateKey = require("./views/showPrivateKey");
|
||||
const settings = require("./views/settings");
|
||||
const settingsAddToken = require("./views/settingsAddToken");
|
||||
const approval = require("./views/approval");
|
||||
@@ -57,7 +56,6 @@ const ctx = {
|
||||
showAddWalletView: () => addWallet.show(),
|
||||
showImportKeyView: () => importKey.show(),
|
||||
showAddressDetail: () => addressDetail.show(),
|
||||
showPrivateKey: () => showPrivateKey.show(),
|
||||
showAddressToken: () => addressToken.show(),
|
||||
showAddTokenView: () => addToken.show(),
|
||||
showConfirmTx: (txInfo) => confirmTx.show(txInfo),
|
||||
@@ -76,6 +74,7 @@ const RESTORABLE_VIEWS = new Set([
|
||||
"receive",
|
||||
"settings",
|
||||
"settings-addtoken",
|
||||
"confirm-tx",
|
||||
"transaction",
|
||||
"success-tx",
|
||||
"error-tx",
|
||||
@@ -129,6 +128,13 @@ function restoreView() {
|
||||
case "settings-addtoken":
|
||||
settingsAddToken.show();
|
||||
break;
|
||||
case "confirm-tx":
|
||||
if (state.viewData && state.viewData.pendingTx) {
|
||||
confirmTx.restore();
|
||||
} else {
|
||||
fallbackView();
|
||||
}
|
||||
break;
|
||||
case "transaction":
|
||||
if (state.viewData && state.viewData.tx) {
|
||||
transactionDetail.render();
|
||||
@@ -214,7 +220,6 @@ async function init() {
|
||||
importKey.init(ctx);
|
||||
home.init(ctx);
|
||||
addressDetail.init(ctx);
|
||||
showPrivateKey.init(ctx);
|
||||
addressToken.init(ctx);
|
||||
send.init(ctx);
|
||||
confirmTx.init(ctx);
|
||||
|
||||
@@ -11,6 +11,7 @@
|
||||
--color-border-light: #cccccc;
|
||||
--color-hover: #eeeeee;
|
||||
--color-well: #f5f5f5;
|
||||
--color-danger-well: #fef2f2;
|
||||
--color-section: #dddddd;
|
||||
}
|
||||
|
||||
|
||||
@@ -15,9 +15,15 @@ const {
|
||||
filterTransactions,
|
||||
} = require("../../shared/transactions");
|
||||
const { resolveEnsNames } = require("../../shared/ens");
|
||||
const { updateSendBalance, renderSendTokenSelect } = require("./send");
|
||||
const {
|
||||
updateSendBalance,
|
||||
renderSendTokenSelect,
|
||||
resetSendValidation,
|
||||
} = require("./send");
|
||||
const { log } = require("../../shared/log");
|
||||
const makeBlockie = require("ethereum-blockies-base64");
|
||||
const { decryptWithPassword } = require("../../shared/vault");
|
||||
const { getSignerForAddress } = require("../../shared/wallet");
|
||||
|
||||
let ctx;
|
||||
|
||||
@@ -186,8 +192,12 @@ function renderTransactions(txs) {
|
||||
let html = "";
|
||||
let i = 0;
|
||||
for (const tx of txs) {
|
||||
// For swap transactions, show the user's own labelled wallet
|
||||
// address instead of the contract address (see issue #55).
|
||||
const counterparty =
|
||||
tx.direction === "sent" || tx.direction === "contract"
|
||||
tx.direction === "contract" && tx.directionLabel === "Swap"
|
||||
? tx.from
|
||||
: tx.direction === "sent" || tx.direction === "contract"
|
||||
? tx.to
|
||||
: tx.from;
|
||||
const ensName = ensNameMap.get(counterparty) || null;
|
||||
@@ -253,6 +263,7 @@ function init(_ctx) {
|
||||
$("send-token").classList.remove("hidden");
|
||||
$("send-token-static").classList.add("hidden");
|
||||
updateSendBalance();
|
||||
resetSendValidation();
|
||||
showView("send");
|
||||
});
|
||||
|
||||
@@ -262,8 +273,106 @@ function init(_ctx) {
|
||||
|
||||
$("btn-add-token").addEventListener("click", ctx.showAddTokenView);
|
||||
|
||||
$("btn-show-private-key").addEventListener("click", () => {
|
||||
ctx.showPrivateKey();
|
||||
// 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 = "";
|
||||
$("export-privkey-flash").classList.add("hidden");
|
||||
$("export-privkey-flash").textContent = "";
|
||||
$("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) {
|
||||
$("export-privkey-flash").textContent = "Password is required.";
|
||||
$("export-privkey-flash").classList.remove("hidden");
|
||||
return;
|
||||
}
|
||||
const btn = $("btn-export-privkey-confirm");
|
||||
btn.disabled = true;
|
||||
btn.classList.add("text-muted");
|
||||
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");
|
||||
$("export-privkey-flash").classList.add("hidden");
|
||||
} catch {
|
||||
$("export-privkey-flash").textContent = "Wrong password.";
|
||||
$("export-privkey-flash").classList.remove("hidden");
|
||||
} finally {
|
||||
btn.disabled = false;
|
||||
btn.classList.remove("text-muted");
|
||||
}
|
||||
});
|
||||
|
||||
$("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();
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -12,7 +12,7 @@ const {
|
||||
balanceLine,
|
||||
} = require("./helpers");
|
||||
const { state, currentAddress, saveState } = require("../../shared/state");
|
||||
const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
|
||||
const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
|
||||
const {
|
||||
formatUsd,
|
||||
getPrice,
|
||||
@@ -23,7 +23,11 @@ const {
|
||||
filterTransactions,
|
||||
} = require("../../shared/transactions");
|
||||
const { resolveEnsNames } = require("../../shared/ens");
|
||||
const { updateSendBalance, renderSendTokenSelect } = require("./send");
|
||||
const {
|
||||
updateSendBalance,
|
||||
renderSendTokenSelect,
|
||||
resetSendValidation,
|
||||
} = require("./send");
|
||||
const { log } = require("../../shared/log");
|
||||
const makeBlockie = require("ethereum-blockies-base64");
|
||||
|
||||
@@ -87,6 +91,7 @@ function show() {
|
||||
|
||||
// Determine token symbol and balance
|
||||
let symbol, amount, price;
|
||||
const knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
|
||||
if (tokenId === "ETH") {
|
||||
symbol = "ETH";
|
||||
amount = parseFloat(addr.balance || "0");
|
||||
@@ -95,7 +100,11 @@ function show() {
|
||||
const tb = (addr.tokenBalances || []).find(
|
||||
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
|
||||
);
|
||||
symbol = tb ? tb.symbol : "?";
|
||||
symbol = resolveSymbol(
|
||||
tokenId,
|
||||
addr.tokenBalances,
|
||||
state.trackedTokens,
|
||||
);
|
||||
amount = tb ? parseFloat(tb.balance || "0") : 0;
|
||||
price = getPrice(symbol);
|
||||
}
|
||||
@@ -138,13 +147,32 @@ function show() {
|
||||
const tb = (addr.tokenBalances || []).find(
|
||||
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
|
||||
);
|
||||
const tokenName = tb && tb.name ? escapeHtml(tb.name) : null;
|
||||
const tokenSymbol = tb && tb.symbol ? escapeHtml(tb.symbol) : null;
|
||||
const tokenDecimals = tb && tb.decimals != null ? tb.decimals : null;
|
||||
const 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 knownToken = TOKEN_BY_ADDRESS.get(tokenId.toLowerCase());
|
||||
const projectUrl = knownToken && knownToken.url ? knownToken.url : null;
|
||||
let infoHtml = `<div class="font-bold mb-2">Contract Address</div>`;
|
||||
infoHtml +=
|
||||
@@ -348,6 +376,7 @@ function init(_ctx) {
|
||||
});
|
||||
}
|
||||
updateSendBalance();
|
||||
resetSendValidation();
|
||||
showView("send");
|
||||
});
|
||||
|
||||
|
||||
@@ -4,6 +4,8 @@ const {
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
showView,
|
||||
showError,
|
||||
hideError,
|
||||
} = require("./helpers");
|
||||
const { state, saveState } = require("../../shared/state");
|
||||
const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
|
||||
@@ -78,10 +80,12 @@ function decodeCalldata(data, toAddress) {
|
||||
"0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
|
||||
);
|
||||
const isUnlimited = rawAmount === maxUint;
|
||||
const amountRaw = isUnlimited
|
||||
? "Unlimited"
|
||||
: formatTxValue(formatUnits(rawAmount, tokenDecimals));
|
||||
const amountStr = isUnlimited
|
||||
? "Unlimited"
|
||||
: formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
|
||||
(tokenSymbol ? " " + tokenSymbol : "");
|
||||
: amountRaw + (tokenSymbol ? " " + tokenSymbol : "");
|
||||
|
||||
return {
|
||||
name: "Token Approval",
|
||||
@@ -100,7 +104,11 @@ function decodeCalldata(data, toAddress) {
|
||||
value: spender,
|
||||
address: spender,
|
||||
},
|
||||
{ label: "Amount", value: amountStr },
|
||||
{
|
||||
label: "Amount",
|
||||
value: amountStr,
|
||||
rawValue: amountRaw,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -108,9 +116,11 @@ function decodeCalldata(data, toAddress) {
|
||||
if (parsed.name === "transfer") {
|
||||
const to = parsed.args[0];
|
||||
const rawAmount = parsed.args[1];
|
||||
const amountRaw = formatTxValue(
|
||||
formatUnits(rawAmount, tokenDecimals),
|
||||
);
|
||||
const amountStr =
|
||||
formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
|
||||
(tokenSymbol ? " " + tokenSymbol : "");
|
||||
amountRaw + (tokenSymbol ? " " + tokenSymbol : "");
|
||||
|
||||
return {
|
||||
name: "Token Transfer",
|
||||
@@ -125,7 +135,11 @@ function decodeCalldata(data, toAddress) {
|
||||
isToken: true,
|
||||
},
|
||||
{ label: "Recipient", value: to, address: to },
|
||||
{ label: "Amount", value: amountStr },
|
||||
{
|
||||
label: "Amount",
|
||||
value: amountStr,
|
||||
rawValue: amountRaw,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
@@ -158,20 +172,41 @@ function showTxApproval(details) {
|
||||
// If this is an ERC-20 call, try to extract the real recipient and amount
|
||||
const decoded = decodeCalldata(details.txParams.data, toAddr || "");
|
||||
if (decoded && decoded.details) {
|
||||
let decodedTokenAddr = null;
|
||||
let decodedTokenSymbol = null;
|
||||
for (const d of decoded.details) {
|
||||
if (d.label === "Recipient" && d.address) {
|
||||
pendingTxDetails.to = d.address;
|
||||
}
|
||||
if (d.label === "Amount") {
|
||||
pendingTxDetails.amount = d.value;
|
||||
pendingTxDetails.amount = d.rawValue || d.value;
|
||||
}
|
||||
if (d.label === "Token In" && d.isToken && d.address) {
|
||||
const t = TOKEN_BY_ADDRESS.get(d.address.toLowerCase());
|
||||
if (t) {
|
||||
decodedTokenAddr = d.address;
|
||||
decodedTokenSymbol = t.symbol;
|
||||
}
|
||||
}
|
||||
}
|
||||
if (token) {
|
||||
pendingTxDetails.token = toAddr;
|
||||
pendingTxDetails.tokenSymbol = token.symbol;
|
||||
} else if (decodedTokenAddr) {
|
||||
pendingTxDetails.token = decodedTokenAddr;
|
||||
pendingTxDetails.tokenSymbol = decodedTokenSymbol;
|
||||
}
|
||||
}
|
||||
|
||||
// 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-from").innerHTML = approvalAddressHtml(state.activeAddress);
|
||||
|
||||
@@ -233,6 +268,9 @@ function showTxApproval(details) {
|
||||
$("approve-tx-data-section").classList.add("hidden");
|
||||
}
|
||||
|
||||
$("approve-tx-password").value = "";
|
||||
$("approve-tx-error").classList.add("hidden");
|
||||
|
||||
showView("approve-tx");
|
||||
}
|
||||
|
||||
@@ -321,7 +359,7 @@ function showSignApproval(details) {
|
||||
}
|
||||
|
||||
$("approve-sign-password").value = "";
|
||||
$("approve-sign-error").classList.add("hidden");
|
||||
hideError("approve-sign-error");
|
||||
$("btn-approve-sign").disabled = false;
|
||||
$("btn-approve-sign").classList.remove("text-muted");
|
||||
|
||||
@@ -386,11 +424,10 @@ function init(ctx) {
|
||||
$("btn-approve-tx").addEventListener("click", () => {
|
||||
const password = $("approve-tx-password").value;
|
||||
if (!password) {
|
||||
$("approve-tx-error").textContent = "Please enter your password.";
|
||||
$("approve-tx-error").classList.remove("hidden");
|
||||
showError("approve-tx-error", "Please enter your password.");
|
||||
return;
|
||||
}
|
||||
$("approve-tx-error").classList.add("hidden");
|
||||
hideError("approve-tx-error");
|
||||
$("btn-approve-tx").disabled = true;
|
||||
$("btn-approve-tx").classList.add("text-muted");
|
||||
|
||||
@@ -426,11 +463,10 @@ function init(ctx) {
|
||||
$("btn-approve-sign").addEventListener("click", () => {
|
||||
const password = $("approve-sign-password").value;
|
||||
if (!password) {
|
||||
$("approve-sign-error").textContent = "Please enter your password.";
|
||||
$("approve-sign-error").classList.remove("hidden");
|
||||
showError("approve-sign-error", "Please enter your password.");
|
||||
return;
|
||||
}
|
||||
$("approve-sign-error").classList.add("hidden");
|
||||
hideError("approve-sign-error");
|
||||
$("btn-approve-sign").disabled = true;
|
||||
$("btn-approve-sign").classList.add("text-muted");
|
||||
|
||||
@@ -448,8 +484,7 @@ function init(ctx) {
|
||||
} else {
|
||||
const msg =
|
||||
(response && response.error) || "Signing failed.";
|
||||
$("approve-sign-error").textContent = msg;
|
||||
$("approve-sign-error").classList.remove("hidden");
|
||||
showError("approve-sign-error", msg);
|
||||
$("btn-approve-sign").disabled = false;
|
||||
$("btn-approve-sign").classList.remove("text-muted");
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
// Transaction confirmation view + password modal.
|
||||
// Shows transaction details, warnings, errors. On proceed, opens
|
||||
// password modal, decrypts secret, signs and broadcasts.
|
||||
// Transaction confirmation view with inline password.
|
||||
// Shows transaction details, warnings, errors. On Sign & Send,
|
||||
// reads inline password, decrypts secret, signs and broadcasts.
|
||||
|
||||
const {
|
||||
parseEther,
|
||||
@@ -14,6 +14,7 @@ const {
|
||||
showError,
|
||||
hideError,
|
||||
showView,
|
||||
showFlash,
|
||||
addressTitle,
|
||||
addressDotHtml,
|
||||
escapeHtml,
|
||||
@@ -38,6 +39,13 @@ const EXT_ICON =
|
||||
|
||||
let pendingTx = null;
|
||||
|
||||
function restore() {
|
||||
const d = state.viewData;
|
||||
if (d && d.pendingTx) {
|
||||
show(d.pendingTx);
|
||||
}
|
||||
}
|
||||
|
||||
function etherscanTokenLink(address) {
|
||||
return `https://etherscan.io/token/${address}`;
|
||||
}
|
||||
@@ -95,11 +103,22 @@ function show(txInfo) {
|
||||
// Token contract section (ERC-20 only)
|
||||
const tokenSection = $("confirm-token-section");
|
||||
if (isErc20) {
|
||||
const dot = addressDotHtml(txInfo.token);
|
||||
const link = etherscanTokenLink(txInfo.token);
|
||||
$("confirm-token-contract").innerHTML =
|
||||
escapeHtml(txInfo.token) +
|
||||
` <a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
`<div class="flex items-center">${dot}` +
|
||||
`<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");
|
||||
// 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 {
|
||||
tokenSection.classList.add("hidden");
|
||||
}
|
||||
@@ -214,12 +233,23 @@ function show(txInfo) {
|
||||
sendBtn.classList.remove("text-muted");
|
||||
}
|
||||
|
||||
// Reset password field and error
|
||||
$("confirm-tx-password").value = "";
|
||||
hideError("confirm-tx-password-error");
|
||||
|
||||
// Gas estimate — show placeholder then fetch async
|
||||
$("confirm-fee").classList.remove("hidden");
|
||||
$("confirm-fee-amount").textContent = "Estimating...";
|
||||
state.viewData = { pendingTx: txInfo };
|
||||
showView("confirm-tx");
|
||||
|
||||
// Reset recipient warning: reserve space (visibility:hidden) while
|
||||
// the async check runs, preventing layout shift per README policy.
|
||||
const recipientWarning = $("confirm-recipient-warning");
|
||||
recipientWarning.style.visibility = "hidden";
|
||||
|
||||
estimateGas(txInfo);
|
||||
checkRecipientHistory(txInfo);
|
||||
}
|
||||
|
||||
async function estimateGas(txInfo) {
|
||||
@@ -262,39 +292,44 @@ async function estimateGas(txInfo) {
|
||||
}
|
||||
}
|
||||
|
||||
function showPasswordModal() {
|
||||
$("modal-password").value = "";
|
||||
hideError("modal-password-error");
|
||||
$("password-modal").classList.remove("hidden");
|
||||
}
|
||||
|
||||
function hidePasswordModal() {
|
||||
$("password-modal").classList.add("hidden");
|
||||
async function checkRecipientHistory(txInfo) {
|
||||
const el = $("confirm-recipient-warning");
|
||||
try {
|
||||
const provider = getProvider(state.rpcUrl);
|
||||
// Skip warning for contract addresses — they may legitimately
|
||||
// have zero outgoing transactions (getTransactionCount returns
|
||||
// the nonce, i.e. sent-tx count only).
|
||||
const code = await provider.getCode(txInfo.to);
|
||||
if (code && code !== "0x") {
|
||||
// Contract address — no warning needed, keep space reserved
|
||||
// but invisible to prevent layout shift
|
||||
return;
|
||||
}
|
||||
const txCount = await provider.getTransactionCount(txInfo.to);
|
||||
if (txCount === 0) {
|
||||
el.style.visibility = "visible";
|
||||
}
|
||||
// If txCount > 0, leave visibility:hidden — space stays reserved
|
||||
} catch (e) {
|
||||
log.errorf("recipient history check failed:", e.message);
|
||||
// On error, leave visibility:hidden — no layout shift, no false warning
|
||||
}
|
||||
}
|
||||
|
||||
function init(ctx) {
|
||||
$("btn-confirm-send").addEventListener("click", () => {
|
||||
showPasswordModal();
|
||||
});
|
||||
|
||||
$("btn-confirm-back").addEventListener("click", () => {
|
||||
showView("send");
|
||||
});
|
||||
|
||||
$("btn-modal-cancel").addEventListener("click", () => {
|
||||
hidePasswordModal();
|
||||
});
|
||||
|
||||
$("btn-modal-confirm").addEventListener("click", async () => {
|
||||
const password = $("modal-password").value;
|
||||
$("btn-confirm-send").addEventListener("click", async () => {
|
||||
const password = $("confirm-tx-password").value;
|
||||
if (!password) {
|
||||
showError("modal-password-error", "Please enter your password.");
|
||||
showError(
|
||||
"confirm-tx-password-error",
|
||||
"Please enter your password.",
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const wallet = state.wallets[state.selectedWallet];
|
||||
let decryptedSecret;
|
||||
hideError("modal-password-error");
|
||||
hideError("confirm-tx-password-error");
|
||||
|
||||
try {
|
||||
decryptedSecret = await decryptWithPassword(
|
||||
@@ -302,11 +337,12 @@ function init(ctx) {
|
||||
password,
|
||||
);
|
||||
} catch (e) {
|
||||
showError("modal-password-error", "Wrong password.");
|
||||
showError("confirm-tx-password-error", "Wrong password.");
|
||||
return;
|
||||
}
|
||||
|
||||
hidePasswordModal();
|
||||
$("btn-confirm-send").disabled = true;
|
||||
$("btn-confirm-send").classList.add("text-muted");
|
||||
|
||||
let tx;
|
||||
try {
|
||||
@@ -343,8 +379,15 @@ function init(ctx) {
|
||||
decryptedSecret = null;
|
||||
const hash = tx ? tx.hash : null;
|
||||
txStatus.showError(pendingTx, hash, e.shortMessage || e.message);
|
||||
} finally {
|
||||
$("btn-confirm-send").disabled = false;
|
||||
$("btn-confirm-send").classList.remove("text-muted");
|
||||
}
|
||||
});
|
||||
|
||||
$("btn-confirm-back").addEventListener("click", () => {
|
||||
showView("send");
|
||||
});
|
||||
}
|
||||
|
||||
module.exports = { init, show };
|
||||
module.exports = { init, show, restore };
|
||||
|
||||
@@ -40,6 +40,10 @@ function init(_ctx) {
|
||||
return;
|
||||
}
|
||||
|
||||
const btn = $("btn-delete-wallet-confirm");
|
||||
btn.disabled = true;
|
||||
btn.classList.add("text-muted");
|
||||
|
||||
const walletIdx = deleteWalletIndex;
|
||||
const wallet = state.wallets[walletIdx];
|
||||
|
||||
@@ -49,6 +53,8 @@ function init(_ctx) {
|
||||
} catch (_e) {
|
||||
$("delete-wallet-flash").textContent = "Wrong password.";
|
||||
$("delete-wallet-flash").classList.remove("hidden");
|
||||
btn.disabled = false;
|
||||
btn.classList.remove("text-muted");
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
@@ -16,7 +16,6 @@ const VIEWS = [
|
||||
"import-key",
|
||||
"main",
|
||||
"address",
|
||||
"show-private-key",
|
||||
"address-token",
|
||||
"send",
|
||||
"confirm-tx",
|
||||
@@ -32,6 +31,7 @@ const VIEWS = [
|
||||
"approve-site",
|
||||
"approve-tx",
|
||||
"approve-sign",
|
||||
"export-privkey",
|
||||
];
|
||||
|
||||
function $(id) {
|
||||
|
||||
@@ -11,7 +11,11 @@ const {
|
||||
truncateMiddle,
|
||||
} = require("./helpers");
|
||||
const { state, saveState, currentAddress } = require("../../shared/state");
|
||||
const { updateSendBalance, renderSendTokenSelect } = require("./send");
|
||||
const {
|
||||
updateSendBalance,
|
||||
renderSendTokenSelect,
|
||||
resetSendValidation,
|
||||
} = require("./send");
|
||||
const { deriveAddressFromXpub } = require("../../shared/wallet");
|
||||
const {
|
||||
formatUsd,
|
||||
@@ -103,8 +107,13 @@ function renderHomeTxList(ctx) {
|
||||
let html = "";
|
||||
let i = 0;
|
||||
for (const tx of homeTxs) {
|
||||
// For swap transactions, show the user's own labelled wallet
|
||||
// address (the one that initiated the swap) instead of the
|
||||
// contract address which is not useful in the list view.
|
||||
const counterparty =
|
||||
tx.direction === "sent" || tx.direction === "contract"
|
||||
tx.direction === "contract" && tx.directionLabel === "Swap"
|
||||
? tx.from
|
||||
: tx.direction === "sent" || tx.direction === "contract"
|
||||
? tx.to
|
||||
: tx.from;
|
||||
const dirLabel = tx.directionLabel;
|
||||
@@ -383,6 +392,7 @@ function init(ctx) {
|
||||
$("send-token-static").classList.add("hidden");
|
||||
renderSendTokenSelect(addr);
|
||||
updateSendBalance();
|
||||
resetSendValidation();
|
||||
showView("send");
|
||||
});
|
||||
|
||||
|
||||
@@ -1,4 +1,10 @@
|
||||
const { $, showView, showFlash, addressDotHtml } = require("./helpers");
|
||||
const {
|
||||
$,
|
||||
showView,
|
||||
showFlash,
|
||||
formatAddressHtml,
|
||||
addressTitle,
|
||||
} = require("./helpers");
|
||||
const { state, currentAddress } = require("../../shared/state");
|
||||
const QRCode = require("qrcode");
|
||||
|
||||
@@ -12,8 +18,12 @@ const EXT_ICON =
|
||||
function show() {
|
||||
const addr = currentAddress();
|
||||
const address = addr ? addr.address : "";
|
||||
$("receive-dot").innerHTML = address ? addressDotHtml(address) : "";
|
||||
$("receive-address").textContent = address;
|
||||
const title = address ? addressTitle(address, state.wallets) : null;
|
||||
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}` : "";
|
||||
$("receive-etherscan-link").innerHTML = link
|
||||
? `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`
|
||||
@@ -50,8 +60,16 @@ function show() {
|
||||
}
|
||||
|
||||
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", () => {
|
||||
const addr = $("receive-address").textContent;
|
||||
const addr = $("receive-address-block").dataset.full;
|
||||
if (addr) {
|
||||
navigator.clipboard.writeText(addr);
|
||||
showFlash("Copied!");
|
||||
|
||||
@@ -10,7 +10,108 @@ const {
|
||||
const { state, currentAddress } = require("../../shared/state");
|
||||
let ctx;
|
||||
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 =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
@@ -73,7 +174,11 @@ function updateSendBalance() {
|
||||
const tb = (addr.tokenBalances || []).find(
|
||||
(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";
|
||||
$("send-balance").textContent =
|
||||
"Current balance: " + bal + " " + symbol;
|
||||
@@ -84,6 +189,13 @@ function init(_ctx) {
|
||||
ctx = _ctx;
|
||||
$("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 () => {
|
||||
const to = $("send-to").value.trim();
|
||||
const amount = $("send-amount").value.trim();
|
||||
@@ -91,6 +203,15 @@ function init(_ctx) {
|
||||
showFlash("Please enter a recipient address.");
|
||||
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) {
|
||||
showFlash("Please enter a valid amount.");
|
||||
return;
|
||||
@@ -124,7 +245,11 @@ function init(_ctx) {
|
||||
const tb = (addr.tokenBalances || []).find(
|
||||
(t) => t.address.toLowerCase() === token.toLowerCase(),
|
||||
);
|
||||
tokenSymbol = tb ? tb.symbol : "?";
|
||||
tokenSymbol = resolveSymbol(
|
||||
token,
|
||||
addr.tokenBalances,
|
||||
state.trackedTokens,
|
||||
);
|
||||
tokenBalance = tb ? tb.balance || "0" : "0";
|
||||
}
|
||||
|
||||
@@ -151,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,79 +0,0 @@
|
||||
const { $, showView, showFlash, showError, hideError } = require("./helpers");
|
||||
const { state } = require("../../shared/state");
|
||||
const { decryptWithPassword } = require("../../shared/vault");
|
||||
const { getPrivateKeyForAddress } = require("../../shared/wallet");
|
||||
|
||||
let ctx;
|
||||
let revealed = false;
|
||||
|
||||
function show() {
|
||||
revealed = false;
|
||||
$("show-pk-password").value = "";
|
||||
$("show-pk-key-well").classList.add("hidden");
|
||||
$("show-pk-key-value").textContent = "";
|
||||
$("show-pk-prompt").classList.remove("hidden");
|
||||
hideError("show-pk-error");
|
||||
showView("show-private-key");
|
||||
}
|
||||
|
||||
function init(_ctx) {
|
||||
ctx = _ctx;
|
||||
|
||||
$("btn-show-pk-back").addEventListener("click", () => {
|
||||
clearKey();
|
||||
ctx.showAddressDetail();
|
||||
});
|
||||
|
||||
$("btn-show-pk-reveal").addEventListener("click", async () => {
|
||||
const pw = $("show-pk-password").value;
|
||||
if (!pw) {
|
||||
showError("show-pk-error", "Please enter your password.");
|
||||
return;
|
||||
}
|
||||
|
||||
const wallet = state.wallets[state.selectedWallet];
|
||||
let decryptedSecret;
|
||||
try {
|
||||
decryptedSecret = await decryptWithPassword(
|
||||
wallet.encryptedSecret,
|
||||
pw,
|
||||
);
|
||||
} catch (_e) {
|
||||
showError("show-pk-error", "Wrong password.");
|
||||
return;
|
||||
}
|
||||
|
||||
const privateKey = getPrivateKeyForAddress(
|
||||
wallet,
|
||||
state.selectedAddress,
|
||||
decryptedSecret,
|
||||
);
|
||||
|
||||
revealed = true;
|
||||
$("show-pk-prompt").classList.add("hidden");
|
||||
$("show-pk-key-well").classList.remove("hidden");
|
||||
$("show-pk-key-value").textContent = privateKey;
|
||||
hideError("show-pk-error");
|
||||
});
|
||||
|
||||
$("btn-show-pk-copy").addEventListener("click", () => {
|
||||
const key = $("show-pk-key-value").textContent;
|
||||
if (key) {
|
||||
navigator.clipboard.writeText(key);
|
||||
showFlash("Copied!");
|
||||
}
|
||||
});
|
||||
|
||||
$("btn-show-pk-done").addEventListener("click", () => {
|
||||
clearKey();
|
||||
ctx.showAddressDetail();
|
||||
});
|
||||
}
|
||||
|
||||
function clearKey() {
|
||||
revealed = false;
|
||||
$("show-pk-key-value").textContent = "";
|
||||
$("show-pk-password").value = "";
|
||||
}
|
||||
|
||||
module.exports = { init, show };
|
||||
@@ -37,11 +37,19 @@ function blockieHtml(address) {
|
||||
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) {
|
||||
const blockie = blockieHtml(address);
|
||||
const dot = addressDotHtml(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>`;
|
||||
if (title) {
|
||||
html += `<div class="font-bold">${escapeHtml(title)}</div>`;
|
||||
@@ -50,10 +58,10 @@ function txAddressHtml(address, ensName, title) {
|
||||
html +=
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(ensName, "") +
|
||||
extLink +
|
||||
`</div>` +
|
||||
`<div class="break-all">` +
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(address, "break-all") +
|
||||
extLink +
|
||||
`</div>`;
|
||||
} else {
|
||||
html +=
|
||||
@@ -67,7 +75,7 @@ function txAddressHtml(address, ensName, title) {
|
||||
|
||||
function txHashHtml(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;
|
||||
}
|
||||
|
||||
@@ -93,9 +101,6 @@ function show(tx) {
|
||||
},
|
||||
};
|
||||
render();
|
||||
if (tx.isContractCall || tx.direction === "contract") {
|
||||
loadCalldata(tx.hash, tx.to);
|
||||
}
|
||||
}
|
||||
|
||||
function render() {
|
||||
@@ -138,18 +143,24 @@ function render() {
|
||||
typeEl.textContent = tx.directionLabel;
|
||||
typeSection.classList.remove("hidden");
|
||||
}
|
||||
if (headingEl) headingEl.textContent = tx.directionLabel;
|
||||
} else {
|
||||
if (typeSection) typeSection.classList.add("hidden");
|
||||
if (headingEl) headingEl.textContent = "Transaction";
|
||||
}
|
||||
if (headingEl) headingEl.textContent = "Transaction";
|
||||
|
||||
// Hide calldata section by default; loadCalldata will show it if needed
|
||||
// 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");
|
||||
|
||||
$("tx-detail-time").textContent =
|
||||
isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
|
||||
if (tx.isContractCall || tx.direction === "contract") {
|
||||
loadCalldata(tx.hash, tx.to);
|
||||
}
|
||||
|
||||
const isoStr = isoDate(tx.timestamp);
|
||||
$("tx-detail-time").innerHTML =
|
||||
copyableHtml(isoStr) + " (" + escapeHtml(timeAgo(tx.timestamp)) + ")";
|
||||
$("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
|
||||
showView("transaction");
|
||||
|
||||
@@ -193,9 +204,20 @@ async function loadCalldata(txHash, toAddress) {
|
||||
for (const d of decoded.details || []) {
|
||||
detailsHtml += `<div class="mb-2">`;
|
||||
detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
|
||||
if (d.address) {
|
||||
if (d.address && d.isToken) {
|
||||
// Token entry: show symbol on its own line, then dot + address + Etherscan link
|
||||
const dot = addressDotHtml(d.address);
|
||||
detailsHtml += `<div>${dot}${copyableHtml(d.value, "break-all")}</div>`;
|
||||
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>`;
|
||||
}
|
||||
@@ -219,13 +241,16 @@ async function loadCalldata(txHash, toAddress) {
|
||||
|
||||
section.classList.remove("hidden");
|
||||
|
||||
// Bind copy handlers for new elements
|
||||
section.querySelectorAll("[data-copy]").forEach((el) => {
|
||||
// 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);
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ const {
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
} = require("./helpers");
|
||||
const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
|
||||
const { state, saveState } = require("../../shared/state");
|
||||
const { getProvider } = require("../../shared/balances");
|
||||
const { log } = require("../../shared/log");
|
||||
@@ -42,10 +43,11 @@ function toAddressHtml(address) {
|
||||
if (title) {
|
||||
return (
|
||||
`<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>` +
|
||||
`<div class="break-all">${escapeHtml(address)}${extLink}</div>`
|
||||
`<div class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</div>` +
|
||||
extLink
|
||||
);
|
||||
}
|
||||
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 underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`;
|
||||
}
|
||||
|
||||
function txHashHtml(hash) {
|
||||
@@ -57,6 +59,16 @@ function txHashHtml(hash) {
|
||||
);
|
||||
}
|
||||
|
||||
function blockNumberHtml(blockNumber) {
|
||||
const num = String(blockNumber);
|
||||
const link = `https://etherscan.io/block/${num}`;
|
||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
return (
|
||||
`<span class="underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(num)}">${escapeHtml(num)}</span>` +
|
||||
extLink
|
||||
);
|
||||
}
|
||||
|
||||
function attachCopyHandlers(viewId) {
|
||||
document
|
||||
.getElementById(viewId)
|
||||
@@ -121,18 +133,84 @@ function showSuccess(txInfo, txHash, blockNumber) {
|
||||
to: txInfo.to,
|
||||
hash: txHash,
|
||||
blockNumber: blockNumber,
|
||||
decoded: txInfo.decoded || null,
|
||||
};
|
||||
renderSuccess();
|
||||
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 = `<div class="border border-border border-dashed p-2 mb-3">`;
|
||||
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>`;
|
||||
}
|
||||
html += `</div>`;
|
||||
return html;
|
||||
}
|
||||
|
||||
function renderSuccess() {
|
||||
const d = state.viewData;
|
||||
if (!d || !d.hash) return;
|
||||
|
||||
const hasDecoded = d.decoded && d.decoded.details;
|
||||
|
||||
// When decoded details are present, the Amount and To are already
|
||||
// shown inside the decoded well — hide the top-level duplicates.
|
||||
const summarySection = $("success-tx-summary").parentElement;
|
||||
const toSection = $("success-tx-to").parentElement;
|
||||
if (hasDecoded) {
|
||||
summarySection.classList.add("hidden");
|
||||
toSection.classList.add("hidden");
|
||||
} else {
|
||||
summarySection.classList.remove("hidden");
|
||||
toSection.classList.remove("hidden");
|
||||
$("success-tx-summary").textContent = d.amount + " " + d.symbol;
|
||||
$("success-tx-to").innerHTML = toAddressHtml(d.to);
|
||||
$("success-tx-block").textContent = String(d.blockNumber);
|
||||
}
|
||||
|
||||
$("success-tx-block").innerHTML = blockNumberHtml(d.blockNumber);
|
||||
$("success-tx-hash").innerHTML = txHashHtml(d.hash);
|
||||
|
||||
// Show decoded calldata details if present
|
||||
const decodedEl = $("success-tx-decoded");
|
||||
if (decodedEl && hasDecoded) {
|
||||
decodedEl.innerHTML = decodedDetailsHtml(d.decoded);
|
||||
decodedEl.classList.remove("hidden");
|
||||
} else if (decodedEl) {
|
||||
decodedEl.classList.add("hidden");
|
||||
}
|
||||
|
||||
attachCopyHandlers("view-success-tx");
|
||||
showView("success-tx");
|
||||
}
|
||||
|
||||
@@ -85,6 +85,7 @@ async function fetchTokenBalances(address, blockscoutUrl, trackedTokens) {
|
||||
|
||||
balances.push({
|
||||
address: item.token.address_hash,
|
||||
name: item.token.name || "",
|
||||
symbol: item.token.symbol || "???",
|
||||
decimals: decimals,
|
||||
balance: bal,
|
||||
|
||||
@@ -3645,10 +3645,27 @@ async function getTopTokenPrices(n) {
|
||||
return prices;
|
||||
}
|
||||
|
||||
// Resolve a token symbol from multiple sources, never returning "?".
|
||||
function resolveSymbol(tokenAddress, tokenBalances, trackedTokens) {
|
||||
const lower = (tokenAddress || "").toLowerCase();
|
||||
const tb = (tokenBalances || []).find(
|
||||
(t) => t.address.toLowerCase() === lower,
|
||||
);
|
||||
if (tb && tb.symbol) return tb.symbol;
|
||||
const known = TOKEN_BY_ADDRESS.get(lower);
|
||||
if (known && known.symbol) return known.symbol;
|
||||
const tracked = (trackedTokens || []).find(
|
||||
(t) => t.address.toLowerCase() === lower,
|
||||
);
|
||||
if (tracked && tracked.symbol) return tracked.symbol;
|
||||
return lower.slice(0, 10) + "\u2026";
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
TOKENS,
|
||||
TOKEN_BY_ADDRESS,
|
||||
KNOWN_SYMBOLS,
|
||||
getTopTokens,
|
||||
getTopTokenPrices,
|
||||
resolveSymbol,
|
||||
};
|
||||
|
||||
@@ -153,9 +153,11 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
|
||||
|
||||
// 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
|
||||
// amount and symbol. Replace the normal tx with the token transfer,
|
||||
// but preserve contract call metadata (direction, label, method) so
|
||||
// swaps and other contract interactions display correctly.
|
||||
// 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 || []) {
|
||||
const parsed = parseTokenTransfer(tt, addrLower);
|
||||
const existing = txsByHash.get(parsed.hash);
|
||||
@@ -164,8 +166,13 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
|
||||
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);
|
||||
}
|
||||
txsByHash.set(parsed.hash, parsed);
|
||||
// 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()];
|
||||
|
||||
@@ -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.
|
||||
// Returns { name, description, details } matching the format used by
|
||||
// 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) {
|
||||
hasUnwrapWeth = true;
|
||||
}
|
||||
@@ -281,12 +445,18 @@ function decode(data, toAddress) {
|
||||
const maxUint160 = BigInt(
|
||||
"0xffffffffffffffffffffffffffffffffffffffff",
|
||||
);
|
||||
const amountStr =
|
||||
inputAmount >= maxUint160
|
||||
const isUnlimited = inputAmount >= maxUint160;
|
||||
const amountRaw = isUnlimited
|
||||
? "Unlimited"
|
||||
: formatAmount(inputAmount, inInfo.decimals) +
|
||||
(inSymbol ? " " + inSymbol : "");
|
||||
details.push({ label: "Amount", value: amountStr });
|
||||
: formatAmount(inputAmount, inInfo.decimals);
|
||||
const amountStr = isUnlimited
|
||||
? "Unlimited"
|
||||
: amountRaw + (inSymbol ? " " + inSymbol : "");
|
||||
details.push({
|
||||
label: "Amount",
|
||||
value: amountStr,
|
||||
rawValue: amountRaw,
|
||||
});
|
||||
}
|
||||
|
||||
if (outSymbol) {
|
||||
|
||||
@@ -41,18 +41,6 @@ function getSignerForAddress(walletData, addrIndex, decryptedSecret) {
|
||||
return new Wallet(decryptedSecret);
|
||||
}
|
||||
|
||||
function getPrivateKeyForAddress(walletData, addrIndex, decryptedSecret) {
|
||||
if (walletData.type === "hd") {
|
||||
const node = HDNodeWallet.fromPhrase(
|
||||
decryptedSecret,
|
||||
"",
|
||||
BIP44_ETH_PATH,
|
||||
);
|
||||
return node.deriveChild(addrIndex).privateKey;
|
||||
}
|
||||
return decryptedSecret;
|
||||
}
|
||||
|
||||
function isValidMnemonic(mnemonic) {
|
||||
return Mnemonic.isValidMnemonic(mnemonic);
|
||||
}
|
||||
@@ -63,6 +51,5 @@ module.exports = {
|
||||
hdWalletFromMnemonic,
|
||||
addressFromPrivateKey,
|
||||
getSignerForAddress,
|
||||
getPrivateKeyForAddress,
|
||||
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 ROUTER_ADDR = "0x66a9893cc07d91d95644aedd05d03f95e1dba8af";
|
||||
const USDT_ADDR = "0xdAC17F958D2ee523a2206206994597C13D831ec7";
|
||||
const WETH_ADDR = "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
|
||||
const USDC_ADDR = "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48";
|
||||
const USER_ADDR = "0x66133E8ea0f5D1d612D2502a968757D1048c214a";
|
||||
|
||||
// AutistMask's first-ever swap, 2026-02-27.
|
||||
@@ -256,6 +257,87 @@ describe("uniswap decoder", () => {
|
||||
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", () => {
|
||||
const fakeToken = "0x1111111111111111111111111111111111111111";
|
||||
const data = buildExecute(
|
||||
|
||||
Reference in New Issue
Block a user