fix: TransactionDetail reads a transaction from the Blockscout of the network it was sent on (closes #623)

TransactionDetail read the block, network details and calldata from the
active network's Blockscout and decoded the calldata for the active network,
so after a network switch a transaction sent on the other network showed none
of them. It now reads them from the Blockscout Settings has for the network
the transaction was sent on, and decodes the calldata for that network.
endpointsByChainId() in the shared view helpers gives a network's RPC and
Blockscout URLs, picked as reviewedNetworkProvider() picked its node;
reviewedNetworkProvider() now uses it. Restore refuses a stored transaction
whose chain id names no network, as it does for WaitTx.

Model: opus-5-5

src/popup/viewRouter.js

@@ -145,15 +145,15 @@ function isRenderablePendingTx(value) {
 
 // The stored transaction transactionDetail.render() shows. contractAddress is
 // optional on an ETH transfer, and reaches addressDotHtml() when it is there.
-// `chainId` picks the network whose explorer the links open, so when it is
-// there it has to name one.
+// `chainId` picks the network whose explorer the links open and whose
+// Blockscout the transaction is read from, so it has to name one.
 function isRenderableTx(value) {
     return (
         isRecord(value) &&
         isAddressText(value.from) &&
         isAddressText(value.to) &&
         (!value.contractAddress || isAddressText(value.contractAddress)) &&
-        (!value.chainId || SUPPORTED_CHAIN_IDS.has(value.chainId))
+        SUPPORTED_CHAIN_IDS.has(value.chainId)
     );
 }
 

src/popup/views/helpers.js

@@ -1,4 +1,7 @@
-// Shared DOM helpers used by all views.
+// Helpers the views in this directory share: showing a view and going back,
+// error and flash lines and the warning banners, formatting of amounts, fees,
+// balances, addresses and dates, the RPC and Blockscout URLs and node of the
+// network a chain id names, explorer links, and click-to-copy.
 //
 // Escaping rule for every view in this directory, since they all build
 // markup by concatenation: any VALUE interpolated into an innerHTML string
@@ -608,18 +611,28 @@ const EXT_ICON =
     `<path d="M7 1.5h3.5V5M7 5.5L10.5 1.5"/>` +
     `</svg></span>`;
 
-// The node of the network a transaction was reviewed for, the one its chain id
-// names, which need not be the active one: the popup can reopen onto ConfirmTx
-// or WaitTx after Settings switched the network. Its RPC URL is the one
-// Settings has for that network: the active network's is state.rpcUrl, any
-// other's the one remembered for it (see applyChainSwitchFields()).
-function reviewedNetworkProvider(txInfo) {
-    const net = networkByChainId(txInfo.chainId);
+// The RPC and Blockscout URLs Settings has for the network with this chain id,
+// which need not be the active one: ConfirmTx, WaitTx and TransactionDetail
+// use the network their transaction's chain id names, and the popup can reopen
+// onto them after Settings switched the network. The active network's are
+// state.rpcUrl and state.blockscoutUrl, any other's the ones remembered for it,
+// or its defaults (see applyChainSwitchFields()).
+function endpointsByChainId(chainId) {
+    const net = networkByChainId(chainId);
     if (net.id === state.networkId) {
-        return getProvider(state.rpcUrl, net.id);
+        return { rpcUrl: state.rpcUrl, blockscoutUrl: state.blockscoutUrl };
     }
     const remembered = state.networkEndpoints[net.id] || {};
-    return getProvider(remembered.rpcUrl || net.defaultRpcUrl, net.id);
+    return {
+        rpcUrl: remembered.rpcUrl || net.defaultRpcUrl,
+        blockscoutUrl: remembered.blockscoutUrl || net.defaultBlockscoutUrl,
+    };
+}
+
+// The node of the network a transaction was reviewed for.
+function reviewedNetworkProvider(txInfo) {
+    const net = networkByChainId(txInfo.chainId);
+    return getProvider(endpointsByChainId(txInfo.chainId).rpcUrl, net.id);
 }
 
 // Block-explorer URLs. The origin is a per-network constant from
@@ -777,6 +790,7 @@ module.exports = {
     attachCopyHandlers,
     etherscanLinkHtml,
     explorerUrl,
+    endpointsByChainId,
     reviewedNetworkProvider,
     EXT_ICON,
     truncateMiddle,

src/popup/views/transactionDetail.js

@@ -18,10 +18,11 @@ const {
     copyableHtml,
     etherscanLinkHtml,
     explorerUrl,
+    endpointsByChainId,
     displaySymbol,
     goBack,
 } = require("./helpers");
-const { state, currentNetwork } = require("../../shared/state");
+const { state } = require("../../shared/state");
 const { nativeCurrencyByChainId } = require("../../shared/networks");
 const { formatEther, formatUnits } = require("ethers");
 const { log, debugFetch } = require("../../shared/log");
@@ -84,9 +85,10 @@ function show(tx) {
             contractAddress: tx.contractAddress || null,
             // The network the history entry was read from. The type line and
             // the fee are in its native currency, not the active network's,
-            // and the links open its explorer: the active network can change,
-            // in Settings or when the user approves a site's request, before
-            // a later popup shows this screen again.
+            // the links open its explorer, and the block, network details and
+            // calldata are read from its Blockscout: the active network can
+            // change, in Settings or when the user approves a site's request,
+            // before a later popup shows this screen again.
             chainId: tx.chainId,
         },
     };
@@ -311,8 +313,9 @@ async function loadFullTxDetails(txHash, chainId) {
     if (!section || !actionEl || !detailsEl) return;
 
     try {
+        const { blockscoutUrl } = endpointsByChainId(chainId);
         const resp = await debugFetch(
-            state.blockscoutUrl + "/transactions/" + txHash,
+            blockscoutUrl + "/transactions/" + txHash,
         );
         if (!resp.ok) return;
         const txData = await resp.json();
@@ -326,12 +329,12 @@ async function loadFullTxDetails(txHash, chainId) {
         // Decoded against the address the transaction was sent to, as the
         // explorer reports it, not the history entry's `to`: for a token
         // transfer that is the transfer's recipient, not the token contract.
-        // On the active network, the one whose explorer was just asked, and
-        // from the sender it reports.
+        // On the network the transaction was sent on, whose Blockscout was
+        // just asked, and from the sender it reports.
         const decoded = decodeCalldata(
             inputData,
             txData.to?.hash || "",
-            currentNetwork().chainId,
+            chainId,
             txData.from?.hash || "",
         );
         if (decoded) {