From ef08216a78d973ebf7e5fc0c5a5affea4f71e61b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Kaan=20Uzdo=C4=9Fan?= <kaanuzdogan@hotmail.com>
Date: Mon, 11 Mar 2024 17:20:30 +0100
Subject: [PATCH] Add repo totals

---
 docs/{5. repository.md => 5. repository.mdx} |  8 +--
 docs/TotalRepoSize.jsx                       | 56 ++++++++++++++++++++
 2 files changed, 61 insertions(+), 3 deletions(-)
 rename docs/{5. repository.md => 5. repository.mdx} (94%)
 create mode 100644 docs/TotalRepoSize.jsx

diff --git a/docs/5. repository.md b/docs/5. repository.mdx
similarity index 94%
rename from docs/5. repository.md
rename to docs/5. repository.mdx
index 93f56cd..e852210 100644
--- a/docs/5. repository.md	
+++ b/docs/5. repository.mdx	
@@ -1,10 +1,12 @@
+import TotalRepoSize from "./TotalRepoSize"
+
 # Contract Repository
 
 Verified contracts are stored in the Sourcify repository and are available via Web or IPFS.
 
-:::info
-You can fetch the Repository statistics, returning a list of the count of `full_match` and `partial_match` for each chain calling https://repo.sourcify.dev/stats.json
-:::
+<TotalRepoSize/>
+
+You can find the number of contracts and the total size for each chain and match type (full and partial) at https://repo.sourcify.dev/stats.json 
 
 ## IPFS
 
diff --git a/docs/TotalRepoSize.jsx b/docs/TotalRepoSize.jsx
new file mode 100644
index 0000000..4f35b9c
--- /dev/null
+++ b/docs/TotalRepoSize.jsx
@@ -0,0 +1,56 @@
+import React, { useState, useEffect } from "react";
+import LoadingOverlay from "../src/components/LoadingOverlay";
+
+const RepositoryStats = () => {
+  const [isLoading, setIsLoading] = useState(true);
+  const [fullMatches, setFullMatches] = useState(0);
+  const [partialMatches, setPartialMatches] = useState(0);
+  const [timestamp, setTimestamp] = useState("");
+
+  useEffect(() => {
+    const fetchStats = async () => {
+      const statsResponse = await fetch("https://repo.sourcify.dev/stats.json");
+      const statsData = await statsResponse.json();
+
+      let fullMatchSizeKByte = 0;
+      let partialMatchSizeKByte = 0;
+
+      Object.values(statsData).forEach((entry) => {
+        fullMatchSizeKByte += entry.full_match_size_kbyte;
+        partialMatchSizeKByte += entry.partial_match_size_kbyte;
+      });
+
+      setFullMatches(fullMatchSizeKByte / (1024 * 1024)); // Convert to GB
+      setPartialMatches(partialMatchSizeKByte / (1024 * 1024)); // Convert to GB
+
+      const manifestResponse = await fetch("https://repo.sourcify.dev/manifest.json");
+      const manifestData = await manifestResponse.json();
+
+      const date = new Date(manifestData.timestamp);
+      setTimestamp(date.toUTCString());
+
+      setIsLoading(false);
+    };
+
+    fetchStats();
+  }, []);
+
+  if (isLoading) {
+    return <LoadingOverlay message="Calculating the repository size" />;
+  }
+
+  return (
+    <div>
+      <p>As of {timestamp} the size of the repository files is as follows:</p>
+      <ul>
+        <li>Full Matches: {fullMatches.toFixed(2)} GB</li>
+        <li>Partial Matches: {partialMatches.toFixed(2)} GB</li>
+        <li>
+          <strong>Total size: {(fullMatches + partialMatches).toFixed(2)} GB</strong>
+        </li>
+      </ul>
+    </div>
+  );
+};
+
+export default RepositoryStats;