From f4408d2483e5aed5e84350122aa41223a8082965 Mon Sep 17 00:00:00 2001
From: Influenzo <52459025+vasylcode@users.noreply.github.com>
Date: Wed, 6 Sep 2023 11:25:14 -0600
Subject: [PATCH] zetachain metrics added

---
 docs/zetachain/index.mdx                      |  4 ++
 .../_category_.json                           |  0
 .../checkers.md                               |  0
 src/components/MainpageMetrics/index.tsx      | 44 +++++++++++++++++++
 4 files changed, 48 insertions(+)
 rename docs/zetachain/{useful tools => useful-tools}/_category_.json (100%)
 rename docs/zetachain/{useful tools => useful-tools}/checkers.md (100%)
 create mode 100644 src/components/MainpageMetrics/index.tsx

diff --git a/docs/zetachain/index.mdx b/docs/zetachain/index.mdx
index 3ed4382a..3b20b92a 100644
--- a/docs/zetachain/index.mdx
+++ b/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/)
diff --git a/docs/zetachain/useful tools/_category_.json b/docs/zetachain/useful-tools/_category_.json
similarity index 100%
rename from docs/zetachain/useful tools/_category_.json
rename to docs/zetachain/useful-tools/_category_.json
diff --git a/docs/zetachain/useful tools/checkers.md b/docs/zetachain/useful-tools/checkers.md
similarity index 100%
rename from docs/zetachain/useful tools/checkers.md
rename to docs/zetachain/useful-tools/checkers.md
diff --git a/src/components/MainpageMetrics/index.tsx b/src/components/MainpageMetrics/index.tsx
new file mode 100644
index 00000000..ab93b9b7
--- /dev/null
+++ b/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;