fix: TxApproval prices a site's ETH send from its exact amount on its own network (closes #614)

TxApproval worked out the USD value of a site's ETH send from the
four-decimal figure it shows, at the price on the active network, so the
same value read a few cents different than on ConfirmTx, and a
transaction on another network was priced at the active one's rate, its
network fee too. It now prices the exact value with getPrice("ETH",
chainId) for the transaction's chain id, as ConfirmTx does, and passes
that chain id to formatFee() for the fee.

getPrice() now returns null for a chain id that names no network instead
of throwing, so such a transaction is still shown, with no USD value.

Model: opus-5-5

src/popup/views/approval.js

@@ -231,10 +231,11 @@ function showTxFee(approvedTx) {
     const feePerGas = BigInt(approvedTx.maxFeePerGas || approvedTx.gasPrice);
     // Through formatFee(), as the confirmation screen's fee is, so the same
     // fee reads the same on both. In the native currency of the network shown
-    // above, as the value is.
+    // above, and at the price on it, as the value is.
     $("approve-tx-fee").textContent = formatFee(
         gasLimit * feePerGas,
         nativeCurrencyByChainId(approvedTx.chainId),
+        approvedTx.chainId,
     );
 
     let detail =

tests/approvalValueUsd.test.js

@@ -1,10 +1,11 @@
-// The USD value on the approval screen's Value line, for a site's ETH send.
+// The USD value on the approval screen's Value and Network fee lines, for a
+// site's ETH send.
 //
 // It was worked out from the four-decimal figure the line shows, at the price
 // on the active network, so the same value read a few cents different here than
 // on the confirmation screen, which prices the exact amount at the price on the
 // transaction's own network, and a transaction on another network than the
-// active one was priced at the active one's rate
+// active one was priced at the active one's rate, its fee too
 // (https://git.eeqj.de/sneak/AutistMask/issues/614).
 //
 // Driven through the real approval screen, against a minimal DOM stub in the
@@ -168,3 +169,24 @@ test.each([
     expect(state.currentView).toBe("approve-tx");
     expect(node("approve-tx-value").textContent).toBe(expected);
 });
+
+// The Network fee line is priced on the transaction's network too. 21000 gas at
+// up to 2 gwei is 0.000042 ETH, $0.08 at $2,000.
+test.each([
+    [
+        "the fee of a mainnet transaction shown with Sepolia active is priced at the mainnet price",
+        NETWORKS.mainnet.chainId,
+        "sepolia",
+        "0.00004 ETH ($0.08)",
+    ],
+    [
+        "the fee of a Sepolia transaction shown with mainnet active has no USD value",
+        NETWORKS.sepolia.chainId,
+        "mainnet",
+        "0.00004 SepoliaETH",
+    ],
+])("%s", async (_label, chainId, networkId, expected) => {
+    await showEthSend(chainId, networkId);
+    expect(state.currentView).toBe("approve-tx");
+    expect(node("approve-tx-fee").textContent).toBe(expected);
+});