diff --git a/src/components/RpcTable.tsx b/src/components/RpcTable.tsx index daf1d2418..0b1a9dd72 100644 --- a/src/components/RpcTable.tsx +++ b/src/components/RpcTable.tsx @@ -14,14 +14,23 @@ import { Web3Context } from "../context/Web3Context"; import { JsonRpcProvider } from "ethers"; import { ChainData } from "../types/chain"; -async function checkRpc(chainId: number, rpc: string) { +interface RpcResult { + rpcUrl: string; + blockNumber?: number; + latency?: number; + error?: unknown; +} + +async function checkRpc(chainId: number, rpcUrl: string): Promise { try { const now = Date.now(); - const provider = new JsonRpcProvider(rpc, chainId, { staticNetwork: true }); + const provider = new JsonRpcProvider(rpcUrl, chainId, { + staticNetwork: true, + }); const blockNumber = await provider.getBlockNumber(); - return { blockNumber, latency: Date.now() - now }; + return { rpcUrl, blockNumber, latency: Date.now() - now }; } catch (error) { - return { error }; + return { rpcUrl, error }; } } @@ -29,18 +38,25 @@ export const RpcTable = ({ chainId, rpcs, handleRpcClick, -}: Pick & { rpcs: ChainData["rpc"] }) => { +}: Pick & { + rpcs: ChainData["rpc"]; + handleRpcClick: (rpc: string) => void; +}) => { const { isConnected, handleConnect } = useContext(Web3Context); - const [rpcResults, setRpcResults] = useState(null); + const [rpcResults, setRpcResults] = useState(null); useEffect(() => { - Promise.all(rpcs.map((rpc) => checkRpc(chainId, rpc))).then(setRpcResults); + rpcs.forEach((rpc) => + checkRpc(chainId, rpc).then((result) => { + setRpcResults((state) => [...(state ?? []), result]); + }) + ); }, []); const mergedRpcs = rpcs - .map((rpcUrl, index) => { - const rpcResult = rpcResults?.[index] ?? {}; - return { rpcUrl, ...rpcResult }; + .map((rpcUrl) => { + const rpcResult = rpcResults?.find((result) => result.rpcUrl === rpcUrl); + return rpcResult ?? { rpcUrl }; }) .sort((a, b) => { if (!a.latency) {