clawbot
64ec571a17
TxApproval and TransactionDetail cut off a long symbol, amount or description at the edge of the screen. These lines now wrap. SuccessTx hid its Amount and To lines whenever it had a decoded action, even one that showed neither. Each line is now hidden only when a readable decoded line shows the same thing. A swap with no Amount line now shows its amount on SuccessTx, as WaitTx and ErrorTx do. Model: opus-5-5
481 lines
18 KiB
JavaScript
481 lines
18 KiB
JavaScript
// Post-broadcast transaction status views: wait, success, error.
|
|
|
|
const {
|
|
$,
|
|
showView,
|
|
addressTitle,
|
|
CONTRACT_CREATION_TEXT,
|
|
escapeHtml,
|
|
renderAddressHtml,
|
|
attachCopyHandlers,
|
|
copyableHtml,
|
|
etherscanLinkHtml,
|
|
explorerUrl,
|
|
displaySymbol,
|
|
clearViewStack,
|
|
tokenLabel,
|
|
blockscoutOffTokenNoteHtml,
|
|
reviewedNetworkProvider,
|
|
} = require("./helpers");
|
|
const { state } = require("../../shared/state");
|
|
const {
|
|
SUPPORTED_CHAIN_IDS,
|
|
nativeCurrencyByChainId,
|
|
} = require("../../shared/networks");
|
|
const { log } = require("../../shared/log");
|
|
|
|
// Receipt poll cadence and the deadline after which the wait is reported as
|
|
// a timeout. Both are documented in the WaitTx section of README.md.
|
|
const POLL_INTERVAL_MS = 10000;
|
|
const TIMEOUT_MS = 60000;
|
|
|
|
// How many receipt lookups may fail in a row before the wait is ended and
|
|
// the failure reported. A lookup that throws says nothing about the
|
|
// transaction, so one must not end the wait — but an RPC that never answers
|
|
// (a mistyped URL in settings is the ordinary case) must not leave the wait
|
|
// running forever either, least of all a persisted one that every popup
|
|
// open would resume. Six is 60 seconds at the poll cadence: the same
|
|
// patience the confirmation deadline gets. Any lookup that answers, with a
|
|
// receipt or with null, resets the count.
|
|
const MAX_CONSECUTIVE_LOOKUP_FAILURES = 6;
|
|
|
|
let ctx;
|
|
let elapsedTimer = null;
|
|
let pollTimer = null;
|
|
|
|
// Identifies the wait currently on screen. Bumped by endWait(), so a timer
|
|
// callback or an in-flight receipt lookup that outlives its wait can tell
|
|
// that it is stale and leave the current view alone. Without it, a receipt
|
|
// resolving after the wait has ended renders over whatever view replaced it.
|
|
let waitId = 0;
|
|
|
|
// End the wait on screen: stop its timers and invalidate its pending async
|
|
// work. Called on receipt, on timeout, when a new wait starts, and when the
|
|
// user navigates away.
|
|
function endWait() {
|
|
waitId++;
|
|
if (elapsedTimer) {
|
|
clearInterval(elapsedTimer);
|
|
elapsedTimer = null;
|
|
}
|
|
if (pollTimer) {
|
|
clearInterval(pollTimer);
|
|
pollTimer = null;
|
|
}
|
|
}
|
|
|
|
// A contract creation reaches these screens with `to` as "" (approval.js
|
|
// writes `to: toAddr || ""`). The links below open the explorer of the network
|
|
// with `chainId`, or of the active network when none is given.
|
|
function toAddressHtml(address, chainId) {
|
|
if (!address) return escapeHtml(CONTRACT_CREATION_TEXT);
|
|
const title = addressTitle(address, state.wallets);
|
|
return renderAddressHtml(address, { title, chainId });
|
|
}
|
|
|
|
// A decoded record can come back from storage in any shape, so these screens
|
|
// show only the lines whose label and value are text. An address that is not
|
|
// text would throw in toAddressHtml().
|
|
function isReadableLine(d) {
|
|
return (
|
|
d &&
|
|
typeof d.label === "string" &&
|
|
typeof d.value === "string" &&
|
|
(!d.address || typeof d.address === "string")
|
|
);
|
|
}
|
|
|
|
// What a decoded line with an address shows: the address, under the token's
|
|
// symbol when the line names a token.
|
|
function decodedAddressHtml(d, chainId) {
|
|
if (!d.isToken) return toAddressHtml(d.address, chainId);
|
|
const sym = tokenLabel(d.address, chainId) || "Unknown token";
|
|
return (
|
|
`<div class="font-bold break-words">${escapeHtml(sym)}</div>` +
|
|
blockscoutOffTokenNoteHtml(d.address, chainId) +
|
|
toAddressHtml(d.address, chainId)
|
|
);
|
|
}
|
|
|
|
// Each `Moved from the sender`, `Permit2 allowance` and `Allowance token` line
|
|
// of a decoded swap, for the wait and error screens to show under the Amount
|
|
// figure. That figure can leave these amounts out, so alone it can understate
|
|
// what can leave the wallet. The token line says which token an allowance
|
|
// covers, which `Unlimited` alone does not.
|
|
function movedOrAllowedHtml(decoded, chainId) {
|
|
if (!decoded || !Array.isArray(decoded.details)) return "";
|
|
let html = "";
|
|
for (const d of decoded.details) {
|
|
if (
|
|
!isReadableLine(d) ||
|
|
(d.label !== "Moved from the sender" &&
|
|
d.label !== "Permit2 allowance" &&
|
|
d.label !== "Allowance token")
|
|
)
|
|
continue;
|
|
html += `<div class="mt-2">`;
|
|
html += `<div class="text-xs text-muted mb-1">${escapeHtml(d.label)}</div>`;
|
|
if (d.address) {
|
|
html += `<div class="text-xs">${decodedAddressHtml(d, chainId)}</div>`;
|
|
} else {
|
|
html += `<div class="font-bold break-words">${escapeHtml(d.value)}</div>`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
return html;
|
|
}
|
|
|
|
function txHashHtml(hash, chainId) {
|
|
const link = explorerUrl("tx", hash, chainId);
|
|
return copyableHtml(hash, "break-all") + etherscanLinkHtml(link);
|
|
}
|
|
|
|
function blockNumberHtml(blockNumber, chainId) {
|
|
const num = String(blockNumber);
|
|
const link = explorerUrl("block", num, chainId);
|
|
return copyableHtml(num) + etherscanLinkHtml(link);
|
|
}
|
|
|
|
// Render the wait view and start polling for the receipt. broadcastTime is
|
|
// when the transaction was broadcast, which is what the elapsed counter and
|
|
// the timeout deadline are both measured from; pollNow runs one lookup
|
|
// immediately instead of waiting a full poll interval.
|
|
function startWait(txInfo, txHash, broadcastTime, pollNow) {
|
|
endWait();
|
|
const id = waitId;
|
|
|
|
// A native amount, here and on the success and error screens, is in the
|
|
// native currency of txInfo.chainId, the network the transaction was sent
|
|
// on, not the active network's: the active network can change, in
|
|
// Settings or when the user approves a site's request, while this screen
|
|
// is open or before a later popup resumes it. The links on all three
|
|
// screens open that network's explorer, and this screen's receipt is
|
|
// asked of that network's node, for the same reason. A null token is a
|
|
// swap whose amount was not decoded (see showTxApproval() in
|
|
// approval.js): the amount says so, and no symbol follows it.
|
|
let symbol = "";
|
|
if (txInfo.token === "ETH") {
|
|
symbol = nativeCurrencyByChainId(txInfo.chainId);
|
|
} else if (txInfo.token !== null) {
|
|
symbol = displaySymbol(txInfo.tokenSymbol || "?");
|
|
}
|
|
$("wait-tx-summary").textContent =
|
|
txInfo.amount + (symbol ? " " + symbol : "");
|
|
$("wait-tx-token-note").innerHTML =
|
|
blockscoutOffTokenNoteHtml(txInfo.token, txInfo.chainId) +
|
|
movedOrAllowedHtml(txInfo.decoded, txInfo.chainId);
|
|
$("wait-tx-to").innerHTML = toAddressHtml(txInfo.to, txInfo.chainId);
|
|
$("wait-tx-hash").innerHTML = txHashHtml(txHash, txInfo.chainId);
|
|
attachCopyHandlers("view-wait-tx");
|
|
|
|
// Persisted so closing and reopening the popup resumes this wait
|
|
// instead of silently abandoning it.
|
|
state.viewData = {
|
|
pendingWait: {
|
|
txInfo: txInfo,
|
|
hash: txHash,
|
|
broadcastTime: broadcastTime,
|
|
},
|
|
};
|
|
|
|
function renderElapsed() {
|
|
const elapsed = Math.floor((Date.now() - broadcastTime) / 1000);
|
|
$("wait-tx-status").textContent =
|
|
"Waiting for confirmation... " + elapsed + "s";
|
|
}
|
|
renderElapsed();
|
|
|
|
elapsedTimer = setInterval(() => {
|
|
if (id !== waitId) return;
|
|
renderElapsed();
|
|
}, 1000);
|
|
|
|
const provider = reviewedNetworkProvider(txInfo);
|
|
let consecutiveFailures = 0;
|
|
|
|
async function poll() {
|
|
if (id !== waitId) return;
|
|
let receipt = null;
|
|
let answered = true;
|
|
try {
|
|
receipt = await provider.getTransactionReceipt(txHash);
|
|
} catch (e) {
|
|
// Cancelled by the popup closing, not failed: see pageClosed in
|
|
// src/popup/index.js.
|
|
if (ctx.pageClosed.aborted) return;
|
|
// A thrown lookup means "no answer this tick", not "no
|
|
// receipt": the RPC failed, the chain said nothing. Declaring
|
|
// the timeout off it would report a confirmed transaction as
|
|
// failed — which matters most on a resumed wait, where the
|
|
// first poll is already past the deadline.
|
|
answered = false;
|
|
log.errorf("poll receipt failed:", e.shortMessage || e.message);
|
|
}
|
|
// The lookup is async: the wait may have ended while it was in
|
|
// flight, in which case this result must not touch the view.
|
|
if (id !== waitId) return;
|
|
// Exactly one outcome per wait. A receipt wins even on the tick
|
|
// that crosses the deadline, because the transaction did confirm.
|
|
if (receipt) {
|
|
showSuccess(txInfo, txHash, receipt.blockNumber);
|
|
return;
|
|
}
|
|
if (!answered) {
|
|
consecutiveFailures++;
|
|
// The failure is the user's news, and it is a different fact
|
|
// from "the transaction did not confirm" — the chain was never
|
|
// asked. Ending the wait here is what keeps it bounded and
|
|
// gives the user a Done button to leave by.
|
|
if (consecutiveFailures >= MAX_CONSECUTIVE_LOOKUP_FAILURES) {
|
|
showError(
|
|
txInfo,
|
|
txHash,
|
|
"The network could not be reached to check this transaction — " +
|
|
MAX_CONSECUTIVE_LOOKUP_FAILURES +
|
|
" lookups failed in a row. Check the RPC URL in Settings. The transaction may still have confirmed — check Etherscan.",
|
|
);
|
|
}
|
|
// Otherwise keep polling: the next tick may answer.
|
|
return;
|
|
}
|
|
consecutiveFailures = 0;
|
|
if (Date.now() - broadcastTime >= TIMEOUT_MS) {
|
|
showError(
|
|
txInfo,
|
|
txHash,
|
|
"Transaction was not confirmed within 60 seconds. It may still confirm later \u2014 check Etherscan.",
|
|
);
|
|
}
|
|
}
|
|
|
|
pollTimer = setInterval(poll, POLL_INTERVAL_MS);
|
|
|
|
showView("wait-tx");
|
|
|
|
if (pollNow) poll();
|
|
}
|
|
|
|
function showWait(txInfo, txHash) {
|
|
startWait(txInfo, txHash, Date.now(), false);
|
|
}
|
|
|
|
// Resume a wait persisted by a previous popup session. The deadline still
|
|
// runs from the original broadcast, so a wait that has already outlived it
|
|
// resolves on the immediate first poll rather than restarting the clock.
|
|
// Returns false when there is nothing resumable to resume. Every field
|
|
// startWait() goes on to use is validated, not just the presence of the
|
|
// containers: txInfo.to reaches addressTitle(), which calls
|
|
// address.toLowerCase(), and txInfo.amount is rendered into the summary, so
|
|
// an object merely missing one of them throws a TypeError out of
|
|
// restoreView() — which init() does not guard, skipping the rest of popup
|
|
// init and leaving wait-tx on screen with no back control. A non-numeric
|
|
// broadcastTime leaves an unexitable wait counting "NaNs". txInfo.chainId picks
|
|
// the node the receipt is asked of and the explorer the links open, so it has
|
|
// to name a network. txInfo.token and txInfo.tokenSymbol are not checked here.
|
|
// blockscoutOffTokenNoteHtml() shows no line for a token that is not text.
|
|
// Everything else only compares and coalesces them, and tokenSymbol is null for
|
|
// ETH. txInfo.decoded is not checked either: see isReadableLine().
|
|
function restoreWait() {
|
|
const d = state.viewData;
|
|
if (!d || !d.pendingWait) return false;
|
|
const w = d.pendingWait;
|
|
if (!w.hash) return false;
|
|
// typeof [] is "object", so an array passes an object check.
|
|
const info = w.txInfo;
|
|
if (!info || typeof info !== "object" || Array.isArray(info)) return false;
|
|
// A string is the whole requirement: the empty string is what a
|
|
// contract-deployment approval persists (approval.js writes `to: toAddr
|
|
// || ""`), an empty `to` renders as a contract creation and an empty
|
|
// amount renders harmlessly, so refusing it would abandon a wait the live
|
|
// path itself created.
|
|
if (typeof info.to !== "string") return false;
|
|
if (typeof info.amount !== "string") return false;
|
|
if (!SUPPORTED_CHAIN_IDS.has(info.chainId)) return false;
|
|
if (typeof w.broadcastTime !== "number" || !isFinite(w.broadcastTime)) {
|
|
return false;
|
|
}
|
|
startWait(w.txInfo, w.hash, w.broadcastTime, true);
|
|
return true;
|
|
}
|
|
|
|
function showSuccess(txInfo, txHash, blockNumber) {
|
|
endWait();
|
|
|
|
// As on the wait screen, a null token has no symbol.
|
|
let symbol = "";
|
|
if (txInfo.token === "ETH") {
|
|
symbol = nativeCurrencyByChainId(txInfo.chainId);
|
|
} else if (txInfo.token !== null) {
|
|
symbol = displaySymbol(txInfo.tokenSymbol || "?");
|
|
}
|
|
state.viewData = {
|
|
amount: txInfo.amount,
|
|
symbol: symbol,
|
|
to: txInfo.to,
|
|
hash: txHash,
|
|
blockNumber: blockNumber,
|
|
decoded: txInfo.decoded || null,
|
|
chainId: txInfo.chainId,
|
|
};
|
|
renderSuccess();
|
|
ctx.doRefreshAndRender();
|
|
}
|
|
|
|
function readableLines(decoded) {
|
|
if (!decoded || !Array.isArray(decoded.details)) return [];
|
|
return decoded.details.filter(isReadableLine);
|
|
}
|
|
|
|
// The decoded action, or "" when no line of it can be read.
|
|
function decodedDetailsHtml(decoded, chainId) {
|
|
const lines = readableLines(decoded);
|
|
if (lines.length === 0) return "";
|
|
let html = `<div class="border border-border border-dashed p-2 mb-3">`;
|
|
if (decoded.name && typeof decoded.name === "string") {
|
|
html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Action</div>`;
|
|
html += `<div class="font-bold break-words">${escapeHtml(decoded.name)}</div></div>`;
|
|
}
|
|
if (decoded.description && typeof decoded.description === "string") {
|
|
html += `<div class="mb-2"><div class="text-xs text-muted mb-1">Description</div>`;
|
|
html += `<div class="break-words">${escapeHtml(decoded.description)}</div></div>`;
|
|
}
|
|
for (const d of lines) {
|
|
html += `<div class="mb-2">`;
|
|
html += `<div class="text-xs text-muted mb-1">${escapeHtml(d.label)}</div>`;
|
|
if (d.address) {
|
|
html += decodedAddressHtml(d, chainId);
|
|
} else {
|
|
html += `<div class="font-bold break-words">${escapeHtml(d.value)}</div>`;
|
|
}
|
|
html += `</div>`;
|
|
}
|
|
html += `</div>`;
|
|
return html;
|
|
}
|
|
|
|
function renderSuccess() {
|
|
const d = state.viewData;
|
|
if (!d || !d.hash) return;
|
|
|
|
const decodedHtml = decodedDetailsHtml(d.decoded, d.chainId);
|
|
|
|
// Amount and To are hidden only when a readable decoded line shows the same
|
|
// thing: an `Amount` line, or a line with the address in `to`. Some swaps
|
|
// have no `Amount` line, and a saved record can have unreadable lines. An
|
|
// empty `to` is a contract creation, which no decoded line shows.
|
|
const lines = readableLines(d.decoded);
|
|
$("success-tx-summary").parentElement.classList.toggle(
|
|
"hidden",
|
|
lines.some((line) => line.label === "Amount"),
|
|
);
|
|
$("success-tx-to").parentElement.classList.toggle(
|
|
"hidden",
|
|
lines.some((line) => line.address && line.address === d.to),
|
|
);
|
|
$("success-tx-summary").textContent =
|
|
d.amount + (d.symbol ? " " + d.symbol : "");
|
|
$("success-tx-to").innerHTML = toAddressHtml(d.to, d.chainId);
|
|
|
|
$("success-tx-block").innerHTML = blockNumberHtml(d.blockNumber, d.chainId);
|
|
$("success-tx-hash").innerHTML = txHashHtml(d.hash, d.chainId);
|
|
|
|
// Show decoded calldata details if present
|
|
const decodedEl = $("success-tx-decoded");
|
|
if (decodedEl && decodedHtml) {
|
|
decodedEl.innerHTML = decodedHtml;
|
|
decodedEl.classList.remove("hidden");
|
|
} else if (decodedEl) {
|
|
decodedEl.classList.add("hidden");
|
|
}
|
|
|
|
attachCopyHandlers("view-success-tx");
|
|
showView("success-tx");
|
|
}
|
|
|
|
function showError(txInfo, txHash, message) {
|
|
endWait();
|
|
|
|
// As on the wait screen, a null token has no symbol.
|
|
let symbol = "";
|
|
if (txInfo.token === "ETH") {
|
|
symbol = nativeCurrencyByChainId(txInfo.chainId);
|
|
} else if (txInfo.token !== null) {
|
|
symbol = displaySymbol(txInfo.tokenSymbol || "?");
|
|
}
|
|
state.viewData = {
|
|
amount: txInfo.amount,
|
|
symbol: symbol,
|
|
token: txInfo.token,
|
|
to: txInfo.to,
|
|
hash: txHash || null,
|
|
message: message,
|
|
decoded: txInfo.decoded || null,
|
|
chainId: txInfo.chainId,
|
|
};
|
|
renderError();
|
|
}
|
|
|
|
function renderError() {
|
|
const d = state.viewData;
|
|
if (!d || !d.message) return;
|
|
$("error-tx-summary").textContent =
|
|
d.amount + (d.symbol ? " " + d.symbol : "");
|
|
$("error-tx-token-note").innerHTML =
|
|
blockscoutOffTokenNoteHtml(d.token, d.chainId) +
|
|
movedOrAllowedHtml(d.decoded, d.chainId);
|
|
$("error-tx-to").innerHTML = toAddressHtml(d.to, d.chainId);
|
|
$("error-tx-message").textContent = d.message;
|
|
|
|
if (d.hash) {
|
|
$("error-tx-hash").innerHTML = txHashHtml(d.hash, d.chainId);
|
|
$("error-tx-hash-section").classList.remove("hidden");
|
|
} else {
|
|
$("error-tx-hash-section").classList.add("hidden");
|
|
}
|
|
|
|
attachCopyHandlers("view-error-tx");
|
|
showView("error-tx");
|
|
}
|
|
|
|
function isApprovalPopup() {
|
|
return new URLSearchParams(window.location.search).has("approval");
|
|
}
|
|
|
|
function navigateBack() {
|
|
// Nothing should still be polling by now, but leaving a view is the
|
|
// point at which its timers must be gone.
|
|
endWait();
|
|
if (isApprovalPopup()) {
|
|
window.close();
|
|
return;
|
|
}
|
|
// After a completed transaction, reset the navigation stack
|
|
// and go directly to the address view (token or detail).
|
|
// Use require() lazily to call show() without the ctx push wrapper.
|
|
clearViewStack();
|
|
state.viewStack.push("main");
|
|
if (state.selectedToken) {
|
|
state.viewStack.push("address");
|
|
require("./addressToken").show();
|
|
} else {
|
|
require("./addressDetail").show();
|
|
}
|
|
}
|
|
|
|
function init(_ctx) {
|
|
ctx = _ctx;
|
|
|
|
$("btn-success-tx-done").addEventListener("click", navigateBack);
|
|
$("btn-error-tx-done").addEventListener("click", navigateBack);
|
|
}
|
|
|
|
module.exports = {
|
|
init,
|
|
showWait,
|
|
restoreWait,
|
|
endWait,
|
|
showError,
|
|
renderSuccess,
|
|
renderError,
|
|
};
|