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.

src/popup/views/confirmTx.js

@@ -32,11 +32,22 @@ const {
     getFullWarnings,
 } = require("../../shared/addressWarnings");
 const { ERC20_ABI, isBurnAddress } = require("../../shared/constants");
+const {
+    CODES,
+    FEE_PENDING,
+    FEE_KNOWN,
+    FEE_UNAVAILABLE,
+    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 +78,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 +166,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 = "";
@@ -224,6 +201,89 @@ 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";
+}
+
 async function estimateGas(txInfo) {
     try {
         const provider = getProvider(state.rpcUrl);
@@ -247,6 +307,10 @@ async function estimateGas(txInfo) {
         }
 
         const gasCostWei = gasLimit * gasPrice;
+        // 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 gasCostEth = formatEther(gasCostWei);
         // Format to 6 significant decimal places
         const parts = gasCostEth.split(".");
@@ -258,9 +322,16 @@ async function estimateGas(txInfo) {
         const ethPrice = getPrice("ETH");
         const feeUsd = ethPrice ? parseFloat(gasCostEth) * ethPrice : null;
         $("confirm-fee-amount").textContent = valueWithUsd(feeStr, feeUsd);
+        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";
+        feeStatus = FEE_UNAVAILABLE;
+        feeWei = null;
+        renderValidation(txInfo);
     }
 }