SignTransaction: handle multi-transaction signing and staking

Support signing multiple transactions in a single request, with both
TransactionData[] and serialized Uint8Array[] formats. Staking
transactions are signed using KeyPair.derive + transaction.sign()
instead of manual SignatureProof construction.

Adds a multi-transaction UI with per-transaction cards, totals, and
a "Confirm transactions" button variant.

Author: Mathéo

src/components/PasswordBox.js

@@ -79,6 +79,7 @@ class PasswordBox extends Observable {
             'passwordbox-log-in': '<button class="submit" data-i18n="passwordbox-log-in">Unlock</button>',
             'passwordbox-log-out': '<button class="submit" data-i18n="passwordbox-log-out">Confirm logout</button>',
             'passwordbox-confirm-tx': '<button class="submit" data-i18n="passwordbox-confirm-tx">Confirm transaction</button>',
+            'passwordbox-confirm-txs': '<button class="submit" data-i18n="passwordbox-confirm-txs">Confirm transactions</button>',
             'passwordbox-create-cashlink': '<button class="submit" data-i18n="passwordbox-create-cashlink">Create cashlink</button>',
             'passwordbox-show-words': '<button class="submit" data-i18n="passwordbox-show-words">Show recovery words</button>',
             'passwordbox-sign-msg': '<button class="submit" data-i18n="passwordbox-sign-msg">Sign message</button>',

src/lib/RequestParser.js

@@ -212,7 +212,10 @@ class RequestParser { // eslint-disable-line no-unused-vars
                 );
             }
 
-            if (tx.sender.equals(tx.recipient)) {
+            // Allow sender=recipient for staking transactions (e.g., retire stake)
+            if (tx.sender.equals(tx.recipient)
+                && tx.senderType !== Nimiq.AccountType.Staking
+                && tx.recipientType !== Nimiq.AccountType.Staking) {
                 throw new Error('Sender and recipient must not match');
             }
 

src/request/sign-transaction/SignTransaction.css

@@ -157,3 +157,109 @@ nothing breaks in SignMultisigTransaction. */
     max-width: 100%;
     overflow-wrap: break-word;
 }
+
+/* Multi-transaction styles */
+#confirm-transaction.multi .hide-multi {
+    display: none;
+}
+
+/* Show only in multi-transaction mode */
+#confirm-transaction .multi-only {
+    display: none;
+}
+
+#confirm-transaction.multi .multi-only {
+    display: block;
+}
+
+#confirm-transaction .multi-transaction {
+    padding: 2rem;
+}
+
+#confirm-transaction .multi-transaction .transaction-summary {
+    text-align: center;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid rgba(31, 35, 72, 0.1);
+}
+
+#confirm-transaction .multi-transaction .transaction-list {
+    max-height: 35rem; /* ~280px, allows ~4-5 compact cards */
+    overflow-y: auto;
+    margin: 0 -2rem;
+    padding: 0 2rem;
+}
+
+#confirm-transaction .transaction-card {
+    display: flex;
+    align-items: center;
+    padding: 1.5rem 0;
+    border-bottom: 1px solid rgba(31, 35, 72, 0.1);
+}
+
+#confirm-transaction .transaction-card:last-child {
+    border-bottom: none;
+}
+
+#confirm-transaction .transaction-card .identicon {
+    width: 5rem;
+    height: 5rem;
+    flex-shrink: 0;
+}
+
+#confirm-transaction .transaction-card .tx-details {
+    flex-grow: 1;
+    margin: 0 1.5rem;
+    overflow: hidden;
+    min-width: 0;
+}
+
+#confirm-transaction .transaction-card .tx-address {
+    font-size: 1.625rem;
+    font-family: 'Fira Mono', monospace;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    opacity: 0.6;
+}
+
+#confirm-transaction .transaction-card .tx-label {
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+#confirm-transaction .transaction-card .tx-value {
+    font-weight: 600;
+    white-space: nowrap;
+    text-align: right;
+    color: var(--nimiq-light-blue);
+}
+
+#confirm-transaction .transaction-card .tx-fee {
+    font-size: 1.5rem;
+    opacity: 0.5;
+    text-align: right;
+    white-space: nowrap;
+}
+
+#confirm-transaction .multi-transaction .transaction-totals {
+    padding-top: 1.5rem;
+    text-align: center;
+    border-top: 1px solid rgba(31, 35, 72, 0.1);
+}
+
+#confirm-transaction .multi-transaction .total-value {
+    font-size: 4rem;
+    font-weight: bold;
+}
+
+#confirm-transaction .multi-transaction .total-value .nim-symbol {
+    margin-left: 1rem;
+    font-weight: 700;
+}
+
+#confirm-transaction .multi-transaction .total-fees {
+    opacity: 0.5;
+    margin-top: 0.5rem;
+}