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

A transaction with no `to` showed a blank address, with a colour dot whose
colour was `undefined`, on the wait, success and error screens, the
transaction detail view and the history rows on Home, AddressDetail and
AddressToken. The approval screen showed "(contract creation)".

All of them now say "This transaction creates a new contract. It has no
recipient." The three history lists draw a row's counterparty lines through
one helper in helpers.js. A transaction with a real `to` is unchanged. The
new test drives each screen and list both ways.

Model: opus-5-5

README.md

@@ -1244,7 +1244,10 @@ view would leave a wallet one click from deletion.
       of every wallet, deduplicated by hash and filtered. Each row is three
       lines: age and direction, then the counterparty's colour dot (with our own
       name for it, where it is one of our addresses) and the amount, then the
-      counterparty's full address on a row of its own
+      counterparty's full address on a row of its own. A contract creation has
+      no counterparty: its second line is the amount alone and its third line
+      says "This transaction creates a new contract. It has no recipient." The
+      transaction lists on AddressDetail and AddressToken draw the same rows
     - "Add additional wallet..." link at bottom
 - **Transitions**:
     - Tap address row → sets the active address and broadcasts
@@ -1437,7 +1440,9 @@ view would leave a wallet one click from deletion.
 - **Elements**:
     - "Transaction Broadcast" heading (no back button — tx is irreversible)
     - Amount + symbol
-    - To: color dot + full address + etherscan link
+    - To: color dot + full address + etherscan link; for a contract creation,
+      which has no recipient, "This transaction creates a new contract. It has
+      no recipient." instead
     - Transaction hash: full hash (tap to copy) + etherscan link
     - Count-up timer: "Waiting for confirmation... Ns"
 - **Behavior**: Polls `getTransactionReceipt` every 10 seconds. The wait is
@@ -1466,7 +1471,8 @@ view would leave a wallet one click from deletion.
     - Decoded action well (shown when the transaction carried recognized
       calldata; the top-level Amount and To are hidden in that case)
     - Amount + symbol
-    - To: color dot + full address + etherscan link
+    - To: color dot + full address + etherscan link, or for a contract creation
+      the same sentence as on WaitTx
     - Block number
     - Transaction hash: full hash (tap to copy) + etherscan link
     - "Done" button
@@ -1481,7 +1487,8 @@ view would leave a wallet one click from deletion.
 - **Elements**:
     - "Transaction Failed" heading
     - Amount + symbol
-    - To: color dot + full address + etherscan link
+    - To: color dot + full address + etherscan link, or for a contract creation
+      the same sentence as on WaitTx
     - Error message (dashed border box)
     - Transaction hash section (hidden if broadcast failed before getting hash):
       full hash (tap to copy) + etherscan link
@@ -1519,7 +1526,7 @@ view would leave a wallet one click from deletion.
     - From: blockie + color dot + full address (tap to copy) + etherscan link;
       ENS name if available
     - To: blockie + color dot + full address (tap to copy) + etherscan link; ENS
-      name if available
+      name if available. For a contract creation, the same sentence as on WaitTx
     - Time: ISO datetime + relative age in parentheses
     - Block: block number (tap to copy) + etherscan block link
     - Amount: value + symbol (bold)
@@ -1830,8 +1837,8 @@ view would leave a wallet one click from deletion.
     - Decoded action (if calldata is recognized): action name, token details,
       amounts, steps, deadline (see Transaction Decoding)
     - From: color dot + full address + etherscan link
-    - Contract: color dot + full address + etherscan link (or "contract
+    - Contract: color dot + full address + etherscan link, token symbol label if
-      creation"), token symbol label if known
+      known; for a contract creation, the same sentence as on WaitTx
     - Value: amount in ETH (4 decimal places, USD in parentheses)
     - Network fee (max): gas limit × fee per gas in ETH (4 decimal places, USD
       in parentheses), with the gas limit and the fee per gas in gwei below it

TODO.md

@@ -45,6 +45,26 @@ but the review is broader than any of them.
 
 # Completed Steps
 
+- 2026-10-04: A transaction with no `to` says "This transaction creates a new
+  contract. It has no recipient." on its recipient line and in its transaction
+  history row ([#250](https://git.eeqj.de/sneak/AutistMask/issues/250)). The
+  wait, success and error screens, the transaction detail view and the history
+  rows on Home, AddressDetail and AddressToken showed a blank address there,
+  with a colour dot whose colour was `undefined`; the approval screen showed
+  "(contract creation)". A transaction with a real `to` is unchanged.
+
+- 2026-10-04: The flash line keeps to the one line it reserves at any message
+  length ([#252](https://git.eeqj.de/sneak/AutistMask/issues/252)). A message
+  that wrapped pushed the whole screen below it down. `#flash-msg` no longer
+  wraps: text too long for the line is cut with an ellipsis, and `showFlash()`
+  puts the whole message in the line's title. Every message is also reworded to
+  at most 50 characters so none is cut; none carries a wallet name or text from
+  a server, and the add-token screens flash a fixed line for any error other
+  than a contract that is not a token. A new test in `tests/e2e/run.js` puts a
+  message several lines long on the line and fails if the line or the screen
+  below it moves. The two approval-screen error boxes are left to
+  [#297](https://git.eeqj.de/sneak/AutistMask/issues/297).
+
 - 2026-10-04: A method the wallet does not implement is refused with EIP-1193
   code `4200` ([#279](https://git.eeqj.de/sneak/AutistMask/issues/279)). The
   background's `Unsupported method: <method>` error carried no code, so a site

src/popup/dustThreshold.js

@@ -19,13 +19,9 @@
 // that the user did not type — the same silent substitution the visible
 // rejection message exists to end.
 
-// Must render on ONE line of #flash-msg, whose reserved height
+// Must render on ONE line of #flash-msg; see showFlash() in
-// (min-h-[1.25rem]) is exactly one line at text-xs. A string long enough to
+// src/popup/views/helpers.js for how long that is.
-// wrap to two lines pushes the settings view down, which the No Layout Shift
+const DUST_THRESHOLD_MESSAGE = "Enter a whole number of gwei, zero or greater.";
-// policy forbids. Do not lengthen this without re-running the layout test in
-// tests/e2e/run.js, which measures the flash line and goes red on a shift.
-const DUST_THRESHOLD_MESSAGE =
-    "Please enter a whole number of gwei, zero or greater.";
 
 // Returns the threshold in gwei, or null if the input is not one.
 function parseDustThresholdGwei(raw) {

src/popup/index.html

@@ -33,7 +33,7 @@
             <!-- ============ FLASH MESSAGE AREA ============ -->
             <div
                 id="flash-msg"
-                class="text-xs text-muted min-h-[1.25rem] mb-1"
+                class="text-xs text-muted min-h-[1.25rem] mb-1 truncate"
             ></div>
 
             <!-- ============ WELCOME / FIRST USE ============ -->

src/popup/views/addToken.js

@@ -28,9 +28,7 @@ function init(ctx) {
     $("btn-add-token-confirm").addEventListener("click", async () => {
         const contractAddr = $("add-token-address").value.trim();
         if (!contractAddr || !contractAddr.startsWith("0x")) {
-            showFlash(
+            showFlash("Enter a valid contract address starting with 0x.");
-                "Please enter a valid contract address starting with 0x.",
-            );
             return;
         }
         const already = state.trackedTokens.find(
@@ -71,8 +69,15 @@ function init(ctx) {
             require("./addressDetail").show();
         } catch (e) {
             const detail = e.shortMessage || e.message || String(e);
-            log.errorf("Token lookup failed for", contractAddr, detail);
+            log.errorf("Adding token failed for", contractAddr, detail);
-            showFlash(detail);
+            // lookupTokenInfo() rejects a contract with a one-line message
+            // starting "Not a valid ERC-20 token". Any other error, such as a
+            // failed save, can be far longer, so it is only logged.
+            showFlash(
+                detail.startsWith("Not a valid ERC-20 token")
+                    ? detail
+                    : "Could not add the token.",
+            );
             infoEl.textContent = "";
             infoEl.style.visibility = "hidden";
         }

src/popup/views/addWallet.js

@@ -142,15 +142,13 @@ function validatePassword() {
 async function importMnemonic(ctx) {
     const mnemonic = $("wallet-mnemonic").value.trim();
     if (!mnemonic) {
-        showFlash("Enter a recovery phrase or press the die to generate one.");
+        showFlash("Enter a recovery phrase, or press the die.");
         return;
     }
     const words = mnemonic.split(/\s+/);
     if (words.length !== 12 && words.length !== 24) {
         showFlash(
-            "Recovery phrase must be 12 or 24 words. You entered " +
+            "Recovery phrase must be 12 or 24 words, not " + words.length + ".",
-                words.length +
-                ".",
         );
         return;
     }
@@ -163,14 +161,12 @@ async function importMnemonic(ctx) {
     const { xpub, firstAddress } = hdWalletFromMnemonic(mnemonic);
     const xpubDup = findWalletByXpub(xpub);
     if (xpubDup) {
-        showFlash(
+        showFlash("This recovery phrase is already added.");
-            "This recovery phrase is already added (" + xpubDup.name + ").",
-        );
         return;
     }
     const addrDup = findWalletByAddress(firstAddress);
     if (addrDup) {
-        showFlash("Address already exists in wallet (" + addrDup.name + ").");
+        showFlash("Address already exists in a wallet.");
         return;
     }
     const encrypted = await encryptWithPassword(mnemonic, pw);
@@ -229,9 +225,7 @@ async function importPrivateKey(ctx) {
     if (!pw) return;
     const duplicate = findWalletByAddress(addr);
     if (duplicate) {
-        showFlash(
+        showFlash("This address already exists in a wallet.");
-            "This address already exists in wallet (" + duplicate.name + ").",
-        );
         return;
     }
     const encrypted = await encryptWithPassword(key, pw);
@@ -258,36 +252,29 @@ async function importXprvKey(ctx) {
         return;
     }
     if (!isValidXprv(xprv)) {
-        showFlash(
+        showFlash("That extended private key is not valid.");
-            "That extended private key is not valid. Please check it and try again.",
-        );
         return;
     }
     if (!isMasterExtendedKey(xprv)) {
-        showFlash(
+        showFlash("Please paste the master key, not a child key.");
-            "That is an account-level or child key, which cannot be imported. " +
-                "Please paste the master extended private key for the wallet.",
-        );
         return;
     }
     let result;
     try {
         result = hdWalletFromXprv(xprv);
     } catch {
-        showFlash(
+        showFlash("That extended private key is not valid.");
-            "That extended private key is not valid. Please check it and try again.",
-        );
         return;
     }
     const { xpub, firstAddress } = result;
     const xpubDup = findWalletByXpub(xpub);
     if (xpubDup) {
-        showFlash("This key is already added (" + xpubDup.name + ").");
+        showFlash("This key is already added.");
         return;
     }
     const addrDup = findWalletByAddress(firstAddress);
     if (addrDup) {
-        showFlash("Address already exists in wallet (" + addrDup.name + ").");
+        showFlash("Address already exists in a wallet.");
         return;
     }
     const pw = validatePassword();

src/popup/views/addressDetail.js

@@ -3,7 +3,7 @@ const {
     showView,
     showFlash,
     balanceLinesForAddress,
-    addressDotHtml,
+    txCounterpartyHtml,
     addressTitle,
     escapeHtml,
     displaySymbol,
@@ -233,16 +233,13 @@ function renderTransactions(txs) {
         // is shown whole; the title or ENS name, where there is one, names
         // it on the line above rather than replacing it.
         const nameStr = escapeHtml(title || ensName || "");
-        const addrStr = escapeHtml(counterparty);
-        const dot = addressDotHtml(counterparty);
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity:0.5;" : "";
         const ago = escapeHtml(timeAgo(tx.timestamp));
         const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
-        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${nameStr}</span><span>${amountStr}</span></div>`;
+        html += txCounterpartyHtml(counterparty, nameStr, amountStr);
-        html += `<div class="am-address">${addrStr}</div>`;
         html += `</div>`;
         i++;
     }

src/popup/views/addressToken.js

@@ -6,7 +6,7 @@ const {
     showView,
     showFlash,
     flashCopyFeedback,
-    addressDotHtml,
+    txCounterpartyHtml,
     addressTitle,
     escapeHtml,
     displaySymbol,
@@ -309,16 +309,13 @@ function renderTransactions(txs) {
         // is shown whole; the title or ENS name, where there is one, names
         // it on the line above rather than replacing it.
         const nameStr = escapeHtml(title || ensName || "");
-        const addrStr = escapeHtml(counterparty);
-        const dot = addressDotHtml(counterparty);
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity:0.5;" : "";
         const ago = escapeHtml(timeAgo(tx.timestamp));
         const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
-        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${nameStr}</span><span>${amountStr}</span></div>`;
+        html += txCounterpartyHtml(counterparty, nameStr, amountStr);
-        html += `<div class="am-address">${addrStr}</div>`;
         html += `</div>`;
         i++;
     }

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

@@ -223,15 +223,19 @@ function clearFlash() {
         flashTimer = null;
     }
     $("flash-msg").textContent = "";
+    $("flash-msg").title = "";
 }
 
+// The flash line reserves exactly one line, and a message that wrapped would
+// push the screen below it down (README, No Layout Shift). So #flash-msg never
+// wraps: text too long for the line is cut with an ellipsis, and the whole
+// message is also put in the line's title. Write messages to fit, at most 50
+// characters, so none is cut.
 function showFlash(msg, duration = 2000) {
     clearFlash();
     $("flash-msg").textContent = msg;
-    flashTimer = setTimeout(() => {
+    $("flash-msg").title = msg;
-        $("flash-msg").textContent = "";
+    flashTimer = setTimeout(clearFlash, duration);
-        flashTimer = null;
-    }, duration);
 }
 
 // A stored token balance as a number, or null when there is no number in it.
@@ -404,6 +408,29 @@ function addressTitle(address, wallets) {
     return null;
 }
 
+// What every recipient line and history row 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.";
+
+// The last two lines of a transaction history row: the counterparty's colour
+// dot and name beside the amount, then its full address. A contract creation
+// the user sent has no counterparty (its `to` is ""), so its row has the
+// amount alone and the contract creation sentence in place of the address.
+function txCounterpartyHtml(address, nameHtml, amountHtml) {
+    if (!address) {
+        return (
+            `<div class="flex justify-between"><span></span><span>${amountHtml}</span></div>` +
+            `<div>${escapeHtml(CONTRACT_CREATION_TEXT)}</div>`
+        );
+    }
+    return (
+        `<div class="flex justify-between"><span class="flex items-center">${addressDotHtml(address)}${nameHtml}</span><span>${amountHtml}</span></div>` +
+        `<div class="am-address">${escapeHtml(address)}</div>`
+    );
+}
+
 // 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 +642,8 @@ module.exports = {
     escapeHtml,
     displaySymbol,
     addressTitle,
+    CONTRACT_CREATION_TEXT,
+    txCounterpartyHtml,
     formatAddressHtml,
     renderAddressHtml,
     copyableHtml,

src/popup/views/home.js

@@ -6,6 +6,7 @@ const {
     isoDate,
     timeAgo,
     addressDotHtml,
+    txCounterpartyHtml,
     addressTitle,
     escapeHtml,
     displaySymbol,
@@ -122,16 +123,13 @@ function renderHomeTxList(ctx) {
         // names it on the line above rather than replacing it.
         const title = addressTitle(counterparty, state.wallets);
         const titleStr = title ? escapeHtml(title) : "";
-        const addrStr = escapeHtml(counterparty);
-        const dot = addressDotHtml(counterparty);
         const err = tx.isError ? " (failed)" : "";
         const opacity = tx.isError ? " opacity:0.5;" : "";
         const ago = escapeHtml(timeAgo(tx.timestamp));
         const iso = escapeHtml(isoDate(tx.timestamp));
         html += `<div class="home-tx-row py-2 border-b border-border-light text-xs cursor-pointer hover:bg-hover" data-tx="${i}" style="${opacity}">`;
         html += `<div class="flex justify-between"><span class="text-muted" title="${iso}">${ago}</span><span>${dirLabel}${err}</span></div>`;
-        html += `<div class="flex justify-between"><span class="flex items-center">${dot}${titleStr}</span><span>${amountStr}</span></div>`;
+        html += txCounterpartyHtml(counterparty, titleStr, amountStr);
-        html += `<div class="am-address">${addrStr}</div>`;
         html += `</div>`;
         i++;
     }

src/popup/views/send.js

@@ -63,13 +63,13 @@ function validateToAddress(value) {
             if (checksummed !== v) {
                 return {
                     valid: false,
-                    error: "Address checksum is invalid. Please double-check the address.",
+                    error: "Address checksum is invalid. Check the address.",
                 };
             }
         } catch {
             return {
                 valid: false,
-                error: "Address checksum is invalid. Please double-check the address.",
+                error: "Address checksum is invalid. Check the address.",
             };
         }
     }
@@ -211,7 +211,7 @@ function init(_ctx) {
                 const provider = getProvider(state.rpcUrl, state.networkId);
                 const resolved = await provider.resolveName(to);
                 if (!resolved) {
-                    showFlash("Could not resolve " + to);
+                    showFlash("That ENS name has no address.");
                     return;
                 }
                 resolvedTo = resolved;

src/popup/views/settings.js

@@ -264,18 +264,12 @@ function init(ctx) {
             const json = await resp.json();
             if (json.error) {
                 log.errorf("RPC validation error:", json.error);
-                showFlash("Endpoint returned error: " + json.error.message);
+                showFlash("Endpoint returned an error.");
                 return;
             }
             const net = currentNetwork();
             if (json.result !== net.chainId) {
-                showFlash(
+                showFlash("Wrong network: expected " + net.name + ".");
-                    "Wrong network (expected " +
-                        net.name +
-                        ", got chain " +
-                        json.result +
-                        ").",
-                );
                 return;
             }
         } catch (e) {

src/popup/views/settingsAddToken.js

@@ -115,9 +115,7 @@ function init(_ctx) {
     $("btn-settings-addtoken-manual").addEventListener("click", async () => {
         const addr = $("settings-addtoken-address").value.trim();
         if (!addr || !addr.startsWith("0x")) {
-            showFlash(
+            showFlash("Enter a valid contract address starting with 0x.");
-                "Please enter a valid contract address starting with 0x.",
-            );
             return;
         }
         if (isTracked(addr)) {
@@ -155,8 +153,15 @@ function init(_ctx) {
             ctx.doRefreshAndRender();
         } catch (e) {
             const detail = e.shortMessage || e.message || String(e);
-            log.errorf("Token lookup failed for", addr, detail);
+            log.errorf("Adding token failed for", addr, detail);
-            showFlash(detail);
+            // lookupTokenInfo() rejects a contract with a one-line message
+            // starting "Not a valid ERC-20 token". Any other error, such as a
+            // failed save, can be far longer, so it is only logged.
+            showFlash(
+                detail.startsWith("Not a valid ERC-20 token")
+                    ? detail
+                    : "Could not add the token.",
+            );
             infoEl.textContent = "";
             infoEl.style.visibility = "hidden";
         }

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,
     );
+    // 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
+    // || ""`), an empty `to` renders as a contract creation and an empty
-    // would abandon a wait the live path itself created.
+    // 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)) {

src/shared/walletDefects.js

@@ -41,12 +41,10 @@ const DEFECTS = {
                 "changed or removed, and this wallet stays until you delete " +
                 "it yourself.",
         ],
-        // One sentence for the places that have room for one: the flash on a
+        // One line, for the flash on a blocked Send and the inline error on
-        // blocked Send, the inline error on the approval screens.
+        // the approval screens. It must fit on the flash line; see showFlash()
-        shortMessage:
+        // in src/popup/views/helpers.js.
-            "This wallet cannot sign, because it was imported from an " +
+        shortMessage: "This wallet cannot sign. See the wallet list.",
-            "extended private key that is not a master key. The wallet list " +
-            "explains what happened.",
     },
 };
 

tests/contractCreation.test.js

@@ -0,0 +1,315 @@
+// The recipient line of a contract creation
+// (https://git.eeqj.de/sneak/AutistMask/issues/250).
+//
+// A transaction with no `to` creates a contract. The approval screen, the
+// wait, success and error screens, the transaction detail view and the
+// transaction history rows each say so in a sentence, where they used to show
+// a blank line (an empty address, with a colour dot whose colour was
+// `undefined`) or, on the approval screen, "(contract creation)". A
+// transaction with a real `to` still shows that address.
+//
+// Driven against a minimal DOM stub in the shape
+// tests/typedDataPermit.test.js uses.
+
+jest.mock("../src/shared/log", () => ({
+    log: {
+        debugf: () => {},
+        infof: () => {},
+        warnf: () => {},
+        errorf: () => {},
+    },
+    // The transaction detail view fetches on-chain details after drawing; an
+    // answer that is not ok leaves the drawn lines as they are.
+    debugFetch: async () => ({ ok: false }),
+    setRuntimeDebug: () => {},
+    isDebug: () => false,
+}));
+
+// The wait screen polls for a receipt; this one never arrives.
+jest.mock("../src/shared/balances", () => ({
+    getProvider: () => ({ getTransactionReceipt: () => new Promise(() => {}) }),
+    refreshBalances: () => {},
+}));
+
+// The history lists ask the explorer for their transactions and resolve ENS
+// names for them; here the explorer answers with mockHistory and no name
+// resolves.
+let mockHistory = [];
+jest.mock("../src/shared/transactions", () => ({
+    ...jest.requireActual("../src/shared/transactions"),
+    fetchRecentTransactions: async () => mockHistory,
+}));
+jest.mock("../src/shared/ens", () => ({
+    ...jest.requireActual("../src/shared/ens"),
+    resolveEnsNames: async () => new Map(),
+}));
+
+globalThis.chrome = {
+    storage: { local: { get: async () => ({}), set: async () => {} } },
+};
+
+const { state } = require("../src/shared/state");
+const approval = require("../src/popup/views/approval");
+const txStatus = require("../src/popup/views/txStatus");
+const transactionDetail = require("../src/popup/views/transactionDetail");
+const home = require("../src/popup/views/home");
+const addressDetail = require("../src/popup/views/addressDetail");
+const addressToken = require("../src/popup/views/addressToken");
+
+const SENTENCE =
+    "This transaction creates a new contract. It has no recipient.";
+
+const FROM = "0x0000000000000000000000000000000000000a11";
+const RECIPIENT = "0x66133E8ea0f5D1d612D2502a968757D1048c214a";
+const TX_HASH =
+    "0x85215772ed26ea8b39c2b3b18779030487efbe0b5fd7e882592b2f62b837be84";
+// Init code for a contract creation's data.
+const INIT_CODE = "0x600160005500";
+
+function makeElement(id) {
+    const classes = new Set();
+    const el = {
+        id,
+        textContent: "",
+        value: "",
+        innerHTML: "",
+        disabled: false,
+        style: {},
+        dataset: {},
+        classList: {
+            add: (...names) => names.forEach((n) => classes.add(n)),
+            remove: (...names) => names.forEach((n) => classes.delete(n)),
+            contains: (n) => classes.has(n),
+            toggle: (n, force) => {
+                const on = force === undefined ? !classes.has(n) : force;
+                if (on) classes.add(n);
+                else classes.delete(n);
+                return on;
+            },
+        },
+        addEventListener: () => {},
+        querySelectorAll: () => [],
+        appendChild: () => {},
+    };
+    // Views reach for .parentElement to hide whole sections.
+    Object.defineProperty(el, "parentElement", {
+        get: () => node(id + "-parent"),
+    });
+    return el;
+}
+
+function makeDocument() {
+    const els = new Map();
+    return {
+        getElementById(id) {
+            // The debug banner is created on demand by helpers.js; absent
+            // is the state a non-debug, non-testnet popup is in.
+            if (id === "debug-banner") return null;
+            if (!els.has(id)) els.set(id, makeElement(id));
+            return els.get(id);
+        },
+        createElement: () => makeElement("created"),
+        body: { prepend: () => {} },
+    };
+}
+
+function node(id) {
+    return globalThis.document.getElementById(id);
+}
+
+// The line a transaction with a real `to` shows: that address, and nothing
+// left over from an empty one.
+function expectAddressLine(html) {
+    expect(html).toContain(RECIPIENT);
+    expect(html).not.toContain(SENTENCE);
+    expect(html).not.toContain("undefined");
+}
+
+beforeEach(() => {
+    globalThis.document = makeDocument();
+    globalThis.window = { location: { search: "" } };
+    state.wallets = [];
+    state.trackedTokens = [];
+    state.viewData = {};
+    state.viewStack = [];
+    state.currentView = null;
+    txStatus.init({ doRefreshAndRender: () => {} });
+});
+
+afterEach(() => {
+    txStatus.endWait();
+});
+
+// Open the transaction approval screen the way the popup does: the background
+// hands over the populated transaction and show() draws it.
+async function openTxApproval(to, data) {
+    globalThis.chrome.runtime = {
+        connect: () => ({ postMessage: () => {} }),
+        sendMessage: (msg, reply) => {
+            if (!reply) return;
+            if (msg.type !== "AUTISTMASK_GET_APPROVAL") return reply(null);
+            reply({
+                type: "tx",
+                hostname: "dapp.example",
+                isPhishingDomain: false,
+                approvedFrom: FROM,
+                approvedTx: {
+                    type: 2,
+                    from: FROM,
+                    chainId: "0x1",
+                    nonce: "0x7",
+                    gasLimit: "0x5208",
+                    maxPriorityFeePerGas: "0x3b9aca00",
+                    maxFeePerGas: "0x77359400",
+                    to,
+                    value: "0x0",
+                    data,
+                    accessList: [],
+                },
+            });
+        },
+    };
+    approval.init({});
+    await approval.show(1);
+}
+
+describe("the transaction approval screen", () => {
+    test("a contract creation says so instead of naming a contract", async () => {
+        await openTxApproval(null, INIT_CODE);
+        expect(node("approve-tx-to").innerHTML).toBe(SENTENCE);
+    });
+
+    test("a transaction with a recipient shows its address", async () => {
+        await openTxApproval(RECIPIENT, "0x");
+        expectAddressLine(node("approve-tx-to").innerHTML);
+    });
+});
+
+// approval.js carries a contract creation to these screens with `to` as "".
+describe("the wait, success and error screens", () => {
+    const creation = {
+        to: "",
+        amount: "0.0000",
+        token: "ETH",
+        tokenSymbol: null,
+    };
+    const transfer = { ...creation, to: RECIPIENT };
+
+    test("a contract creation says so on the wait screen", () => {
+        txStatus.showWait(creation, TX_HASH);
+        expect(node("wait-tx-to").innerHTML).toBe(SENTENCE);
+    });
+
+    test("a transaction with a recipient shows its address on the wait screen", () => {
+        txStatus.showWait(transfer, TX_HASH);
+        expectAddressLine(node("wait-tx-to").innerHTML);
+    });
+
+    test("a contract creation says so on the success and error screens", () => {
+        state.viewData = {
+            amount: "0.0000",
+            symbol: "ETH",
+            to: "",
+            hash: TX_HASH,
+            blockNumber: 1,
+        };
+        txStatus.renderSuccess();
+        expect(node("success-tx-to").innerHTML).toBe(SENTENCE);
+
+        txStatus.showError(creation, TX_HASH, "The transaction failed.");
+        expect(node("error-tx-to").innerHTML).toBe(SENTENCE);
+    });
+
+    test("a transaction with a recipient shows its address on the success and error screens", () => {
+        state.viewData = {
+            amount: "0.0050",
+            symbol: "ETH",
+            to: RECIPIENT,
+            hash: TX_HASH,
+            blockNumber: 1,
+        };
+        txStatus.renderSuccess();
+        expectAddressLine(node("success-tx-to").innerHTML);
+
+        txStatus.showError(transfer, TX_HASH, "The transaction failed.");
+        expectAddressLine(node("error-tx-to").innerHTML);
+    });
+});
+
+// A transaction FROM sent, as the history lists hold it. The explorer reports a
+// contract creation with no `to`, which src/shared/transactions.js turns into
+// `to: ""`.
+function historyTx(to) {
+    return {
+        hash: TX_HASH,
+        from: FROM,
+        to,
+        value: "0.0000",
+        exactValue: "0.0",
+        rawAmount: "0",
+        rawUnit: "wei",
+        symbol: "ETH",
+        timestamp: 1790000000,
+        isError: false,
+        directionLabel: "Sent",
+        direction: "sent",
+        contractAddress: null,
+    };
+}
+
+// The detail view is opened with the transaction a history row holds.
+describe("the transaction detail view", () => {
+    test("a contract creation says so", () => {
+        transactionDetail.show(historyTx(""));
+        expect(node("tx-detail-to").innerHTML).toBe(SENTENCE);
+        expect(node("tx-detail-type").textContent).toBe("Contract Creation");
+    });
+
+    test("a transaction with a recipient shows its address", () => {
+        transactionDetail.show(historyTx(RECIPIENT));
+        expectAddressLine(node("tx-detail-to").innerHTML);
+    });
+});
+
+// The same rows are drawn on Home, AddressDetail and AddressToken (for ETH).
+describe.each([
+    ["Home", "home-tx-list", () => home.render({})],
+    ["AddressDetail", "tx-list", () => addressDetail.show()],
+    ["AddressToken", "address-token-tx-list", () => addressToken.show()],
+])("the transaction history on %s", (_name, listId, open) => {
+    async function rowsFor(tx) {
+        mockHistory = [tx];
+        open();
+        // The list is drawn once the history has been fetched.
+        await new Promise((resolve) => setTimeout(resolve, 0));
+        return node(listId).innerHTML;
+    }
+
+    beforeEach(() => {
+        state.wallets = [
+            {
+                name: "Main",
+                type: "key",
+                addresses: [{ address: FROM, balance: "0.0000" }],
+            },
+        ];
+        state.selectedWallet = 0;
+        state.selectedAddress = 0;
+        state.selectedToken = "ETH";
+    });
+
+    test("a contract creation's row says so, with no colour dot and no address line", async () => {
+        const html = await rowsFor(historyTx(""));
+        expect(html).toContain(SENTENCE);
+        expect(html).not.toContain("background:");
+        expect(html).not.toContain("am-address");
+        expect(html).not.toContain("undefined");
+    });
+
+    test("a transaction with a recipient shows its colour dot and address", async () => {
+        const html = await rowsFor(historyTx(RECIPIENT));
+        expectAddressLine(html);
+        expect(html).toContain("background:#");
+        expect(html).toContain(`<div class="am-address">${RECIPIENT}</div>`);
+    });
+});

tests/dustThreshold.test.js

@@ -99,12 +99,13 @@ describe("the flash line the message is shown in", () => {
     // length, including one that wrapped to two lines and pushed the
     // settings view down 12px.
     //
-    // The assertion that actually measures — empty line vs. the message,
+    // The line cuts a message too long for it with an ellipsis (see
-    // real Chromium, documented 360x600 popup — is
+    // showFlash() in src/popup/views/helpers.js). The assertions that
-    // "a rejected dust threshold shifts no layout (#233)" in
+    // measure that, in a real browser at the documented 360x600 popup, are
-    // tests/e2e/run.js, run by make test-e2e. It is not in make check
+    // "a rejected dust threshold shifts no layout (#233)" and "an over-long
-    // because REPO_POLICIES.md caps make test at 20 seconds and a browser
+    // flash message keeps to one line (#252)" in tests/e2e/run.js, run by
-    // suite does not fit; run it before changing the wording.
+    // make test-e2e. They are not in make check because REPO_POLICIES.md
+    // caps make test at 20 seconds and a browser suite does not fit.
     test("reserves its height in the markup", () => {
         const flashLine = POPUP_HTML.match(
             /<div\s+id="flash-msg"\s+class="([^"]*)"/,

tests/e2e/run.js

@@ -1320,17 +1320,13 @@ async function waitForFilledFlashLine(page) {
 }
 
 // README, No Layout Shift: the rejection message goes into #flash-msg,
-// whose min-h-[1.25rem] reserves exactly ONE line at text-xs. Reserving
+// whose min-h-[1.25rem] reserves exactly ONE line at text-xs, and which
-// the space is not enough on its own — a message too long for one line
+// cuts a message too long for that line with an ellipsis rather than wrap
-// wraps and pushes everything below it down anyway, which is what the
+// it. This shows the real message and measures that nothing moves; the
-// first version of this change shipped: 75 characters, 32px, the settings
+// test after it does the same with a message several lines long. Both
-// view and the threshold field 12px lower than with an empty line.
+// measure rather than inspect markup: the unit suite runs on the node
-//
+// environment with no layout engine, where every height is zero (see the
-// So this measures rather than inspects markup. It is the only assertion
+// note in tests/dustThreshold.test.js).
-// in the repo that can see the wording grow: the unit suite runs on the
-// node environment with no layout engine, where every height is zero (see
-// the note in tests/dustThreshold.test.js). Lengthen
-// DUST_THRESHOLD_MESSAGE past one line and this test goes red.
 test("a rejected dust threshold shifts no layout (#233)", async (env) => {
     const page = await openPopup(env.ctx, env.popupUrl);
     try {
@@ -1377,11 +1373,11 @@ test("a rejected dust threshold shifts no layout (#233)", async (env) => {
         );
         assert(
             after.flashHeight === before.flashHeight,
-            "the message does not fit the reserved line: " +
+            "the message does not keep to the reserved line: " +
                 before.flashHeight +
                 "px empty vs " +
                 after.flashHeight +
-                "px with the message. Shorten DUST_THRESHOLD_MESSAGE",
+                "px with the message",
         );
         assert(
             after.settingsTop === before.settingsTop,
@@ -1400,6 +1396,59 @@ test("a rejected dust threshold shifts no layout (#233)", async (env) => {
     }
 });
 
+// ------------------------------------------------ the flash line (#252)
+
+// #flash-msg never wraps: a message too long for its one line is cut with an
+// ellipsis (see showFlash() in src/popup/views/helpers.js). This puts a
+// message several lines long into it and measures that the line and the
+// screen below it stay where they were.
+test("an over-long flash message keeps to one line (#252)", async (env) => {
+    const page = await openPopup(env.ctx, env.popupUrl);
+    try {
+        await page.setViewportSize(POPUP_VIEWPORT);
+        await openSettings(page);
+
+        const before = await page.evaluate(measureFlashLine);
+        const overflows = await page.evaluate(() => {
+            const line = document.getElementById("flash-msg");
+            line.textContent =
+                "This message is far too long for one line. ".repeat(5);
+            return line.scrollWidth > line.clientWidth;
+        });
+        const after = await page.evaluate(measureFlashLine);
+
+        assert(
+            after.flashHeight === before.flashHeight,
+            "the flash line is " +
+                before.flashHeight +
+                "px before and " +
+                after.flashHeight +
+                "px with an over-long message, so it wraps",
+        );
+        assert(
+            after.settingsTop === before.settingsTop,
+            "the settings view moved " +
+                (after.settingsTop - before.settingsTop) +
+                "px when the message appeared",
+        );
+        assert(
+            after.fieldTop === before.fieldTop,
+            "the dust threshold field moved " +
+                (after.fieldTop - before.fieldTop) +
+                "px when the message appeared",
+        );
+        // Checked last: a line that wraps does not run past its right edge,
+        // so this only shows the message really was cut once nothing moved.
+        assert(
+            overflows,
+            "the message fits on the line, so it proves nothing: " +
+                JSON.stringify(after.text),
+        );
+    } finally {
+        await page.close();
+    }
+});
+
 // --------------------------------------------- confirmation screen (#238)
 //
 // The screen that decides what gets signed. The arithmetic underneath it

tests/flashLine.test.js

@@ -0,0 +1,130 @@
+// The flash line (#252). #flash-msg reserves one line and cuts a message too
+// long for it with an ellipsis; that is measured in a real browser by
+// tests/e2e/run.js. Here: showFlash() keeps the whole message readable in the
+// line's title, and the two add-token screens flash a fixed line, not the text
+// of whatever error adding the token threw.
+
+const ADDRESS = "0x1111111111111111111111111111111111111111";
+
+let elements;
+
+function fakeElement() {
+    return {
+        value: "",
+        textContent: "",
+        title: "",
+        style: {},
+        listeners: {},
+        addEventListener(event, handler) {
+            this.listeners[event] = handler;
+        },
+    };
+}
+
+// Stands in for document.getElementById(): one fake element per id.
+function element(id) {
+    return (elements[id] ||= fakeElement());
+}
+
+beforeEach(() => {
+    jest.resetModules();
+    elements = {};
+    globalThis.document = { getElementById: element };
+    // state.js reads chrome.storage.local at load.
+    globalThis.chrome = {
+        storage: { local: { get: async () => ({}), set: async () => {} } },
+    };
+});
+
+afterEach(() => {
+    jest.dontMock("../src/popup/views/helpers");
+    jest.dontMock("../src/shared/state");
+    jest.dontMock("../src/shared/balances");
+    jest.restoreAllMocks();
+    jest.useRealTimers();
+    delete globalThis.document;
+    delete globalThis.chrome;
+});
+
+test("showFlash() puts the whole message in the title, and clears both", () => {
+    jest.useFakeTimers();
+    const { showFlash } = require("../src/popup/views/helpers");
+
+    showFlash("Saved.");
+    expect(element("flash-msg").textContent).toBe("Saved.");
+    expect(element("flash-msg").title).toBe("Saved.");
+
+    jest.advanceTimersByTime(2000);
+    expect(element("flash-msg").textContent).toBe("");
+    expect(element("flash-msg").title).toBe("");
+});
+
+describe.each([
+    ["addToken", "add-token-address", "btn-add-token-confirm"],
+    [
+        "settingsAddToken",
+        "settings-addtoken-address",
+        "btn-settings-addtoken-manual",
+    ],
+])("adding a token on %s", (view, field, button) => {
+    let flashes;
+    let errors;
+
+    // Clicks the screen's add button with lookupTokenInfo() and saveState()
+    // replaced by the given functions.
+    async function add(lookupTokenInfo, saveState) {
+        flashes = [];
+        errors = jest.spyOn(console, "error").mockImplementation(() => {});
+        jest.spyOn(console, "log").mockImplementation(() => {});
+        jest.doMock("../src/shared/balances", () => ({ lookupTokenInfo }));
+        jest.doMock("../src/shared/state", () => ({
+            state: { trackedTokens: [] },
+            saveState,
+        }));
+        jest.doMock("../src/popup/views/helpers", () => ({
+            $: element,
+            showView: () => {},
+            showFlash: (msg) => flashes.push(msg),
+            escapeHtml: (s) => s,
+            goBack: () => {},
+        }));
+
+        require("../src/popup/views/" + view).init({
+            doRefreshAndRender: () => {},
+        });
+        element(field).value = ADDRESS;
+        await element(button).listeners.click();
+    }
+
+    test("a failed save flashes a fixed line and logs the error", async () => {
+        const detail = "A sentence about the stored record. ".repeat(4);
+
+        await add(
+            async () => ({ symbol: "TKN", decimals: 18, name: "Token" }),
+            async () => {
+                throw new Error(detail);
+            },
+        );
+
+        expect(flashes).toEqual(["Could not add the token."]);
+        expect(errors).toHaveBeenCalledWith(
+            "[AutistMask]",
+            "Adding token failed for",
+            ADDRESS,
+            detail,
+        );
+    });
+
+    test("a contract that is not a token flashes the lookup message", async () => {
+        const detail = "Not a valid ERC-20 token (symbol() failed).";
+
+        await add(
+            async () => {
+                throw new Error(detail);
+            },
+            async () => {},
+        );
+
+        expect(flashes).toEqual([detail]);
+    });
+});