fix: long symbols wrap on TxApproval and TransactionDetail, and SuccessTx keeps its amount and recipient (closes #743)

TxApproval and TransactionDetail cut off a long symbol, amount or description at
the edge of the screen. These lines now wrap.

SuccessTx hid its Amount and To lines whenever it had a decoded action, even one
that showed neither. Each line is now hidden only when a readable decoded line
shows the same thing. A swap with no Amount line now shows its amount on
SuccessTx, as WaitTx and ErrorTx do.

Model: opus-5-5

tests/txStatus.test.js

@@ -118,6 +118,7 @@ const { state } = require("../src/shared/state");
 const { NETWORKS } = require("../src/shared/networks");
 const { RESTORABLE_VIEWS } = require("../src/shared/restorableViews");
 const { log } = require("../src/shared/log");
+const { CONTRACT_CREATION_TEXT } = require("../src/popup/views/helpers");
 
 const TX_HASH =
     "0x85215772ed26ea8b39c2b3b18779030487efbe0b5fd7e882592b2f62b837be84";
@@ -1009,6 +1010,80 @@ describe("a saved wait in another shape when its receipt arrives", () => {
     });
 });
 
+// The decoded action stands in for the Amount and To lines only where it shows
+// the same thing. A saved record with unreadable lines can leave out either.
+describe("SuccessTx's Amount and To lines beside a decoded action", () => {
+    const OTHER = "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238";
+    const STEPS = { label: "Steps", value: "V3_SWAP_EXACT_IN" };
+    const AMOUNT = { label: "Amount", value: "0.0050 ETH" };
+    const RECIPIENT_LINE = {
+        label: "Recipient",
+        value: RECIPIENT,
+        address: RECIPIENT,
+    };
+    const SPENDER = { label: "Spender", value: OTHER, address: OTHER };
+
+    function renderSuccessWith(details, to) {
+        state.viewData = {
+            amount: "0.0050",
+            symbol: "ETH",
+            to,
+            hash: TX_HASH,
+            chainId: TX_INFO.chainId,
+            decoded: { details },
+        };
+        txStatus.renderSuccess();
+    }
+
+    function lineHidden(id) {
+        return getElement(id + "-parent").classList.contains("hidden");
+    }
+
+    test.each([
+        ["no line for either", [STEPS], false, false],
+        ["a line of another address", [AMOUNT, SPENDER], true, false],
+        ["an Amount line only", [AMOUNT], true, false],
+        ["a Recipient line only", [RECIPIENT_LINE], false, true],
+        [
+            "an unreadable Amount line",
+            [{ label: "Amount" }, RECIPIENT_LINE],
+            false,
+            true,
+        ],
+        [
+            "an unreadable Recipient line",
+            [AMOUNT, { address: RECIPIENT }],
+            true,
+            false,
+        ],
+        ["a line for each", [AMOUNT, RECIPIENT_LINE], true, true],
+    ])("%s", (_name, details, amountHidden, toHidden) => {
+        renderSuccessWith(details, RECIPIENT);
+        expect(state.currentView).toBe("success-tx");
+        expect(lineHidden("success-tx-summary")).toBe(amountHidden);
+        expect(lineHidden("success-tx-to")).toBe(toHidden);
+    });
+
+    test("the lines read the amount and the recipient", () => {
+        renderSuccessWith([STEPS], RECIPIENT);
+        expect(getElement("success-tx-summary").textContent).toBe("0.0050 ETH");
+        expect(getElement("success-tx-to").innerHTML).toContain(RECIPIENT);
+    });
+
+    // A contract creation's data can decode as an ERC-20 call, with an empty
+    // token address.
+    test("a contract creation keeps its To line", () => {
+        renderSuccessWith(
+            [{ label: "Token", value: "", address: "", isToken: true }],
+            "",
+        );
+        expect(lineHidden("success-tx-to")).toBe(false);
+        expect(getElement("success-tx-to").innerHTML).toBe(
+            CONTRACT_CREATION_TEXT,
+        );
+    });
+});
+
 describe("wait-tx is a view the popup may reopen onto", () => {
     // The resume feature is wired through RESTORABLE_VIEWS: restoreView()
     // refuses any view not in the set, so dropping "wait-tx" from it kills