fix: a saved SuccessTx in another shape reopens as itself, and long amounts wrap (closes #740)

The popup refused a saved SuccessTx whose decoded record was in a shape it
did not expect, and showed Home. SuccessTx already shows only the lines it
can read, so the popup no longer checks the record first.

A long amount or token symbol was cut off at the edge of the screen. The
Amount figure, each decoded amount and the token symbol now wrap. WaitTx and
ErrorTx share the line that shows the symbol, so they gain this too.

Model: opus-5-5

src/popup/index.html

@@ -833,7 +833,10 @@
                 <div id="success-tx-decoded" class="mb-3 hidden text-xs"></div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">Amount</div>
-                    <div id="success-tx-summary" class="font-bold"></div>
+                    <div
+                        id="success-tx-summary"
+                        class="font-bold break-words"
+                    ></div>
                 </div>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">To</div>

src/popup/viewRouter.js

@@ -116,21 +116,6 @@ function isAddressText(value) {
     return isText(value);
 }
 
-// Decoded calldata, as decodedDetailsHtml() (src/popup/views/txStatus.js)
-// walks it: `for (const d of decoded.details)` needs an iterable, and each
-// entry's `address` reaches toAddressHtml(). Absent or falsy is the ordinary
-// case and short-circuits before either.
-function isRenderableDecoded(value) {
-    if (!value) return true;
-    if (!isRecord(value)) return false;
-    if (!value.details) return true;
-    if (!Array.isArray(value.details)) return false;
-    return value.details.every(
-        (entry) =>
-            isRecord(entry) && (!entry.address || isAddressText(entry.address)),
-    );
-}
-
 // The pending transaction confirmTx.show() renders: `token` reaches
 // renderAddressHtml() when it is not "ETH", `from`/`to` reach
 // addressTitle(), makeBlockie() and getLocalWarnings(), and `amount` reaches
@@ -209,7 +194,6 @@ function renderView(view, state, views) {
         case "success-tx":
             if (!data.hash) return false;
             if (!isAddressText(data.to)) return false;
-            if (!isRenderableDecoded(data.decoded)) return false;
             // `chainId` picks the network whose explorer the links open, so
             // when it is there it has to name one. Likewise on error-tx.
             if (data.chainId && !SUPPORTED_CHAIN_IDS.has(data.chainId)) {

src/popup/views/txStatus.js

@@ -91,7 +91,7 @@ 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">${escapeHtml(sym)}</div>` +
+        `<div class="font-bold break-words">${escapeHtml(sym)}</div>` +
         blockscoutOffTokenNoteHtml(d.address, chainId) +
         toAddressHtml(d.address, chainId)
     );
@@ -341,7 +341,7 @@ function decodedDetailsHtml(decoded, chainId) {
         if (d.address) {
             html += decodedAddressHtml(d, chainId);
         } else {
-            html += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+            html += `<div class="font-bold break-words">${escapeHtml(d.value)}</div>`;
         }
         html += `</div>`;
     }

tests/persistedFieldContract.test.js

@@ -416,20 +416,6 @@ const CONTRACT = [
                 views: ["success-tx"],
                 restored: false,
             },
-            {
-                value: { hash: "0x1", to: ADDRESS, decoded: { details: 7 } },
-                views: ["success-tx"],
-                restored: false,
-            },
-            {
-                value: {
-                    hash: "0x1",
-                    to: ADDRESS,
-                    decoded: { details: [{ address: 42 }] },
-                },
-                views: ["success-tx"],
-                restored: false,
-            },
             // error-tx passes on `data.message`, same dereference.
             {
                 value: { message: "boom" },
@@ -1082,3 +1068,51 @@ describe("a restore-only hostile value onto", () => {
         }
     }
 });
+
+// A saved decoded record comes back from storage, in whatever shape it is in.
+// SuccessTx reopens as itself and shows only the lines it can read.
+describe("a popup reopened on a SuccessTx with a decoded record in another shape", () => {
+    function savedSuccess(decoded) {
+        return restoringOnto("success-tx", {
+            viewData: {
+                amount: "1.0000",
+                symbol: "ETH",
+                to: ADDRESS,
+                hash: "0x1",
+                chainId: "0x1",
+                decoded,
+            },
+        });
+    }
+
+    test.each([
+        7,
+        "text",
+        [1, 2],
+        { details: 7 },
+        { details: [null] },
+        { details: [7] },
+        { details: [{ address: 42 }] },
+        { details: [{ label: "Steps", value: "text", address: 42 }] },
+    ])("%j shows the amount and the recipient", async (decoded) => {
+        const page = await bootPopup(savedSuccess(decoded));
+        expect(page.pageErrors).toEqual([]);
+        expect(page.visibleViews()).toEqual(["success-tx"]);
+        expect(page.hidden("success-tx-decoded")).toBe(true);
+        expect(page.text("success-tx-summary")).toBe("1.0000 ETH");
+        expect(page.node("success-tx-to").innerHTML).toContain(ADDRESS);
+    });
+
+    test("a line it can read is shown", async () => {
+        const page = await bootPopup(
+            savedSuccess({
+                details: [null, { label: "Steps", value: "V3_SWAP_EXACT_IN" }],
+            }),
+        );
+        expect(page.pageErrors).toEqual([]);
+        expect(page.visibleViews()).toEqual(["success-tx"]);
+        expect(page.node("success-tx-decoded").innerHTML).toContain(
+            "V3_SWAP_EXACT_IN",
+        );
+    });
+});

tests/swapStatusAmount.test.js

@@ -459,7 +459,7 @@ describe("a swap that gives another spender an allowance", () => {
         expect(html).toContain("Permit2 allowance");
         expect(html).toContain("Unlimited");
         expect(html).toContain("Allowance token");
-        expect(html).toContain('<div class="font-bold">USDC</div>');
+        expect(html).toContain('<div class="font-bold break-words">USDC</div>');
         expect(html).toContain(`data-copy="${USDC}"`);
     }
 

tests/txStatus.test.js

@@ -636,7 +636,7 @@ describe("SuccessTx and ErrorTx for a Sepolia transaction with mainnet active",
     test("SuccessTx's decoded action names the token from the tokens tracked on Sepolia", async () => {
         function expectTokenNamed() {
             expect(getElement("success-tx-decoded").innerHTML).toContain(
-                '<div class="font-bold">TDOL</div>',
+                '<div class="font-bold break-words">TDOL</div>',
             );
         }
         state.networkTrackedTokens = {
@@ -810,7 +810,7 @@ describe("the Permit2 allowance lines of a swap on WaitTx and ErrorTx", () => {
         expect(html.indexOf("Unlimited")).toBeLessThan(
             html.indexOf("Allowance token"),
         );
-        expect(html).toContain('<div class="font-bold">USDC</div>');
+        expect(html).toContain('<div class="font-bold break-words">USDC</div>');
         expect(html).toContain(`data-copy="${USDC}"`);
         expect(html).toContain(`href="https://etherscan.io/address/${USDC}"`);
         expect(html).toMatch(/<div class="text-xs">.*class="am-address"/);
@@ -869,7 +869,7 @@ describe("the Permit2 allowance lines of a swap on WaitTx and ErrorTx", () => {
 // An amount of about 47 digits or more is wider than the screen. Without the
 // break-words class its last digits are cut off at the edge. That class keeps
 // the words of a line such as `(decimals unknown)` whole.
-describe("a long amount on WaitTx and ErrorTx", () => {
+describe("a long amount on WaitTx, ErrorTx and SuccessTx", () => {
     test("each amount under the Amount figure wraps", () => {
         const decoded = {
             details: [
@@ -896,6 +896,22 @@ describe("a long amount on WaitTx and ErrorTx", () => {
         expect(html).toMatch(
             /id="error-tx-summary"\s+class="font-bold break-words"/,
         );
+        expect(html).toMatch(
+            /id="success-tx-summary"\s+class="font-bold break-words"/,
+        );
+    });
+
+    test("each amount of SuccessTx's decoded action wraps", () => {
+        state.viewData = {
+            hash: TX_HASH,
+            to: RECIPIENT,
+            chainId: TX_INFO.chainId,
+            decoded: { details: [{ label: "Amount", value: "1.0000 ETH" }] },
+        };
+        txStatus.renderSuccess();
+        expect(getElement("success-tx-decoded").innerHTML).toContain(
+            '<div class="font-bold break-words">1.0000 ETH<',
+        );
     });
 });