From f1b75a43cc593d8d3671b1bbbb789e7a53e1e50f Mon Sep 17 00:00:00 2001
From: Nadiem <nadiem8@msn.com>
Date: Thu, 27 Jun 2024 15:44:33 +0200
Subject: [PATCH 1/3] feat:add copy to Node count card

---
 apps/info-dashboard/messages/en.json | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/apps/info-dashboard/messages/en.json b/apps/info-dashboard/messages/en.json
index 8fd567d..0794734 100644
--- 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"
 }

From a4dda255174f70d237a66aa4f75df8cbaf09bb74 Mon Sep 17 00:00:00 2001
From: Nadiem <nadiem8@msn.com>
Date: Thu, 27 Jun 2024 15:44:50 +0200
Subject: [PATCH 2/3] fix:set node offline color to gray

---
 apps/info-dashboard/src/lib/fetchers/leaderboard.ts | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/apps/info-dashboard/src/lib/fetchers/leaderboard.ts b/apps/info-dashboard/src/lib/fetchers/leaderboard.ts
index b7bb7be..6fda427 100644
--- 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()

From db1869c42eacb54397a3fbf0b45908e847287e8a Mon Sep 17 00:00:00 2001
From: Nadiem <nadiem8@msn.com>
Date: Thu, 27 Jun 2024 15:45:38 +0200
Subject: [PATCH 3/3] feat:add node count card to the leaderboard

---
 .../src/app/leaderboard/page.tsx              | 48 +++++++++++++++++++
 1 file changed, 48 insertions(+)

diff --git a/apps/info-dashboard/src/app/leaderboard/page.tsx b/apps/info-dashboard/src/app/leaderboard/page.tsx
index 9e08bf8..bf0117d 100644
--- 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()}
 						>