Implement eth_sendTransaction for dApp-initiated transactions

Show a confirmation popup with tx details (from, to, value, data) and
password prompt when a dApp calls eth_sendTransaction. Sign and broadcast
the transaction in the background, returning the tx hash to the dApp.

src/popup/index.html

@@ -694,6 +694,54 @@
                 </div>
             </div>
 
+            <!-- ============ TRANSACTION APPROVAL ============ -->
+            <div id="view-approve-tx" class="view hidden">
+                <h2 class="font-bold mb-2">Transaction Request</h2>
+                <p class="mb-2">
+                    <span id="approve-tx-hostname" class="font-bold"></span>
+                    wants to send a transaction.
+                </p>
+                <div class="mb-2">
+                    <div class="text-xs text-muted mb-1">From</div>
+                    <div id="approve-tx-from" class="text-xs break-all"></div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-xs text-muted mb-1">To</div>
+                    <div id="approve-tx-to" class="text-xs break-all"></div>
+                </div>
+                <div class="mb-2">
+                    <div class="text-xs text-muted mb-1">Value</div>
+                    <div id="approve-tx-value" class="text-xs font-bold"></div>
+                </div>
+                <div id="approve-tx-data-section" class="mb-2 hidden">
+                    <div class="text-xs text-muted mb-1">Data</div>
+                    <div id="approve-tx-data" class="text-xs break-all"></div>
+                </div>
+                <div class="mb-2">
+                    <label class="block mb-1 text-xs">Password</label>
+                    <input
+                        type="password"
+                        id="approve-tx-password"
+                        class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
+                    />
+                </div>
+                <div id="approve-tx-error" class="text-xs hidden mb-2"></div>
+                <div class="flex justify-between">
+                    <button
+                        id="btn-approve-tx"
+                        class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                    >
+                        Confirm
+                    </button>
+                    <button
+                        id="btn-reject-tx"
+                        class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
+                    >
+                        Reject
+                    </button>
+                </div>
+            </div>
+
             <!-- ============ SITE APPROVAL ============ -->
             <div id="view-approve-site" class="view hidden">
                 <h2 class="font-bold mb-2">Connection Request</h2>

src/popup/views/approval.js

@@ -1,11 +1,26 @@
-const { $, formatAddressHtml } = require("./helpers");
+const { $, formatAddressHtml, showView } = require("./helpers");
 const { state, saveState } = require("../../shared/state");
+const { formatEther } = require("ethers");
 
 const runtime =
     typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
 
 let approvalId = null;
 
+function showTxApproval(details) {
+    $("approve-tx-hostname").textContent = details.hostname;
+    $("approve-tx-from").textContent = state.activeAddress;
+    $("approve-tx-to").textContent =
+        details.txParams.to || "(contract creation)";
+    $("approve-tx-value").textContent =
+        formatEther(details.txParams.value || "0") + " ETH";
+    if (details.txParams.data && details.txParams.data !== "0x") {
+        $("approve-tx-data").textContent = details.txParams.data;
+        $("approve-tx-data-section").classList.remove("hidden");
+    }
+    showView("approve-tx");
+}
+
 function show(id) {
     approvalId = id;
     // Connect a port so the background detects if the popup closes
@@ -16,6 +31,10 @@ function show(id) {
             window.close();
             return;
         }
+        if (details.type === "tx") {
+            showTxApproval(details);
+            return;
+        }
         $("approve-hostname").textContent = details.hostname;
         $("approve-address").innerHTML = formatAddressHtml(
             state.activeAddress,
@@ -53,6 +72,25 @@ function init(ctx) {
         });
         window.close();
     });
+
+    $("btn-approve-tx").addEventListener("click", () => {
+        runtime.sendMessage({
+            type: "AUTISTMASK_TX_RESPONSE",
+            id: approvalId,
+            approved: true,
+            password: $("approve-tx-password").value,
+        });
+        window.close();
+    });
+
+    $("btn-reject-tx").addEventListener("click", () => {
+        runtime.sendMessage({
+            type: "AUTISTMASK_TX_RESPONSE",
+            id: approvalId,
+            approved: false,
+        });
+        window.close();
+    });
 }
 
 module.exports = { init, show };

src/popup/views/helpers.js

@@ -20,6 +20,7 @@ const VIEWS = [
     "settings",
     "transaction",
     "approve-site",
+    "approve-tx",
 ];
 
 function $(id) {