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

src/popup/index.html

@@ -810,7 +810,7 @@
                 <h2 class="font-bold mb-2">Transaction Broadcast</h2>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">Amount</div>
-                    <div id="wait-tx-summary" class="font-bold"></div>
+                    <div id="wait-tx-summary" class="font-bold break-all"></div>
                     <div id="wait-tx-token-note"></div>
                 </div>
                 <div class="mb-3">
@@ -857,7 +857,10 @@
                 <h2 class="font-bold mb-2">Transaction Failed</h2>
                 <div class="mb-3">
                     <div class="text-xs text-muted mb-1">Amount</div>
-                    <div id="error-tx-summary" class="font-bold"></div>
+                    <div
+                        id="error-tx-summary"
+                        class="font-bold break-all"
+                    ></div>
                     <div id="error-tx-token-note"></div>
                 </div>
                 <div class="mb-3">

src/popup/views/txStatus.js

@@ -73,24 +73,25 @@ function toAddressHtml(address, chainId) {
     return renderAddressHtml(address, { title, chainId });
 }
 
-// The amount of each `Moved from the sender` line of a decoded swap, for the
-// wait and error screens to show under the Amount figure. That figure can leave
-// these amounts out, so alone it can read as less than can have left the
-// wallet. `decoded` can come back from storage in any shape, so this shows only
-// the lines whose value is text.
-function movedFromSenderHtml(decoded) {
+// The amount of each `Moved from the sender` and `Permit2 allowance` line of a
+// decoded swap, for the wait and error screens to show under the Amount figure.
+// That figure can leave these amounts out, so alone it can understate what can
+// leave the wallet. `decoded` can come back from storage in any shape, so this
+// shows only the lines whose value is text.
+function movedOrAllowedHtml(decoded) {
     if (!decoded || !Array.isArray(decoded.details)) return "";
     let html = "";
     for (const d of decoded.details) {
         if (
             !d ||
-            d.label !== "Moved from the sender" ||
+            (d.label !== "Moved from the sender" &&
+                d.label !== "Permit2 allowance") ||
             typeof d.value !== "string"
         )
             continue;
         html += `<div class="mt-2">`;
         html += `<div class="text-xs text-muted mb-1">${escapeHtml(d.label)}</div>`;
-        html += `<div class="font-bold">${escapeHtml(d.value)}</div>`;
+        html += `<div class="font-bold break-all">${escapeHtml(d.value)}</div>`;
         html += `</div>`;
     }
     return html;
@@ -134,7 +135,7 @@ function startWait(txInfo, txHash, broadcastTime, pollNow) {
         txInfo.amount + (symbol ? " " + symbol : "");
     $("wait-tx-token-note").innerHTML =
         blockscoutOffTokenNoteHtml(txInfo.token, txInfo.chainId) +
-        movedFromSenderHtml(txInfo.decoded);
+        movedOrAllowedHtml(txInfo.decoded);
     $("wait-tx-to").innerHTML = toAddressHtml(txInfo.to, txInfo.chainId);
     $("wait-tx-hash").innerHTML = txHashHtml(txHash, txInfo.chainId);
     attachCopyHandlers("view-wait-tx");
@@ -245,7 +246,7 @@ function showWait(txInfo, txHash) {
 // to name a network. txInfo.token and txInfo.tokenSymbol are not checked here.
 // blockscoutOffTokenNoteHtml() shows no line for a token that is not text.
 // Everything else only compares and coalesces them, and tokenSymbol is null for
-// ETH. txInfo.decoded is not checked either: see movedFromSenderHtml().
+// ETH. txInfo.decoded is not checked either: see movedOrAllowedHtml().
 function restoreWait() {
     const d = state.viewData;
     if (!d || !d.pendingWait) return false;
@@ -391,7 +392,7 @@ function renderError() {
         d.amount + (d.symbol ? " " + d.symbol : "");
     $("error-tx-token-note").innerHTML =
         blockscoutOffTokenNoteHtml(d.token, d.chainId) +
-        movedFromSenderHtml(d.decoded);
+        movedOrAllowedHtml(d.decoded);
     $("error-tx-to").innerHTML = toAddressHtml(d.to, d.chainId);
     $("error-tx-message").textContent = d.message;