Show RPC block number on chain page

src/components/RpcTable.tsx

@@ -1,6 +1,7 @@
-import React, { useContext } from "react";
+import React, { useContext, useEffect, useState } from "react";
 import {
   Button,
+  Skeleton,
   Table,
   TableContainer,
   Tbody,
@@ -10,34 +11,105 @@ import {
   Tr,
 } from "@chakra-ui/react";
 import { Web3Context } from "../context/Web3Context";
+import { JsonRpcProvider } from "ethers";
+import { ChainData } from "../types/chain";
 
-export const RpcTable = ({ rpcs, handleRpcClick }) => {
+interface RpcResult {
+  rpcUrl: string;
+  blockNumber?: number;
+  latency?: number;
+  error?: unknown;
+}
+
+async function checkRpc(chainId: number, rpcUrl: string): Promise<RpcResult> {
+  try {
+    const now = Date.now();
+    const provider = new JsonRpcProvider(rpcUrl, chainId, {
+      staticNetwork: true,
+    });
+    const blockNumber = await provider.getBlockNumber();
+    return { rpcUrl, blockNumber, latency: Date.now() - now };
+  } catch (error) {
+    return { rpcUrl, error };
+  }
+}
+
+export const RpcTable = ({
+  chainId,
+  rpcs,
+  handleRpcClick,
+}: Pick<ChainData, "chainId"> & {
+  rpcs: ChainData["rpc"];
+  handleRpcClick: (rpc: string) => void;
+}) => {
   const { isConnected, handleConnect } = useContext(Web3Context);
+  const [rpcResults, setRpcResults] = useState<RpcResult[] | null>(null);
+
+  useEffect(() => {
+    rpcs.forEach((rpc) =>
+      checkRpc(chainId, rpc).then((result) => {
+        setRpcResults((state) => [...(state ?? []), result]);
+      })
+    );
+  }, []);
+
+  const mergedRpcs = rpcs
+    .map((rpcUrl) => {
+      const rpcResult = rpcResults?.find((result) => result.rpcUrl === rpcUrl);
+      return rpcResult ?? { rpcUrl };
+    })
+    .sort((a, b) => {
+      if (!a.latency) {
+        return 1;
+      }
+      if (!b.latency) {
+        return -1;
+      }
+      return a.latency < b.latency ? -1 : 1;
+    });
 
   return (
     <TableContainer>
       <Table>
         <Thead>
           <Tr>
             <Th pl="0">RPC URL</Th>
+            <Th>Block Number</Th>
+            <Th>Latency</Th>
             <Th></Th>
           </Tr>
         </Thead>
         <Tbody>
-          {rpcs.map((rpcUrl) => (
-            <Tr>
-              <Td pl="0">{rpcUrl}</Td>
-              <Td pr="0" textAlign="end">
-                {!isConnected ? (
-                  <Button onClick={handleConnect}>Connect</Button>
-                ) : (
-                  <Button onClick={() => handleRpcClick(rpcUrl)}>
-                    Add Chain
-                  </Button>
-                )}
-              </Td>
-            </Tr>
-          ))}
+          {mergedRpcs.map(({ rpcUrl, blockNumber, latency, error }) => {
+            return (
+              <Tr key={rpcUrl}>
+                <Td pl="0">{rpcUrl}</Td>
+                <Td>
+                  {blockNumber || error ? (
+                    blockNumber ?? "Unavailable"
+                  ) : (
+                    <Skeleton height="24px" />
+                  )}
+                </Td>
+                <Td>
+                  {latency || error ? (
+                    <>{latency ?? "?"} ms</>
+                  ) : (
+                    <Skeleton height="24px" />
+                  )}
+                </Td>
+                <Td pr="0" textAlign="end">
+                  {!isConnected ? (
+                    <Button onClick={handleConnect}>Connect</Button>
+                  ) : (
+                    <Button onClick={() => handleRpcClick(rpcUrl)}>
+                      Add Chain
+                    </Button>
+                  )}
+                </Td>
+              </Tr>
+            );
+          })}
         </Tbody>
       </Table>
     </TableContainer>

src/pages/chain/{Chain.chainId}.tsx

@@ -117,7 +117,7 @@ const ChainPage = ({ data }: { data: { chain: ChainData } }) => {
             )}
           </StatGroup>
           <Divider my="8" />
-          <RpcTable rpcs={rpc} handleRpcClick={handleRpcClick} />
+          <RpcTable chainId={chainId} rpcs={rpc} handleRpcClick={handleRpcClick} />
         </Flex>
       </Layout>
     </>