fix: the wait and error screens show a swap's Permit2 allowance amounts (closes #733)

A swap can give another spender an allowance that its Amount figure leaves
out, and these two screens did not show it. Both now show each Permit2
allowance amount under the figure, with the Moved from the sender amounts.
movedFromSenderHtml() is now movedOrAllowedHtml(), as it shows both.

An amount too long for one line now wraps on these screens, rather than losing
its last digits at the screen's edge.

Model: opus-5-5

tests/txStatus.test.js

@@ -101,6 +101,9 @@ global.document = {
 
 global.window = { location: { search: "" } };
 
+const fs = require("fs");
+const path = require("path");
+
 // Clones in both directions, as the real chrome.storage.local does; the stub
 // here used to hand back the live stored object, so an in-memory mutation
 // looked like a write that had reached storage. See
@@ -743,6 +746,7 @@ describe("the Moved from the sender lines of a swap on WaitTx and ErrorTx", () =
             { details: [{ label: "Moved from the sender" }] },
             { details: [moved(7)] },
             { details: [moved({ toString: 1 })] },
+            { details: [{ label: "Permit2 allowance", value: 7 }] },
         ]) {
             expect(noteOnReopen(saved)).toBe("");
         }
@@ -752,6 +756,74 @@ describe("the Moved from the sender lines of a swap on WaitTx and ErrorTx", () =
     });
 });
 
+describe("the Permit2 allowance lines of a swap on WaitTx and ErrorTx", () => {
+    const allowance = (value) => ({ label: "Permit2 allowance", value });
+    const decoded = {
+        details: [
+            allowance("Unlimited"),
+            { label: "Allowance token", value: "USDC" },
+            allowance("<b>400.0000</b> DAI"),
+        ],
+    };
+
+    function expectEveryLine(id) {
+        const html = getElement(id).innerHTML;
+        expect(html).toContain("Permit2 allowance");
+        expect(html).toContain("Unlimited");
+        expect(html).toContain("&lt;b&gt;400.0000&lt;/b&gt; DAI");
+        expect(html).not.toContain("Allowance token");
+    }
+
+    test("WaitTx shows each line's amount, escaped", () => {
+        mockReceiptLookup.mockResolvedValue(null);
+        txStatus.showWait({ ...TX_INFO, decoded }, TX_HASH);
+        expectEveryLine("wait-tx-token-note");
+    });
+
+    test("ErrorTx shows each line's amount, escaped", () => {
+        txStatus.showError({ ...TX_INFO, decoded }, TX_HASH, "It failed.");
+        expectEveryLine("error-tx-token-note");
+    });
+
+    test("a wait that ends in ErrorTx keeps them", async () => {
+        mockReceiptLookup.mockResolvedValue(null);
+        txStatus.showWait({ ...TX_INFO, decoded }, TX_HASH);
+        await jest.advanceTimersByTimeAsync(60000);
+        expect(state.currentView).toBe("error-tx");
+        expectEveryLine("error-tx-token-note");
+    });
+});
+
+// An amount of about 47 digits or more is wider than the screen. Without the
+// break-all class its last digits are cut off at the edge.
+describe("a long amount on WaitTx and ErrorTx", () => {
+    test("each amount under the Amount figure wraps", () => {
+        const decoded = {
+            details: [
+                { label: "Moved from the sender", value: "1.0000 ETH" },
+                { label: "Permit2 allowance", value: "Unlimited" },
+            ],
+        };
+        txStatus.showError({ ...TX_INFO, decoded }, TX_HASH, "It failed.");
+        const html = getElement("error-tx-token-note").innerHTML;
+        expect(html).toContain('<div class="font-bold break-all">1.0000 ETH<');
+        expect(html).toContain('<div class="font-bold break-all">Unlimited<');
+    });
+
+    test("the Amount figure wraps", () => {
+        const html = fs.readFileSync(
+            path.join(__dirname, "..", "src", "popup", "index.html"),
+            "utf8",
+        );
+        expect(html).toMatch(
+            /id="wait-tx-summary"\s+class="font-bold break-all"/,
+        );
+        expect(html).toMatch(
+            /id="error-tx-summary"\s+class="font-bold break-all"/,
+        );
+    });
+});
+
 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