fix: say a contract creation has no recipient instead of a blank line (closes #250)

A transaction with no `to` showed a blank recipient line on the wait,
success and error screens and the transaction detail view: an empty
address, with a colour dot whose colour was `undefined`. The approval
screen showed "(contract creation)".

All five now say "This transaction creates a new contract. It has no
recipient." A transaction with a real `to` is unchanged. The new test
drives each screen both ways.

Model: opus-5-5

src/popup/views/approval.js

@@ -1,6 +1,7 @@
 const {
     $,
     addressTitle,
+    CONTRACT_CREATION_TEXT,
     escapeHtml,
     showView,
     showError,
@@ -320,7 +321,7 @@ function showTxApproval(details) {
         toHtml += approvalAddressHtml(toAddr);
         $("approve-tx-to").innerHTML = toHtml;
     } else {
-        $("approve-tx-to").innerHTML = escapeHtml("(contract creation)");
+        $("approve-tx-to").innerHTML = escapeHtml(CONTRACT_CREATION_TEXT);
     }
 
     const ethValueFormatted = formatTxValue(

src/popup/views/helpers.js

@@ -404,6 +404,12 @@ function addressTitle(address, wallets) {
     return null;
 }
 
+// What every recipient line says for a transaction with no `to`. Such a
+// transaction creates a contract, so there is no address to show, and a blank
+// line on these screens reads as a rendering fault.
+const CONTRACT_CREATION_TEXT =
+    "This transaction creates a new contract. It has no recipient.";
+
 // 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.
@@ -615,6 +621,7 @@ module.exports = {
     escapeHtml,
     displaySymbol,
     addressTitle,
+    CONTRACT_CREATION_TEXT,
     formatAddressHtml,
     renderAddressHtml,
     copyableHtml,

src/popup/views/transactionDetail.js

@@ -7,6 +7,7 @@ const {
     showFlash,
     flashCopyFeedback,
     addressTitle,
+    CONTRACT_CREATION_TEXT,
     addressDotHtml,
     escapeHtml,
     isoDate,
@@ -94,13 +95,18 @@ function render() {
     $("tx-detail-hash").innerHTML = txHashHtml(tx.hash);
 
     const fromTitle = addressTitle(tx.from, state.wallets);
-    const toTitle = addressTitle(tx.to, state.wallets);
     $("tx-detail-from").innerHTML = txAddressHtml(
         tx.from,
         tx.fromEns,
         fromTitle,
     );
-    $("tx-detail-to").innerHTML = txAddressHtml(tx.to, tx.toEns, toTitle);
+    // A contract creation has no recipient: transactions.js gives it `to: ""`.
+    if (tx.to) {
+        const toTitle = addressTitle(tx.to, state.wallets);
+        $("tx-detail-to").innerHTML = txAddressHtml(tx.to, tx.toEns, toTitle);
+    } else {
+        $("tx-detail-to").innerHTML = escapeHtml(CONTRACT_CREATION_TEXT);
+    }
 
     // Exact amount (full precision, copyable)
     const detailSym = displaySymbol(tx.symbol);

src/popup/views/txStatus.js

@@ -4,6 +4,7 @@ const {
     $,
     showView,
     addressTitle,
+    CONTRACT_CREATION_TEXT,
     escapeHtml,
     renderAddressHtml,
     attachCopyHandlers,
@@ -58,7 +59,10 @@ function endWait() {
     }
 }
 
+// A contract creation reaches these screens with `to` as "" (approval.js
+// writes `to: toAddr || ""`).
 function toAddressHtml(address) {
+    if (!address) return escapeHtml(CONTRACT_CREATION_TEXT);
     const title = addressTitle(address, state.wallets);
     return renderAddressHtml(address, { title });
 }
@@ -202,8 +206,9 @@ function restoreWait() {
     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
-    // || ""`), and both fields render harmlessly when empty, so refusing it
-    // would abandon a wait the live path itself created.
+    // || ""`), 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 (typeof w.broadcastTime !== "number" || !isFinite(w.broadcastTime)) {