From 056217493cf7c54704f99742952dfc1eed8e6af3 Mon Sep 17 00:00:00 2001
From: Tommy Kammerer <tk@digitalsirup.com>
Date: Thu, 3 Oct 2024 23:09:43 +0200
Subject: [PATCH] Add network stats page

---
 .gitignore           |   1 +
 docusaurus.config.js |   7 +++
 package.json         |   2 +
 src/pages/network.js | 112 +++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 122 insertions(+)
 create mode 100644 src/pages/network.js

diff --git a/.gitignore b/.gitignore
index 28ea393..ef7b4ae 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,6 +10,7 @@
 
 # Misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 3cc7892..7afa655 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -6,6 +6,10 @@
 
 import {themes as prismThemes} from 'prism-react-renderer';
 
+// Dotenv is a zero-dependency module that loads environment 
+// variables from a .env file into process.env
+import 'dotenv/config'; 
+
 // GitHub Settings to setup repository and branch customFields
 const vars = require('./variables')
 
@@ -33,6 +37,9 @@ const config = {
   customFields: {
     repository: `${vars.repository}`,
     branch: `${vars.branch}`,
+
+    // put your blockfrost id in your .env file 
+    REACT_APP_BLOCKFROST_APP_PROJECT_ID: process.env.REACT_APP_BLOCKFROST_APP_PROJECT_ID,
   },
   // Even if you don't use internationalization, you can use this field to set
   // useful metadata like html lang. For example, if your site is Chinese, you
diff --git a/package.json b/package.json
index 9b10a0b..6d30419 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,9 @@
     "@emotion/styled": "^11.11.0",
     "@mdx-js/react": "^3.0.0",
     "@tippyjs/react": "^4.2.6",
+    "axios": "^1.7.7",
     "clsx": "^2.0.0",
+    "dotenv": "^16.4.5",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-chrono": "^2.6.1",
diff --git a/src/pages/network.js b/src/pages/network.js
new file mode 100644
index 0000000..8978e14
--- /dev/null
+++ b/src/pages/network.js
@@ -0,0 +1,112 @@
+import React, { useState, useEffect } from 'react'; 
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
+import Layout from "@theme/Layout";
+import SiteHero from "@site/src/components/Layout/SiteHero";
+import BoundaryBox from "@site/src/components/Layout/BoundaryBox";
+import TitleWithText from "@site/src/components/Layout/TitleWithText";
+import OpenGraphImage from "@site/src/components/Layout/OpenGraphImage";
+import SpacerBox from "@site/src/components/Layout/SpacerBox";
+import BackgroundWrapper from "@site/src/components/Layout/BackgroundWrapper";
+import axios from 'axios';
+
+// convert Lovelaces to ada and round to the nearest full ada
+const convertLovelacesToAda = (lovelaces) => {
+  return Math.round(lovelaces / 1_000_000).toLocaleString();
+};
+
+const NetworkStats = () => {
+  const [data, setData] = useState(null);
+  const [error, setError] = useState(null);
+
+  // Blockfrost id, see docusaurus.config.js for details
+  const { siteConfig: {customFields}} = useDocusaurusContext();
+  const PROJECT_ID = customFields.REACT_APP_BLOCKFROST_APP_PROJECT_ID;
+
+  useEffect(() => {
+    // Make sure the environment variable is loaded
+    if (!PROJECT_ID) {
+      setError('Blockfrost API key is missing!');
+      return;
+    }
+
+    // API request to Blockfrost
+    axios.get('https://cardano-mainnet.blockfrost.io/api/v0/network', {
+      headers: {
+        'project_id': PROJECT_ID
+      }
+    })
+    .then((response) => {
+      setData(response.data);  // Set the data in state
+    })
+    .catch((error) => {
+      console.error('Error fetching data:', error);
+      setError(error.message);  // Set the error message in case of failure
+    });
+  }, []);
+
+  // Render the values in ada or an error message if available
+  return (
+    <div>
+      {error ? (
+        <p>Error: {error}</p>
+      ) : data !== null ? (
+        <div>
+          <TitleWithText title="Supply" 
+            description={[
+              `**Max:** ${convertLovelacesToAda(data.supply.max)} ada`,
+              `**Total:** ${convertLovelacesToAda(data.supply.total)} ada`,
+              `**Circulating:** ${convertLovelacesToAda(data.supply.circulating)} ada`,      `**Locked:** ${convertLovelacesToAda(data.supply.locked)} ada`,
+              `**Treasury:** ${convertLovelacesToAda(data.supply.treasury)} ada`,
+              `**Reserves:** ${convertLovelacesToAda(data.supply.reserves)} ada`
+            ]}
+            headingDot={true} 
+          /> 
+
+          <TitleWithText title="Stake" 
+            description={[
+              `**Live:** ${convertLovelacesToAda(data.stake.live)} ada`,
+              `**Active:** ${convertLovelacesToAda(data.stake.active)} ada`
+            ]}
+            headingDot={false} 
+          /> 
+          
+        </div>
+      ) : (
+        <p>Loading...</p>
+      )}
+    </div>
+  );
+};
+
+
+function HomepageHeader() {
+  const { siteTitle } = "useDocusaurusContext()"; // Ensure this works as needed for Docusaurus
+  return (
+    <SiteHero
+      title="Network Data"
+      description="Cardano mainnet network stats"
+      bannerType="zoom"
+    />
+  );
+}
+
+export default function Home() {
+
+  return (
+    <Layout
+      title="Cardano Network | cardano.org"
+      description="Network Data"
+    >
+      <OpenGraphImage pageName="network" />
+      <HomepageHeader />
+      <main>
+        <BoundaryBox>
+          <BackgroundWrapper backgroundType="zoom">
+            <NetworkStats />
+            <SpacerBox size="medium" />
+          </BackgroundWrapper>
+        </BoundaryBox>
+      </main>
+    </Layout>
+  );
+}
\ No newline at end of file