Merge pull request #51 from Lilypad-Tech/nadiem/add-total-node-card

Nadiem/add total node card
Lilypad-Tech · Jun 27, 2024 · 7ea23e2 · 7ea23e2
2 parents 2c63d05 + db1869c
commit 7ea23e2
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 7 deletions.
diff --git a/apps/info-dashboard/messages/en.json b/apps/info-dashboard/messages/en.json
@@ -72,5 +72,8 @@
 	"leaderboard_incentive_program_week_title": "This week",
 	"leaderboard_incentive_program_title": "Incentive program: Lilybit_rewards earned",
 	"leaderboard_get_started_node_provider_button_link": "https://lilypad.tech/incentivenet",
-	"leaderboard_get_started_node_provider_button_text": "Get started"
+	"leaderboard_get_started_node_provider_button_text": "Get started",
+	"leaderboard_node_count_total_title": "Total",
+	"leaderboard_node_count_online_title": "Online",
+	"leaderboard_node_count_card_title": "Node count"
 }
diff --git a/apps/info-dashboard/src/app/leaderboard/page.tsx b/apps/info-dashboard/src/app/leaderboard/page.tsx
@@ -29,6 +29,7 @@ import Tooltip from "@/components/Tooltip/Tooltip";
 import { fetchNodes } from "@/lib/fetchers/nodes";
 import CardWithBorder from "@/components/CardWithBorder/CardWithBorder";
 import Anchor from "@/components/Anchor/Anchor";
+import RandomHexSpan from "@/components/Random/RandomHexSpan";
 
 // `${API_HOST}metrics-dashboard/metrics` is the endpoint for the metrics dashboard
 
@@ -107,6 +108,53 @@ export default function Leaderboard() {
 				<SectionContainer className="sm:pt-uui-container-padding-desktop mx-auto pt-uui-container-padding-mobile">
 					{/* Set max height & min height to make table scrollable & minimize layout shifts on state changes */}
 					<div className="flex flex-col mb-uui-xl md:mb-uui-4xl space-y-uui-xl md:space-y-uui-none md:flex-row md:space-x-uui-3xl">
+						<CardWithBorder
+							className="md:[&&]:w-1/2 "
+							title={m.leaderboard_node_count_card_title()}
+						>
+							<div className="flex space-x-uui-5xl">
+								<div className="flex-col flex space-y-uui-xs">
+									<span className="uui-text-sm font-medium text-uui-text-tertiary-600">
+										{m.leaderboard_node_count_total_title()}
+									</span>
+									<span className="text-uui-text-primary-900 uui-display-sm font-semibold">
+										{nodesIsLoading ? (
+											<RandomHexSpan
+												length={4}
+											></RandomHexSpan>
+										) : nodesIsError ? (
+											<span>!err</span>
+										) : (
+											<span>{nodesData?.length}</span>
+										)}
+									</span>
+								</div>
+								<div className="flex-col flex space-y-uui-xs">
+									<span className="uui-text-sm font-medium text-uui-text-tertiary-600">
+										{m.leaderboard_node_count_online_title()}
+									</span>
+									<span className="text-uui-text-primary-900 uui-display-sm font-semibold">
+										{/* Todo add api total Lilybit_rewards earned */}
+
+										{nodesIsLoading ? (
+											<RandomHexSpan
+												length={2}
+											></RandomHexSpan>
+										) : nodesIsError ? (
+											<span>!err</span>
+										) : (
+											<span>
+												{
+													nodesData?.filter(
+														(node) => node.Online
+													).length
+												}
+											</span>
+										)}
+									</span>
+								</div>
+							</div>
+						</CardWithBorder>
 						<CardWithBorder
 							title={m.leaderboard_incentive_program_title()}
 						>

diff --git a/apps/info-dashboard/src/lib/fetchers/leaderboard.ts b/apps/info-dashboard/src/lib/fetchers/leaderboard.ts
@@ -70,12 +70,7 @@ export function toTableData({
 			)?.Online;
 			return {
 				online,
-				color:
-					online === undefined
-						? "gray"
-						: online
-						? "success"
-						: "error",
+				color: online ? "success" : "gray",
 				translation:
 					online === undefined
 						? m.leaderboard_node_provider_table_no_data_status()