60 update network connectors

biome.json

@@ -11,5 +11,12 @@
     "lineWidth": 100,
     "indentStyle": "space",
     "indentWidth": 2
+  },
+  "assist": {
+    "actions": {
+      "source": {
+        "organizeImports": "off"
+      }
+    }
   }
 }

package.json

@@ -9,6 +9,7 @@
 		"@testing-library/react": "^16.2.0",
 		"@testing-library/user-event": "^13.5.0",
 		"ethers": "^6.14.4",
+		"explorer-network-connectors": "^0.0.2",
 		"jszip": "^3.10.1",
 		"react": "^19.1.0",
 		"react-dom": "^19.1.0",

src/components/navbar/NetworkBlockIndicator.tsx

@@ -2,7 +2,7 @@ import { useContext, useEffect, useMemo, useState } from "react";
 import { useLocation } from "react-router-dom";
 import { getRPCUrls } from "../../config/rpcConfig";
 import { AppContext, useNetworks } from "../../context/AppContext";
-import { RPCClient } from "../../services/EVM/common/RPCClient";
+import { RpcClient } from "explorer-network-connectors";
 import { NetworkIcon } from "../common/NetworkIcon";
 
 interface NetworkBlockIndicatorProps {
@@ -38,7 +38,7 @@ export function NetworkBlockIndicator({ className }: NetworkBlockIndicatorProps)
     const fetchBlockNumber = async () => {
       try {
         const urls = getRPCUrls(networkId, rpcUrls);
-        const client = new RPCClient(urls);
+        const client = new RpcClient(urls[0] || "");
         const result = await client.call<string>("eth_blockNumber", []);
         if (isMounted) {
           setBlockNumber(parseInt(result, 16));

src/components/pages/address/index.tsx

@@ -98,7 +98,7 @@ export default function Address() {
   useEffect(() => {
     if (!dataService || !address) return;
 
-    dataService
+    dataService.networkAdapter
       .getAddressTransactions(address)
       .then(async (result) => {
         console.log("Fetched transactions result:", result);
@@ -109,7 +109,7 @@ export default function Address() {
           const txsToFetch = result.transactions.slice(0, 25);
           const txResults = await Promise.all(
             txsToFetch.map((hash) =>
-              dataService.getTransaction(hash).catch((err) => {
+              dataService.networkAdapter.getTransaction(hash).catch((err) => {
                 console.error(`Failed to fetch tx ${hash}:`, err);
                 return null;
               }),

src/components/pages/block/index.tsx

@@ -39,7 +39,7 @@ export default function BlockPage() {
     setLoading(true);
     setError(null);
 
-    dataService
+    dataService.networkAdapter
       .getBlock(blockNumber)
       .then((result) => {
         console.log("Fetched block:", result);

src/components/pages/blocks/index.tsx

@@ -33,7 +33,7 @@ export default function Blocks() {
 
       try {
         // Get the latest block number first
-        const latestBlock = await dataService.getLatestBlockNumber();
+        const latestBlock = await dataService.networkAdapter.getLatestBlockNumber();
         setLatestBlockNumber(latestBlock);
 
         // Determine starting block
@@ -47,7 +47,7 @@ export default function Blocks() {
 
         // Fetch blocks in parallel
         const blockResults = await Promise.all(
-          blockNumbers.map((num) => dataService.getBlock(num)),
+          blockNumbers.map((num) => dataService.networkAdapter.getBlock(num)),
         );
 
         console.log("Fetched blocks:", blockResults);

src/components/pages/network/index.tsx

@@ -37,7 +37,7 @@ export default function Network() {
     setLoading(true);
     setError(null);
 
-    dataService
+    dataService.networkAdapter
       .getNetworkStats()
       .then((result) => {
         setNetworkStatsResult(result);

src/components/pages/tx/TransactionDisplay.tsx

@@ -5,7 +5,7 @@ import { RPCIndicator } from "../../../components/common/RPCIndicator";
 import { AppContext } from "../../../context";
 import { useSourcify } from "../../../hooks/useSourcify";
 import type { DataService } from "../../../services/DataService";
-import type { TraceResult } from "../../../services/EVM/L1/fetchers/trace";
+import type { TraceResult } from "../../../services/adapters/NetworkAdapter";
 import type {
   RPCMetadata,
   Transaction,
@@ -115,15 +115,15 @@ const TransactionDisplay: React.FC<TransactionDisplayProps> = React.memo(
     }, [contractData?.abi, transaction.data]);
 
     // Check if trace is available (localhost only)
-    const isTraceAvailable = dataService?.isTraceAvailable() || false;
+    const isTraceAvailable = dataService?.networkAdapter.isTraceAvailable() || false;
 
     // Load trace data when trace section is expanded
     useEffect(() => {
       if (showTrace && isTraceAvailable && dataService && !traceData && !callTrace) {
         setLoadingTrace(true);
         Promise.all([
-          dataService.getTransactionTrace(transaction.hash),
-          dataService.getCallTrace(transaction.hash),
+          dataService.networkAdapter.getTransactionTrace(transaction.hash),
+          dataService.networkAdapter.getCallTrace(transaction.hash),
         ])
           .then(([trace, call]) => {
             setTraceData(trace);

src/components/pages/tx/index.tsx

@@ -42,7 +42,10 @@ export default function Tx() {
     setLoading(true);
     setError(null);
 
-    Promise.all([dataService.getTransaction(txHash), dataService.getLatestBlockNumber()])
+    Promise.all([
+      dataService.networkAdapter.getTransaction(txHash),
+      dataService.networkAdapter.getLatestBlockNumber(),
+    ])
       .then(([result, latestBlock]) => {
         console.log("Fetched transaction:", result);
         console.log("Latest block number:", latestBlock);

src/components/pages/txs/index.tsx

@@ -39,7 +39,7 @@ export default function Txs() {
 
       try {
         // Get the latest block number first
-        const latestBlock = await dataService.getLatestBlockNumber();
+        const latestBlock = await dataService.networkAdapter.getLatestBlockNumber();
         setLatestBlockNumber(latestBlock);
 
         // Determine starting block
@@ -50,7 +50,7 @@ export default function Txs() {
         setBlockRange({ from: endBlock, to: startBlock });
 
         // Fetch transactions from block range
-        const fetchedTransactions = await dataService.getTransactionsFromBlockRange(
+        const fetchedTransactions = await dataService.networkAdapter.getTransactionsFromBlockRange(
           startBlock,
           BLOCKS_PER_PAGE,
         );

src/hooks/useDataService.ts

@@ -3,6 +3,7 @@ import { useContext, useMemo } from "react";
 import { AppContext } from "../context/AppContext";
 import { useSettings } from "../context/SettingsContext";
 import { DataService } from "../services/DataService";
+import type { SupportedChainId } from "explorer-network-connectors";
 
 /**
  * Hook to get a DataService for a specific network
@@ -14,23 +15,9 @@ export function useDataService(networkId: number) {
   const { rpcUrls } = useContext(AppContext);
   const { settings } = useSettings();
 
-  console.log(
-    "useDataService called with networkId:",
-    networkId,
-    "strategy:",
-    settings.rpcStrategy,
-  );
-
   const dataService = useMemo(() => {
-    console.log(
-      "useMemo creating new DataService for networkId:",
-      networkId,
-      "with strategy:",
-      settings.rpcStrategy,
-    );
-    return new DataService(networkId, rpcUrls, settings.rpcStrategy);
+    return new DataService(networkId as SupportedChainId, rpcUrls, settings.rpcStrategy);
   }, [networkId, rpcUrls, settings.rpcStrategy]);
 
-  console.log("useDataService returning dataService for networkId:", networkId);
   return dataService;
 }