Skip to content

Commit

Permalink
Update ShieldedPoolDashboard.tsx
Browse files Browse the repository at this point in the history
  • Loading branch information
@zksquirrel
zksquirrel authored Nov 24, 2024
1 parent 48cec79 commit 7532081
Showing 1 changed file with 40 additions and 219 deletions.
259 changes: 40 additions & 219 deletions src/app/dashboard/ShieldedPoolDashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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";

Expand All @@ -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";

Expand Down Expand Up @@ -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,
Expand All @@ -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();

Expand Down Expand Up @@ -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) {
Expand All @@ -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">
Expand All @@ -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>
Expand Down

0 comments on commit 7532081

Please sign in to comment.