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

src/popup/index.html

@@ -584,10 +584,18 @@
                     <div id="confirm-balance" class="text-xs"></div>
                 </div>
                 <div id="confirm-fee" class="mb-3" style="visibility: hidden">
-                    <div class="text-xs text-muted mb-1">
-                        Estimated network fee
-                    </div>
+                    <div class="text-xs text-muted mb-1">Network fee</div>
                     <div id="confirm-fee-amount" class="text-xs"></div>
+                    <!-- Holds its one line of space from the first paint, so
+                    the reserve appearing when the estimate lands moves
+                    nothing. The placeholder is never seen. -->
+                    <div
+                        id="confirm-fee-reserve"
+                        class="text-xs text-muted"
+                        style="visibility: hidden"
+                    >
+                        reserve pending
+                    </div>
                 </div>
                 <div
                     id="confirm-warnings"
@@ -649,6 +657,31 @@
                     class="mb-2 border border-border border-dashed p-2"
                     style="visibility: hidden; min-height: 1.25rem"
                 ></div>
+                <div
+                    id="confirm-amount-fee-error"
+                    class="mb-2 border border-border border-dashed p-2 text-xs"
+                    style="visibility: hidden"
+                >
+                    Your balance does not cover this amount plus the network
+                    fee. Please go back and send a smaller amount.
+                </div>
+                <div
+                    id="confirm-gas-error"
+                    class="mb-2 border border-border border-dashed p-2 text-xs"
+                    style="visibility: hidden"
+                >
+                    You do not have enough ETH to pay the network fee for this
+                    transfer. Please add ETH to this address and try again.
+                </div>
+                <div
+                    id="confirm-fee-unknown-error"
+                    class="mb-2 border border-border border-dashed p-2 text-xs"
+                    style="visibility: hidden"
+                >
+                    The network fee could not be estimated, so this transaction
+                    cannot be checked against your balance. Please go back and
+                    try again.
+                </div>
                 <div class="mb-2">
                     <label class="block mb-1 text-xs">Password</label>
                     <input

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);
     }
 }