From 7532081076d036ef65bd3bbfdcc14cdf1aa295e7 Mon Sep 17 00:00:00 2001
From: squirrel <47972284+zksquirrel@users.noreply.github.com>
Date: Sun, 24 Nov 2024 16:06:54 +0000
Subject: [PATCH] Update ShieldedPoolDashboard.tsx

---
 src/app/dashboard/ShieldedPoolDashboard.tsx | 259 +++-----------------
 1 file changed, 40 insertions(+), 219 deletions(-)

diff --git a/src/app/dashboard/ShieldedPoolDashboard.tsx b/src/app/dashboard/ShieldedPoolDashboard.tsx
index 4983bfd..f23b056 100644
--- a/src/app/dashboard/ShieldedPoolDashboard.tsx
+++ b/src/app/dashboard/ShieldedPoolDashboard.tsx
@@ -4,6 +4,7 @@ import { useEffect, useState } from "react";
 import Button from "@/components/Button/Button";
 import Checkbox from "@/components/Checkbox/Checkbox";
 import Tools from "@/components/tools";
+import ZecToZatsConverter from "@/components/Converter/ZecToZatsConverter"; // Import Zec to Zats Converter
 import useExportDashboardAsPNG from "@/hooks/useExportDashboardAsPNG";
 import dynamic from "next/dynamic";
 
@@ -27,7 +28,7 @@ const orchardUrl =
   "https://raw.githubusercontent.com/ZecHub/zechub-wiki/main/public/data/orchard_supply.json";
 const hashrateUrl =
   "https://raw.githubusercontent.com/ZecHub/zechub-wiki/main/public/data/hashrate.json";
-  
+
 const txsummaryUrl =
   "https://raw.githubusercontent.com/ZecHub/zechub-wiki/main/public/data/transaction_summary.json";
 
@@ -150,7 +151,6 @@ async function getShieldedTxCount(): Promise<ShieldedTxCount | null> {
       return null;
     }
     const data = await response.json();
-    // Get the latest data entry and handle missing fields by defaulting to zero
     const latestData = data[data.length - 1] || {};
     return {
       sapling: latestData.sapling || 0,
@@ -165,18 +165,17 @@ async function getShieldedTxCount(): Promise<ShieldedTxCount | null> {
 
 const ShieldedPoolDashboard = () => {
   const [selectedPool, setSelectedPool] = useState("default");
-  const [blockchainInfo, setBlockchainInfo] = useState<BlockchainInfo | null>(null);
+  const [blockchainInfo, setBlockchainInfo] = useState<BlockchainInfo | null>(
+    null
+  );
   const [circulation, setCirculation] = useState<number | null>(null);
   const [sproutSupply, setSproutSupply] = useState<SupplyData | null>(null);
   const [saplingSupply, setSaplingSupply] = useState<SupplyData | null>(null);
   const [orchardSupply, setOrchardSupply] = useState<SupplyData | null>(null);
   const [lastUpdated, setLastUpdated] = useState<string | null>(null);
-  const [shieldedTxCount, setShieldedTxCount] = useState<ShieldedTxCount | null>(null);
-
-  const [selectedTool, setSelectedTool] = useState<string>('supply');
-  const [selectedToolName, setSelectedToolName] = useState<string>('Shielded Supply Chart (ZEC)');
-  const [cumulativeCheck, setCumulativeCheck] = useState(true);
-  const [filterSpamCheck, setfilterSpamCheck] = useState(false);  
+  const [shieldedTxCount, setShieldedTxCount] = useState<ShieldedTxCount | null>(
+    null
+  );
 
   const { divChartRef, handleSaveToPng } = useExportDashboardAsPNG();
 
@@ -207,73 +206,14 @@ const ShieldedPoolDashboard = () => {
     getShieldedTxCount().then((data) =>
       setShieldedTxCount(data ?? { sapling: 0, orchard: 0, timestamp: "N/A" })
     );
-
   }, []);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      const data = await getSupplyData(getDataUrl());
-      setLastUpdated(data[data.length - 1]?.timestamp?.split("T")[0] || "N/A");
-    };
-    fetchData();
-  }, [selectedPool]);
-
-  const getDataUrl = () => {
-    switch (selectedPool) {
-      case "sprout":
-        return sproutUrl;
-      case "sapling":
-        return saplingUrl;
-      case "orchard":
-        return orchardUrl;
-      case "hashrate":
-        return hashrateUrl;
-      default:
-        return defaultUrl;
-    }
-  };
-
-  const getDataColor = () => {
-    switch (selectedPool) {
-      case "sprout":
-        return "#A020F0";
-      case "sapling":
-        return "#FFA500";
-      case "orchard":
-        return "#32CD32";
-      default:
-        return "url(#area-background-gradient)";
-    }
-  };
-
   const getTotalShieldedSupply = () => {
-    const totalSupply =
+    return (
       (sproutSupply?.supply ?? 0) +
       (saplingSupply?.supply ?? 0) +
-      (orchardSupply?.supply ?? 0);
-    return totalSupply;
-  };
-
-  const handleToolChange = (tool: string) => {
-    setSelectedTool(tool);
-    switch(tool) {
-      case "supply":
-        setSelectedPool("default");
-        setSelectedToolName("Shielded Supply Chart (ZEC)");
-        break;
-      case "transaction":
-        setSelectedPool("default");
-        setSelectedToolName("Shielded Transactions Chart (ZEC)");
-        break;
-    }
-  };
-
-  const handleCumulativeChange = (checked: boolean) => {
-    setCumulativeCheck(checked);
-  };
-
-  const handleFilterChange = (checked: boolean) => {
-    setfilterSpamCheck(checked);
+      (orchardSupply?.supply ?? 0)
+    );
   };
 
   if (!blockchainInfo) {
@@ -282,17 +222,12 @@ const ShieldedPoolDashboard = () => {
 
   return (
     <div>
-      <h2 className="font-bold mt-8 mb-4">{selectedToolName}</h2>
+      <h2 className="font-bold mt-8 mb-4">Shielded Supply Chart (ZEC)</h2>
       <div className="border p-3 rounded-lg">
-        <Tools onToolChange={handleToolChange} />
+        <Tools />
         <div className="relative">
           <div ref={divChartRef}>
-            {selectedTool === 'supply' && (
-              <ShieldedPoolChart dataUrl={getDataUrl()} color={getDataColor()} />            
-            )}
-            {selectedTool === 'transaction' && (
-              <TransactionSummaryChart dataUrl={txsummaryUrl} pool={selectedPool} cumulative={cumulativeCheck} filter={filterSpamCheck}/>
-            )}
+            <ShieldedPoolChart dataUrl={defaultUrl} color="blue" />
           </div>
         </div>
         <div className="flex justify-end gap-12 text-right mt-4 text-sm text-gray-500">
@@ -308,152 +243,38 @@ const ShieldedPoolDashboard = () => {
                 sproutSupply,
                 saplingSupply,
                 orchardSupply,
-              }, selectedTool)
+              })
             }
           />
         </div>
       </div>
-      {selectedTool === 'supply' && (
-      <div className="mt-8 flex flex-col items-center">        
+      <div className="mt-8 flex flex-col items-center">
         <div className="flex justify-center space-x-4">
-          <div className="flex flex-col items-center">          
-            <Button
-              onClick={() => setSelectedPool("default")}
-              text="Total Shielded"
-              className={`rounded-[0.4rem] py-2 px-4 text-white ${
-                selectedPool === "default" ? "bg-[#1984c7]" : "bg-gray-400"
-              }`}
-            />
-            <span className="text-sm text-gray-600">
-              {getTotalShieldedSupply().toLocaleString()} ZEC
-            </span>
-          </div>
-        
-          <div className="flex flex-col items-center">
-            <Button
-              onClick={() => setSelectedPool("sprout")}
-              text="Sprout Pool"
-              className={`rounded-[0.4rem] py-2 px-4 text-white ${
-                selectedPool === "sprout" ? "bg-[#1984c7]" : "bg-gray-400"
-              }`}
-            />
-            <span className="text-sm text-gray-600">
-              {sproutSupply ? `${sproutSupply.supply.toLocaleString()} ZEC` : "Loading..."}
-            </span>
-          </div>
-          <div className="flex flex-col items-center">
-            <Button
-              onClick={() => setSelectedPool("sapling")}
-              text="Sapling Pool"
-              className={`rounded-[0.4rem] py-2 px-4 text-white ${
-                selectedPool === "sapling" ? "bg-[#1984c7]" : "bg-gray-400"
-              }`}
-            />
-            <span className="text-sm text-gray-600">
-              {saplingSupply ? `${saplingSupply.supply.toLocaleString()} ZEC` : "Loading..."}
-            </span>
-          </div>
-          <div className="flex flex-col items-center">
-            <Button
-              onClick={() => setSelectedPool("orchard")}
-              text="Orchard Pool"
-              className={`rounded-[0.4rem] py-2 px-4 text-white ${
-                selectedPool === "orchard" ? "bg-[#1984c7]" : "bg-gray-400"
-              }`}
-            />
-            <span className="text-sm text-gray-600">
-              {orchardSupply ? `${orchardSupply.supply.toLocaleString()} ZEC` : "Loading..."}
-            </span>
-          </div>
-        </div>        
-      </div>
-      )}
-      {selectedTool === 'transaction' && (
-      <div className="mt-8 flex flex-col items-center">        
-        <div className="flex justify-center space-x-4">
-          <div className="flex flex-col items-center">          
-            <Button
-              onClick={() => setSelectedPool("default")}
-              text="Sapling + Orchard"
-              className={`rounded-[0.4rem] py-2 px-4 text-white ${
-                selectedPool === "default" ? "bg-[#1984c7]" : "bg-gray-400"
-              }`}
-            />
-          </div>
-          <div className="flex flex-col items-center">
-            <Button
-              onClick={() => setSelectedPool("sapling")}
-              text="Sapling"
-              className={`rounded-[0.4rem] py-2 px-4 text-white ${
-                selectedPool === "sapling" ? "bg-[#1984c7]" : "bg-gray-400"
-              }`}
-            />
-          </div>
-          <div className="flex flex-col items-center">
-            <Button
-              onClick={() => setSelectedPool("orchard")}
-              text="Orchard"
-              className={`rounded-[0.4rem] py-2 px-4 text-white ${
-                selectedPool === "orchard" ? "bg-[#1984c7]" : "bg-gray-400"
-              }`}
-            />           
-          </div>  
-          <div className="flex flex-col items-center">
-            <Checkbox
-              checked={cumulativeCheck}
-              onChange={handleCumulativeChange}
-              label="Cumulative Values"
-              className="custom-checkbox"
-            />          
-          </div>   
-          <div className="flex flex-col items-center">
-            <Checkbox
-              checked={filterSpamCheck}
-              onChange={handleFilterChange}
-              label="Filter Spam"
-              className="custom-checkbox"
-            />          
-          </div>
-        </div>        
-      </div>
-      )}
-     
-      <div className="flex flex-wrap gap-8 justify-center items-center mt-8">
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">Market Cap</h3>
-          <p>${blockchainInfo.market_cap_usd?.toLocaleString()}</p>
-        </div>
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">ZEC in Circulation</h3>
-          <p>{circulation?.toLocaleString() ?? "N/A"} ZEC</p>
-        </div>
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">Market Price (USD)</h3>
-          <p>${blockchainInfo.market_price_usd?.toFixed(2)}</p>
-        </div>
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">Market Price (BTC)</h3>
-          <p>{blockchainInfo.market_price_btc}</p>
-        </div>
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">Blocks</h3>
-          <p>{blockchainInfo.blocks?.toLocaleString()}</p>
-        </div>
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">24h Transactions</h3>
-          <p>{blockchainInfo.transactions_24h?.toLocaleString()}</p>
-        </div>
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">Nodes</h3>
-          <p>{blockchainInfo.nodes}</p>
+          <Button
+            text="Total Shielded"
+            className={`rounded-[0.4rem] py-2 px-4 text-white ${
+              selectedPool === "default" ? "bg-[#1984c7]" : "bg-gray-400"
+            }`}
+            onClick={() => setSelectedPool("default")}
+          />
+          <Button
+            text="Sprout Pool"
+            className={`rounded-[0.4rem] py-2 px-4 text-white ${
+              selectedPool === "sprout" ? "bg-[#1984c7]" : "bg-gray-400"
+            }`}
+            onClick={() => setSelectedPool("sprout")}
+          />
         </div>
-        <div className="border p-4 rounded-md text-center">
-          <h3 className="font-bold text-lg">Shielded TX (24h)</h3>
-          <p>
-            {shieldedTxCount
-              ? `Sapling: ${shieldedTxCount?.sapling?.toLocaleString()} | Orchard: ${shieldedTxCount.orchard?.toLocaleString()}`
-              : "N/A"}
-          </p>
+        <div
+          className="mt-8 w-full max-w-md"
+          style={{
+            background: "rgba(255, 255, 255, 0.85)",
+            borderRadius: "10px",
+            boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+            padding: "20px",
+          }}
+        >
+          <ZecToZatsConverter />
         </div>
       </div>
     </div>