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/tokenTransferDetail.test.js

@@ -21,6 +21,8 @@
 // calls. Driven against a minimal DOM stub in the shape
 // tests/contractCreation.test.js uses.
 
+const fs = require("fs");
+const path = require("path");
 const { Interface } = require("ethers");
 
 jest.mock("../src/shared/log", () => ({
@@ -51,6 +53,7 @@ globalThis.chrome = {
 const { state } = require("../src/shared/state");
 const { NETWORKS } = require("../src/shared/networks");
 const { fetchRecentTransactions } = require("../src/shared/transactions");
+const { displaySymbol } = require("../src/shared/symbolDisplay");
 const transactionDetail = require("../src/popup/views/transactionDetail");
 
 const EXPLORER = "https://explorer.example/api/v2";
@@ -197,15 +200,63 @@ test("a token transfer's decoded details name the token contract and the amount
         "Token Transfer",
     );
     const token = decodedLine("Token");
-    expect(token).toContain('<div class="font-bold">TDOL</div>');
+    expect(token).toContain('<div class="font-bold break-words">TDOL</div>');
     expect(token).toContain(TOKEN);
     expect(token).not.toContain(RECIPIENT);
     expect(decodedLine("Recipient")).toContain(RECIPIENT);
     expect(decodedLine("Amount")).toContain(
-        '<div class="font-bold">1234.5000 TDOL</div>',
+        '<div class="font-bold break-words">1234.5000 TDOL</div>',
     );
 });
 
+// Nothing limits the length of a symbol the explorer reports. Without the
+// break-words class a long one runs past the right edge of the screen and is
+// cut off.
+describe("a long token symbol", () => {
+    const LONG = "L".repeat(60);
+
+    test("wraps on the amount, native quantity and decoded lines", async () => {
+        state.trackedTokens = [{ address: TOKEN, symbol: LONG, decimals: 6 }];
+        const [row] = await fetchRecentTransactions(
+            HOLDER,
+            EXPLORER,
+            NETWORKS.mainnet.chainId,
+        );
+        transactionDetail.show({
+            ...row,
+            symbol: LONG,
+            rawUnit: LONG + " base units (10^-6)",
+        });
+        for (let i = 0; i < 10; i++) await new Promise((r) => setTimeout(r, 0));
+
+        expect(node("tx-detail-value").innerHTML).toContain(
+            `font-bold break-words" data-copy="1234.5 ${displaySymbol(LONG)}"`,
+        );
+        expect(node("tx-detail-native").innerHTML).toContain(
+            `break-words" data-copy="1234500000 ${LONG} base units (10^-6)"`,
+        );
+        expect(node("tx-detail-calldata-details").innerHTML).toContain(
+            `<div class="mb-2 break-words">Transfer ${LONG}</div>`,
+        );
+        expect(decodedLine("Token")).toContain(
+            `<div class="font-bold break-words">${displaySymbol(LONG)}</div>`,
+        );
+        expect(decodedLine("Amount")).toContain(
+            `<div class="font-bold break-words">1234.5000 ${LONG}</div>`,
+        );
+    });
+
+    test("wraps on the Action line", () => {
+        const html = fs.readFileSync(
+            path.join(__dirname, "..", "src", "popup", "index.html"),
+            "utf8",
+        );
+        expect(html).toMatch(
+            /id="tx-detail-calldata-action"\s+class="text-xs font-bold mb-2 break-words"/,
+        );
+    });
+});
+
 // Mainnet is active, and its Blockscout knows nothing of the transaction. The
 // row was read from the Blockscout Settings remembers for Sepolia, and the
 // screen reads the transaction from there too, so every link on it is drawn.
@@ -278,9 +329,11 @@ test("with mainnet active, a Sepolia token transfer's decoded details name the t
     };
     await showSepoliaTransferWithMainnetActive();
 
-    expect(decodedLine("Token")).toContain('<div class="font-bold">TDOL</div>');
+    expect(decodedLine("Token")).toContain(
+        '<div class="font-bold break-words">TDOL</div>',
+    );
     expect(decodedLine("Amount")).toContain(
-        '<div class="font-bold">1234.5000 TDOL</div>',
+        '<div class="font-bold break-words">1234.5000 TDOL</div>',
     );
 });
 
@@ -295,6 +348,6 @@ test("with mainnet active, a Sepolia token transfer's decoded details take nothi
 
     expect(decodedLine("Token")).not.toContain("MDOL");
     expect(decodedLine("Amount")).toContain(
-        '<div class="font-bold">1234500000 base units (decimals unknown)</div>',
+        '<div class="font-bold break-words">1234500000 base units (decimals unknown)</div>',
     );
 });