diff --git a/src/popup/views/addressDetail.js b/src/popup/views/addressDetail.js
index 4f104ec..09d272b 100644
--- a/src/popup/views/addressDetail.js
+++ b/src/popup/views/addressDetail.js
@@ -182,27 +182,46 @@ function etherscanTxLink(hash) {
return `https://etherscan.io/tx/${hash}`;
}
+const EXT_ICON =
+ `` +
+ ``;
+
+function copyableHtml(text, extraClass) {
+ const cls =
+ "underline decoration-dashed cursor-pointer" +
+ (extraClass ? " " + extraClass : "");
+ return `${escapeHtml(text)}`;
+}
+
function txDetailAddressHtml(address) {
const ensName = ensNameMap.get(address) || null;
const dot = addressDotHtml(address);
const link = etherscanAddressLink(address);
+ const extLink = `${EXT_ICON}`;
if (ensName) {
return (
dot +
- `${escapeHtml(ensName)}` +
- `
`
+ copyableHtml(ensName, "") +
+ extLink +
+ `` +
+ copyableHtml(address, "break-all") +
+ `
`
);
}
- return (
- dot +
- `${escapeHtml(address)}`
- );
+ return dot + copyableHtml(address, "break-all") + extLink;
+}
+
+function txDetailHashHtml(hash) {
+ const link = etherscanTxLink(hash);
+ const extLink = `${EXT_ICON}`;
+ return copyableHtml(hash, "break-all") + extLink;
}
function showTxDetail(tx) {
- const txLink = etherscanTxLink(tx.hash);
- $("tx-detail-hash").innerHTML =
- `${escapeHtml(tx.hash)}`;
+ $("tx-detail-hash").innerHTML = txDetailHashHtml(tx.hash);
$("tx-detail-from").innerHTML = txDetailAddressHtml(tx.from);
$("tx-detail-to").innerHTML = txDetailAddressHtml(tx.to);
$("tx-detail-value").textContent = tx.value + " " + tx.symbol;
@@ -210,6 +229,17 @@ function showTxDetail(tx) {
isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
$("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
showView("transaction");
+
+ // Attach copy handlers
+ document
+ .getElementById("view-transaction")
+ .querySelectorAll("[data-copy]")
+ .forEach((el) => {
+ el.onclick = () => {
+ navigator.clipboard.writeText(el.dataset.copy);
+ showFlash("Copied!");
+ };
+ });
}
function init(ctx) {