fix: the confirmation screen reads its balance on the network it is drawn for (closes #558)

ConfirmTx showed and checked the balance Send handed it, so a popup reopened onto a confirmation saved before a network switch stated the other network's balance and checked the amount against it.

Each time it is shown, ConfirmTx now reads the From address's ETH balance, and for a token send its token balance, from the node of the network it is drawn for, and gives that node to the fee estimate, which starts once the read is done. Until then the balance line says "Loading..." and Sign & Send stays disabled; a failed read is stated as unknown. Each message the read can bring has a box reserved from the first paint, so nothing moves when it returns.

Model: opus-5-5

tests/unknownScaleSend.test.js

@@ -39,7 +39,8 @@ jest.mock("../src/shared/log", () => ({
 
 // Everything the confirmation screen would reach the network for. The gas
 // estimate is the point: with a usable scale it must succeed, so that a failure
-// in these tests is a failure of the scale and not of the stub.
+// in these tests is a failure of the scale and not of the stub. The address
+// holds the 1 ETH the wallets below record, and `tokenUnits` of the token.
 const mockProvider = {
     getFeeData: async () => ({
         maxFeePerGas: 2000000000n,
@@ -48,7 +49,14 @@ const mockProvider = {
     estimateGas: async () => 21000n,
     getCode: async () => "0x",
     getTransactionCount: async () => 1,
-    getBalance: async () => 0n,
+    getBalance: async () => 1000000000000000000n,
+    tokenUnits: 0n,
+    // The one contract call the screen makes, balanceOf().
+    call: async () =>
+        AbiCoder.defaultAbiCoder().encode(
+            ["uint256"],
+            [mockProvider.tokenUnits],
+        ),
 };
 
 jest.mock("../src/shared/balances", () => {
@@ -114,7 +122,7 @@ global.document = {
 };
 global.navigator = { clipboard: { writeText() {} } };
 
-const { parseUnits } = require("ethers");
+const { AbiCoder, parseUnits } = require("ethers");
 const { fetchTokenBalances } = require("../src/shared/balances");
 const { debugFetch } = require("../src/shared/log");
 const { state } = require("../src/shared/state");
@@ -155,8 +163,9 @@ function row(token = {}, value = FIVE_WETH) {
 }
 
 // Fetch the explorer's rows through the real fetcher and put them exactly where
-// refreshBalances() puts them.
+// refreshBalances() puts them. The node reports the holding the explorer does.
 async function fetchOnto(items) {
+    mockProvider.tokenUnits = BigInt(items[0].value);
     debugFetch.mockImplementation(async () => ({
         ok: true,
         status: 200,
@@ -181,6 +190,7 @@ async function fetchOnto(items) {
 // is from the first. Two addresses is what it takes to reach
 // explorerDecimals()'s disagreement check, which is only reachable across rows.
 async function fetchOntoBoth(itemsA, itemsB) {
+    mockProvider.tokenUnits = BigInt(itemsA[0].value);
     debugFetch.mockImplementation(async () => ({
         ok: true,
         status: 200,
@@ -239,6 +249,12 @@ function errors() {
     return el("confirm-errors").innerHTML;
 }
 
+// The message for an amount the balance does not cover, while it is shown.
+function balanceError() {
+    const box = el("confirm-balance-error");
+    return box.style.visibility === "visible" ? box.textContent : "";
+}
+
 function sendDisabled() {
     return el("btn-confirm-send").disabled;
 }
@@ -270,7 +286,6 @@ describe("the Send screen resolves the scale rather than reading the stored one"
         const txInfo = await reviewSend(WETH, "1.5");
         expect(txInfo.tokenDecimals).toBe(18);
         expect(txInfo.tokenDecimals).not.toBe(balances[0].decimals);
-        expect(txInfo.tokenBalance).toBe("5.0");
     });
 
     test("that scale estimates a fee and leaves Send enabled", async () => {
@@ -307,11 +322,10 @@ describe("the Send screen resolves the scale rather than reading the stored one"
         // No fallback was introduced: resolution answers null here, and the
         // null is what goes forward.
         expect(txInfo.tokenDecimals).toBeNull();
-        expect(txInfo.tokenBalance).toBeNull();
         confirmTx.show(txInfo);
         await settle();
         expect(text("confirm-balance")).toBe("unknown (NOVEL)");
-        expect(errors()).toContain("This token's balance is unknown");
+        expect(balanceError()).toContain("This token's balance is unknown");
         expect(sendDisabled()).toBe(true);
     });
 });
@@ -355,7 +369,8 @@ describe("a scale the explorer's own rows disagree about", () => {
         const txInfo = await reviewSend(NOVEL, "1.5");
         expect(txInfo.tokenDecimals).toBeNull();
         // The regression this closes: null scale alongside a non-null balance.
-        expect(txInfo.tokenBalance).toBeNull();
+        send.updateSendBalance();
+        expect(text("send-balance")).toBe("Current balance: unknown (NOVEL)");
     });
 
     test("so the user is told the balance is unknown, not only that the fee failed", async () => {
@@ -367,8 +382,7 @@ describe("a scale the explorer's own rows disagree about", () => {
         // confirm-fee-unknown-error — "the network fee could not be
         // estimated... please go back and try again" — as the only explanation
         // for a screen that can never proceed.
-        expect(errors()).not.toBe("");
-        expect(errors()).toContain("This token's balance is unknown");
+        expect(balanceError()).toContain("This token's balance is unknown");
         expect(text("confirm-balance")).toBe("unknown (NOVEL)");
         expect(sendDisabled()).toBe(true);
         // The fee line still reports the estimate as unavailable, because it
@@ -434,31 +448,20 @@ describe("a scale the explorer's own rows disagree about", () => {
         expect(text("send-balance")).toBe("Current balance: 5.0000 NOVEL");
         const txInfo = await reviewSend(NOVEL, "1.5");
         expect(txInfo.tokenDecimals).toBe(6);
-        expect(txInfo.tokenBalance).toBe("5.0");
         confirmTx.show(txInfo);
         await settle();
         expect(text("confirm-balance")).toBe("5.0000 NOVEL");
         expect(errors()).toBe("");
+        expect(balanceError()).toBe("");
         expect(sendDisabled()).toBe(false);
     });
 });
 
 describe("the confirmation screen tells an unknown balance from a zero one", () => {
-    function txInfo(tokenBalance) {
-        return {
-            from: HOLDER,
-            to: RECIPIENT,
-            ensName: null,
-            amount: "1.5",
-            token: NOVEL,
-            balance: "1.0",
-            tokenSymbol: "NOVEL",
-            tokenBalance,
-            tokenDecimals: tokenBalance === null ? null : 18,
-        };
-    }
-
-    async function render(tokenBalance) {
+    // A send of 1.5 NOVEL from an address the node reports none of, with the
+    // token's scale `tokenDecimals`, or null for a scale nobody knows.
+    async function render(tokenDecimals) {
+        mockProvider.tokenUnits = 0n;
         state.wallets = [
             {
                 name: "Wallet 1",
@@ -469,30 +472,40 @@ describe("the confirmation screen tells an unknown balance from a zero one", ()
         ];
         state.selectedWallet = 0;
         state.selectedAddress = 0;
-        confirmTx.show(txInfo(tokenBalance));
+        confirmTx.show({
+            from: HOLDER,
+            to: RECIPIENT,
+            ensName: null,
+            amount: "1.5",
+            token: NOVEL,
+            tokenSymbol: "NOVEL",
+            tokenDecimals,
+        });
         await settle();
-        return { balance: text("confirm-balance"), errors: errors() };
+        return { balance: text("confirm-balance"), message: balanceError() };
     }
 
     test("the balance line states unknown rather than a quantity of zero", async () => {
         const unknown = await render(null);
-        const zero = await render("0.0");
+        const zero = await render(18);
         expect(unknown.balance).not.toBe(zero.balance);
         expect(unknown.balance).toBe("unknown (NOVEL)");
         expect(zero.balance).toBe("0.0000 NOVEL");
     });
 
     // Both hit INSUFFICIENT_TOKEN — an unknown balance is treated as nothing to
-    // spend from, which is the fail-closed side — but "you have 0.0" is a claim
-    // about the holding, and this one has no established quantity to claim.
-    test("the insufficient-balance message names the reason, not a figure", async () => {
+    // spend from, which is the fail-closed side — but "your balance does not
+    // cover this amount" is a claim about the holding, and this one has no
+    // established quantity to claim.
+    test("the insufficient-balance message names the reason, not a shortfall", async () => {
         const unknown = await render(null);
-        const zero = await render("0.0");
-        expect(unknown.errors).not.toBe(zero.errors);
-        expect(unknown.errors).toContain("This token's balance is unknown");
-        expect(unknown.errors).not.toContain("You have");
-        expect(zero.errors).toContain("You have 0.0000 NOVEL");
-        expect(zero.errors).not.toContain("balance is unknown");
+        const zero = await render(18);
+        expect(unknown.message).toContain("This token's balance is unknown");
+        expect(unknown.message).not.toContain("does not cover");
+        expect(zero.message).toBe(
+            "Your NOVEL balance does not cover this amount. Please go back and" +
+                " send a smaller amount.",
+        );
     });
 });