From 54f7dc489cc1725201c64da554836e15162d335a Mon Sep 17 00:00:00 2001 From: Seth Landry Date: Tue, 4 Feb 2025 00:49:42 -0600 Subject: [PATCH] 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 <96025197+mintdart@users.noreply.github.com> --- components/RPCList/index.js | 2 +- pages/chain/[chain].js | 44 ++++++++++++++++++++++++++++++++----- 2 files changed, 39 insertions(+), 7 deletions(-) diff --git a/components/RPCList/index.js b/components/RPCList/index.js index 7bdedc196b..20f9455b61 100644 --- 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 ( -
+
+ @@ -117,6 +121,7 @@ function Chain({ chain }) { +
{`${chain.name} RPC URL List`} diff --git a/pages/chain/[chain].js b/pages/chain/[chain].js index fd68a2f721..26ba08b2e6 100644 --- 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 ( <> @@ -107,6 +110,7 @@ function Chain({ chain }) {
ChainID {t("currency")}Block Gas Limit
{chain.nativeCurrency ? chain.nativeCurrency.symbol : "none"} {blockGasLimit ?? "Unknown"}
@@ -124,10 +129,37 @@ function Chain({ chain }) {
- +
+ +
); } +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;