Add block gas limit in each chain card (#1511)

* Add block gas limit in each chain card Related to #1426 Add block gas limit display to each chain card. * Add a new state variable `blockGasLimit` with a default value of 'Unknown'. * Fetch the block gas limit data for each chain using the chain's RPC URL. * Update the table in the chain card to include a new column for the block gas limit. * Display the fetched block gas limit in the new column, or 'Unknown' if the data is not available. --- For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/DefiLlama/chainlist/issues/1426?shareId=XXXX-XXXX-XXXX-XXXX). * Add a new table row to display the block gas limit with a tooltip * Import Tooltip component * Add a new table row for block gas limit with a tooltip to display the value * Set the default value of block gas limit to 'Hover to see' * show block gas limit on chain page --------- Co-authored-by: mintdart <[email protected]>
DefiLlama · Feb 4, 2025 · 54f7dc4 · 54f7dc4
1 parent eff5d62
commit 54f7dc4
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 7 deletions.
diff --git a/components/RPCList/index.js b/components/RPCList/index.js
@@ -80,7 +80,7 @@ export default function RPCList({ chain, lang }) {
   const { rpcData, hasLlamaNodesRpc } = useLlamaNodesRpcData(chain.chainId, data);
 
   return (
-    <div className="shadow dark:bg-[#0D0D0D] bg-white p-8 rounded-[10px] flex flex-col gap-3 overflow-hidden col-span-full relative overflow-x-auto">
+    <div className="shadow dark:bg-[#0D0D0D] bg-white p-8 rounded-[10px] flex flex-col gap-3 col-span-full relative overflow-x-auto">
       <table className="m-0 border-collapse whitespace-nowrap dark:text-[#B3B3B3] text-black">
         <caption className="relative w-full px-3 py-1 text-base font-medium border border-b-0">
           <span className="mr-4">{`${chain.name} RPC URL List`}</span>

diff --git a/pages/chain/[chain].js b/pages/chain/[chain].js
@@ -9,14 +9,14 @@ import Layout from "../../components/Layout";
 import RPCList from "../../components/RPCList";
 import chainIds from "../../constants/chainIds.js";
 import { overwrittenChains } from "../../constants/additionalChainRegistry/list";
+import { useQuery } from "@tanstack/react-query";
 
 export async function getStaticProps({ params }) {
   const [chains, chainTvls] = await Promise.all([
     fetcher("https://chainid.network/chains.json"),
-    fetcher("https://api.llama.fi/chains")
+    fetcher("https://api.llama.fi/chains"),
   ]);
 
-
   const chain =
     overwrittenChains.find(
       (c) =>
@@ -39,9 +39,7 @@ export async function getStaticProps({ params }) {
 
   return {
     props: {
-      chain: chain
-        ? populateChain(chain, chainTvls)
-        : null,
+      chain: chain ? populateChain(chain, chainTvls) : null,
       // messages: (await import(`../../translations/${locale}.json`)).default,
     },
     revalidate: 3600,
@@ -76,6 +74,11 @@ function Chain({ chain }) {
     return chain?.chainSlug ? `https://icons.llamao.fi/icons/chains/rsz_${chain.chainSlug}.jpg` : "/unknown-logo.png";
   }, [chain]);
 
+  const { data: blockGasLimit } = useQuery({
+    queryKey: ["blockGasLimit", chain?.rpc?.[0]],
+    queryFn: () => fetchBlockGasLimit(chain?.rpc?.[0]?.url),
+  });
+
   return (
     <>
       <Head>
@@ -107,6 +110,7 @@ function Chain({ chain }) {
               <tr>
                 <th className="font-normal text-gray-500 dark:text-[#B3B3B3]">ChainID</th>
                 <th className="font-normal text-gray-500 dark:text-[#B3B3B3]">{t("currency")}</th>
+                <th className="font-normal text-gray-500 dark:text-[#B3B3B3]">Block Gas Limit</th>
               </tr>
             </thead>
             <tbody>
@@ -117,17 +121,45 @@ function Chain({ chain }) {
                 <td className="text-center font-bold px-4 dark:text-[#B3B3B3]">
                   {chain.nativeCurrency ? chain.nativeCurrency.symbol : "none"}
                 </td>
+                <td className="text-center font-bold px-4 dark:text-[#B3B3B3]">{blockGasLimit ?? "Unknown"}</td>
               </tr>
             </tbody>
           </table>
 
           <AddNetwork chain={chain} buttonOnly lang="en" />
         </div>
 
-        <RPCList chain={chain} lang="en" />
+        <div className="max-w-[calc(60vw-56px)]">
+          <RPCList chain={chain} lang="en" />
+        </div>
       </Layout>
     </>
   );
 }
 
+async function fetchBlockGasLimit(rpc) {
+  if (!rpc) return null;
+  try {
+    const response = await fetch(rpc, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        jsonrpc: "2.0",
+        method: "eth_getBlockByNumber",
+        params: ["latest", false],
+        id: 1,
+      }),
+    });
+    const data = await response.json();
+    if (data.result && data.result.gasLimit) {
+      return parseInt(data.result.gasLimit, 16);
+    }
+    return "Unknown";
+  } catch (error) {
+    console.error("Error fetching block gas limit:", error);
+  }
+}
+
 export default Chain;