show block gas limit on the chain page

Author: iuwqyir

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/(chainPage)/components/client/live-stats.tsx

@@ -32,18 +32,21 @@ function useChainStatswithRPC(_rpcUrl: string) {
         method: "POST",
         body: JSON.stringify({
           jsonrpc: "2.0",
-          method: "eth_blockNumber",
-          params: [],
+          method: "eth_getBlockByNumber",
+          params: ["latest", false],
           id: 1,
         }),
       });
 
       const json = await res.json();
       const latency = (performance.now() - startTimeStamp).toFixed(0);
 
+      const blockNumber = Number.parseInt(json.result.number, 16);
+      const blockGasLimit = Number.parseInt(json.result.gasLimit, 16);
       return {
         latency,
-        blockNumber: Number.parseInt(json.result, 16),
+        blockNumber,
+        blockGasLimit,
       };
     },
     refetchInterval: (query) => {
@@ -115,6 +118,21 @@ export function ChainLiveStats(props: { rpc: string }) {
           </div>
         )}
       </PrimaryInfoItem>
+
+      {/* Block Gas Limit */}
+      <PrimaryInfoItem title="Block Gas Limit" titleIcon={<PulseDot />}>
+        {stats.isError ? (
+          <p className="fade-in-0 animate-in text-destructive-text">N/A</p>
+        ) : stats.data ? (
+          <p className="fade-in-0 animate-in">
+            {stats.data.blockGasLimit ?? "N/A"}
+          </p>
+        ) : (
+          <div className="flex h-[28px] w-[140px] py-1">
+            <Skeleton className="h-full w-full" />
+          </div>
+        )}
+      </PrimaryInfoItem>
     </>
   );
 }