fix: count the network fee in the confirm-screen balance check (closes #154)

The Send button was enabled whenever the amount alone fit the balance, so
a max-value ETH send passed the confirmation screen and failed at
broadcast, after the user had committed to it.

The arithmetic moves into src/shared/txValidation.js as a pure function
over 18-decimal fixed point: native ETH now requires amount + fee <=
balance, and an ERC-20 transfer requires the ETH balance to cover the fee
on top of the token check, reported as its own error. Validation re-runs
when the async estimate resolves; Send stays disabled while the estimate
is pending and when it fails, so an unknown fee is never treated as zero.
The fee messages are static elements that already reserve their space, so
nothing moves when the estimate lands.

The fee reserved is the one the node will actually require. The send pins
no fee fields, so ethers broadcasts a type-2 transaction and the node
validates it against value + gasLimit * maxFeePerGas; gating on gasPrice
would under-reserve by roughly gasLimit * baseFee and let through exactly
the broadcast failure this change exists to prevent. feeReserveWei()
derives that reserve, falling back to gasPrice only where no type-2
pricing exists. The reserve is read when the screen opens and the
broadcast derives its own, so a base fee that roughly doubles while the
user is at the password field can still outrun it: this turns a
deterministic failure on every max-value send into a rare one, not into
none.

The fee line shows both numbers rather than one - what the transfer is
expected to cost, and below it the larger amount reserved until it
confirms. Quoting only the reserve overstates the typical mainnet cost by
roughly double on every send; quoting only the estimate contradicts the
gate. The second line holds its space from the first paint.

validateTransfer() fails closed: a feeWei that is not a non-negative
bigint under FEE_KNOWN, any unrecognised feeStatus, and a negative amount
all block, rather than counting as a fee of zero or as an amount that
passes every comparison trivially.

src/popup/views/confirmTx.js

@@ -32,11 +32,24 @@ const {
     getFullWarnings,
 } = require("../../shared/addressWarnings");
 const { ERC20_ABI, isBurnAddress } = require("../../shared/constants");
+const {
+    CODES,
+    FEE_PENDING,
+    FEE_KNOWN,
+    FEE_UNAVAILABLE,
+    feeReserveWei,
+    feeEstimateWei,
+    validateTransfer,
+} = require("../../shared/txValidation");
 const { log } = require("../../shared/log");
 const makeBlockie = require("ethereum-blockies-base64");
 const txStatus = require("./txStatus");
 
 let pendingTx = null;
+// Network fee for the transaction currently on screen. Reset by show() and
+// filled in by estimateGas() when the estimate resolves or fails.
+let feeStatus = FEE_PENDING;
+let feeWei = null;
 
 function restore() {
     const d = state.viewData;
@@ -67,6 +80,8 @@ function valueWithUsd(text, usdAmount) {
 
 function show(txInfo) {
     pendingTx = txInfo;
+    feeStatus = FEE_PENDING;
+    feeWei = null;
 
     const isErc20 = txInfo.token !== "ETH";
     const symbol = isErc20 ? txInfo.tokenSymbol || "?" : "ETH";
@@ -153,50 +168,14 @@ function show(txInfo) {
         warningsEl.style.visibility = "hidden";
     }
 
-    // Check for errors
-    const errors = [];
-    if (isErc20) {
-        const tokenBal = parseFloat(txInfo.tokenBalance || "0");
-        if (parseFloat(txInfo.amount) > tokenBal) {
-            errors.push(
-                "Insufficient " +
-                    symbol +
-                    " balance. You have " +
-                    txInfo.tokenBalance +
-                    " " +
-                    symbol +
-                    " but are trying to send " +
-                    txInfo.amount +
-                    " " +
-                    symbol +
-                    ".",
-            );
-        }
-    } else if (parseFloat(txInfo.amount) > parseFloat(txInfo.balance)) {
-        errors.push(
-            "Insufficient balance. You have " +
-                txInfo.balance +
-                " ETH but are trying to send " +
-                txInfo.amount +
-                " ETH.",
-        );
-    }
+    // The two fee messages are mutually exclusive per transaction type, and
+    // the type is known here, before the first paint. Drop the one that can
+    // never apply and reserve the space of the one that can, so the async
+    // estimate landing later never moves anything.
+    $("confirm-amount-fee-error").classList.toggle("hidden", isErc20);
+    $("confirm-gas-error").classList.toggle("hidden", !isErc20);
 
-    const errorsEl = $("confirm-errors");
-    const sendBtn = $("btn-confirm-send");
-    if (errors.length > 0) {
-        errorsEl.innerHTML = errors
-            .map((e) => `<div class="text-xs">${e}</div>`)
-            .join("");
-        errorsEl.style.visibility = "visible";
-        sendBtn.disabled = true;
-        sendBtn.classList.add("text-muted");
-    } else {
-        errorsEl.innerHTML = "";
-        errorsEl.style.visibility = "hidden";
-        sendBtn.disabled = false;
-        sendBtn.classList.remove("text-muted");
-    }
+    renderValidation(txInfo);
 
     // Reset password field and error
     $("confirm-tx-password").value = "";
@@ -205,6 +184,7 @@ function show(txInfo) {
     // Gas estimate — show placeholder then fetch async
     $("confirm-fee").style.visibility = "visible";
     $("confirm-fee-amount").textContent = "Estimating...";
+    setVisible("confirm-fee-reserve", false);
     state.viewData = { pendingTx: txInfo };
     showView("confirm-tx");
     attachCopyHandlers("view-confirm-tx");
@@ -224,11 +204,101 @@ function show(txInfo) {
     checkRecipientHistory(txInfo);
 }
 
+// Render the balance check for the transaction on screen. Called once during
+// show() and again when the fee estimate resolves or fails. Every element it
+// touches already occupies its space, so re-running it never moves anything.
+function renderValidation(txInfo) {
+    const isErc20 = txInfo.token !== "ETH";
+    const symbol = isErc20 ? txInfo.tokenSymbol || "?" : "ETH";
+
+    const { canSend, codes } = validateTransfer({
+        isErc20,
+        amount: txInfo.amount,
+        ethBalance: txInfo.balance,
+        tokenBalance: txInfo.tokenBalance,
+        feeStatus,
+        feeWei,
+    });
+
+    // Messages carrying the user's own numbers are built here; the fixed
+    // sentences live in the reserved elements in index.html.
+    const messages = [];
+    if (codes.includes(CODES.AMOUNT_INVALID)) {
+        messages.push("Please enter a valid amount to send.");
+    }
+    if (codes.includes(CODES.INSUFFICIENT_TOKEN)) {
+        messages.push(
+            "Insufficient " +
+                symbol +
+                " balance. You have " +
+                txInfo.tokenBalance +
+                " " +
+                symbol +
+                " but are trying to send " +
+                txInfo.amount +
+                " " +
+                symbol +
+                ".",
+        );
+    }
+    if (codes.includes(CODES.INSUFFICIENT_ETH)) {
+        messages.push(
+            "Insufficient balance. You have " +
+                txInfo.balance +
+                " ETH but are trying to send " +
+                txInfo.amount +
+                " ETH.",
+        );
+    }
+
+    const errorsEl = $("confirm-errors");
+    if (messages.length > 0) {
+        errorsEl.innerHTML = messages
+            .map((m) => `<div class="text-xs">${escapeHtml(m)}</div>`)
+            .join("");
+        errorsEl.style.visibility = "visible";
+    } else {
+        errorsEl.innerHTML = "";
+        errorsEl.style.visibility = "hidden";
+    }
+
+    setVisible(
+        "confirm-amount-fee-error",
+        codes.includes(CODES.INSUFFICIENT_ETH_WITH_FEE),
+    );
+    setVisible(
+        "confirm-gas-error",
+        codes.includes(CODES.INSUFFICIENT_ETH_FOR_FEE),
+    );
+    setVisible(
+        "confirm-fee-unknown-error",
+        codes.includes(CODES.FEE_UNAVAILABLE),
+    );
+
+    // While the estimate is in flight there is no error to show — the fee
+    // line already reads "Estimating..." — but sending stays blocked so a
+    // transaction the fee would break cannot be signed in the meantime.
+    const sendBtn = $("btn-confirm-send");
+    sendBtn.disabled = !canSend;
+    sendBtn.classList.toggle("text-muted", !canSend);
+}
+
+function setVisible(id, visible) {
+    $(id).style.visibility = visible ? "visible" : "hidden";
+}
+
+// A fee in wei as an ETH string, truncated to 6 decimal places.
+function formatFeeEth(wei) {
+    const parts = formatEther(wei).split(".");
+    const dec =
+        parts.length > 1 ? parts[1].slice(0, 6).replace(/0+$/, "") || "0" : "0";
+    return parts[0] + "." + dec + " ETH";
+}
+
 async function estimateGas(txInfo) {
     try {
         const provider = getProvider(state.rpcUrl);
         const feeData = await provider.getFeeData();
-        const gasPrice = feeData.gasPrice;
         let gasLimit;
 
         if (txInfo.token === "ETH") {
@@ -246,21 +316,55 @@ async function estimateGas(txInfo) {
             });
         }
 
-        const gasCostWei = gasLimit * gasPrice;
-        const gasCostEth = formatEther(gasCostWei);
-        // Format to 6 significant decimal places
-        const parts = gasCostEth.split(".");
-        const dec =
-            parts.length > 1
-                ? parts[1].slice(0, 6).replace(/0+$/, "") || "0"
-                : "0";
-        const feeStr = parts[0] + "." + dec + " ETH";
+        // What the node will require to be reserved, which is what the gate
+        // must be: the send pins no fee fields, so it is broadcast as a
+        // type-2 transaction priced at maxFeePerGas.
+        const gasCostWei = feeReserveWei(gasLimit, feeData);
+        if (gasCostWei === null) {
+            throw new Error("no usable gas price from the provider");
+        }
+        // What the transaction is expected to cost, which is a different and
+        // usually much smaller number. Both are shown: quoting only the
+        // reserve overstates the typical cost by roughly double on mainnet,
+        // and quoting only the estimate contradicts the balance check.
+        const estimateWei = feeEstimateWei(gasLimit, feeData);
+        // The user may have left this transaction while the estimate was in
+        // flight; a stale fee must not reach the screen or the balance check.
+        if (pendingTx !== txInfo) return;
+
         const ethPrice = getPrice("ETH");
-        const feeUsd = ethPrice ? parseFloat(gasCostEth) * ethPrice : null;
-        $("confirm-fee-amount").textContent = valueWithUsd(feeStr, feeUsd);
+        const usd = (wei) =>
+            ethPrice ? parseFloat(formatEther(wei)) * ethPrice : null;
+
+        if (estimateWei !== null && estimateWei < gasCostWei) {
+            $("confirm-fee-amount").textContent = valueWithUsd(
+                "~" + formatFeeEth(estimateWei),
+                usd(estimateWei),
+            );
+            $("confirm-fee-reserve").textContent =
+                "up to " + formatFeeEth(gasCostWei) + " reserved";
+            setVisible("confirm-fee-reserve", true);
+        } else {
+            // No spread to report: either there is no estimate, or the node
+            // quotes a gas price at or above maxFeePerGas, so the expected
+            // cost is not below the reserve. Show the reserve alone.
+            $("confirm-fee-amount").textContent = valueWithUsd(
+                formatFeeEth(gasCostWei),
+                usd(gasCostWei),
+            );
+            setVisible("confirm-fee-reserve", false);
+        }
+        feeStatus = FEE_KNOWN;
+        feeWei = gasCostWei;
+        renderValidation(txInfo);
     } catch (e) {
         log.errorf("gas estimation failed:", e.message);
+        if (pendingTx !== txInfo) return;
         $("confirm-fee-amount").textContent = "Unable to estimate";
+        setVisible("confirm-fee-reserve", false);
+        feeStatus = FEE_UNAVAILABLE;
+        feeWei = null;
+        renderValidation(txInfo);
     }
 }