Link tx hash, from, and to addresses to Etherscan in transaction detail view

src/popup/views/addressDetail.js

@@ -152,21 +152,35 @@ function renderTransactions(txs) {
     });
 }
 
+function etherscanAddressLink(address) {
+    return `https://etherscan.io/address/${address}`;
+}
+
+function etherscanTxLink(hash) {
+    return `https://etherscan.io/tx/${hash}`;
+}
+
 function txDetailAddressHtml(address) {
     const ensName = ensNameMap.get(address) || null;
     const dot = addressDotHtml(address);
+    const link = etherscanAddressLink(address);
     if (ensName) {
         return (
             dot +
-            escapeHtml(ensName) +
-            `<div class="break-all">${escapeHtml(address)}</div>`
+            `<a href="${link}" target="_blank" class="underline decoration-dashed">${escapeHtml(ensName)}</a>` +
+            `<div class="break-all"><a href="${link}" target="_blank" class="underline decoration-dashed">${escapeHtml(address)}</a></div>`
         );
     }
-    return dot + escapeHtml(address);
+    return (
+        dot +
+        `<a href="${link}" target="_blank" class="underline decoration-dashed break-all">${escapeHtml(address)}</a>`
+    );
 }
 
 function showTxDetail(tx) {
-    $("tx-detail-hash").textContent = tx.hash;
+    const txLink = etherscanTxLink(tx.hash);
+    $("tx-detail-hash").innerHTML =
+        `<a href="${txLink}" target="_blank" class="underline decoration-dashed">${escapeHtml(tx.hash)}</a>`;
     $("tx-detail-from").innerHTML = txDetailAddressHtml(tx.from);
     $("tx-detail-to").innerHTML = txDetailAddressHtml(tx.to);
     $("tx-detail-value").textContent = tx.value + " " + tx.symbol;