Compare commits
1 Commits
feat/issue
...
69ab946c82
| Author | SHA1 | Date | |
|---|---|---|---|
|
69ab946c82 |
@@ -437,10 +437,6 @@ transitions.
|
||||
- **When**: User tapped a transaction row from AddressDetail or AddressToken.
|
||||
- **Elements**:
|
||||
- "Transaction" heading, "Back" button
|
||||
- Type: transaction classification — one of: Native ETH Transfer, ERC-20
|
||||
Token Transfer, Swap, Token Approval, Contract Call, Contract Creation
|
||||
- Token contract: shown for ERC-20 transfers — color dot + full contract
|
||||
address (tap to copy) + etherscan token link
|
||||
- Status: "Success" or "Failed"
|
||||
- Time: ISO datetime + relative age in parentheses
|
||||
- Amount: value + symbol (bold)
|
||||
@@ -449,11 +445,6 @@ transitions.
|
||||
- To: blockie + color dot + full address (tap to copy) + etherscan link
|
||||
- ENS name if available
|
||||
- Transaction hash: full hash (tap to copy) + etherscan link
|
||||
- Block: block number (tap to copy) + etherscan block link
|
||||
- Nonce: transaction nonce (tap to copy)
|
||||
- Transaction fee: ETH amount (tap to copy)
|
||||
- Gas price: value in Gwei (tap to copy)
|
||||
- Gas used: integer (tap to copy)
|
||||
- **Transitions**:
|
||||
- "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
|
||||
|
||||
|
||||
@@ -1064,134 +1064,60 @@
|
||||
<h2 id="tx-detail-heading" class="font-bold mb-2">
|
||||
Transaction
|
||||
</h2>
|
||||
|
||||
<!-- ── Identity ── -->
|
||||
<div class="tx-detail-group mb-1">
|
||||
<div class="mb-3">
|
||||
<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-type-section" class="mb-3 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-3">
|
||||
<div class="text-xs text-muted mb-1">Status</div>
|
||||
<div id="tx-detail-status" class="text-xs"></div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="text-xs text-muted mb-1">Time</div>
|
||||
<div id="tx-detail-time" class="text-xs"></div>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<!-- ── Value ── -->
|
||||
<div class="tx-detail-group mb-1">
|
||||
<div class="mb-3">
|
||||
<div class="text-xs text-muted mb-1">Amount</div>
|
||||
<div id="tx-detail-value" class="text-xs"></div>
|
||||
</div>
|
||||
<div class="mb-3 hidden">
|
||||
<div class="text-xs text-muted mb-1">
|
||||
Native quantity
|
||||
</div>
|
||||
<div id="tx-detail-native" class="text-xs"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-muted mb-1">Status</div>
|
||||
<div id="tx-detail-status" class="text-xs"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-muted mb-1">Time</div>
|
||||
<div id="tx-detail-time" class="text-xs"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-muted mb-1">Amount</div>
|
||||
<div id="tx-detail-value" class="text-xs"></div>
|
||||
</div>
|
||||
<div class="mb-4 hidden">
|
||||
<div class="text-xs text-muted mb-1">Native quantity</div>
|
||||
<div id="tx-detail-native" class="text-xs"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-muted mb-1">From</div>
|
||||
<div id="tx-detail-from" class="text-xs break-all"></div>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<div class="text-xs text-muted mb-1">To</div>
|
||||
<div id="tx-detail-to" class="text-xs break-all"></div>
|
||||
</div>
|
||||
<div id="tx-detail-calldata-section" class="mb-4 hidden">
|
||||
<div
|
||||
id="tx-detail-token-contract-section"
|
||||
class="mb-1 hidden"
|
||||
id="tx-detail-calldata-well"
|
||||
class="mb-3 border border-border border-dashed p-2"
|
||||
>
|
||||
<div class="text-xs text-muted mb-1">
|
||||
Token contract
|
||||
</div>
|
||||
<div class="text-xs text-muted mb-1">Action</div>
|
||||
<div
|
||||
id="tx-detail-token-contract"
|
||||
class="text-xs break-all"
|
||||
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>
|
||||
|
||||
<!-- ── Parties ── -->
|
||||
<div class="tx-detail-group mb-1">
|
||||
<div class="mb-3">
|
||||
<div class="text-xs text-muted mb-1">From</div>
|
||||
<div
|
||||
id="tx-detail-from"
|
||||
class="text-xs break-all"
|
||||
></div>
|
||||
</div>
|
||||
<div class="mb-1">
|
||||
<div class="text-xs text-muted mb-1">To</div>
|
||||
<div id="tx-detail-to" class="text-xs break-all"></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>
|
||||
|
||||
<!-- ── Protocol ── -->
|
||||
<div id="tx-detail-calldata-section" class="mb-1 hidden">
|
||||
<div class="tx-detail-group mb-1">
|
||||
<div
|
||||
id="tx-detail-calldata-well"
|
||||
class="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>
|
||||
|
||||
<!-- ── On-chain details ── -->
|
||||
<div
|
||||
id="tx-detail-onchain-group"
|
||||
class="tx-detail-group mb-1 hidden"
|
||||
>
|
||||
<div id="tx-detail-block-section" class="mb-3 hidden">
|
||||
<div class="text-xs text-muted mb-1">Block</div>
|
||||
<div id="tx-detail-block" class="text-xs"></div>
|
||||
</div>
|
||||
<div id="tx-detail-nonce-section" class="mb-3 hidden">
|
||||
<div class="text-xs text-muted mb-1">Nonce</div>
|
||||
<div id="tx-detail-nonce" class="text-xs"></div>
|
||||
</div>
|
||||
<div id="tx-detail-fee-section" class="mb-3 hidden">
|
||||
<div class="text-xs text-muted mb-1">
|
||||
Transaction fee
|
||||
</div>
|
||||
<div id="tx-detail-fee" class="text-xs"></div>
|
||||
</div>
|
||||
<div id="tx-detail-gasprice-section" class="mb-3 hidden">
|
||||
<div class="text-xs text-muted mb-1">Gas price</div>
|
||||
<div id="tx-detail-gasprice" class="text-xs"></div>
|
||||
</div>
|
||||
<div id="tx-detail-gasused-section" class="mb-1 hidden">
|
||||
<div class="text-xs text-muted mb-1">Gas used</div>
|
||||
<div id="tx-detail-gasused" class="text-xs"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Raw data ── -->
|
||||
<div id="tx-detail-rawdata-section" class="mb-4 hidden">
|
||||
<div class="tx-detail-group">
|
||||
<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 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>
|
||||
|
||||
|
||||
@@ -44,11 +44,3 @@ body {
|
||||
background-color 225ms ease-out,
|
||||
color 225ms ease-out;
|
||||
}
|
||||
|
||||
/* Transaction detail view — visual grouping of related fields */
|
||||
.tx-detail-group {
|
||||
border-bottom: 1px solid var(--color-border-light);
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
padding-top: 0.25rem;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,8 @@ const {
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
truncateMiddle,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
} = require("./helpers");
|
||||
const { state, currentAddress, saveState } = require("../../shared/state");
|
||||
const { formatUsd, getAddressValueUsd } = require("../../shared/prices");
|
||||
@@ -28,17 +30,6 @@ const { getSignerForAddress } = require("../../shared/wallet");
|
||||
|
||||
let ctx;
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
function etherscanAddressLink(address) {
|
||||
return `https://etherscan.io/address/${address}`;
|
||||
}
|
||||
|
||||
function show() {
|
||||
state.selectedToken = null;
|
||||
const wallet = state.wallets[state.selectedWallet];
|
||||
@@ -56,22 +47,18 @@ function show() {
|
||||
img.style.imageRendering = "pixelated";
|
||||
img.style.borderRadius = "50%";
|
||||
blockieEl.appendChild(img);
|
||||
$("address-dot").innerHTML = addressDotHtml(addr.address);
|
||||
$("address-full").dataset.full = addr.address;
|
||||
$("address-full").textContent = addr.address;
|
||||
const addrLink = etherscanAddressLink(addr.address);
|
||||
$("address-etherscan-link").innerHTML =
|
||||
`<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
const addrTitle = addressTitle(addr.address, state.wallets);
|
||||
$("address-line").innerHTML = renderAddressHtml(addr.address, {
|
||||
title: addrTitle,
|
||||
ensName: addr.ensName,
|
||||
});
|
||||
$("address-line").dataset.full = addr.address;
|
||||
attachCopyHandlers($("address-line"));
|
||||
const usdTotal = formatUsd(getAddressValueUsd(addr));
|
||||
$("address-usd-total").innerHTML = usdTotal || " ";
|
||||
const ensEl = $("address-ens");
|
||||
if (addr.ensName) {
|
||||
ensEl.innerHTML =
|
||||
addressDotHtml(addr.address) + escapeHtml(addr.ensName);
|
||||
ensEl.classList.remove("hidden");
|
||||
} else {
|
||||
ensEl.classList.add("hidden");
|
||||
}
|
||||
// ENS is now shown inside renderAddressHtml, hide the separate element
|
||||
ensEl.classList.add("hidden");
|
||||
$("address-balances").innerHTML = balanceLinesForAddress(
|
||||
addr,
|
||||
state.trackedTokens,
|
||||
@@ -258,14 +245,6 @@ function renderTransactions(txs) {
|
||||
|
||||
function init(_ctx) {
|
||||
ctx = _ctx;
|
||||
$("address-full").addEventListener("click", () => {
|
||||
const addr = $("address-full").dataset.full;
|
||||
if (addr) {
|
||||
navigator.clipboard.writeText(addr);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback($("address-full"));
|
||||
}
|
||||
});
|
||||
|
||||
$("btn-address-back").addEventListener("click", () => {
|
||||
ctx.renderWalletList();
|
||||
@@ -329,9 +308,9 @@ function init(_ctx) {
|
||||
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;
|
||||
const exportAddrContainer = $("export-privkey-dot").parentElement;
|
||||
exportAddrContainer.innerHTML = renderAddressHtml(addr.address);
|
||||
attachCopyHandlers(exportAddrContainer);
|
||||
$("export-privkey-password").value = "";
|
||||
$("export-privkey-flash").textContent = "";
|
||||
$("export-privkey-flash").style.visibility = "hidden";
|
||||
@@ -385,15 +364,6 @@ function init(_ctx) {
|
||||
}
|
||||
});
|
||||
|
||||
$("export-privkey-address").addEventListener("click", () => {
|
||||
const full = $("export-privkey-address").dataset.full;
|
||||
if (full) {
|
||||
navigator.clipboard.writeText(full);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback($("export-privkey-address"));
|
||||
}
|
||||
});
|
||||
|
||||
$("btn-export-privkey-back").addEventListener("click", () => {
|
||||
$("export-privkey-value").textContent = "";
|
||||
$("export-privkey-password").value = "";
|
||||
|
||||
@@ -11,6 +11,8 @@ const {
|
||||
escapeHtml,
|
||||
truncateMiddle,
|
||||
balanceLine,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
} = require("./helpers");
|
||||
const { state, currentAddress, saveState } = require("../../shared/state");
|
||||
const { TOKEN_BY_ADDRESS, resolveSymbol } = require("../../shared/tokenList");
|
||||
@@ -34,17 +36,6 @@ const makeBlockie = require("ethereum-blockies-base64");
|
||||
|
||||
let ctx;
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
function etherscanAddressLink(address) {
|
||||
return `https://etherscan.io/address/${address}`;
|
||||
}
|
||||
|
||||
function isoDate(timestamp) {
|
||||
const d = new Date(timestamp * 1000);
|
||||
const pad = (n) => String(n).padStart(2, "0");
|
||||
@@ -148,12 +139,13 @@ function show() {
|
||||
blockieEl.appendChild(img);
|
||||
|
||||
// Address line
|
||||
$("address-token-dot").innerHTML = addressDotHtml(addr.address);
|
||||
$("address-token-full").dataset.full = addr.address;
|
||||
$("address-token-full").textContent = addr.address;
|
||||
const addrLink = etherscanAddressLink(addr.address);
|
||||
$("address-token-etherscan-link").innerHTML =
|
||||
`<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
const addrTitle = addressTitle(addr.address, state.wallets);
|
||||
$("address-token-line").innerHTML = renderAddressHtml(addr.address, {
|
||||
title: addrTitle,
|
||||
ensName: addr.ensName,
|
||||
});
|
||||
$("address-token-line").dataset.full = addr.address;
|
||||
attachCopyHandlers($("address-token-line"));
|
||||
|
||||
// USD total for this token only
|
||||
const usdVal = price ? amount * price : 0;
|
||||
@@ -193,15 +185,9 @@ function show() {
|
||||
? 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>`;
|
||||
infoHtml += `<div class="mb-2">${renderAddressHtml(tokenId)}</div>`;
|
||||
if (tokenName)
|
||||
infoHtml += `<div class="mb-1"><span class="text-muted">Name:</span> ${tokenName}</div>`;
|
||||
if (tokenSymbol)
|
||||
@@ -213,6 +199,7 @@ function show() {
|
||||
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;
|
||||
attachCopyHandlers(contractInfo);
|
||||
contractInfo.classList.remove("hidden");
|
||||
} else {
|
||||
contractInfo.innerHTML = "";
|
||||
@@ -334,15 +321,6 @@ function renderTransactions(txs) {
|
||||
|
||||
function init(_ctx) {
|
||||
ctx = _ctx;
|
||||
$("address-token-full").addEventListener("click", () => {
|
||||
const addr = $("address-token-full").dataset.full;
|
||||
if (addr) {
|
||||
navigator.clipboard.writeText(addr);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback($("address-token-full"));
|
||||
}
|
||||
});
|
||||
|
||||
$("address-token-contract-info").addEventListener("click", (e) => {
|
||||
const copyEl = e.target.closest("[data-copy]");
|
||||
if (copyEl) {
|
||||
@@ -380,26 +358,11 @@ function init(_ctx) {
|
||||
$("send-token").classList.add("hidden");
|
||||
let staticHtml = `<div class="font-bold">${escapeHtml(currentSymbol)}</div>`;
|
||||
if (tokenId !== "ETH") {
|
||||
const dot = addressDotHtml(tokenId);
|
||||
const link = `https://etherscan.io/token/${tokenId}`;
|
||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
staticHtml +=
|
||||
`<div class="flex items-center text-xs">${dot}` +
|
||||
`<span class="break-all underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
|
||||
extLink +
|
||||
`</div>`;
|
||||
staticHtml += `<div class="text-xs">${renderAddressHtml(tokenId)}</div>`;
|
||||
}
|
||||
$("send-token-static").innerHTML = staticHtml;
|
||||
$("send-token-static").classList.remove("hidden");
|
||||
// Attach copy handler for the contract address
|
||||
const copyEl = $("send-token-static").querySelector("[data-copy]");
|
||||
if (copyEl) {
|
||||
copyEl.addEventListener("click", () => {
|
||||
navigator.clipboard.writeText(copyEl.dataset.copy);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback(copyEl);
|
||||
});
|
||||
}
|
||||
attachCopyHandlers($("send-token-static"));
|
||||
updateSendBalance();
|
||||
resetSendValidation();
|
||||
showView("send");
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
const {
|
||||
$,
|
||||
addressDotHtml,
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
showView,
|
||||
showError,
|
||||
hideError,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
} = require("./helpers");
|
||||
const { state, saveState } = require("../../shared/state");
|
||||
const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
|
||||
@@ -17,28 +18,11 @@ const uniswap = require("../../shared/uniswap");
|
||||
const runtime =
|
||||
typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
const erc20Iface = new Interface(ERC20_ABI);
|
||||
|
||||
function approvalAddressHtml(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 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;
|
||||
return renderAddressHtml(address, { title });
|
||||
}
|
||||
|
||||
function formatTxValue(val) {
|
||||
@@ -53,10 +37,6 @@ function tokenLabel(address) {
|
||||
return t ? t.symbol : null;
|
||||
}
|
||||
|
||||
function etherscanTokenLink(address) {
|
||||
return `https://etherscan.io/token/${address}`;
|
||||
}
|
||||
|
||||
// Try to decode calldata using known ABIs.
|
||||
// Returns { name, description, details } or null.
|
||||
function decodeCalldata(data, toAddress) {
|
||||
@@ -218,10 +198,6 @@ function showTxApproval(details) {
|
||||
toHtml += `<div class="font-bold mb-1">${escapeHtml(symbol)}</div>`;
|
||||
}
|
||||
toHtml += approvalAddressHtml(toAddr);
|
||||
if (symbol) {
|
||||
const link = etherscanTokenLink(toAddr);
|
||||
toHtml = toHtml.replace("</div>", "") + ""; // approvalAddressHtml already has etherscan link
|
||||
}
|
||||
$("approve-tx-to").innerHTML = toHtml;
|
||||
} else {
|
||||
$("approve-tx-to").innerHTML = escapeHtml("(contract creation)");
|
||||
@@ -243,12 +219,9 @@ function showTxApproval(details) {
|
||||
detailsHtml += `<div class="text-muted">${escapeHtml(d.label)}</div>`;
|
||||
if (d.address) {
|
||||
if (d.isToken) {
|
||||
const tLink = etherscanTokenLink(d.address);
|
||||
detailsHtml += `<div class="font-bold">${escapeHtml(tokenLabel(d.address) || "Unknown token")}</div>`;
|
||||
detailsHtml += approvalAddressHtml(d.address);
|
||||
} else {
|
||||
detailsHtml += approvalAddressHtml(d.address);
|
||||
}
|
||||
detailsHtml += approvalAddressHtml(d.address);
|
||||
} else {
|
||||
detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
|
||||
}
|
||||
@@ -272,6 +245,7 @@ function showTxApproval(details) {
|
||||
hideError("approve-tx-error");
|
||||
|
||||
showView("approve-tx");
|
||||
attachCopyHandlers("view-approve-tx");
|
||||
}
|
||||
|
||||
function decodeHexMessage(hex) {
|
||||
@@ -364,6 +338,7 @@ function showSignApproval(details) {
|
||||
$("btn-approve-sign").classList.remove("text-muted");
|
||||
|
||||
showView("approve-sign");
|
||||
attachCopyHandlers("view-approve-sign");
|
||||
}
|
||||
|
||||
function show(id) {
|
||||
@@ -386,6 +361,7 @@ function show(id) {
|
||||
$("approve-address").innerHTML = approvalAddressHtml(
|
||||
state.activeAddress,
|
||||
);
|
||||
attachCopyHandlers("view-approve-site");
|
||||
$("approve-remember").checked = state.rememberSiteChoice;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -17,8 +17,9 @@ const {
|
||||
showFlash,
|
||||
flashCopyFeedback,
|
||||
addressTitle,
|
||||
addressDotHtml,
|
||||
escapeHtml,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
} = require("./helpers");
|
||||
const { state } = require("../../shared/state");
|
||||
const { getSignerForAddress } = require("../../shared/wallet");
|
||||
@@ -31,13 +32,6 @@ const { log } = require("../../shared/log");
|
||||
const makeBlockie = require("ethereum-blockies-base64");
|
||||
const txStatus = require("./txStatus");
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
let pendingTx = null;
|
||||
|
||||
function restore() {
|
||||
@@ -47,14 +41,6 @@ function restore() {
|
||||
}
|
||||
}
|
||||
|
||||
function etherscanTokenLink(address) {
|
||||
return `https://etherscan.io/token/${address}`;
|
||||
}
|
||||
|
||||
function etherscanAddressLink(address) {
|
||||
return `https://etherscan.io/address/${address}`;
|
||||
}
|
||||
|
||||
function blockieHtml(address) {
|
||||
const src = makeBlockie(address);
|
||||
return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
|
||||
@@ -62,22 +48,10 @@ function blockieHtml(address) {
|
||||
|
||||
function confirmAddressHtml(address, ensName, title) {
|
||||
const blockie = blockieHtml(address);
|
||||
const dot = addressDotHtml(address);
|
||||
const link = etherscanAddressLink(address);
|
||||
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
let html = `<div class="mb-1">${blockie}</div>`;
|
||||
if (title) {
|
||||
html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
|
||||
}
|
||||
if (ensName) {
|
||||
html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
|
||||
}
|
||||
html +=
|
||||
`<div class="flex items-center">${title || ensName ? "" : dot}` +
|
||||
`<span class="break-all">${escapeHtml(address)}</span>` +
|
||||
extLink +
|
||||
`</div>`;
|
||||
return html;
|
||||
return (
|
||||
`<div class="mb-1">${blockie}</div>` +
|
||||
renderAddressHtml(address, { title, ensName })
|
||||
);
|
||||
}
|
||||
|
||||
function valueWithUsd(text, usdAmount) {
|
||||
@@ -104,23 +78,12 @@ 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 =
|
||||
`<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>`;
|
||||
$("confirm-token-contract").innerHTML = renderAddressHtml(
|
||||
txInfo.token,
|
||||
{},
|
||||
);
|
||||
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!");
|
||||
flashCopyFeedback(copyEl);
|
||||
};
|
||||
}
|
||||
attachCopyHandlers(tokenSection);
|
||||
} else {
|
||||
tokenSection.classList.add("hidden");
|
||||
}
|
||||
@@ -246,6 +209,7 @@ function show(txInfo) {
|
||||
$("confirm-fee-amount").textContent = "Estimating...";
|
||||
state.viewData = { pendingTx: txInfo };
|
||||
showView("confirm-tx");
|
||||
attachCopyHandlers("view-confirm-tx");
|
||||
|
||||
// Reset recipient warning to hidden (space always reserved, no layout shift)
|
||||
$("confirm-recipient-warning").style.visibility = "hidden";
|
||||
|
||||
@@ -208,21 +208,9 @@ function addressTitle(address, wallets) {
|
||||
// Render an address with color dot, optional ENS name, optional title,
|
||||
// and optional truncation. Title and ENS are shown as bold labels above
|
||||
// the full address.
|
||||
// Delegates to renderAddressHtml for consistent output.
|
||||
function formatAddressHtml(address, ensName, maxLen, title) {
|
||||
const dot = addressDotHtml(address);
|
||||
const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
|
||||
if (title || ensName) {
|
||||
let html = "";
|
||||
if (title) {
|
||||
html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
|
||||
}
|
||||
if (ensName) {
|
||||
html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
|
||||
}
|
||||
html += `<div class="break-all">${escapeHtml(displayAddr)}</div>`;
|
||||
return html;
|
||||
}
|
||||
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
|
||||
return renderAddressHtml(address, { title, ensName, maxLen });
|
||||
}
|
||||
|
||||
function isoDate(timestamp) {
|
||||
@@ -281,6 +269,91 @@ function timeAgo(timestamp) {
|
||||
return years + " year" + (years !== 1 ? "s" : "") + " ago";
|
||||
}
|
||||
|
||||
// Shared external-link icon SVG used across all views.
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
function etherscanAddressUrl(address) {
|
||||
return `https://etherscan.io/address/${address}`;
|
||||
}
|
||||
|
||||
function etherscanLinkHtml(url) {
|
||||
return (
|
||||
`<a href="${url}" target="_blank" rel="noopener" ` +
|
||||
`class="inline-flex items-center">${EXT_ICON}</a>`
|
||||
);
|
||||
}
|
||||
|
||||
// Render a copyable text span with dashed underline affordance.
|
||||
// The caller must attach click handlers via attachCopyHandlers() or
|
||||
// manually wire up [data-copy] elements after inserting the HTML.
|
||||
function copyableHtml(text, extraClass) {
|
||||
const cls =
|
||||
"underline decoration-dashed cursor-pointer" +
|
||||
(extraClass ? " " + extraClass : "");
|
||||
return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
|
||||
}
|
||||
|
||||
// Attach click-to-copy handlers to all [data-copy] elements within
|
||||
// a container. Safe to call multiple times on the same container.
|
||||
function attachCopyHandlers(container) {
|
||||
const root =
|
||||
typeof container === "string"
|
||||
? document.getElementById(container)
|
||||
: container;
|
||||
if (!root) return;
|
||||
root.querySelectorAll("[data-copy]").forEach((el) => {
|
||||
el.onclick = () => {
|
||||
navigator.clipboard.writeText(el.dataset.copy);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback(el);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
// Unified address rendering.
|
||||
//
|
||||
// Produces consistent HTML for any Ethereum address:
|
||||
// • Color dot
|
||||
// • Optional title (e.g. "Wallet 1 — Address 2") shown bold above address
|
||||
// • Optional ENS name shown bold above address
|
||||
// • Full address (or truncated via maxLen) with dashed-underline click-to-copy
|
||||
// • Etherscan external link icon
|
||||
//
|
||||
// Options object:
|
||||
// title — wallet title string (from addressTitle)
|
||||
// ensName — ENS name string
|
||||
// maxLen — if set, truncate address display (min 32 chars enforced)
|
||||
// noLink — if true, omit etherscan link
|
||||
//
|
||||
// After inserting the returned HTML into the DOM, call
|
||||
// attachCopyHandlers() on the parent to wire up click-to-copy.
|
||||
function renderAddressHtml(address, opts) {
|
||||
const { title, ensName, maxLen, noLink } = opts || {};
|
||||
const dot = addressDotHtml(address);
|
||||
const displayAddr = maxLen ? truncateMiddle(address, maxLen) : address;
|
||||
const link = etherscanAddressUrl(address);
|
||||
const extLink = noLink ? "" : etherscanLinkHtml(link);
|
||||
|
||||
let html = "";
|
||||
if (title) {
|
||||
html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
|
||||
}
|
||||
if (ensName) {
|
||||
html += `<div class="flex items-center font-bold">${title ? "" : dot}${escapeHtml(ensName)}</div>`;
|
||||
}
|
||||
if (title || ensName) {
|
||||
html += `<div class="flex items-center">${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
|
||||
} else {
|
||||
html += `<div class="flex items-center">${dot}${copyableHtml(displayAddr, "break-all")}${extLink}</div>`;
|
||||
}
|
||||
return html;
|
||||
}
|
||||
|
||||
function flashCopyFeedback(el) {
|
||||
if (!el) return;
|
||||
el.classList.remove("copy-flash-fade");
|
||||
@@ -308,6 +381,12 @@ module.exports = {
|
||||
escapeHtml,
|
||||
addressTitle,
|
||||
formatAddressHtml,
|
||||
renderAddressHtml,
|
||||
copyableHtml,
|
||||
attachCopyHandlers,
|
||||
etherscanAddressUrl,
|
||||
etherscanLinkHtml,
|
||||
EXT_ICON,
|
||||
truncateMiddle,
|
||||
isoDate,
|
||||
timeAgo,
|
||||
|
||||
@@ -10,6 +10,8 @@ const {
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
truncateMiddle,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
} = require("./helpers");
|
||||
const { state, saveState, currentAddress } = require("../../shared/state");
|
||||
const {
|
||||
@@ -69,28 +71,12 @@ function renderTotalValue() {
|
||||
}
|
||||
}
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
function renderActiveAddress() {
|
||||
const el = $("active-address-display");
|
||||
if (!el) return;
|
||||
if (state.activeAddress) {
|
||||
const addr = state.activeAddress;
|
||||
const dot = addressDotHtml(addr);
|
||||
const link = `https://etherscan.io/address/${addr}`;
|
||||
el.innerHTML =
|
||||
`<span class="underline decoration-dashed cursor-pointer" id="active-addr-copy">${dot}${escapeHtml(addr)}</span>` +
|
||||
`<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
|
||||
$("active-addr-copy").addEventListener("click", (e) => {
|
||||
navigator.clipboard.writeText(addr);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback(e.currentTarget);
|
||||
});
|
||||
el.innerHTML = renderAddressHtml(state.activeAddress);
|
||||
attachCopyHandlers(el);
|
||||
} else {
|
||||
el.textContent = "";
|
||||
}
|
||||
|
||||
@@ -5,17 +5,11 @@ const {
|
||||
flashCopyFeedback,
|
||||
formatAddressHtml,
|
||||
addressTitle,
|
||||
attachCopyHandlers,
|
||||
} = require("./helpers");
|
||||
const { state, currentAddress } = require("../../shared/state");
|
||||
const QRCode = require("qrcode");
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
function show() {
|
||||
const addr = currentAddress();
|
||||
const address = addr ? addr.address : "";
|
||||
@@ -25,10 +19,8 @@ function show() {
|
||||
? 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>`
|
||||
: "";
|
||||
// Etherscan link is now included in formatAddressHtml via renderAddressHtml
|
||||
$("receive-etherscan-link").innerHTML = "";
|
||||
if (address) {
|
||||
QRCode.toCanvas($("receive-qr"), address, {
|
||||
width: 200,
|
||||
@@ -59,18 +51,10 @@ function show() {
|
||||
warningEl.style.visibility = "hidden";
|
||||
}
|
||||
showView("receive");
|
||||
attachCopyHandlers("view-receive");
|
||||
}
|
||||
|
||||
function init(ctx) {
|
||||
$("receive-address-block").addEventListener("click", (e) => {
|
||||
const addr = $("receive-address-block").dataset.full;
|
||||
if (addr) {
|
||||
navigator.clipboard.writeText(addr);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback(e.currentTarget);
|
||||
}
|
||||
});
|
||||
|
||||
$("btn-receive-copy").addEventListener("click", () => {
|
||||
const addr = $("receive-address-block").dataset.full;
|
||||
if (addr) {
|
||||
|
||||
@@ -3,9 +3,10 @@
|
||||
const {
|
||||
$,
|
||||
showFlash,
|
||||
addressDotHtml,
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
} = require("./helpers");
|
||||
const { state, currentAddress } = require("../../shared/state");
|
||||
let ctx;
|
||||
@@ -113,13 +114,6 @@ function updateToValidation() {
|
||||
}
|
||||
}
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
function isSpoofedToken(t) {
|
||||
const upper = (t.symbol || "").toUpperCase();
|
||||
if (!KNOWN_SYMBOLS.has(upper)) return false;
|
||||
@@ -148,24 +142,12 @@ function renderSendTokenSelect(addr) {
|
||||
function updateSendBalance() {
|
||||
const addr = currentAddress();
|
||||
if (!addr) return;
|
||||
const dot = addressDotHtml(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 title = addressTitle(addr.address, state.wallets);
|
||||
let fromHtml = "";
|
||||
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="break-all">${escapeHtml(addr.address)}${extLink}</div>`;
|
||||
} else {
|
||||
fromHtml += `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(addr.address)}</span>${extLink}</div>`;
|
||||
}
|
||||
$("send-from").innerHTML = fromHtml;
|
||||
$("send-from").innerHTML = renderAddressHtml(addr.address, {
|
||||
title,
|
||||
ensName: addr.ensName,
|
||||
});
|
||||
attachCopyHandlers($("send-from"));
|
||||
const token = state.selectedToken || $("send-token").value;
|
||||
if (token === "ETH") {
|
||||
$("send-balance").textContent =
|
||||
|
||||
@@ -6,92 +6,33 @@ const {
|
||||
showView,
|
||||
showFlash,
|
||||
flashCopyFeedback,
|
||||
addressDotHtml,
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
isoDate,
|
||||
timeAgo,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
copyableHtml,
|
||||
etherscanLinkHtml,
|
||||
} = require("./helpers");
|
||||
const { state } = require("../../shared/state");
|
||||
const { formatEther, formatUnits } = require("ethers");
|
||||
const makeBlockie = require("ethereum-blockies-base64");
|
||||
const { log, debugFetch } = require("../../shared/log");
|
||||
const { decodeCalldata } = require("./approval");
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
let ctx;
|
||||
|
||||
/**
|
||||
* Determine a human-readable transaction type string from tx fields.
|
||||
*/
|
||||
function getTransactionType(tx) {
|
||||
if (!tx.to) return "Contract Creation";
|
||||
if (tx.direction === "contract") {
|
||||
if (tx.directionLabel === "Swap") return "Swap";
|
||||
if (
|
||||
tx.method === "approve" ||
|
||||
tx.directionLabel === "Approve" ||
|
||||
tx.method === "setApprovalForAll"
|
||||
)
|
||||
return "Token Approval";
|
||||
return "Contract Call";
|
||||
}
|
||||
if (tx.symbol && tx.symbol !== "ETH") return "ERC-20 Token Transfer";
|
||||
return "Native ETH Transfer";
|
||||
}
|
||||
|
||||
function copyableHtml(text, extraClass) {
|
||||
const cls =
|
||||
"underline decoration-dashed cursor-pointer" +
|
||||
(extraClass ? " " + extraClass : "");
|
||||
return `<span class="${cls}" data-copy="${escapeHtml(text)}">${escapeHtml(text)}</span>`;
|
||||
}
|
||||
|
||||
function blockieHtml(address) {
|
||||
const src = makeBlockie(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 = etherscanLinkHtml(link);
|
||||
let html = `<div class="mb-1">${blockie}</div>`;
|
||||
if (title) {
|
||||
html += `<div class="font-bold">${escapeHtml(title)}</div>`;
|
||||
}
|
||||
if (ensName) {
|
||||
html +=
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(ensName, "") +
|
||||
`</div>` +
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(address, "break-all") +
|
||||
extLink +
|
||||
`</div>`;
|
||||
} else {
|
||||
html +=
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(address, "break-all") +
|
||||
extLink +
|
||||
`</div>`;
|
||||
}
|
||||
return html;
|
||||
return (
|
||||
`<div class="mb-1">${blockie}</div>` +
|
||||
renderAddressHtml(address, { title, ensName })
|
||||
);
|
||||
}
|
||||
|
||||
function txHashHtml(hash) {
|
||||
@@ -119,7 +60,6 @@ function show(tx) {
|
||||
direction: tx.direction || null,
|
||||
isContractCall: tx.isContractCall || false,
|
||||
method: tx.method || null,
|
||||
contractAddress: tx.contractAddress || null,
|
||||
},
|
||||
};
|
||||
render();
|
||||
@@ -156,176 +96,39 @@ function render() {
|
||||
nativeEl.parentElement.classList.add("hidden");
|
||||
}
|
||||
|
||||
// Always show transaction type as the first field
|
||||
// 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 (typeSection && typeEl) {
|
||||
typeEl.textContent = getTransactionType(tx);
|
||||
typeSection.classList.remove("hidden");
|
||||
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";
|
||||
|
||||
// Token contract address (for ERC-20 transfers)
|
||||
const tokenContractSection = $("tx-detail-token-contract-section");
|
||||
const tokenContractEl = $("tx-detail-token-contract");
|
||||
if (tokenContractSection && tokenContractEl) {
|
||||
if (tx.contractAddress) {
|
||||
const dot = addressDotHtml(tx.contractAddress);
|
||||
const link = `https://etherscan.io/token/${tx.contractAddress}`;
|
||||
tokenContractEl.innerHTML =
|
||||
`<div class="flex items-center">${dot}` +
|
||||
copyableHtml(tx.contractAddress, "break-all") +
|
||||
etherscanLinkHtml(link) +
|
||||
`</div>`;
|
||||
tokenContractSection.classList.remove("hidden");
|
||||
} else {
|
||||
tokenContractSection.classList.add("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// Hide calldata and raw data sections; always fetch full tx details
|
||||
// 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");
|
||||
|
||||
// Hide on-chain detail sections (and their group wrapper) until populated
|
||||
const onchainGroup = $("tx-detail-onchain-group");
|
||||
if (onchainGroup) onchainGroup.classList.add("hidden");
|
||||
for (const id of [
|
||||
"tx-detail-block-section",
|
||||
"tx-detail-nonce-section",
|
||||
"tx-detail-fee-section",
|
||||
"tx-detail-gasprice-section",
|
||||
"tx-detail-gasused-section",
|
||||
]) {
|
||||
const el = $(id);
|
||||
if (el) el.classList.add("hidden");
|
||||
if (tx.isContractCall || tx.direction === "contract") {
|
||||
loadCalldata(tx.hash, tx.to);
|
||||
}
|
||||
|
||||
loadFullTxDetails(tx.hash, tx.to, tx.isContractCall);
|
||||
|
||||
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");
|
||||
|
||||
document
|
||||
.getElementById("view-transaction")
|
||||
.querySelectorAll("[data-copy]")
|
||||
.forEach((el) => {
|
||||
el.onclick = () => {
|
||||
navigator.clipboard.writeText(el.dataset.copy);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback(el);
|
||||
};
|
||||
});
|
||||
attachCopyHandlers("view-transaction");
|
||||
}
|
||||
|
||||
function showDetailField(sectionId, contentId, value) {
|
||||
const section = $(sectionId);
|
||||
const el = $(contentId);
|
||||
if (!section || !el) return;
|
||||
el.innerHTML = copyableHtml(value, "");
|
||||
section.classList.remove("hidden");
|
||||
}
|
||||
|
||||
function populateOnChainDetails(txData) {
|
||||
// Block number
|
||||
if (txData.block_number != null) {
|
||||
const blockLink = `https://etherscan.io/block/${txData.block_number}`;
|
||||
const blockSection = $("tx-detail-block-section");
|
||||
const blockEl = $("tx-detail-block");
|
||||
if (blockSection && blockEl) {
|
||||
blockEl.innerHTML =
|
||||
copyableHtml(String(txData.block_number), "") +
|
||||
etherscanLinkHtml(blockLink);
|
||||
blockSection.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// Nonce
|
||||
if (txData.nonce != null) {
|
||||
showDetailField(
|
||||
"tx-detail-nonce-section",
|
||||
"tx-detail-nonce",
|
||||
String(txData.nonce),
|
||||
);
|
||||
}
|
||||
|
||||
// Transaction fee
|
||||
const feeWei = txData.fee?.value || txData.tx_fee;
|
||||
if (feeWei) {
|
||||
const feeEth = formatEther(String(feeWei));
|
||||
showDetailField(
|
||||
"tx-detail-fee-section",
|
||||
"tx-detail-fee",
|
||||
feeEth + " ETH",
|
||||
);
|
||||
}
|
||||
|
||||
// Gas price
|
||||
const gasPrice = txData.gas_price;
|
||||
if (gasPrice) {
|
||||
const gwei = formatUnits(String(gasPrice), "gwei");
|
||||
showDetailField(
|
||||
"tx-detail-gasprice-section",
|
||||
"tx-detail-gasprice",
|
||||
gwei + " Gwei",
|
||||
);
|
||||
}
|
||||
|
||||
// Gas used
|
||||
const gasUsed = txData.gas_used;
|
||||
if (gasUsed) {
|
||||
showDetailField(
|
||||
"tx-detail-gasused-section",
|
||||
"tx-detail-gasused",
|
||||
String(gasUsed),
|
||||
);
|
||||
}
|
||||
|
||||
// Show the on-chain details group if any child section is visible
|
||||
const onchainGroup = $("tx-detail-onchain-group");
|
||||
if (onchainGroup) {
|
||||
const hasVisible = [
|
||||
"tx-detail-block-section",
|
||||
"tx-detail-nonce-section",
|
||||
"tx-detail-fee-section",
|
||||
"tx-detail-gasprice-section",
|
||||
"tx-detail-gasused-section",
|
||||
].some((id) => {
|
||||
const el = $(id);
|
||||
return el && !el.classList.contains("hidden");
|
||||
});
|
||||
if (hasVisible) {
|
||||
onchainGroup.classList.remove("hidden");
|
||||
}
|
||||
}
|
||||
|
||||
// Bind copy handlers for newly added elements
|
||||
for (const id of [
|
||||
"tx-detail-block-section",
|
||||
"tx-detail-nonce-section",
|
||||
"tx-detail-fee-section",
|
||||
"tx-detail-gasprice-section",
|
||||
"tx-detail-gasused-section",
|
||||
]) {
|
||||
const section = $(id);
|
||||
if (!section) continue;
|
||||
section.querySelectorAll("[data-copy]").forEach((el) => {
|
||||
el.onclick = () => {
|
||||
navigator.clipboard.writeText(el.dataset.copy);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback(el);
|
||||
};
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function loadFullTxDetails(txHash, toAddress, isContractCall) {
|
||||
async function loadCalldata(txHash, toAddress) {
|
||||
const section = $("tx-detail-calldata-section");
|
||||
const actionEl = $("tx-detail-calldata-action");
|
||||
const detailsEl = $("tx-detail-calldata-details");
|
||||
@@ -340,10 +143,6 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
|
||||
);
|
||||
if (!resp.ok) return;
|
||||
const txData = await resp.json();
|
||||
|
||||
// Populate on-chain detail fields (block, nonce, gas, fee)
|
||||
populateOnChainDetails(txData);
|
||||
|
||||
const inputData = txData.raw_input || txData.input || null;
|
||||
if (!inputData || inputData === "0x") return;
|
||||
|
||||
@@ -359,19 +158,14 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
|
||||
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);
|
||||
// Token entry: show symbol on its own line, then address via shared renderer
|
||||
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>`;
|
||||
detailsHtml += renderAddressHtml(d.address);
|
||||
} 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>`;
|
||||
detailsHtml += renderAddressHtml(d.address);
|
||||
} else {
|
||||
detailsHtml += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
|
||||
}
|
||||
@@ -398,13 +192,7 @@ async function loadFullTxDetails(txHash, toAddress, isContractCall) {
|
||||
// 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!");
|
||||
flashCopyFeedback(el);
|
||||
};
|
||||
});
|
||||
attachCopyHandlers(container);
|
||||
}
|
||||
} catch (e) {
|
||||
log.errorf("loadCalldata failed:", e.message);
|
||||
|
||||
@@ -3,24 +3,18 @@
|
||||
const {
|
||||
$,
|
||||
showView,
|
||||
showFlash,
|
||||
flashCopyFeedback,
|
||||
addressDotHtml,
|
||||
addressTitle,
|
||||
escapeHtml,
|
||||
renderAddressHtml,
|
||||
attachCopyHandlers,
|
||||
copyableHtml,
|
||||
etherscanLinkHtml,
|
||||
} = 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");
|
||||
|
||||
const EXT_ICON =
|
||||
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
|
||||
`<svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5">` +
|
||||
`<path d="M4.5 1.5H2a.5.5 0 00-.5.5v8a.5.5 0 00.5.5h8a.5.5 0 00.5-.5V7.5"/>` +
|
||||
`<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
|
||||
`</svg></span>`;
|
||||
|
||||
let ctx;
|
||||
let elapsedTimer = null;
|
||||
let pollTimer = null;
|
||||
@@ -37,50 +31,19 @@ function clearTimers() {
|
||||
}
|
||||
|
||||
function toAddressHtml(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 title = addressTitle(address, state.wallets);
|
||||
if (title) {
|
||||
return (
|
||||
`<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</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 underline decoration-dashed cursor-pointer" data-copy="${escapeHtml(address)}">${escapeHtml(address)}</span>${extLink}</div>`;
|
||||
return renderAddressHtml(address, { 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>`;
|
||||
return (
|
||||
`<span class="underline decoration-dashed cursor-pointer break-all" data-copy="${escapeHtml(hash)}">${escapeHtml(hash)}</span>` +
|
||||
extLink
|
||||
);
|
||||
return copyableHtml(hash, "break-all") + etherscanLinkHtml(link);
|
||||
}
|
||||
|
||||
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)
|
||||
.querySelectorAll("[data-copy]")
|
||||
.forEach((el) => {
|
||||
el.onclick = () => {
|
||||
navigator.clipboard.writeText(el.dataset.copy);
|
||||
showFlash("Copied!");
|
||||
flashCopyFeedback(el);
|
||||
};
|
||||
});
|
||||
return copyableHtml(num) + etherscanLinkHtml(link);
|
||||
}
|
||||
|
||||
function showWait(txInfo, txHash) {
|
||||
|
||||
@@ -153,38 +153,24 @@ 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. For contract calls (swaps), a single transaction
|
||||
// can produce multiple token transfers (input, intermediates, output).
|
||||
// We consolidate these into the original tx entry using the token
|
||||
// transfer where the user *receives* tokens (the swap output), so
|
||||
// the transaction list shows the final result rather than confusing
|
||||
// intermediate hops. We preserve the original tx's from/to so the
|
||||
// user sees their own address, not a router or Permit2 contract.
|
||||
// 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);
|
||||
if (existing && existing.direction === "contract") {
|
||||
// For contract calls (swaps), consolidate into the original
|
||||
// tx entry. Prefer the "received" transfer (swap output)
|
||||
// for the display amount. If no received transfer exists,
|
||||
// fall back to the first "sent" transfer (swap input).
|
||||
const isReceived = parsed.direction === "received";
|
||||
const needsAmount = !existing.exactValue;
|
||||
if (isReceived || needsAmount) {
|
||||
existing.value = parsed.value;
|
||||
existing.exactValue = parsed.exactValue;
|
||||
existing.rawAmount = parsed.rawAmount;
|
||||
existing.rawUnit = parsed.rawUnit;
|
||||
existing.symbol = parsed.symbol;
|
||||
existing.contractAddress = parsed.contractAddress;
|
||||
existing.holders = parsed.holders;
|
||||
}
|
||||
// Keep the original tx's from/to (the user's address and the
|
||||
// contract they called), not the token transfer's from/to
|
||||
// which may be a router or Permit2 contract.
|
||||
continue;
|
||||
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);
|
||||
}
|
||||
// Non-contract token transfers get their own entries.
|
||||
// Use composite key so multiple token transfers per tx are kept.
|
||||
const ttKey = parsed.hash + ":" + (parsed.contractAddress || "");
|
||||
txsByHash.set(ttKey, parsed);
|
||||
}
|
||||
|
||||
@@ -359,12 +359,9 @@ function decode(data, toAddress) {
|
||||
const s = decodeV3SwapExactIn(inputs[i]);
|
||||
if (s) {
|
||||
if (!inputToken) inputToken = s.tokenIn;
|
||||
if (!outputToken) outputToken = s.tokenOut;
|
||||
if (!inputAmount) inputAmount = s.amountIn;
|
||||
// Always update output: in multi-step swaps (V3 → V4),
|
||||
// the last swap step determines the final output token
|
||||
// and minimum received amount.
|
||||
outputToken = s.tokenOut;
|
||||
minOutput = s.amountOutMin;
|
||||
if (!minOutput) minOutput = s.amountOutMin;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -372,9 +369,9 @@ function decode(data, toAddress) {
|
||||
const s = decodeV2SwapExactIn(inputs[i]);
|
||||
if (s) {
|
||||
if (!inputToken) inputToken = s.tokenIn;
|
||||
if (!outputToken) outputToken = s.tokenOut;
|
||||
if (!inputAmount) inputAmount = s.amountIn;
|
||||
outputToken = s.tokenOut;
|
||||
minOutput = s.amountOutMin;
|
||||
if (!minOutput) minOutput = s.amountOutMin;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -391,11 +388,12 @@ function decode(data, toAddress) {
|
||||
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;
|
||||
// Always update output: last swap step wins
|
||||
if (v4.tokenOut) outputToken = v4.tokenOut;
|
||||
if (v4.amountOutMin) minOutput = v4.amountOutMin;
|
||||
if (!minOutput && v4.amountOutMin)
|
||||
minOutput = v4.amountOutMin;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user