zetachain metrics added

docs/zetachain/index.mdx

@@ -1,5 +1,9 @@
 # Zetachain
 
+import MainpageMetrics from '@site/src/components/MainpageMetrics';
+
+<MainpageMetrics rpc="https://zetachain-rpc.f5nodes.com/net_info" binary="zetacored" />
+
 [Zetachain](https://www.zetachain.com/) is an EVM-compatible L1 blockchain that connects everything: Build interoperable dApps that span any chain, including Bitcoin; access all chains from one place.
 
 [Website](https://www.zetachain.com/) | [Blog](https://www.zetachain.com/blog) | [GitHub](https://github.com/zeta-chain) | [Twitter](https://twitter.com/zetablockchain) | [Discord](https://discord.gg/zetachain) | [Docs](https://docs.zetachain.com/)

src/components/MainpageMetrics/index.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from "react";
+
+interface MainpageMetricsProps {
+	rpc: string;
+	binary: string;
+}
+
+const MainpageMetrics: React.FC<MainpageMetricsProps> = ({ rpc, binary }) => {
+	const [network, setNetwork] = useState<string>("");
+	const [isLoading, setIsLoading] = useState<boolean>(true);
+
+	useEffect(() => {
+		const fetchNetworkInfo = async () => {
+			try {
+				const response = await fetch(`${rpc}/status`);
+				const data = await response.json();
+
+				const networkInfo = data.result.node_info.network;
+				setNetwork(networkInfo);
+				setIsLoading(false);
+			} catch (error) {
+				console.error(`Failed to fetch network info for RPC ${rpc}:`, error);
+				setIsLoading(false);
+			}
+		};
+
+		fetchNetworkInfo();
+	}, [rpc]);
+
+	return (
+		<>
+			{isLoading ? (
+				<p>Loading metrics info...</p>
+			) : (
+				<>
+					<h4>Network: {network}</h4>
+					<p>Binary Value: {binary}</p>
+				</>
+			)}
+		</>
+	);
+};
+
+export default MainpageMetrics;