From 1e7257b957367d93a4836fe48974392a45bf97ef Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Fri, 5 Sep 2025 17:05:22 +0300
Subject: [PATCH 1/9] myrichlist so far

---
 components/ExploreMenu.tsx             |   4 +-
 components/footer.tsx                  |   4 +
 components/navbar.tsx                  |   5 ++
 components/ui/TopHoldersPagination.tsx |  46 +++++++++++
 pages/top-holders.tsx                  | 109 +++++++++++++++++++++++++
 5 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 components/ui/TopHoldersPagination.tsx
 create mode 100644 pages/top-holders.tsx

diff --git a/components/ExploreMenu.tsx b/components/ExploreMenu.tsx
index 11e778b35..a1aeed5ea 100644
--- a/components/ExploreMenu.tsx
+++ b/components/ExploreMenu.tsx
@@ -1,9 +1,10 @@
 // src/components/layout/ExploreMenu.tsx
+// At the top with imports
 
 import React, { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { useI18n } from "@/i18n/i18n";
-import { Users, Vote, Menu, UserCheck, SettingsIcon } from "lucide-react";
+import { Users, Vote, Menu, UserCheck, SettingsIcon,Award } from "lucide-react";
 import {
   Popover,
   PopoverContent,
@@ -55,6 +56,7 @@ export function ExploreMenu() {
               <ExploreListItem href="/communities" title={t("navbar.communitiesTitle")} icon={Users} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/proposals" title={t("navbar.proposalsTitle")} icon={Vote} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/witnesses" title={t("navbar.witnessesTitle")} icon={UserCheck} closeMenu={() => setIsOpen(false)} />
+              <ExploreListItem href="/top-holders" title="Top Holders" icon={Award}   closeMenu={() => setIsOpen(false)}/>
               <ExploreListItem href="/settings" title={t("navbar.settingsTitle")} icon={SettingsIcon} closeMenu={() => setIsOpen(false)} />
           </div>
         </PopoverContent>
diff --git a/components/footer.tsx b/components/footer.tsx
index 125d15fc5..3142c08fb 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -200,6 +200,10 @@ const Footer = () => {
                   {t("footer.witnessSchedule")}
                 </Link>
               </li>
+              <li>
+                  <Link href="/top-holders" className="hover:opacity-75">
+                                  Top Holders</Link>
+              </li>
             </ul>
           </div>
 
diff --git a/components/navbar.tsx b/components/navbar.tsx
index a8264e309..033c4f4a2 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -99,6 +99,11 @@ export default function Navbar() {
                       <UserCheck className="mr-2 mt-1 flex-shrink-0" size={20} />
                       <span className="text-base ml-2">{t("navbar.witnessesTitle")}</span>
                     </Link>
+                    <Link href={"/top-holders"} className="py-1 border-b-2 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
+                    <Users className="mr-2 mt-1 flex-shrink-0" size={20} />
+                    <span className="text-base ml-2">Top Holders</span>
+                    </Link>
+
                     <Link href={"/settings"} className="py-1 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
                       <SettingsIcon className="mr-2 mt-1 flex-shrink-0" size={20} />
                       <span className="text-base ml-2">{t("navbar.additionalSettingsTitle")}</span>
diff --git a/components/ui/TopHoldersPagination.tsx b/components/ui/TopHoldersPagination.tsx
new file mode 100644
index 000000000..b3c3efeaa
--- /dev/null
+++ b/components/ui/TopHoldersPagination.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  Pagination,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+} from "@/components/ui/pagination";
+
+interface Props {
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  totalPages: number;
+}
+
+const TopHoldersPagination: React.FC<Props> = ({ currentPage, onPageChange, totalPages }) => {
+  const pagesToShow = 5; // Number of page buttons to display
+  const startPage = Math.max(1, currentPage - Math.floor(pagesToShow / 2));
+  const endPage = Math.min(totalPages, startPage + pagesToShow - 1);
+
+  const pageNumbers = [];
+  for (let i = startPage; i <= endPage; i++) pageNumbers.push(i);
+
+  return (
+    <Pagination>
+      <PaginationPrevious
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+      />
+      {pageNumbers.map((page) => (
+        <PaginationItem key={page}>
+          <PaginationLink
+            isActive={page === currentPage}
+            onClick={() => onPageChange(page)}
+          >
+            {page}
+          </PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationNext
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+      />
+    </Pagination>
+  );
+};
+
+export default TopHoldersPagination;
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
new file mode 100644
index 000000000..ac6231bdf
--- /dev/null
+++ b/pages/top-holders.tsx
@@ -0,0 +1,109 @@
+// pages/top-holders.tsx
+import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
+import { Pagination } from "@/components/ui/pagination";
+import PageTitle from "@/components/PageTitle";
+import ErrorMessage from "@/components/ErrorMessage";
+import NoResult from "@/components/NoResult";
+import TopHoldersPagination from "@/components/ui/TopHoldersPagination";
+
+interface Holder {
+  account: string;
+  balance: string;
+}
+
+export default function TopHoldersPage() {
+  const [holders, setHolders] = useState<Holder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [coinType, setCoinType] = useState("HIVE");
+  const [balanceType, setBalanceType] = useState("balance");
+
+  useEffect(() => {
+    fetchHolders();
+  }, [page, coinType, balanceType]);
+
+  const fetchHolders = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `https://api.syncad.com/balance-api/top-holders?coin-type=${coinType}&balance-type=${balanceType}&page=${page}`
+      );
+      if (!res.ok) throw new Error(`API error: ${res.status}`);
+      const data = await res.json();
+      setHolders(data?.holders || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <PageTitle titleKey="Top Holders (Richlist)" />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Filters</CardTitle>
+        </CardHeader>
+        <div className="flex gap-4 p-4">
+          <Select value={coinType} onValueChange={setCoinType}>
+            <option value="HIVE">HIVE</option>
+            <option value="HBD">HBD</option>
+          </Select>
+
+          <Select value={balanceType} onValueChange={setBalanceType}>
+            <option value="balance">Balance</option>
+            <option value="savings">Savings</option>
+            <option value="staked">Staked</option>
+          </Select>
+        </div>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Richlist</CardTitle>
+        </CardHeader>
+        <div className="p-4">
+          {loading && <p>Loading...</p>}
+          {error && <ErrorMessage message={error} />}
+          {!loading && !error && holders.length === 0 && <NoResult />}
+          {!loading && !error && holders.length > 0 && (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableCell>Rank</TableCell>
+                  <TableCell>Account</TableCell>
+                  <TableCell>Balance</TableCell>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {holders.map((holder, idx) => (
+                  <TableRow key={holder.account}>
+                    <TableCell>{idx + 1 + (page - 1) * 50}</TableCell>
+                    <TableCell>{holder.account}</TableCell>
+                    <TableCell>{holder.balance}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+
+          <div className="mt-4 flex justify-center">
+            <TopHoldersPagination
+              currentPage={page}
+              onPageChange={setPage}
+              totalPages={1000} // ideally from API if available
+            />
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
-- 
GitLab


From 24d1f49dd110f89bf6bb8959c743eb3b1f38f40d Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Mon, 8 Sep 2025 01:05:02 +0300
Subject: [PATCH 2/9] gar/#619_creating_richlist_page_progress

---
 components/ExploreMenu.tsx |   2 +-
 components/Modal.tsx       |  69 +++++++++++++++++++++
 components/footer.tsx      |   2 +-
 components/navbar.tsx      |   2 +-
 i18n/ar.json               |  12 ++++
 i18n/de.json               |  14 ++++-
 i18n/en.json               |  12 ++++
 i18n/es.json               |  14 ++++-
 i18n/fr.json               |  14 ++++-
 i18n/it.json               |  14 ++++-
 i18n/ja.json               |  14 ++++-
 i18n/ko.json               |  13 ++++
 i18n/pl.json               |  14 ++++-
 i18n/pt.json               |  14 ++++-
 i18n/ro.json               |  14 ++++-
 i18n/zh.json               |  12 ++++
 package-lock.json          |  46 ++++++++++++++
 package.json               |   2 +
 pages/top-holders.tsx      | 124 +++++++++++++++++++++++++------------
 19 files changed, 358 insertions(+), 50 deletions(-)
 create mode 100644 components/Modal.tsx

diff --git a/components/ExploreMenu.tsx b/components/ExploreMenu.tsx
index a1aeed5ea..4d69abcd6 100644
--- a/components/ExploreMenu.tsx
+++ b/components/ExploreMenu.tsx
@@ -56,7 +56,7 @@ export function ExploreMenu() {
               <ExploreListItem href="/communities" title={t("navbar.communitiesTitle")} icon={Users} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/proposals" title={t("navbar.proposalsTitle")} icon={Vote} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/witnesses" title={t("navbar.witnessesTitle")} icon={UserCheck} closeMenu={() => setIsOpen(false)} />
-              <ExploreListItem href="/top-holders" title="Top Holders" icon={Award}   closeMenu={() => setIsOpen(false)}/>
+              <ExploreListItem href="/top-holders" title={t("pageTitle.topHolders")} icon={Award}   closeMenu={() => setIsOpen(false)}/>
               <ExploreListItem href="/settings" title={t("navbar.settingsTitle")} icon={SettingsIcon} closeMenu={() => setIsOpen(false)} />
           </div>
         </PopoverContent>
diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 000000000..f1fbb2e17
--- /dev/null
+++ b/components/Modal.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import BalanceHistoryChart from "@/components/balanceHistory/BalanceHistoryChart";
+import useBalanceHistory from "@/hooks/api/balanceHistory/useBalanceHistory";
+
+interface BalanceHistoryModalProps {
+  username: string;
+  coinType?: "HIVE" | "VESTS" | "HBD";
+  onClose: () => void;
+}
+
+const BalanceHistoryModal: React.FC<BalanceHistoryModalProps> = ({
+  username,
+  coinType = "HIVE",
+  onClose,
+}) => {
+  const [selectedCoinType, setSelectedCoinType] = useState<"HIVE" | "VESTS" | "HBD">(coinType);
+
+  const { accountBalanceHistory, isAccountBalanceHistoryLoading, isAccountBalanceHistoryError } =
+    useBalanceHistory(username, selectedCoinType, 1, 100, "asc");
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="relative w-full max-w-3xl p-4 bg-white dark:bg-gray-800 rounded shadow-lg">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-bold">{username} Balance History</h2>
+          <button onClick={onClose} className="text-red-500 font-bold">X</button>
+        </div>
+
+        {/* Coin selection */}
+        <div className="mb-4 flex gap-2">
+          {["HIVE", "VESTS", "HBD"].map((coin) => (
+            <button
+              key={coin}
+              onClick={() => setSelectedCoinType(coin as "HIVE" | "VESTS" | "HBD")}
+              className={`px-3 py-1 rounded ${
+                selectedCoinType === coin
+                  ? "bg-blue-500 text-white"
+                  : "bg-gray-200 text-black hover:bg-gray-300 dark:bg-gray-600 dark:text-white hover:dark:bg-gray-500"
+              }`}
+            >
+              {coin}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        {isAccountBalanceHistoryLoading ? (
+          <p>Loading balance history...</p>
+        ) : isAccountBalanceHistoryError ? (
+          <p>Error loading balance history.</p>
+        ) : !accountBalanceHistory?.operations_result?.length ? (
+          <p>No balance history available.</p>
+        ) : (
+          <div className="w-full h-80">
+            <BalanceHistoryChart
+              hiveBalanceHistoryData={selectedCoinType === "HIVE" ? accountBalanceHistory.operations_result : undefined}
+              vestsBalanceHistoryData={selectedCoinType === "VESTS" ? accountBalanceHistory.operations_result : undefined}
+              hbdBalanceHistoryData={selectedCoinType === "HBD" ? accountBalanceHistory.operations_result : undefined}
+              className="h-80 w-full"
+              quickView={false}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BalanceHistoryModal;
diff --git a/components/footer.tsx b/components/footer.tsx
index 3142c08fb..4c6bf7b23 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -202,7 +202,7 @@ const Footer = () => {
               </li>
               <li>
                   <Link href="/top-holders" className="hover:opacity-75">
-                                  Top Holders</Link>
+                                  {t("pageTitle.topHolders")}</Link>
               </li>
             </ul>
           </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 033c4f4a2..0eeb08287 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -101,7 +101,7 @@ export default function Navbar() {
                     </Link>
                     <Link href={"/top-holders"} className="py-1 border-b-2 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
                     <Users className="mr-2 mt-1 flex-shrink-0" size={20} />
-                    <span className="text-base ml-2">Top Holders</span>
+                    <span className="text-base ml-2">{t("pageTitle.topHolders")}</span>
                     </Link>
 
                     <Link href={"/settings"} className="py-1 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
diff --git a/i18n/ar.json b/i18n/ar.json
index 1a967f3f9..79ae1651a 100644
--- a/i18n/ar.json
+++ b/i18n/ar.json
@@ -905,4 +905,16 @@
   "settingsPage.radialViewDescription": "عرض الموارد مثل قوة التصويت باستخدام مؤشرات دائرية. (الافتراضي)",
   "settingsPage.linearViewLabel": "عرض خطي",
   "settingsPage.linearViewDescription": "عرض الموارد مثل قوة التصويت باستخدام أشرطة أفقية تقليدية."
+  ,"pageTitle.topHolders": "أعلى الحائزين",
+  "filters.filtersAndSearch": "المرشحات والبحث",
+  "filters.balance": "الرصيد",
+  "filters.savings": "المدخرات",
+  "table.rank": "الترتيب",
+  "table.account": "الحساب",
+  "table.balance": "الرصيد",
+  "table.savings": "المدخرات",
+  "modal.loading": "جار التحميل...",
+  "modal.noHistory": "لا يوجد تاريخ متاح.",
+  "modal.error": "خطأ في تحميل تاريخ الرصيد.",
+  "modal.close": "إغلاق"
 }
\ No newline at end of file
diff --git a/i18n/de.json b/i18n/de.json
index 9cdc64d31..965d33745 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -904,5 +904,17 @@
   "settingsPage.radialViewLabel": "Radiale Ansicht",
   "settingsPage.radialViewDescription": "Ressourcen wie Stimmkraft mit kreisförmigen Indikatoren anzeigen. (Standard)",
   "settingsPage.linearViewLabel": "Lineare Ansicht",
-  "settingsPage.linearViewDescription": "Ressourcen wie Stimmkraft mit traditionellen horizontalen Balken anzeigen."
+  "settingsPage.linearViewDescription": "Ressourcen wie Stimmkraft mit traditionellen horizontalen Balken anzeigen.",
+  "pageTitle.topHolders": "Top-Inhaber",
+  "filters.filtersAndSearch": "Filter & Suche",
+  "filters.balance": "Kontostand",
+  "filters.savings": "Ersparnisse",
+  "table.rank": "Rang",
+  "table.account": "Konto",
+  "table.balance": "Kontostand",
+  "table.savings": "Ersparnisse",
+  "modal.loading": "Lädt...",
+  "modal.noHistory": "Keine Historie verfügbar.",
+  "modal.error": "Fehler beim Laden des Kontostandverlaufs.",
+  "modal.close": "Schließen"
 }
\ No newline at end of file
diff --git a/i18n/en.json b/i18n/en.json
index 80ecbc939..d5c4d227d 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -905,4 +905,16 @@
   "settingsPage.radialViewDescription": "Show resources like Voting Power using circular indicators. (Default)",
   "settingsPage.linearViewLabel": "Linear View",
   "settingsPage.linearViewDescription": "Show resources like Voting Power using traditional horizontal bars."
+  ,"pageTitle.topHolders": "Top Holders",
+  "filters.filtersAndSearch": "Filters & Search",
+  "filters.balance": "Balance",
+  "filters.savings": "Savings",
+  "table.rank": "Rank",
+  "table.account": "Account",
+  "table.balance": "Balance",
+  "table.savings": "Savings",
+  "modal.loading": "Loading...",
+  "modal.noHistory": "No history available.",
+  "modal.error": "Error loading balance history.",
+  "modal.close": "Close"
 }
\ No newline at end of file
diff --git a/i18n/es.json b/i18n/es.json
index 2d199fa96..e31aa72c3 100644
--- a/i18n/es.json
+++ b/i18n/es.json
@@ -903,5 +903,17 @@
   "settingsPage.radialViewLabel": "Radiale Ansicht",
   "settingsPage.radialViewDescription": "Ressourcen wie Stimmkraft mit kreisförmigen Indikatoren anzeigen. (Standard)",
   "settingsPage.linearViewLabel": "Lineare Ansicht",
-  "settingsPage.linearViewDescription": "Ressourcen wie Stimmkraft mit traditionellen horizontalen Balken anzeigen."
+  "settingsPage.linearViewDescription": "Ressourcen wie Stimmkraft mit traditionellen horizontalen Balken anzeigen.",
+  "pageTitle.topHolders": "Principales Titulares",
+  "filters.filtersAndSearch": "Filtros y Búsqueda",
+  "filters.balance": "Saldo",
+  "filters.savings": "Ahorros",
+  "table.rank": "Rango",
+  "table.account": "Cuenta",
+  "table.balance": "Saldo",
+  "table.savings": "Ahorros",
+  "modal.loading": "Cargando...",
+  "modal.noHistory": "No hay historial disponible.",
+  "modal.error": "Error al cargar el historial de saldo.",
+  "modal.close": "Cerrar"
 }
\ No newline at end of file
diff --git a/i18n/fr.json b/i18n/fr.json
index 387287396..d24122d25 100644
--- a/i18n/fr.json
+++ b/i18n/fr.json
@@ -903,5 +903,17 @@
   "settingsPage.radialViewLabel": "Vue radiale",
   "settingsPage.radialViewDescription": "Afficher les ressources comme la puissance de vote avec des indicateurs circulaires. (Défaut)",
   "settingsPage.linearViewLabel": "Vue linéaire",
-  "settingsPage.linearViewDescription": "Afficher les ressources comme la puissance de vote avec des barres horizontales traditionnelles."
+  "settingsPage.linearViewDescription": "Afficher les ressources comme la puissance de vote avec des barres horizontales traditionnelles.",
+    "pageTitle.topHolders": "Principaux Détenteurs",
+  "filters.filtersAndSearch": "Filtres & Recherche",
+  "filters.balance": "Solde",
+  "filters.savings": "Économies",
+  "table.rank": "Rang",
+  "table.account": "Compte",
+  "table.balance": "Solde",
+  "table.savings": "Économies",
+  "modal.loading": "Chargement...",
+  "modal.noHistory": "Aucun historique disponible.",
+  "modal.error": "Erreur lors du chargement de l'historique du solde.",
+  "modal.close": "Fermer"
 }
\ No newline at end of file
diff --git a/i18n/it.json b/i18n/it.json
index d35a91ab0..17e34969b 100644
--- a/i18n/it.json
+++ b/i18n/it.json
@@ -899,6 +899,18 @@
   "settingsPage.radialViewLabel": "Vista radiale",
   "settingsPage.radialViewDescription": "Mostra risorse come il potere di voto usando indicatori circolari. (Predefinito)",
   "settingsPage.linearViewLabel": "Vista lineare",
-  "settingsPage.linearViewDescription": "Mostra risorse come il potere di voto usando le tradizionali barre orizzontali."
+  "settingsPage.linearViewDescription": "Mostra risorse come il potere di voto usando le tradizionali barre orizzontali.",
+    "pageTitle.topHolders": "Principali Detentori",
+  "filters.filtersAndSearch": "Filtri e Ricerca",
+  "filters.balance": "Saldo",
+  "filters.savings": "Risparmi",
+  "table.rank": "Posizione",
+  "table.account": "Account",
+  "table.balance": "Saldo",
+  "table.savings": "Risparmi",
+  "modal.loading": "Caricamento...",
+  "modal.noHistory": "Nessuna cronologia disponibile.",
+  "modal.error": "Errore durante il caricamento dello storico saldo.",
+  "modal.close": "Chiudi"
   
 }
\ No newline at end of file
diff --git a/i18n/ja.json b/i18n/ja.json
index 912865c78..b1f430fcf 100644
--- a/i18n/ja.json
+++ b/i18n/ja.json
@@ -904,5 +904,17 @@
   "settingsPage.radialViewLabel": "円形ビュー",
   "settingsPage.radialViewDescription": "投票パワーなどのリソースを円形のインジケーターで表示します。(デフォルト)",
   "settingsPage.linearViewLabel": "線形ビュー",
-  "settingsPage.linearViewDescription": "投票パワーなどのリソースを従来の横棒で表示します。"
+  "settingsPage.linearViewDescription": "投票パワーなどのリソースを従来の横棒で表示します。",
+    "pageTitle.topHolders": "トップ保有者",
+  "filters.filtersAndSearch": "フィルターと検索",
+  "filters.balance": "残高",
+  "filters.savings": "貯蓄",
+  "table.rank": "ランク",
+  "table.account": "アカウント",
+  "table.balance": "残高",
+  "table.savings": "貯蓄",
+  "modal.loading": "読み込み中...",
+  "modal.noHistory": "履歴はありません。",
+  "modal.error": "残高履歴の読み込み中にエラーが発生しました。",
+  "modal.close": "閉じる"
 }
\ No newline at end of file
diff --git a/i18n/ko.json b/i18n/ko.json
index 756fb016e..2a7cbe613 100644
--- a/i18n/ko.json
+++ b/i18n/ko.json
@@ -905,4 +905,17 @@
   "settingsPage.radialViewDescription": "보팅 파워와 같은 리소스를 원형 표시기로 표시합니다. (기본값)",
   "settingsPage.linearViewLabel": "선형 보기",
   "settingsPage.linearViewDescription": "보팅 파워와 같은 리소스를 기존의 수평 막대로 표시합니다."
+  ,
+  "pageTitle.topHolders": "상위 보유자",
+  "filters.filtersAndSearch": "필터 및 검색",
+  "filters.balance": "잔액",
+  "filters.savings": "저축",
+  "table.rank": "순위",
+  "table.account": "계정",
+  "table.balance": "잔액",
+  "table.savings": "저축",
+  "modal.loading": "로딩 중...",
+  "modal.noHistory": "사용 가능한 기록이 없습니다.",
+  "modal.error": "잔액 기록을 불러오는 중 오류가 발생했습니다.",
+  "modal.close": "닫기"
 }
\ No newline at end of file
diff --git a/i18n/pl.json b/i18n/pl.json
index 034c8c19b..961e0e81c 100644
--- a/i18n/pl.json
+++ b/i18n/pl.json
@@ -904,5 +904,17 @@
   "settingsPage.radialViewLabel": "Widok radialny",
   "settingsPage.radialViewDescription": "Pokazuj zasoby, takie jak siła głosu, za pomocą wskaźników kołowych. (Domyślnie)",
   "settingsPage.linearViewLabel": "Widok liniowy",
-  "settingsPage.linearViewDescription": "Pokazuj zasoby, takie jak siła głosu, za pomocą tradycyjnych pasków poziomych."
+  "settingsPage.linearViewDescription": "Pokazuj zasoby, takie jak siła głosu, za pomocą tradycyjnych pasków poziomych.",
+    "pageTitle.topHolders": "Najwięksi Posiadacze",
+  "filters.filtersAndSearch": "Filtry i Wyszukiwanie",
+  "filters.balance": "Saldo",
+  "filters.savings": "Oszczędności",
+  "table.rank": "Pozycja",
+  "table.account": "Konto",
+  "table.balance": "Saldo",
+  "table.savings": "Oszczędności",
+  "modal.loading": "Ładowanie...",
+  "modal.noHistory": "Brak dostępnej historii.",
+  "modal.error": "Błąd podczas ładowania historii salda.",
+  "modal.close": "Zamknij"
 }
\ No newline at end of file
diff --git a/i18n/pt.json b/i18n/pt.json
index 7539e1028..489da8c4d 100644
--- a/i18n/pt.json
+++ b/i18n/pt.json
@@ -904,7 +904,19 @@
   "settingsPage.radialViewLabel": "Visualização Radial",
   "settingsPage.radialViewDescription": "Mostrar recursos como poder de voto usando indicadores circulares. (Padrão)",
   "settingsPage.linearViewLabel": "Visualização Linear",
-  "settingsPage.linearViewDescription": "Mostrar recursos como poder de voto usando barras horizontais tradicionais."
+  "settingsPage.linearViewDescription": "Mostrar recursos como poder de voto usando barras horizontais tradicionais.",
+    "pageTitle.topHolders": "Principais Detentores",
+  "filters.filtersAndSearch": "Filtros e Pesquisa",
+  "filters.balance": "Saldo",
+  "filters.savings": "Poupança",
+  "table.rank": "Classificação",
+  "table.account": "Conta",
+  "table.balance": "Saldo",
+  "table.savings": "Poupança",
+  "modal.loading": "Carregando...",
+  "modal.noHistory": "Nenhum histórico disponível.",
+  "modal.error": "Erro ao carregar histórico de saldo.",
+  "modal.close": "Fechar"
   
 
 }
\ No newline at end of file
diff --git a/i18n/ro.json b/i18n/ro.json
index 88beeb4b4..7b561aa30 100644
--- a/i18n/ro.json
+++ b/i18n/ro.json
@@ -903,5 +903,17 @@
   "settingsPage.radialViewLabel": "Vizualizare radială",
   "settingsPage.radialViewDescription": "Afișează resurse precum puterea de vot folosind indicatori circulari. (Implicit)",
   "settingsPage.linearViewLabel": "Vizualizare liniară",
-  "settingsPage.linearViewDescription": "Afișează resurse precum puterea de vot folosind bare orizontale tradiționale."
+  "settingsPage.linearViewDescription": "Afișează resurse precum puterea de vot folosind bare orizontale tradiționale.",
+    "pageTitle.topHolders": "Cei mai mari deținători",
+  "filters.filtersAndSearch": "Filtre și Căutare",
+  "filters.balance": "Sold",
+  "filters.savings": "Economii",
+  "table.rank": "Rang",
+  "table.account": "Cont",
+  "table.balance": "Sold",
+  "table.savings": "Economii",
+  "modal.loading": "Se încarcă...",
+  "modal.noHistory": "Nu există istoric disponibil.",
+  "modal.error": "Eroare la încărcarea istoricului soldului.",
+  "modal.close": "Închide"
 }
\ No newline at end of file
diff --git a/i18n/zh.json b/i18n/zh.json
index 3d77ee330..8a2d40ace 100644
--- a/i18n/zh.json
+++ b/i18n/zh.json
@@ -905,5 +905,17 @@
   "settingsPage.radialViewDescription": "使用环形指示器显示投票权等资源。(默认)",
   "settingsPage.linearViewLabel": "线性视图",
   "settingsPage.linearViewDescription": "使用传统的水平条显示投票权等资源。"
+  ,"pageTitle.topHolders": "持币最多者",
+  "filters.filtersAndSearch": "筛选与搜索",
+  "filters.balance": "余额",
+  "filters.savings": "储蓄",
+  "table.rank": "排名",
+  "table.account": "账户",
+  "table.balance": "余额",
+  "table.savings": "储蓄",
+  "modal.loading": "加载中...",
+  "modal.noHistory": "没有可用历史记录。",
+  "modal.error": "加载余额历史出错。",
+  "modal.close": "关闭"
 
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 84d1a2ac3..42be30eed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@types/react": "19.1.8",
         "@types/react-dom": "19.1.6",
         "autoprefixer": "10.4.14",
+        "chart.js": "^4.5.0",
         "child_process": "^1.0.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
@@ -43,6 +44,7 @@
         "playwright-merge-html-reports": "^0.2.8",
         "postcss": "^8.4.31",
         "react": "18.3.1",
+        "react-chartjs-2": "^5.3.0",
         "react-country-flag": "^3.1.0",
         "react-day-picker": "^8.10.0",
         "react-dom": "18.3.1",
@@ -706,6 +708,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+    },
     "node_modules/@next/env": {
       "version": "15.3.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.3.tgz",
@@ -3075,6 +3082,17 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/child_process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -6605,6 +6623,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-country-flag": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
@@ -8485,6 +8512,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+    },
     "@next/env": {
       "version": "15.3.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.3.tgz",
@@ -9809,6 +9841,14 @@
         "supports-color": "^7.1.0"
       }
     },
+    "chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
     "child_process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -12253,6 +12293,12 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "requires": {}
+    },
     "react-country-flag": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
diff --git a/package.json b/package.json
index 675a2354a..81f6015ac 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "autoprefixer": "10.4.14",
+    "chart.js": "^4.5.0",
     "child_process": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -53,6 +54,7 @@
     "playwright-merge-html-reports": "^0.2.8",
     "postcss": "^8.4.31",
     "react": "18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-country-flag": "^3.1.0",
     "react-day-picker": "^8.10.0",
     "react-dom": "18.3.1",
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
index ac6231bdf..36d9077d6 100644
--- a/pages/top-holders.tsx
+++ b/pages/top-holders.tsx
@@ -1,29 +1,33 @@
-// pages/top-holders.tsx
 import { useEffect, useState } from "react";
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
-import { Select } from "@/components/ui/select";
-import { Button } from "@/components/ui/button";
 import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
-import { Pagination } from "@/components/ui/pagination";
 import PageTitle from "@/components/PageTitle";
 import ErrorMessage from "@/components/ErrorMessage";
 import NoResult from "@/components/NoResult";
 import TopHoldersPagination from "@/components/ui/TopHoldersPagination";
+import SearchBar from "@/components/SearchBar";
+import BalanceHistoryModal from "@/components/Modal";
+import { useI18n } from "@/i18n/i18n";
 
 interface Holder {
+  rank: number;
   account: string;
-  balance: string;
+  value: string;
 }
 
 export default function TopHoldersPage() {
+  const { t } = useI18n(); 
   const [holders, setHolders] = useState<Holder[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [page, setPage] = useState(1);
-  const [coinType, setCoinType] = useState("HIVE");
-  const [balanceType, setBalanceType] = useState("balance");
+  const [coinType, setCoinType] = useState<"HIVE" | "HBD" | "VESTS">("HIVE");
+  const [balanceType, setBalanceType] = useState<"balance" | "savings_balance">("balance");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
 
   useEffect(() => {
+    if (coinType === "VESTS" && balanceType !== "balance") setBalanceType("balance");
     fetchHolders();
   }, [page, coinType, balanceType]);
 
@@ -36,7 +40,7 @@ export default function TopHoldersPage() {
       );
       if (!res.ok) throw new Error(`API error: ${res.status}`);
       const data = await res.json();
-      setHolders(data?.holders || []);
+      setHolders(Array.isArray(data) ? data : []);
     } catch (err: any) {
       setError(err.message);
     } finally {
@@ -44,66 +48,108 @@ export default function TopHoldersPage() {
     }
   };
 
+  const handleAccountClick = (account: string) => setSelectedAccount(account);
+  const closeModal = () => setSelectedAccount(null);
+
+  const filteredHolders = holders.filter((holder) =>
+    holder.account.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatValue = (value: string) => Number(value).toLocaleString();
+
+  const getRankStyle = (rank: number) => {
+    if (rank === 1) return "bg-yellow-300 font-bold";
+    if (rank === 2) return "bg-gray-300 font-bold";
+    if (rank === 3) return "bg-yellow-800 text-white font-bold";
+    return "";
+  };
+
   return (
     <div className="p-6 space-y-6">
-      <PageTitle titleKey="Top Holders (Richlist)" />
+      <PageTitle titleKey={t("pageTitle.topHolders")} />
 
+      {/* Filters */}
       <Card>
         <CardHeader>
-          <CardTitle>Filters</CardTitle>
+          <CardTitle>{t("filters.filtersAndSearch")}</CardTitle>
         </CardHeader>
-        <div className="flex gap-4 p-4">
-          <Select value={coinType} onValueChange={setCoinType}>
-            <option value="HIVE">HIVE</option>
-            <option value="HBD">HBD</option>
-          </Select>
+        <div className="p-4 flex flex-wrap gap-4">
+          <select
+            value={coinType}
+            onChange={(e) => setCoinType(e.target.value as "HIVE" | "HBD" | "VESTS")}
+            className="border rounded px-2 py-1"
+          >
+            <option value="HIVE">{"HIVE"}</option>
+            <option value="HBD">{("HBD")}</option>
+            <option value="VESTS">{("VESTS")}</option>
+          </select>
+
+          <select
+            value={balanceType}
+            onChange={(e) => setBalanceType(e.target.value as "balance" | "savings_balance")}
+            disabled={coinType === "VESTS"}
+            className="border rounded px-2 py-1"
+          >
+            <option value="balance">{t("filters.balance")}</option>
+            <option value="savings_balance">{t("filters.savings")}</option>
+          </select>
 
-          <Select value={balanceType} onValueChange={setBalanceType}>
-            <option value="balance">Balance</option>
-            <option value="savings">Savings</option>
-            <option value="staked">Staked</option>
-          </Select>
+          <div className="flex-1 min-w-[200px]">
+            <SearchBar onSearch={(value: string) => setSearchTerm(value)} open={true} />
+          </div>
         </div>
       </Card>
 
+      {/* Top Holders Table */}
       <Card>
         <CardHeader>
-          <CardTitle>Richlist</CardTitle>
+          <CardTitle>{t("pageTitle.topHolders")}</CardTitle>
         </CardHeader>
         <div className="p-4">
-          {loading && <p>Loading...</p>}
+          {loading && <p>{t("modal.loading")}</p>}
           {error && <ErrorMessage message={error} />}
-          {!loading && !error && holders.length === 0 && <NoResult />}
-          {!loading && !error && holders.length > 0 && (
+          {!loading && !error && filteredHolders.length === 0 && <NoResult />}
+          {!loading && !error && filteredHolders.length > 0 && (
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableCell>Rank</TableCell>
-                  <TableCell>Account</TableCell>
-                  <TableCell>Balance</TableCell>
+                  <TableCell>{t("table.rank")}</TableCell>
+                  <TableCell>{t("table.account")}</TableCell>
+                  <TableCell className="text-right">
+                    {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
+                  </TableCell>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {holders.map((holder, idx) => (
-                  <TableRow key={holder.account}>
-                    <TableCell>{idx + 1 + (page - 1) * 50}</TableCell>
-                    <TableCell>{holder.account}</TableCell>
-                    <TableCell>{holder.balance}</TableCell>
-                  </TableRow>
-                ))}
+                {filteredHolders.map((holder) => {
+                  const displayRank = holder.rank + (page - 1) * 100;
+                  return (
+                    <TableRow
+                      key={holder.account}
+                      className={getRankStyle(displayRank)}
+                      onClick={() => handleAccountClick(holder.account)}
+                      style={{ cursor: "pointer" }}
+                    >
+                      <TableCell>{displayRank}</TableCell>
+                      <TableCell>{holder.account}</TableCell>
+                      <TableCell className="text-right">{formatValue(holder.value)}</TableCell>
+                    </TableRow>
+                  );
+                })}
               </TableBody>
             </Table>
           )}
 
           <div className="mt-4 flex justify-center">
-            <TopHoldersPagination
-              currentPage={page}
-              onPageChange={setPage}
-              totalPages={1000} // ideally from API if available
-            />
+            <TopHoldersPagination currentPage={page} onPageChange={setPage} totalPages={1000} />
           </div>
         </div>
       </Card>
+
+      {/* Modal */}
+      {selectedAccount && (
+        <BalanceHistoryModal username={selectedAccount} coinType="HIVE" onClose={closeModal} />
+      )}
     </div>
   );
 }
-- 
GitLab


From 340febf20f27595650330454527fed91354d2f73 Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Fri, 5 Sep 2025 17:05:22 +0300
Subject: [PATCH 3/9] myrichlist so far

---
 components/ExploreMenu.tsx             |   4 +-
 components/footer.tsx                  |   4 +
 components/navbar.tsx                  |   5 ++
 components/ui/TopHoldersPagination.tsx |  46 +++++++++++
 pages/top-holders.tsx                  | 109 +++++++++++++++++++++++++
 5 files changed, 167 insertions(+), 1 deletion(-)
 create mode 100644 components/ui/TopHoldersPagination.tsx
 create mode 100644 pages/top-holders.tsx

diff --git a/components/ExploreMenu.tsx b/components/ExploreMenu.tsx
index 11e778b35..a1aeed5ea 100644
--- a/components/ExploreMenu.tsx
+++ b/components/ExploreMenu.tsx
@@ -1,9 +1,10 @@
 // src/components/layout/ExploreMenu.tsx
+// At the top with imports
 
 import React, { useState, useEffect, useRef } from "react";
 import Link from "next/link";
 import { useI18n } from "@/i18n/i18n";
-import { Users, Vote, Menu, UserCheck, SettingsIcon } from "lucide-react";
+import { Users, Vote, Menu, UserCheck, SettingsIcon,Award } from "lucide-react";
 import {
   Popover,
   PopoverContent,
@@ -55,6 +56,7 @@ export function ExploreMenu() {
               <ExploreListItem href="/communities" title={t("navbar.communitiesTitle")} icon={Users} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/proposals" title={t("navbar.proposalsTitle")} icon={Vote} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/witnesses" title={t("navbar.witnessesTitle")} icon={UserCheck} closeMenu={() => setIsOpen(false)} />
+              <ExploreListItem href="/top-holders" title="Top Holders" icon={Award}   closeMenu={() => setIsOpen(false)}/>
               <ExploreListItem href="/settings" title={t("navbar.settingsTitle")} icon={SettingsIcon} closeMenu={() => setIsOpen(false)} />
           </div>
         </PopoverContent>
diff --git a/components/footer.tsx b/components/footer.tsx
index 125d15fc5..3142c08fb 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -200,6 +200,10 @@ const Footer = () => {
                   {t("footer.witnessSchedule")}
                 </Link>
               </li>
+              <li>
+                  <Link href="/top-holders" className="hover:opacity-75">
+                                  Top Holders</Link>
+              </li>
             </ul>
           </div>
 
diff --git a/components/navbar.tsx b/components/navbar.tsx
index a8264e309..033c4f4a2 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -99,6 +99,11 @@ export default function Navbar() {
                       <UserCheck className="mr-2 mt-1 flex-shrink-0" size={20} />
                       <span className="text-base ml-2">{t("navbar.witnessesTitle")}</span>
                     </Link>
+                    <Link href={"/top-holders"} className="py-1 border-b-2 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
+                    <Users className="mr-2 mt-1 flex-shrink-0" size={20} />
+                    <span className="text-base ml-2">Top Holders</span>
+                    </Link>
+
                     <Link href={"/settings"} className="py-1 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
                       <SettingsIcon className="mr-2 mt-1 flex-shrink-0" size={20} />
                       <span className="text-base ml-2">{t("navbar.additionalSettingsTitle")}</span>
diff --git a/components/ui/TopHoldersPagination.tsx b/components/ui/TopHoldersPagination.tsx
new file mode 100644
index 000000000..b3c3efeaa
--- /dev/null
+++ b/components/ui/TopHoldersPagination.tsx
@@ -0,0 +1,46 @@
+import React from "react";
+import {
+  Pagination,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+} from "@/components/ui/pagination";
+
+interface Props {
+  currentPage: number;
+  onPageChange: (page: number) => void;
+  totalPages: number;
+}
+
+const TopHoldersPagination: React.FC<Props> = ({ currentPage, onPageChange, totalPages }) => {
+  const pagesToShow = 5; // Number of page buttons to display
+  const startPage = Math.max(1, currentPage - Math.floor(pagesToShow / 2));
+  const endPage = Math.min(totalPages, startPage + pagesToShow - 1);
+
+  const pageNumbers = [];
+  for (let i = startPage; i <= endPage; i++) pageNumbers.push(i);
+
+  return (
+    <Pagination>
+      <PaginationPrevious
+        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
+      />
+      {pageNumbers.map((page) => (
+        <PaginationItem key={page}>
+          <PaginationLink
+            isActive={page === currentPage}
+            onClick={() => onPageChange(page)}
+          >
+            {page}
+          </PaginationLink>
+        </PaginationItem>
+      ))}
+      <PaginationNext
+        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
+      />
+    </Pagination>
+  );
+};
+
+export default TopHoldersPagination;
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
new file mode 100644
index 000000000..ac6231bdf
--- /dev/null
+++ b/pages/top-holders.tsx
@@ -0,0 +1,109 @@
+// pages/top-holders.tsx
+import { useEffect, useState } from "react";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Select } from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
+import { Pagination } from "@/components/ui/pagination";
+import PageTitle from "@/components/PageTitle";
+import ErrorMessage from "@/components/ErrorMessage";
+import NoResult from "@/components/NoResult";
+import TopHoldersPagination from "@/components/ui/TopHoldersPagination";
+
+interface Holder {
+  account: string;
+  balance: string;
+}
+
+export default function TopHoldersPage() {
+  const [holders, setHolders] = useState<Holder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [page, setPage] = useState(1);
+  const [coinType, setCoinType] = useState("HIVE");
+  const [balanceType, setBalanceType] = useState("balance");
+
+  useEffect(() => {
+    fetchHolders();
+  }, [page, coinType, balanceType]);
+
+  const fetchHolders = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(
+        `https://api.syncad.com/balance-api/top-holders?coin-type=${coinType}&balance-type=${balanceType}&page=${page}`
+      );
+      if (!res.ok) throw new Error(`API error: ${res.status}`);
+      const data = await res.json();
+      setHolders(data?.holders || []);
+    } catch (err: any) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="p-6 space-y-6">
+      <PageTitle titleKey="Top Holders (Richlist)" />
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Filters</CardTitle>
+        </CardHeader>
+        <div className="flex gap-4 p-4">
+          <Select value={coinType} onValueChange={setCoinType}>
+            <option value="HIVE">HIVE</option>
+            <option value="HBD">HBD</option>
+          </Select>
+
+          <Select value={balanceType} onValueChange={setBalanceType}>
+            <option value="balance">Balance</option>
+            <option value="savings">Savings</option>
+            <option value="staked">Staked</option>
+          </Select>
+        </div>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Richlist</CardTitle>
+        </CardHeader>
+        <div className="p-4">
+          {loading && <p>Loading...</p>}
+          {error && <ErrorMessage message={error} />}
+          {!loading && !error && holders.length === 0 && <NoResult />}
+          {!loading && !error && holders.length > 0 && (
+            <Table>
+              <TableHeader>
+                <TableRow>
+                  <TableCell>Rank</TableCell>
+                  <TableCell>Account</TableCell>
+                  <TableCell>Balance</TableCell>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                {holders.map((holder, idx) => (
+                  <TableRow key={holder.account}>
+                    <TableCell>{idx + 1 + (page - 1) * 50}</TableCell>
+                    <TableCell>{holder.account}</TableCell>
+                    <TableCell>{holder.balance}</TableCell>
+                  </TableRow>
+                ))}
+              </TableBody>
+            </Table>
+          )}
+
+          <div className="mt-4 flex justify-center">
+            <TopHoldersPagination
+              currentPage={page}
+              onPageChange={setPage}
+              totalPages={1000} // ideally from API if available
+            />
+          </div>
+        </div>
+      </Card>
+    </div>
+  );
+}
-- 
GitLab


From 0713d73379da2bb5551fe145158ab6c98f94a843 Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Mon, 8 Sep 2025 01:05:02 +0300
Subject: [PATCH 4/9] gar/#619_creating_richlist_page_progress

---
 components/ExploreMenu.tsx |   2 +-
 components/Modal.tsx       |  69 +++++++++++++++++++++
 components/footer.tsx      |   2 +-
 components/navbar.tsx      |   2 +-
 i18n/ar.json               |  12 ++++
 i18n/de.json               |  12 ++++
 i18n/en.json               |  12 ++++
 i18n/es.json               |  12 ++++
 i18n/fr.json               |  12 ++++
 i18n/it.json               |  14 ++++-
 i18n/ja.json               |  12 ++++
 i18n/ko.json               |  13 ++++
 i18n/pl.json               |  12 ++++
 i18n/pt.json               |  14 ++++-
 i18n/ro.json               |  12 ++++
 i18n/zh.json               |  14 ++++-
 package-lock.json          |  46 ++++++++++++++
 package.json               |   2 +
 pages/top-holders.tsx      | 124 +++++++++++++++++++++++++------------
 19 files changed, 353 insertions(+), 45 deletions(-)
 create mode 100644 components/Modal.tsx

diff --git a/components/ExploreMenu.tsx b/components/ExploreMenu.tsx
index a1aeed5ea..4d69abcd6 100644
--- a/components/ExploreMenu.tsx
+++ b/components/ExploreMenu.tsx
@@ -56,7 +56,7 @@ export function ExploreMenu() {
               <ExploreListItem href="/communities" title={t("navbar.communitiesTitle")} icon={Users} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/proposals" title={t("navbar.proposalsTitle")} icon={Vote} closeMenu={() => setIsOpen(false)} />
               <ExploreListItem href="/witnesses" title={t("navbar.witnessesTitle")} icon={UserCheck} closeMenu={() => setIsOpen(false)} />
-              <ExploreListItem href="/top-holders" title="Top Holders" icon={Award}   closeMenu={() => setIsOpen(false)}/>
+              <ExploreListItem href="/top-holders" title={t("pageTitle.topHolders")} icon={Award}   closeMenu={() => setIsOpen(false)}/>
               <ExploreListItem href="/settings" title={t("navbar.settingsTitle")} icon={SettingsIcon} closeMenu={() => setIsOpen(false)} />
           </div>
         </PopoverContent>
diff --git a/components/Modal.tsx b/components/Modal.tsx
new file mode 100644
index 000000000..f1fbb2e17
--- /dev/null
+++ b/components/Modal.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import BalanceHistoryChart from "@/components/balanceHistory/BalanceHistoryChart";
+import useBalanceHistory from "@/hooks/api/balanceHistory/useBalanceHistory";
+
+interface BalanceHistoryModalProps {
+  username: string;
+  coinType?: "HIVE" | "VESTS" | "HBD";
+  onClose: () => void;
+}
+
+const BalanceHistoryModal: React.FC<BalanceHistoryModalProps> = ({
+  username,
+  coinType = "HIVE",
+  onClose,
+}) => {
+  const [selectedCoinType, setSelectedCoinType] = useState<"HIVE" | "VESTS" | "HBD">(coinType);
+
+  const { accountBalanceHistory, isAccountBalanceHistoryLoading, isAccountBalanceHistoryError } =
+    useBalanceHistory(username, selectedCoinType, 1, 100, "asc");
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+      <div className="relative w-full max-w-3xl p-4 bg-white dark:bg-gray-800 rounded shadow-lg">
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="text-lg font-bold">{username} Balance History</h2>
+          <button onClick={onClose} className="text-red-500 font-bold">X</button>
+        </div>
+
+        {/* Coin selection */}
+        <div className="mb-4 flex gap-2">
+          {["HIVE", "VESTS", "HBD"].map((coin) => (
+            <button
+              key={coin}
+              onClick={() => setSelectedCoinType(coin as "HIVE" | "VESTS" | "HBD")}
+              className={`px-3 py-1 rounded ${
+                selectedCoinType === coin
+                  ? "bg-blue-500 text-white"
+                  : "bg-gray-200 text-black hover:bg-gray-300 dark:bg-gray-600 dark:text-white hover:dark:bg-gray-500"
+              }`}
+            >
+              {coin}
+            </button>
+          ))}
+        </div>
+
+        {/* Content */}
+        {isAccountBalanceHistoryLoading ? (
+          <p>Loading balance history...</p>
+        ) : isAccountBalanceHistoryError ? (
+          <p>Error loading balance history.</p>
+        ) : !accountBalanceHistory?.operations_result?.length ? (
+          <p>No balance history available.</p>
+        ) : (
+          <div className="w-full h-80">
+            <BalanceHistoryChart
+              hiveBalanceHistoryData={selectedCoinType === "HIVE" ? accountBalanceHistory.operations_result : undefined}
+              vestsBalanceHistoryData={selectedCoinType === "VESTS" ? accountBalanceHistory.operations_result : undefined}
+              hbdBalanceHistoryData={selectedCoinType === "HBD" ? accountBalanceHistory.operations_result : undefined}
+              className="h-80 w-full"
+              quickView={false}
+            />
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BalanceHistoryModal;
diff --git a/components/footer.tsx b/components/footer.tsx
index 3142c08fb..4c6bf7b23 100644
--- a/components/footer.tsx
+++ b/components/footer.tsx
@@ -202,7 +202,7 @@ const Footer = () => {
               </li>
               <li>
                   <Link href="/top-holders" className="hover:opacity-75">
-                                  Top Holders</Link>
+                                  {t("pageTitle.topHolders")}</Link>
               </li>
             </ul>
           </div>
diff --git a/components/navbar.tsx b/components/navbar.tsx
index 033c4f4a2..0eeb08287 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -101,7 +101,7 @@ export default function Navbar() {
                     </Link>
                     <Link href={"/top-holders"} className="py-1 border-b-2 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
                     <Users className="mr-2 mt-1 flex-shrink-0" size={20} />
-                    <span className="text-base ml-2">Top Holders</span>
+                    <span className="text-base ml-2">{t("pageTitle.topHolders")}</span>
                     </Link>
 
                     <Link href={"/settings"} className="py-1 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
diff --git a/i18n/ar.json b/i18n/ar.json
index fd3e40bdc..a36c3214b 100644
--- a/i18n/ar.json
+++ b/i18n/ar.json
@@ -912,4 +912,16 @@
   "blockDetails.blockDetails": "تفاصيل_الكتلة",
   "commentsSearch.commentSearchResults": "نتائج_البحث_عن_التعليقات",
   "transactionPage.transactionDetailsRefferer": "تفاصيل_المعاملة"
+  ,"pageTitle.topHolders": "أعلى الحائزين",
+  "filters.filtersAndSearch": "المرشحات والبحث",
+  "filters.balance": "الرصيد",
+  "filters.savings": "المدخرات",
+  "table.rank": "الترتيب",
+  "table.account": "الحساب",
+  "table.balance": "الرصيد",
+  "table.savings": "المدخرات",
+  "modal.loading": "جار التحميل...",
+  "modal.noHistory": "لا يوجد تاريخ متاح.",
+  "modal.error": "خطأ في تحميل تاريخ الرصيد.",
+  "modal.close": "إغلاق"
 }
\ No newline at end of file
diff --git a/i18n/de.json b/i18n/de.json
index 3be0514c2..4377cb2c2 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -912,4 +912,16 @@
   "blockDetails.blockDetails": "block_details",
   "commentsSearch.commentSearchResults": "kommentar_suchergebnisse",
   "transactionPage.transactionDetailsRefferer": "transaktionsdetails"
+  ,  "pageTitle.topHolders": "Top-Inhaber",
+  "filters.filtersAndSearch": "Filter & Suche",
+  "filters.balance": "Kontostand",
+  "filters.savings": "Ersparnisse",
+  "table.rank": "Rang",
+  "table.account": "Konto",
+  "table.balance": "Kontostand",
+  "table.savings": "Ersparnisse",
+  "modal.loading": "Lädt...",
+  "modal.noHistory": "Keine Historie verfügbar.",
+  "modal.error": "Fehler beim Laden des Kontostandverlaufs.",
+  "modal.close": "Schließen"
 }
\ No newline at end of file
diff --git a/i18n/en.json b/i18n/en.json
index d0ed10cbd..ab43dfecc 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -912,4 +912,16 @@
   "accountSearch.accountReactResults": "account_search_results",
   "commentsSearch.commentSearchResults": "comment_search_results",
   "blockDetails.blockDetails": "block_details"
+  ,"pageTitle.topHolders": "Top Holders",
+  "filters.filtersAndSearch": "Filters & Search",
+  "filters.balance": "Balance",
+  "filters.savings": "Savings",
+  "table.rank": "Rank",
+  "table.account": "Account",
+  "table.balance": "Balance",
+  "table.savings": "Savings",
+  "modal.loading": "Loading...",
+  "modal.noHistory": "No history available.",
+  "modal.error": "Error loading balance history.",
+  "modal.close": "Close"
 }
\ No newline at end of file
diff --git a/i18n/es.json b/i18n/es.json
index 3b77dde13..7adf352cb 100644
--- a/i18n/es.json
+++ b/i18n/es.json
@@ -911,4 +911,16 @@
   "blockDetails.blockDetails": "detalles_bloque",
   "commentsSearch.commentSearchResults": "resultados_busqueda_comentarios",
   "transactionPage.transactionDetailsRefferer": "detalles_transaccion"
+  ,"pageTitle.topHolders": "Principales Titulares",
+  "filters.filtersAndSearch": "Filtros y Búsqueda",
+  "filters.balance": "Saldo",
+  "filters.savings": "Ahorros",
+  "table.rank": "Rango",
+  "table.account": "Cuenta",
+  "table.balance": "Saldo",
+  "table.savings": "Ahorros",
+  "modal.loading": "Cargando...",
+  "modal.noHistory": "No hay historial disponible.",
+  "modal.error": "Error al cargar el historial de saldo.",
+  "modal.close": "Cerrar"
 }
\ No newline at end of file
diff --git a/i18n/fr.json b/i18n/fr.json
index 31d426283..52e1e5697 100644
--- a/i18n/fr.json
+++ b/i18n/fr.json
@@ -911,4 +911,16 @@
   "blockDetails.blockDetails": "details_bloc",
   "commentsSearch.commentSearchResults": "resultats_recherche_commentaires",
   "transactionPage.transactionDetailsRefferer": "details_transaction"
+,    "pageTitle.topHolders": "Principaux Détenteurs",
+  "filters.filtersAndSearch": "Filtres & Recherche",
+  "filters.balance": "Solde",
+  "filters.savings": "Économies",
+  "table.rank": "Rang",
+  "table.account": "Compte",
+  "table.balance": "Solde",
+  "table.savings": "Économies",
+  "modal.loading": "Chargement...",
+  "modal.noHistory": "Aucun historique disponible.",
+  "modal.error": "Erreur lors du chargement de l'historique du solde.",
+  "modal.close": "Fermer"
 }
\ No newline at end of file
diff --git a/i18n/it.json b/i18n/it.json
index 0e5470f2e..596b7e6d3 100644
--- a/i18n/it.json
+++ b/i18n/it.json
@@ -903,7 +903,19 @@
   "settingsPage.radialViewDescription": "Mostra risorse come il potere di voto usando indicatori circolari. (Predefinito)",
   "settingsPage.linearViewLabel": "Vista lineare",
   "settingsPage.linearViewDescription": "Mostra risorse come il potere di voto usando le tradizionali barre orizzontali.",
-  "accountSearch.accountReactResults": "risultati_ricerca_account",
+    "pageTitle.topHolders": "Principali Detentori",
+  "filters.filtersAndSearch": "Filtri e Ricerca",
+  "filters.balance": "Saldo",
+  "filters.savings": "Risparmi",
+  "table.rank": "Posizione",
+  "table.account": "Account",
+  "table.balance": "Saldo",
+  "table.savings": "Risparmi",
+  "modal.loading": "Caricamento...",
+  "modal.noHistory": "Nessuna cronologia disponibile.",
+  "modal.error": "Errore durante il caricamento dello storico saldo.",
+  "modal.close": "Chiudi"
+  ,"accountSearch.accountReactResults": "risultati_ricerca_account",
   "blockDetails.blockDetails": "dettagli_blocco",
   "commentsSearch.commentSearchResults": "risultati_ricerca_commenti",
   "transactionPage.transactionDetailsRefferer": "dettagli_transazione"
diff --git a/i18n/ja.json b/i18n/ja.json
index 93cb325bc..bf17dba3f 100644
--- a/i18n/ja.json
+++ b/i18n/ja.json
@@ -912,4 +912,16 @@
   "blockDetails.blockDetails": "ブロック詳細",
   "commentsSearch.commentSearchResults": "コメント検索結果",
   "transactionPage.transactionDetailsRefferer": "取引詳細"
+,    "pageTitle.topHolders": "トップ保有者",
+  "filters.filtersAndSearch": "フィルターと検索",
+  "filters.balance": "残高",
+  "filters.savings": "貯蓄",
+  "table.rank": "ランク",
+  "table.account": "アカウント",
+  "table.balance": "残高",
+  "table.savings": "貯蓄",
+  "modal.loading": "読み込み中...",
+  "modal.noHistory": "履歴はありません。",
+  "modal.error": "残高履歴の読み込み中にエラーが発生しました。",
+  "modal.close": "閉じる"
 }
\ No newline at end of file
diff --git a/i18n/ko.json b/i18n/ko.json
index 4158fc01d..1f4a9e234 100644
--- a/i18n/ko.json
+++ b/i18n/ko.json
@@ -912,4 +912,17 @@
   "blockDetails.blockDetails": "블록_세부정보",
   "commentsSearch.commentSearchResults": "댓글_검색_결과",
   "transactionPage.transactionDetailsRefferer": "거래_세부정보"
+  ,
+  "pageTitle.topHolders": "상위 보유자",
+  "filters.filtersAndSearch": "필터 및 검색",
+  "filters.balance": "잔액",
+  "filters.savings": "저축",
+  "table.rank": "순위",
+  "table.account": "계정",
+  "table.balance": "잔액",
+  "table.savings": "저축",
+  "modal.loading": "로딩 중...",
+  "modal.noHistory": "사용 가능한 기록이 없습니다.",
+  "modal.error": "잔액 기록을 불러오는 중 오류가 발생했습니다.",
+  "modal.close": "닫기"
 }
\ No newline at end of file
diff --git a/i18n/pl.json b/i18n/pl.json
index 657ea7366..b90defc72 100644
--- a/i18n/pl.json
+++ b/i18n/pl.json
@@ -912,4 +912,16 @@
   "blockDetails.blockDetails": "szczegoly_bloku",
   "commentsSearch.commentSearchResults": "wyniki_wyszukiwania_komentarzy",
   "transactionPage.transactionDetailsRefferer": "szczegoly_transakcji"
+,    "pageTitle.topHolders": "Najwięksi Posiadacze",
+  "filters.filtersAndSearch": "Filtry i Wyszukiwanie",
+  "filters.balance": "Saldo",
+  "filters.savings": "Oszczędności",
+  "table.rank": "Pozycja",
+  "table.account": "Konto",
+  "table.balance": "Saldo",
+  "table.savings": "Oszczędności",
+  "modal.loading": "Ładowanie...",
+  "modal.noHistory": "Brak dostępnej historii.",
+  "modal.error": "Błąd podczas ładowania historii salda.",
+  "modal.close": "Zamknij"
 }
\ No newline at end of file
diff --git a/i18n/pt.json b/i18n/pt.json
index ca8c9f881..da92b1361 100644
--- a/i18n/pt.json
+++ b/i18n/pt.json
@@ -908,7 +908,19 @@
   "settingsPage.radialViewDescription": "Mostrar recursos como poder de voto usando indicadores circulares. (Padrão)",
   "settingsPage.linearViewLabel": "Visualização Linear",
   "settingsPage.linearViewDescription": "Mostrar recursos como poder de voto usando barras horizontais tradicionais.",
-  "accountSearch.accountReactResults": "resultados_pesquisa_conta",
+   "pageTitle.topHolders": "Principais Detentores",
+  "filters.filtersAndSearch": "Filtros e Pesquisa",
+  "filters.balance": "Saldo",
+  "filters.savings": "Poupança",
+  "table.rank": "Classificação",
+  "table.account": "Conta",
+  "table.balance": "Saldo",
+  "table.savings": "Poupança",
+  "modal.loading": "Carregando...",
+  "modal.noHistory": "Nenhum histórico disponível.",
+  "modal.error": "Erro ao carregar histórico de saldo.",
+  "modal.close": "Fechar"
+  ,"accountSearch.accountReactResults": "resultados_pesquisa_conta",
   "blockDetails.blockDetails": "detalhes_bloco",
   "commentsSearch.commentSearchResults": "resultados_pesquisa_comentarios",
   "transactionPage.transactionDetailsRefferer": "detalhes_transacao"
diff --git a/i18n/ro.json b/i18n/ro.json
index 7dccfe0ab..0d0a6ebef 100644
--- a/i18n/ro.json
+++ b/i18n/ro.json
@@ -911,4 +911,16 @@
   "blockDetails.blockDetails": "detalii_bloc",
   "commentsSearch.commentSearchResults": "rezultate_cautare_comentarii",
   "transactionPage.transactionDetailsRefferer": "detalii_tranzactie"
+,    "pageTitle.topHolders": "Cei mai mari deținători",
+  "filters.filtersAndSearch": "Filtre și Căutare",
+  "filters.balance": "Sold",
+  "filters.savings": "Economii",
+  "table.rank": "Rang",
+  "table.account": "Cont",
+  "table.balance": "Sold",
+  "table.savings": "Economii",
+  "modal.loading": "Se încarcă...",
+  "modal.noHistory": "Nu există istoric disponibil.",
+  "modal.error": "Eroare la încărcarea istoricului soldului.",
+  "modal.close": "Închide"
 }
\ No newline at end of file
diff --git a/i18n/zh.json b/i18n/zh.json
index 8944827dc..dbf5c2914 100644
--- a/i18n/zh.json
+++ b/i18n/zh.json
@@ -911,5 +911,17 @@
   "accountSearch.accountReactResults": "账户搜索结果",
   "blockDetails.blockDetails": "区块详情",
   "commentsSearch.commentSearchResults": "评论搜索结果",
-  "transactionPage.transactionDetailsRefferer": "交易详情"
+  "transactionPage.transactionDetailsRefferer": "交易详情"  ,"pageTitle.topHolders": "持币最多者",
+  "filters.filtersAndSearch": "筛选与搜索",
+  "filters.balance": "余额",
+  "filters.savings": "储蓄",
+  "table.rank": "排名",
+  "table.account": "账户",
+  "table.balance": "余额",
+  "table.savings": "储蓄",
+  "modal.loading": "加载中...",
+  "modal.noHistory": "没有可用历史记录。",
+  "modal.error": "加载余额历史出错。",
+  "modal.close": "关闭"
+
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 84d1a2ac3..42be30eed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "@types/react": "19.1.8",
         "@types/react-dom": "19.1.6",
         "autoprefixer": "10.4.14",
+        "chart.js": "^4.5.0",
         "child_process": "^1.0.2",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.0.0",
@@ -43,6 +44,7 @@
         "playwright-merge-html-reports": "^0.2.8",
         "postcss": "^8.4.31",
         "react": "18.3.1",
+        "react-chartjs-2": "^5.3.0",
         "react-country-flag": "^3.1.0",
         "react-day-picker": "^8.10.0",
         "react-dom": "18.3.1",
@@ -706,6 +708,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+    },
     "node_modules/@next/env": {
       "version": "15.3.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.3.tgz",
@@ -3075,6 +3082,17 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "dependencies": {
+        "@kurkle/color": "^0.3.0"
+      },
+      "engines": {
+        "pnpm": ">=8"
+      }
+    },
     "node_modules/child_process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -6605,6 +6623,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "peerDependencies": {
+        "chart.js": "^4.1.1",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/react-country-flag": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
@@ -8485,6 +8512,11 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "@kurkle/color": {
+      "version": "0.3.4",
+      "resolved": "https://registry.npmmirror.com/@kurkle/color/-/color-0.3.4.tgz",
+      "integrity": "sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w=="
+    },
     "@next/env": {
       "version": "15.3.3",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.3.3.tgz",
@@ -9809,6 +9841,14 @@
         "supports-color": "^7.1.0"
       }
     },
+    "chart.js": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmmirror.com/chart.js/-/chart.js-4.5.0.tgz",
+      "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
+      "requires": {
+        "@kurkle/color": "^0.3.0"
+      }
+    },
     "child_process": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/child_process/-/child_process-1.0.2.tgz",
@@ -12253,6 +12293,12 @@
         "loose-envify": "^1.1.0"
       }
     },
+    "react-chartjs-2": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmmirror.com/react-chartjs-2/-/react-chartjs-2-5.3.0.tgz",
+      "integrity": "sha512-UfZZFnDsERI3c3CZGxzvNJd02SHjaSJ8kgW1djn65H1KK8rehwTjyrRKOG3VTMG8wtHZ5rgAO5oTHtHi9GCCmw==",
+      "requires": {}
+    },
     "react-country-flag": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/react-country-flag/-/react-country-flag-3.1.0.tgz",
diff --git a/package.json b/package.json
index 675a2354a..81f6015ac 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,7 @@
     "@types/react": "19.1.8",
     "@types/react-dom": "19.1.6",
     "autoprefixer": "10.4.14",
+    "chart.js": "^4.5.0",
     "child_process": "^1.0.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.0.0",
@@ -53,6 +54,7 @@
     "playwright-merge-html-reports": "^0.2.8",
     "postcss": "^8.4.31",
     "react": "18.3.1",
+    "react-chartjs-2": "^5.3.0",
     "react-country-flag": "^3.1.0",
     "react-day-picker": "^8.10.0",
     "react-dom": "18.3.1",
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
index ac6231bdf..36d9077d6 100644
--- a/pages/top-holders.tsx
+++ b/pages/top-holders.tsx
@@ -1,29 +1,33 @@
-// pages/top-holders.tsx
 import { useEffect, useState } from "react";
 import { Card, CardHeader, CardTitle } from "@/components/ui/card";
-import { Select } from "@/components/ui/select";
-import { Button } from "@/components/ui/button";
 import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
-import { Pagination } from "@/components/ui/pagination";
 import PageTitle from "@/components/PageTitle";
 import ErrorMessage from "@/components/ErrorMessage";
 import NoResult from "@/components/NoResult";
 import TopHoldersPagination from "@/components/ui/TopHoldersPagination";
+import SearchBar from "@/components/SearchBar";
+import BalanceHistoryModal from "@/components/Modal";
+import { useI18n } from "@/i18n/i18n";
 
 interface Holder {
+  rank: number;
   account: string;
-  balance: string;
+  value: string;
 }
 
 export default function TopHoldersPage() {
+  const { t } = useI18n(); 
   const [holders, setHolders] = useState<Holder[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [page, setPage] = useState(1);
-  const [coinType, setCoinType] = useState("HIVE");
-  const [balanceType, setBalanceType] = useState("balance");
+  const [coinType, setCoinType] = useState<"HIVE" | "HBD" | "VESTS">("HIVE");
+  const [balanceType, setBalanceType] = useState<"balance" | "savings_balance">("balance");
+  const [searchTerm, setSearchTerm] = useState("");
+  const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
 
   useEffect(() => {
+    if (coinType === "VESTS" && balanceType !== "balance") setBalanceType("balance");
     fetchHolders();
   }, [page, coinType, balanceType]);
 
@@ -36,7 +40,7 @@ export default function TopHoldersPage() {
       );
       if (!res.ok) throw new Error(`API error: ${res.status}`);
       const data = await res.json();
-      setHolders(data?.holders || []);
+      setHolders(Array.isArray(data) ? data : []);
     } catch (err: any) {
       setError(err.message);
     } finally {
@@ -44,66 +48,108 @@ export default function TopHoldersPage() {
     }
   };
 
+  const handleAccountClick = (account: string) => setSelectedAccount(account);
+  const closeModal = () => setSelectedAccount(null);
+
+  const filteredHolders = holders.filter((holder) =>
+    holder.account.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const formatValue = (value: string) => Number(value).toLocaleString();
+
+  const getRankStyle = (rank: number) => {
+    if (rank === 1) return "bg-yellow-300 font-bold";
+    if (rank === 2) return "bg-gray-300 font-bold";
+    if (rank === 3) return "bg-yellow-800 text-white font-bold";
+    return "";
+  };
+
   return (
     <div className="p-6 space-y-6">
-      <PageTitle titleKey="Top Holders (Richlist)" />
+      <PageTitle titleKey={t("pageTitle.topHolders")} />
 
+      {/* Filters */}
       <Card>
         <CardHeader>
-          <CardTitle>Filters</CardTitle>
+          <CardTitle>{t("filters.filtersAndSearch")}</CardTitle>
         </CardHeader>
-        <div className="flex gap-4 p-4">
-          <Select value={coinType} onValueChange={setCoinType}>
-            <option value="HIVE">HIVE</option>
-            <option value="HBD">HBD</option>
-          </Select>
+        <div className="p-4 flex flex-wrap gap-4">
+          <select
+            value={coinType}
+            onChange={(e) => setCoinType(e.target.value as "HIVE" | "HBD" | "VESTS")}
+            className="border rounded px-2 py-1"
+          >
+            <option value="HIVE">{"HIVE"}</option>
+            <option value="HBD">{("HBD")}</option>
+            <option value="VESTS">{("VESTS")}</option>
+          </select>
+
+          <select
+            value={balanceType}
+            onChange={(e) => setBalanceType(e.target.value as "balance" | "savings_balance")}
+            disabled={coinType === "VESTS"}
+            className="border rounded px-2 py-1"
+          >
+            <option value="balance">{t("filters.balance")}</option>
+            <option value="savings_balance">{t("filters.savings")}</option>
+          </select>
 
-          <Select value={balanceType} onValueChange={setBalanceType}>
-            <option value="balance">Balance</option>
-            <option value="savings">Savings</option>
-            <option value="staked">Staked</option>
-          </Select>
+          <div className="flex-1 min-w-[200px]">
+            <SearchBar onSearch={(value: string) => setSearchTerm(value)} open={true} />
+          </div>
         </div>
       </Card>
 
+      {/* Top Holders Table */}
       <Card>
         <CardHeader>
-          <CardTitle>Richlist</CardTitle>
+          <CardTitle>{t("pageTitle.topHolders")}</CardTitle>
         </CardHeader>
         <div className="p-4">
-          {loading && <p>Loading...</p>}
+          {loading && <p>{t("modal.loading")}</p>}
           {error && <ErrorMessage message={error} />}
-          {!loading && !error && holders.length === 0 && <NoResult />}
-          {!loading && !error && holders.length > 0 && (
+          {!loading && !error && filteredHolders.length === 0 && <NoResult />}
+          {!loading && !error && filteredHolders.length > 0 && (
             <Table>
               <TableHeader>
                 <TableRow>
-                  <TableCell>Rank</TableCell>
-                  <TableCell>Account</TableCell>
-                  <TableCell>Balance</TableCell>
+                  <TableCell>{t("table.rank")}</TableCell>
+                  <TableCell>{t("table.account")}</TableCell>
+                  <TableCell className="text-right">
+                    {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
+                  </TableCell>
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {holders.map((holder, idx) => (
-                  <TableRow key={holder.account}>
-                    <TableCell>{idx + 1 + (page - 1) * 50}</TableCell>
-                    <TableCell>{holder.account}</TableCell>
-                    <TableCell>{holder.balance}</TableCell>
-                  </TableRow>
-                ))}
+                {filteredHolders.map((holder) => {
+                  const displayRank = holder.rank + (page - 1) * 100;
+                  return (
+                    <TableRow
+                      key={holder.account}
+                      className={getRankStyle(displayRank)}
+                      onClick={() => handleAccountClick(holder.account)}
+                      style={{ cursor: "pointer" }}
+                    >
+                      <TableCell>{displayRank}</TableCell>
+                      <TableCell>{holder.account}</TableCell>
+                      <TableCell className="text-right">{formatValue(holder.value)}</TableCell>
+                    </TableRow>
+                  );
+                })}
               </TableBody>
             </Table>
           )}
 
           <div className="mt-4 flex justify-center">
-            <TopHoldersPagination
-              currentPage={page}
-              onPageChange={setPage}
-              totalPages={1000} // ideally from API if available
-            />
+            <TopHoldersPagination currentPage={page} onPageChange={setPage} totalPages={1000} />
           </div>
         </div>
       </Card>
+
+      {/* Modal */}
+      {selectedAccount && (
+        <BalanceHistoryModal username={selectedAccount} coinType="HIVE" onClose={closeModal} />
+      )}
     </div>
   );
 }
-- 
GitLab


From 536a6b97c3aed1af4153fb4ce187d54fca7c4666 Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Tue, 9 Sep 2025 09:24:03 +0300
Subject: [PATCH 5/9] gar/#619 created richlist page,added the filtering and
 search, the balance hostory currently appearing in hive blog api only as the
 hive node,and made it responiive in mobile view

---
 components/Modal.tsx  |  25 +++-
 i18n/en.json          |  15 ++-
 pages/top-holders.tsx | 257 ++++++++++++++++++++++++++++++------------
 3 files changed, 222 insertions(+), 75 deletions(-)

diff --git a/components/Modal.tsx b/components/Modal.tsx
index f1fbb2e17..b6f0368e2 100644
--- a/components/Modal.tsx
+++ b/components/Modal.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useMemo } from "react";
 import BalanceHistoryChart from "@/components/balanceHistory/BalanceHistoryChart";
 import useBalanceHistory from "@/hooks/api/balanceHistory/useBalanceHistory";
 
@@ -18,6 +18,21 @@ const BalanceHistoryModal: React.FC<BalanceHistoryModalProps> = ({
   const { accountBalanceHistory, isAccountBalanceHistoryLoading, isAccountBalanceHistoryError } =
     useBalanceHistory(username, selectedCoinType, 1, 100, "asc");
 
+  // Map API result to chart-compatible format
+  const parsedOperations = useMemo(() => {
+    return accountBalanceHistory?.operations_result?.map((op: any) => ({
+      timestamp: op.timestamp,
+      balance: Number(op.balance || 0),
+      balance_change: Number(op.balance_change || 0),
+      savings_balance: op.savings_balance !== undefined ? Number(op.savings_balance) : undefined,
+      savings_balance_change:
+        op.savings_balance_change !== undefined ? Number(op.savings_balance_change) : undefined,
+      hivePrice: op.hivePrice || "0",
+      dollarValue: op.dollarValue !== undefined ? Number(op.dollarValue) : undefined,
+      convertedHive: op.convertedHive !== undefined ? Number(op.convertedHive) : undefined,
+    }));
+  }, [accountBalanceHistory]);
+
   return (
     <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
       <div className="relative w-full max-w-3xl p-4 bg-white dark:bg-gray-800 rounded shadow-lg">
@@ -48,14 +63,14 @@ const BalanceHistoryModal: React.FC<BalanceHistoryModalProps> = ({
           <p>Loading balance history...</p>
         ) : isAccountBalanceHistoryError ? (
           <p>Error loading balance history.</p>
-        ) : !accountBalanceHistory?.operations_result?.length ? (
+        ) : !parsedOperations?.length ? (
           <p>No balance history available.</p>
         ) : (
           <div className="w-full h-80">
             <BalanceHistoryChart
-              hiveBalanceHistoryData={selectedCoinType === "HIVE" ? accountBalanceHistory.operations_result : undefined}
-              vestsBalanceHistoryData={selectedCoinType === "VESTS" ? accountBalanceHistory.operations_result : undefined}
-              hbdBalanceHistoryData={selectedCoinType === "HBD" ? accountBalanceHistory.operations_result : undefined}
+              hiveBalanceHistoryData={selectedCoinType === "HIVE" ? parsedOperations : undefined}
+              vestsBalanceHistoryData={selectedCoinType === "VESTS" ? parsedOperations : undefined}
+              hbdBalanceHistoryData={selectedCoinType === "HBD" ? parsedOperations : undefined}
               className="h-80 w-full"
               quickView={false}
             />
diff --git a/i18n/en.json b/i18n/en.json
index ecbc19f7e..72f9a8a9f 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -911,6 +911,19 @@
   "transactionPage.transactionDetailsRefferer": "transaction_details",
   "accountSearch.accountReactResults": "account_search_results",
   "commentsSearch.commentSearchResults": "comment_search_results",
-  "blockDetails.blockDetails": "block_details"
+  "blockDetails.blockDetails": "block_details",
+  "pageTitle.topHolders": "Top Holders",
+"filters.filtersAndSearch": "Filters & Search",
+"filters.balance": "Balance",
+"filters.savings": "Savings",
+"table.rank": "Rank",
+"table.account": "Account",
+"table.balance": "Balance",
+"table.savings": "Savings",
+"modal.loading": "Loading...",
+"modal.noHistory": "No history available.",
+"modal.error": "Error loading balance history.",
+"modal.close": "Close"
+
   
 }
\ No newline at end of file
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
index 36d9077d6..222bd9a21 100644
--- a/pages/top-holders.tsx
+++ b/pages/top-holders.tsx
@@ -1,13 +1,22 @@
 import { useEffect, useState } from "react";
-import { Card, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card } from "@/components/ui/card";
 import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
 import PageTitle from "@/components/PageTitle";
 import ErrorMessage from "@/components/ErrorMessage";
 import NoResult from "@/components/NoResult";
-import TopHoldersPagination from "@/components/ui/TopHoldersPagination";
 import SearchBar from "@/components/SearchBar";
 import BalanceHistoryModal from "@/components/Modal";
+import FilterSectionToggle from "@/components/account/FilterSectionToggle";
 import { useI18n } from "@/i18n/i18n";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationPrevious,
+  PaginationNext,
+} from "@/components/ui/pagination";
+import DataExport from "@/components/DataExport";
 
 interface Holder {
   rank: number;
@@ -16,7 +25,7 @@ interface Holder {
 }
 
 export default function TopHoldersPage() {
-  const { t } = useI18n(); 
+  const { t } = useI18n();
   const [holders, setHolders] = useState<Holder[]>([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -25,6 +34,7 @@ export default function TopHoldersPage() {
   const [balanceType, setBalanceType] = useState<"balance" | "savings_balance">("balance");
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
+  const [isFiltersVisible, setIsFiltersVisible] = useState(false);
 
   useEffect(() => {
     if (coinType === "VESTS" && balanceType !== "balance") setBalanceType("balance");
@@ -57,98 +67,207 @@ export default function TopHoldersPage() {
 
   const formatValue = (value: string) => Number(value).toLocaleString();
 
-  const getRankStyle = (rank: number) => {
-    if (rank === 1) return "bg-yellow-300 font-bold";
-    if (rank === 2) return "bg-gray-300 font-bold";
-    if (rank === 3) return "bg-yellow-800 text-white font-bold";
-    return "";
-  };
-
   return (
-    <div className="p-6 space-y-6">
-      <PageTitle titleKey={t("pageTitle.topHolders")} />
-
-      {/* Filters */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t("filters.filtersAndSearch")}</CardTitle>
-        </CardHeader>
-        <div className="p-4 flex flex-wrap gap-4">
-          <select
-            value={coinType}
-            onChange={(e) => setCoinType(e.target.value as "HIVE" | "HBD" | "VESTS")}
-            className="border rounded px-2 py-1"
-          >
-            <option value="HIVE">{"HIVE"}</option>
-            <option value="HBD">{("HBD")}</option>
-            <option value="VESTS">{("VESTS")}</option>
-          </select>
-
-          <select
-            value={balanceType}
-            onChange={(e) => setBalanceType(e.target.value as "balance" | "savings_balance")}
-            disabled={coinType === "VESTS"}
-            className="border rounded px-2 py-1"
-          >
-            <option value="balance">{t("filters.balance")}</option>
-            <option value="savings_balance">{t("filters.savings")}</option>
-          </select>
-
-          <div className="flex-1 min-w-[200px]">
-            <SearchBar onSearch={(value: string) => setSearchTerm(value)} open={true} />
+    <div className="space-y-6 px-6">
+      {/* Header: outer Card*/}
+      <Card className="w-[98vw] max-w-[calc(100vw-2rem)] mx-auto rounded shadow-md mt-4 px-6 py-4">
+        {/* Desktop header*/}
+        <div className="hidden sm:flex items-center justify-between w-full">
+          <PageTitle titleKey={t("pageTitle.topHolders")} />
+          <FilterSectionToggle
+            isFiltersActive={isFiltersVisible}
+            toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
+          />
+        </div>
+
+        {/* Mobile header */}
+        <div className="flex flex-col sm:hidden items-start gap-3 w-full">
+          <div className="w-full">
+            <PageTitle titleKey={t("pageTitle.topHolders")} />
+          </div>
+          <div className="w-full flex justify-start">
+            <FilterSectionToggle
+              isFiltersActive={isFiltersVisible}
+              toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
+            />
           </div>
         </div>
       </Card>
 
-      {/* Top Holders Table */}
-      <Card>
-        <CardHeader>
-          <CardTitle>{t("pageTitle.topHolders")}</CardTitle>
-        </CardHeader>
+      {/* Filters/Search*/}
+      {isFiltersVisible && (
+        <Card className="w-full sm:max-w-[800px] mx-auto rounded shadow-sm p-4">
+          <div className="flex flex-col sm:flex-row gap-4 items-start">
+            <select
+              value={coinType}
+              onChange={(e) => setCoinType(e.target.value as "HIVE" | "HBD" | "VESTS")}
+              className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
+            >
+              <option value="HIVE">HIVE</option>
+              <option value="HBD">HBD</option>
+              <option value="VESTS">VESTS</option>
+            </select>
+
+            <select
+              value={balanceType}
+              onChange={(e) => setBalanceType(e.target.value as "balance" | "savings_balance")}
+              disabled={coinType === "VESTS"}
+              className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
+            >
+              <option value="balance">{t("filters.balance")}</option>
+              <option value="savings_balance">{t("filters.savings")}</option>
+            </select>
+
+            <div className="flex-1 w-full">
+              <SearchBar onSearch={(value: string) => setSearchTerm(value)} open={true} />
+            </div>
+          </div>
+        </Card>
+      )}
+
+      {/* Export button: */}
+      <div className="w-full sm:max-w-[800px] mx-auto flex justify-end mt-2 px-2 sm:px-0">
+        {!loading && !error && filteredHolders.length > 0 && (
+          <DataExport
+            data={filteredHolders.map(holder => ({
+              Rank: holder.rank + (page - 1) * 100,
+              Account: holder.account,
+              [balanceType === "savings_balance" ? "Savings" : "Balance"]: holder.value,
+            }))}
+            filename={`top_holders_${coinType.toLowerCase()}.csv`}
+            skipColumnSelection={true}
+            className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
+          />
+        )}
+      </div>
+
+      {/* Table Card  */}
+      <Card className="w-full sm:max-w-[800px] mx-auto rounded">
         <div className="p-4">
           {loading && <p>{t("modal.loading")}</p>}
           {error && <ErrorMessage message={error} />}
           {!loading && !error && filteredHolders.length === 0 && <NoResult />}
+
           {!loading && !error && filteredHolders.length > 0 && (
-            <Table>
-              <TableHeader>
-                <TableRow>
-                  <TableCell>{t("table.rank")}</TableCell>
-                  <TableCell>{t("table.account")}</TableCell>
-                  <TableCell className="text-right">
-                    {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
-                  </TableCell>
-                </TableRow>
-              </TableHeader>
-              <TableBody>
+            <>
+              {/* Desktop table  */}
+              <div className="hidden sm:block">
+                <div className="min-w-[700px]">
+                  <Table className="rounded border w-full">
+                    <TableHeader>
+                      <TableRow className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-left">
+                        <TableCell>{t("table.rank")}</TableCell>
+                        <TableCell>{t("table.account")}</TableCell>
+                        <TableCell className="text-right">
+                          {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
+                        </TableCell>
+                      </TableRow>
+                    </TableHeader>
+
+                    <TableBody>
+                      {filteredHolders.map((holder) => {
+                        const displayRank = holder.rank + (page - 1) * 100;
+                        return (
+                          <TableRow
+                            key={holder.account}
+                            onClick={() => handleAccountClick(holder.account)}
+                            className="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-gray-900 dark:text-gray-100"
+                          >
+                            <TableCell>{displayRank}</TableCell>
+                            <TableCell>{holder.account}</TableCell>
+                            <TableCell className="text-right">{formatValue(holder.value)}</TableCell>
+                          </TableRow>
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+              </div>
+
+              {/* Mobile compact list  */}
+              <div className="sm:hidden space-y-3">
                 {filteredHolders.map((holder) => {
                   const displayRank = holder.rank + (page - 1) * 100;
                   return (
-                    <TableRow
+                    <div
                       key={holder.account}
-                      className={getRankStyle(displayRank)}
                       onClick={() => handleAccountClick(holder.account)}
-                      style={{ cursor: "pointer" }}
+                      className="border rounded p-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer"
                     >
-                      <TableCell>{displayRank}</TableCell>
-                      <TableCell>{holder.account}</TableCell>
-                      <TableCell className="text-right">{formatValue(holder.value)}</TableCell>
-                    </TableRow>
+                      <div className="flex justify-between mb-1">
+                        <span className="text-sm font-medium">{t("table.rank")}</span>
+                        <span className="text-sm">{displayRank}</span>
+                      </div>
+                      <div className="flex justify-between mb-1">
+                        <span className="text-sm font-medium">{t("table.account")}</span>
+                        <span className="text-sm break-all">{holder.account}</span>
+                      </div>
+                      <div className="flex justify-between">
+                        <span className="text-sm font-medium">
+                          {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
+                        </span>
+                        <span className="text-sm">{formatValue(holder.value)}</span>
+                      </div>
+                    </div>
                   );
                 })}
-              </TableBody>
-            </Table>
+              </div>
+            </>
           )}
 
-          <div className="mt-4 flex justify-center">
-            <TopHoldersPagination currentPage={page} onPageChange={setPage} totalPages={1000} />
+          {/* Pagination: */}
+          <div className="hidden sm:flex mt-4 justify-center">
+            <Pagination>
+              <PaginationPrevious onClick={() => setPage((prev) => Math.max(prev - 1, 1))} />
+              <PaginationContent>
+                {Array.from({ length: 5 }).map((_, i) => {
+                  const pageNumber = i + 1;
+                  return (
+                    <PaginationItem key={i}>
+                      <PaginationLink
+                        isActive={page === pageNumber}
+                        onClick={() => setPage(pageNumber)}
+                      >
+                        {pageNumber}
+                      </PaginationLink>
+                    </PaginationItem>
+                  );
+                })}
+              </PaginationContent>
+              <PaginationNext onClick={() => setPage((prev) => Math.min(prev + 1, 5))} />
+            </Pagination>
           </div>
         </div>
       </Card>
 
+      {/* Mobile pagination  */}
+      <div className="sm:hidden w-full px-4">
+        <div className="mt-4 flex justify-center w-full">
+          <Pagination>
+            <PaginationPrevious onClick={() => setPage((prev) => Math.max(prev - 1, 1))} />
+            <PaginationContent>
+              {Array.from({ length: 5 }).map((_, i) => {
+                const pageNumber = i + 1;
+                return (
+                  <PaginationItem key={i}>
+                    <PaginationLink
+                      isActive={page === pageNumber}
+                      onClick={() => setPage(pageNumber)}
+                    >
+                      {pageNumber}
+                    </PaginationLink>
+                  </PaginationItem>
+                );
+              })}
+            </PaginationContent>
+            <PaginationNext onClick={() => setPage((prev) => Math.min(prev + 1, 5))} />
+          </Pagination>
+        </div>
+      </div>
+
       {/* Modal */}
       {selectedAccount && (
-        <BalanceHistoryModal username={selectedAccount} coinType="HIVE" onClose={closeModal} />
+        <BalanceHistoryModal username={selectedAccount} coinType={coinType} onClose={closeModal} />
       )}
     </div>
   );
-- 
GitLab


From 2cb7fe80d51601fd72ae6f0ccbb03fe55de93268 Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Thu, 11 Sep 2025 21:24:11 +0300
Subject: [PATCH 6/9] worked on the notes for richlist page

---
 components/TableSearchBar.tsx |  27 +++
 hooks/common/useTopHolders.ts |  48 ++++++
 i18n/ar.json                  |   6 +-
 i18n/de.json                  |   7 +-
 i18n/en.json                  |  28 +--
 i18n/es.json                  |   6 +-
 i18n/fr.json                  |   7 +-
 i18n/it.json                  |   8 +-
 i18n/ja.json                  |   8 +-
 i18n/pl.json                  |   8 +-
 i18n/pt.json                  |   8 +-
 i18n/ro.json                  |   8 +-
 i18n/zh.json                  |   6 +-
 pages/top-holders.tsx         | 313 +++++++++++++++++-----------------
 14 files changed, 308 insertions(+), 180 deletions(-)
 create mode 100644 components/TableSearchBar.tsx
 create mode 100644 hooks/common/useTopHolders.ts

diff --git a/components/TableSearchBar.tsx b/components/TableSearchBar.tsx
new file mode 100644
index 000000000..ed8dcaff3
--- /dev/null
+++ b/components/TableSearchBar.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+import { Search } from "lucide-react";
+import { useI18n } from "@/i18n/i18n";
+
+interface TableSearchBarProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const TableSearchBar: React.FC<TableSearchBarProps> = ({ value, onChange }) => {
+  const { t } = useI18n();
+
+  return (
+    <div className="relative w-full">
+      <input
+        type="text"
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+        placeholder={t("filters.searchUser")}
+        className="w-full border rounded pl-10 pr-3 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-400"
+      />
+      <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400" />
+    </div>
+  );
+};
+
+export default TableSearchBar;
diff --git a/hooks/common/useTopHolders.ts b/hooks/common/useTopHolders.ts
new file mode 100644
index 000000000..c6ab5a5d7
--- /dev/null
+++ b/hooks/common/useTopHolders.ts
@@ -0,0 +1,48 @@
+// hooks/common/useTopHolders.ts
+import { useState, useEffect } from "react";
+
+export type CoinType = "HIVE" | "HBD" | "VESTS";
+export type BalanceType = "balance" | "savings_balance";
+
+export interface Holder {
+  rank: number;
+  account: string;
+  value: string;
+}
+
+interface UseTopHoldersProps {
+  page: number;
+  coinType: CoinType;
+  balanceType: BalanceType;
+}
+
+export default function useTopHolders({ page, coinType, balanceType }: UseTopHoldersProps) {
+  const [holders, setHolders] = useState<Holder[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (coinType === "VESTS" && balanceType !== "balance") return;
+
+    const fetchHolders = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const res = await fetch(
+          `https://api.syncad.com/balance-api/top-holders?coin-type=${coinType}&balance-type=${balanceType}&page=${page}`
+        );
+        if (!res.ok) throw new Error(`API error: ${res.status}`);
+        const data = await res.json();
+        setHolders(Array.isArray(data) ? data : []);
+      } catch (err: any) {
+        setError(err.message);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchHolders();
+  }, [page, coinType, balanceType]);
+
+  return { holders, loading, error };
+}
diff --git a/i18n/ar.json b/i18n/ar.json
index 7e22879dd..b204f0efe 100644
--- a/i18n/ar.json
+++ b/i18n/ar.json
@@ -923,6 +923,10 @@
   "modal.loading": "جار التحميل...",
   "modal.noHistory": "لا يوجد تاريخ متاح.",
   "modal.error": "خطأ في تحميل تاريخ الرصيد.",
-  "modal.close": "إغلاق"
+  "modal.close": "إغلاق",
+  "topHoldersPage.infoDescription": "تُظهر هذه الصفحة أكبر الحائزين لكل عملة. استخدم الفلاتر للبحث، والفرز، وتحديد الأرصدة.",
+"filters.ascending": "تصاعدي",
+"filters.descending": "تنازلي",
+"filters.searchUser":"البحث عن مستخدم"
   
 }
\ No newline at end of file
diff --git a/i18n/de.json b/i18n/de.json
index 4377cb2c2..92c0401c4 100644
--- a/i18n/de.json
+++ b/i18n/de.json
@@ -923,5 +923,10 @@
   "modal.loading": "Lädt...",
   "modal.noHistory": "Keine Historie verfügbar.",
   "modal.error": "Fehler beim Laden des Kontostandverlaufs.",
-  "modal.close": "Schließen"
+  "modal.close": "Schließen",
+  "topHoldersPage.infoDescription": "Diese Seite zeigt die Top-Inhaber jeder Münze. Verwenden Sie Filter, um zu suchen, zu sortieren und Guthaben auszuwählen.",
+"filters.ascending": "Aufsteigend",
+"filters.descending": "Absteigend",
+"filters.searchUser": "Nach Benutzer suchen"
+
 }
\ No newline at end of file
diff --git a/i18n/en.json b/i18n/en.json
index 72f9a8a9f..d52a64315 100644
--- a/i18n/en.json
+++ b/i18n/en.json
@@ -913,17 +913,23 @@
   "commentsSearch.commentSearchResults": "comment_search_results",
   "blockDetails.blockDetails": "block_details",
   "pageTitle.topHolders": "Top Holders",
-"filters.filtersAndSearch": "Filters & Search",
-"filters.balance": "Balance",
-"filters.savings": "Savings",
-"table.rank": "Rank",
-"table.account": "Account",
-"table.balance": "Balance",
-"table.savings": "Savings",
-"modal.loading": "Loading...",
-"modal.noHistory": "No history available.",
-"modal.error": "Error loading balance history.",
-"modal.close": "Close"
+  "filters.ascending":"Ascending",
+  "filters.descending":"Descending",
+  "topHoldersPage.infoDescription": "This page shows the top holders for each coin. Use filters to search, sort, and select balances.",
+
+  "filters.filtersAndSearch": "Filters & Search",
+  "filters.balance": "Balance",
+  "filters.savings": "Savings",
+  "table.rank": "Rank",
+  "table.account": "Account",
+  "table.balance": "Balance",
+  "table.savings": "Savings",
+  "modal.loading": "Loading...",
+  "modal.noHistory": "No history available.",
+  "modal.error": "Error loading balance history.",
+  "modal.close": "Close",
+  "filters.searchUser": "Search by user"
+
 
   
 }
\ No newline at end of file
diff --git a/i18n/es.json b/i18n/es.json
index 7adf352cb..cea823578 100644
--- a/i18n/es.json
+++ b/i18n/es.json
@@ -922,5 +922,9 @@
   "modal.loading": "Cargando...",
   "modal.noHistory": "No hay historial disponible.",
   "modal.error": "Error al cargar el historial de saldo.",
-  "modal.close": "Cerrar"
+  "modal.close": "Cerrar",
+  "topHoldersPage.infoDescription": "Esta página muestra los principales poseedores de cada moneda. Usa los filtros para buscar, ordenar y seleccionar saldos.",
+"filters.ascending": "Ascendente",
+"filters.descending": "Descendente",
+"filters.searchUser": "Buscar por usuario"
 }
\ No newline at end of file
diff --git a/i18n/fr.json b/i18n/fr.json
index 52e1e5697..8b16910cf 100644
--- a/i18n/fr.json
+++ b/i18n/fr.json
@@ -922,5 +922,10 @@
   "modal.loading": "Chargement...",
   "modal.noHistory": "Aucun historique disponible.",
   "modal.error": "Erreur lors du chargement de l'historique du solde.",
-  "modal.close": "Fermer"
+  "modal.close": "Fermer",
+  "topHoldersPage.infoDescription": "Cette page affiche les principaux détenteurs de chaque crypto-monnaie. Utilisez les filtres pour rechercher, trier et sélectionner les soldes.",
+"filters.ascending": "Croissant",
+"filters.descending": "Décroissant",
+"filters.searchUser": "Rechercher un utilisateur"
+
 }
\ No newline at end of file
diff --git a/i18n/it.json b/i18n/it.json
index 491f9bd50..2e2349347 100644
--- a/i18n/it.json
+++ b/i18n/it.json
@@ -919,5 +919,11 @@
   ,"accountSearch.accountReactResults": "risultati_ricerca_account",
   "blockDetails.blockDetails": "dettagli_blocco",
   "commentsSearch.commentSearchResults": "risultati_ricerca_commenti",
-  "transactionPage.transactionDetailsRefferer": "dettagli_transazione"
+  "transactionPage.transactionDetailsRefferer": "dettagli_transazione",
+  "topHoldersPage.infoDescription": "Questa pagina mostra i principali detentori di ogni moneta. Usa i filtri per cercare, ordinare e selezionare i saldi.",
+"filters.ascending": "Crescente",
+"filters.descending": "Decrescente",
+"filters.searchUser": "Cerca per utente"
+
+
 }
\ No newline at end of file
diff --git a/i18n/ja.json b/i18n/ja.json
index bf17dba3f..17f08101d 100644
--- a/i18n/ja.json
+++ b/i18n/ja.json
@@ -923,5 +923,11 @@
   "modal.loading": "読み込み中...",
   "modal.noHistory": "履歴はありません。",
   "modal.error": "残高履歴の読み込み中にエラーが発生しました。",
-  "modal.close": "閉じる"
+  "modal.close": "閉じる",
+  "topHoldersPage.infoDescription": "このページでは、各コインの上位保有者を表示します。フィルターを使用して検索、並べ替え、残高を選択してください。",
+"filters.ascending": "昇順",
+"filters.descending": "降順",
+"filters.searchUser": "ユーザーで検索"
+
+
 }
\ No newline at end of file
diff --git a/i18n/pl.json b/i18n/pl.json
index b90defc72..1be96d30a 100644
--- a/i18n/pl.json
+++ b/i18n/pl.json
@@ -923,5 +923,11 @@
   "modal.loading": "Ładowanie...",
   "modal.noHistory": "Brak dostępnej historii.",
   "modal.error": "Błąd podczas ładowania historii salda.",
-  "modal.close": "Zamknij"
+  "modal.close": "Zamknij",
+  "topHoldersPage.infoDescription": "Ta strona pokazuje największych posiadaczy każdej monety. Użyj filtrów, aby wyszukiwać, sortować i wybierać salda.",
+"filters.ascending": "Rosnąco",
+"filters.descending": "Malejąco",
+"filters.searchUser": "Szukaj użytkownika"
+
+
 }
\ No newline at end of file
diff --git a/i18n/pt.json b/i18n/pt.json
index 14bf4a12a..7faf9a559 100644
--- a/i18n/pt.json
+++ b/i18n/pt.json
@@ -924,5 +924,11 @@
   ,"accountSearch.accountReactResults": "resultados_pesquisa_conta",
   "blockDetails.blockDetails": "detalhes_bloco",
   "commentsSearch.commentSearchResults": "resultados_pesquisa_comentarios",
-  "transactionPage.transactionDetailsRefferer": "detalhes_transacao"
+  "transactionPage.transactionDetailsRefferer": "detalhes_transacao",
+  "topHoldersPage.infoDescription": "Esta página mostra os principais detentores de cada moeda. Use os filtros para pesquisar, classificar e selecionar saldos.",
+"filters.ascending": "Ascendente",
+"filters.descending": "Descendente",
+"filters.searchUser": "Pesquisar por usuário"
+
+
 }
\ No newline at end of file
diff --git a/i18n/ro.json b/i18n/ro.json
index 0d0a6ebef..8113beed0 100644
--- a/i18n/ro.json
+++ b/i18n/ro.json
@@ -922,5 +922,11 @@
   "modal.loading": "Se încarcă...",
   "modal.noHistory": "Nu există istoric disponibil.",
   "modal.error": "Eroare la încărcarea istoricului soldului.",
-  "modal.close": "Închide"
+  "modal.close": "Închide",
+  "topHoldersPage.infoDescription": "Această pagină arată cei mai importanți deținători pentru fiecare monedă. Folosiți filtrele pentru a căuta, sorta și selecta soldurile.",
+"filters.ascending": "Ascendent",
+"filters.descending": "Descendent",
+"filters.searchUser": "Căutați după utilizator"
+
+
 }
\ No newline at end of file
diff --git a/i18n/zh.json b/i18n/zh.json
index 8a5c1c592..796f2a59d 100644
--- a/i18n/zh.json
+++ b/i18n/zh.json
@@ -922,7 +922,11 @@
   "modal.loading": "加载中...",
   "modal.noHistory": "没有可用历史记录。",
   "modal.error": "加载余额历史出错。",
-  "modal.close": "关闭"
+  "modal.close": "关闭",
+  "topHoldersPage.infoDescription": "此页面显示每种货币的顶级持有者。使用筛选器进行搜索、排序和选择余额。",
+"filters.ascending": "升序",
+"filters.descending": "降序",
+"filters.searchUser": "按用户搜索"
 
 
 
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
index 222bd9a21..fd5ac69fc 100644
--- a/pages/top-holders.tsx
+++ b/pages/top-holders.tsx
@@ -1,106 +1,135 @@
-import { useEffect, useState } from "react";
+// pages/TopHoldersPage.tsx
+import { useState } from "react";
 import { Card } from "@/components/ui/card";
 import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
 import PageTitle from "@/components/PageTitle";
 import ErrorMessage from "@/components/ErrorMessage";
 import NoResult from "@/components/NoResult";
-import SearchBar from "@/components/SearchBar";
 import BalanceHistoryModal from "@/components/Modal";
 import FilterSectionToggle from "@/components/account/FilterSectionToggle";
+import { Info } from "lucide-react";
 import { useI18n } from "@/i18n/i18n";
-import {
-  Pagination,
-  PaginationContent,
-  PaginationItem,
-  PaginationLink,
-  PaginationPrevious,
-  PaginationNext,
-} from "@/components/ui/pagination";
 import DataExport from "@/components/DataExport";
-
-interface Holder {
-  rank: number;
-  account: string;
-  value: string;
-}
+import TableSearchBar from "@/components/TableSearchBar";
+import CustomPagination from "@/components/CustomPagination";
+import useTopHolders, { CoinType, BalanceType } from "@/hooks/common/useTopHolders";
 
 export default function TopHoldersPage() {
   const { t } = useI18n();
-  const [holders, setHolders] = useState<Holder[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+
   const [page, setPage] = useState(1);
-  const [coinType, setCoinType] = useState<"HIVE" | "HBD" | "VESTS">("HIVE");
-  const [balanceType, setBalanceType] = useState<"balance" | "savings_balance">("balance");
+  const [coinType, setCoinType] = useState<CoinType>("HIVE");
+  const [balanceType, setBalanceType] = useState<BalanceType>("balance");
   const [searchTerm, setSearchTerm] = useState("");
   const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
   const [isFiltersVisible, setIsFiltersVisible] = useState(false);
+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
 
-  useEffect(() => {
-    if (coinType === "VESTS" && balanceType !== "balance") setBalanceType("balance");
-    fetchHolders();
-  }, [page, coinType, balanceType]);
+  const totalCount = 500;
 
-  const fetchHolders = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      const res = await fetch(
-        `https://api.syncad.com/balance-api/top-holders?coin-type=${coinType}&balance-type=${balanceType}&page=${page}`
-      );
-      if (!res.ok) throw new Error(`API error: ${res.status}`);
-      const data = await res.json();
-      setHolders(Array.isArray(data) ? data : []);
-    } catch (err: any) {
-      setError(err.message);
-    } finally {
-      setLoading(false);
-    }
-  };
+  const { holders, loading, error } = useTopHolders({ page, coinType, balanceType });
+
+  const defaultCoinType: CoinType = "HIVE";
+  const defaultBalanceType: BalanceType = "balance";
+  const defaultSortOrder: "asc" | "desc" = "desc";
+
+  const filtersChanged =
+    coinType !== defaultCoinType || balanceType !== defaultBalanceType || sortOrder !== defaultSortOrder;
 
   const handleAccountClick = (account: string) => setSelectedAccount(account);
   const closeModal = () => setSelectedAccount(null);
 
-  const filteredHolders = holders.filter((holder) =>
-    holder.account.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredHolders = holders
+    .filter((holder) => holder.account.toLowerCase().includes(searchTerm.toLowerCase()))
+    .sort((a, b) => {
+      const valA = parseFloat(a.value);
+      const valB = parseFloat(b.value);
+      if (isNaN(valA) || isNaN(valB)) return 0;
+      return sortOrder === "asc" ? valA - valB : valB - valA;
+    });
+
+  const formatValue = (value: string, coinType: CoinType) => {
+    let num = parseFloat(value);
+    if (isNaN(num)) return value;
+    num = num / 1000;
+    const decimals = coinType === "VESTS" ? 6 : 3;
+    return parseFloat(num.toFixed(decimals)).toLocaleString(undefined, { maximumFractionDigits: decimals });
+  };
+
+const prepareExportData = () => {
+  return filteredHolders.map((holder) => ({
+    [t("table.rank")]: holder.rank + (page - 1) * 100,
+    [t("table.account")]: holder.account,
+    [balanceType === "savings_balance"
+      ? t("table.savings")
+      : t("table.balance")]: holder.value,
+  }));
+};
 
-  const formatValue = (value: string) => Number(value).toLocaleString();
+  const exportFileName = `top_holders_${coinType.toLowerCase()}.csv`;
 
   return (
-    <div className="space-y-6 px-6">
-      {/* Header: outer Card*/}
-      <Card className="w-[98vw] max-w-[calc(100vw-2rem)] mx-auto rounded shadow-md mt-4 px-6 py-4">
-        {/* Desktop header*/}
-        <div className="hidden sm:flex items-center justify-between w-full">
-          <PageTitle titleKey={t("pageTitle.topHolders")} />
+    <div className="page-container space-y-6 px-6 w-full max-w-[98vw] mx-auto">
+      {/* Top Section */}
+      <Card className="w-full rounded shadow-md mt-4 px-6 py-4">
+        <div className="hidden sm:flex items-start justify-between w-full relative">
+          <div className="flex items-start gap-2 relative">
+            <PageTitle titleKey={t("pageTitle.topHolders")} className="mt-4" />
+            <div className="absolute -top-1 right-[-24px] group">
+              <Info
+                width={18}
+                height={18}
+                stroke="#EF4444"
+                strokeWidth={2} 
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+                className="cursor-pointer"
+              />
+              <div className="absolute top-full left-0 mt-2 hidden group-hover:block w-64 p-2 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-xs rounded shadow-md z-10">
+                {t("topHoldersPage.infoDescription")}
+              </div>
+            </div>
+          </div>
           <FilterSectionToggle
-            isFiltersActive={isFiltersVisible}
+            isFiltersActive={filtersChanged}
             toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
           />
         </div>
 
-        {/* Mobile header */}
-        <div className="flex flex-col sm:hidden items-start gap-3 w-full">
-          <div className="w-full">
-            <PageTitle titleKey={t("pageTitle.topHolders")} />
-          </div>
-          <div className="w-full flex justify-start">
-            <FilterSectionToggle
-              isFiltersActive={isFiltersVisible}
-              toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
-            />
+        <div className="flex flex-col sm:hidden items-start gap-3 w-full relative">
+          <div className="flex items-start gap-2 relative">
+            <PageTitle titleKey={t("pageTitle.topHolders")} className="mt-4" />
+            <div className="absolute -top-1 right-[-24px] group">
+              <Info
+                width={18}
+                height={18}
+                stroke="#EF4444"
+                strokeWidth={2}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                fill="none"
+                className="cursor-pointer"
+              />
+              <div className="absolute top-full left-0 mt-2 hidden group-hover:block w-64 p-2 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-xs rounded shadow-md z-10">
+                {t("topHoldersPage.infoDescription")}
+              </div>
+            </div>
           </div>
+          <FilterSectionToggle
+            isFiltersActive={filtersChanged}
+            toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
+          />
         </div>
       </Card>
 
-      {/* Filters/Search*/}
+      {/* Filter Section */}
       {isFiltersVisible && (
-        <Card className="w-full sm:max-w-[800px] mx-auto rounded shadow-sm p-4">
+        <Card className="w-full rounded shadow-sm p-4">
           <div className="flex flex-col sm:flex-row gap-4 items-start">
             <select
               value={coinType}
-              onChange={(e) => setCoinType(e.target.value as "HIVE" | "HBD" | "VESTS")}
+              onChange={(e) => setCoinType(e.target.value as CoinType)}
               className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
             >
               <option value="HIVE">HIVE</option>
@@ -110,7 +139,7 @@ export default function TopHoldersPage() {
 
             <select
               value={balanceType}
-              onChange={(e) => setBalanceType(e.target.value as "balance" | "savings_balance")}
+              onChange={(e) => setBalanceType(e.target.value as BalanceType)}
               disabled={coinType === "VESTS"}
               className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
             >
@@ -118,31 +147,36 @@ export default function TopHoldersPage() {
               <option value="savings_balance">{t("filters.savings")}</option>
             </select>
 
+            <select
+              value={sortOrder}
+              onChange={(e) => setSortOrder(e.target.value as "asc" | "desc")}
+              className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
+            >
+              <option value="asc">{t("filters.ascending")}</option>
+              <option value="desc">{t("filters.descending")}</option>
+            </select>
+
             <div className="flex-1 w-full">
-              <SearchBar onSearch={(value: string) => setSearchTerm(value)} open={true} />
+              <TableSearchBar value={searchTerm} onChange={setSearchTerm} />
             </div>
           </div>
         </Card>
       )}
 
-      {/* Export button: */}
-      <div className="w-full sm:max-w-[800px] mx-auto flex justify-end mt-2 px-2 sm:px-0">
+      {/* Export Button */}
+      <div className="w-full flex justify-end mt-2 px-2">
         {!loading && !error && filteredHolders.length > 0 && (
           <DataExport
-            data={filteredHolders.map(holder => ({
-              Rank: holder.rank + (page - 1) * 100,
-              Account: holder.account,
-              [balanceType === "savings_balance" ? "Savings" : "Balance"]: holder.value,
-            }))}
-            filename={`top_holders_${coinType.toLowerCase()}.csv`}
+            data={prepareExportData()}
+            filename={exportFileName}
             skipColumnSelection={true}
             className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
           />
         )}
       </div>
 
-      {/* Table Card  */}
-      <Card className="w-full sm:max-w-[800px] mx-auto rounded">
+      {/* Table */}
+      <Card className="w-full rounded">
         <div className="p-4">
           {loading && <p>{t("modal.loading")}</p>}
           {error && <ErrorMessage message={error} />}
@@ -150,41 +184,38 @@ export default function TopHoldersPage() {
 
           {!loading && !error && filteredHolders.length > 0 && (
             <>
-              {/* Desktop table  */}
-              <div className="hidden sm:block">
-                <div className="min-w-[700px]">
-                  <Table className="rounded border w-full">
-                    <TableHeader>
-                      <TableRow className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-left">
-                        <TableCell>{t("table.rank")}</TableCell>
-                        <TableCell>{t("table.account")}</TableCell>
-                        <TableCell className="text-right">
-                          {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
-                        </TableCell>
-                      </TableRow>
-                    </TableHeader>
-
-                    <TableBody>
-                      {filteredHolders.map((holder) => {
-                        const displayRank = holder.rank + (page - 1) * 100;
-                        return (
-                          <TableRow
-                            key={holder.account}
-                            onClick={() => handleAccountClick(holder.account)}
-                            className="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-gray-900 dark:text-gray-100"
-                          >
-                            <TableCell>{displayRank}</TableCell>
-                            <TableCell>{holder.account}</TableCell>
-                            <TableCell className="text-right">{formatValue(holder.value)}</TableCell>
-                          </TableRow>
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
-                </div>
+              {/* Desktop Table */}
+              <div className="hidden sm:block min-w-[700px]">
+                <Table className="rounded border w-full">
+                  <TableHeader>
+                    <TableRow className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-left">
+                      <TableCell>{t("table.rank")}</TableCell>
+                      <TableCell>{t("table.account")}</TableCell>
+                      <TableCell className="text-right">
+                        {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
+                      </TableCell>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
+                    {filteredHolders.map((holder) => {
+                      const displayRank = holder.rank + (page - 1) * 100;
+                      return (
+                        <TableRow
+                          key={holder.account}
+                          onClick={() => handleAccountClick(holder.account)}
+                          className="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-gray-900 dark:text-gray-100"
+                        >
+                          <TableCell>{displayRank}</TableCell>
+                          <TableCell>{holder.account}</TableCell>
+                          <TableCell className="text-right">{formatValue(holder.value, coinType)}</TableCell>
+                        </TableRow>
+                      );
+                    })}
+                  </TableBody>
+                </Table>
               </div>
 
-              {/* Mobile compact list  */}
+              {/* Mobile Table */}
               <div className="sm:hidden space-y-3">
                 {filteredHolders.map((holder) => {
                   const displayRank = holder.rank + (page - 1) * 100;
@@ -206,65 +237,29 @@ export default function TopHoldersPage() {
                         <span className="text-sm font-medium">
                           {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
                         </span>
-                        <span className="text-sm">{formatValue(holder.value)}</span>
+                        <span className="text-sm">{formatValue(holder.value, coinType)}</span>
                       </div>
                     </div>
                   );
                 })}
               </div>
+
+              {/* Pagination */}
+              <div className="mt-4 flex justify-center w-full">
+                <CustomPagination
+                  currentPage={page}
+                  onPageChange={setPage}
+                  pageSize={100}
+                  totalCount={totalCount}
+                  className="rounded"
+                  isMirrored={false}
+                />
+              </div>
             </>
           )}
-
-          {/* Pagination: */}
-          <div className="hidden sm:flex mt-4 justify-center">
-            <Pagination>
-              <PaginationPrevious onClick={() => setPage((prev) => Math.max(prev - 1, 1))} />
-              <PaginationContent>
-                {Array.from({ length: 5 }).map((_, i) => {
-                  const pageNumber = i + 1;
-                  return (
-                    <PaginationItem key={i}>
-                      <PaginationLink
-                        isActive={page === pageNumber}
-                        onClick={() => setPage(pageNumber)}
-                      >
-                        {pageNumber}
-                      </PaginationLink>
-                    </PaginationItem>
-                  );
-                })}
-              </PaginationContent>
-              <PaginationNext onClick={() => setPage((prev) => Math.min(prev + 1, 5))} />
-            </Pagination>
-          </div>
         </div>
       </Card>
 
-      {/* Mobile pagination  */}
-      <div className="sm:hidden w-full px-4">
-        <div className="mt-4 flex justify-center w-full">
-          <Pagination>
-            <PaginationPrevious onClick={() => setPage((prev) => Math.max(prev - 1, 1))} />
-            <PaginationContent>
-              {Array.from({ length: 5 }).map((_, i) => {
-                const pageNumber = i + 1;
-                return (
-                  <PaginationItem key={i}>
-                    <PaginationLink
-                      isActive={page === pageNumber}
-                      onClick={() => setPage(pageNumber)}
-                    >
-                      {pageNumber}
-                    </PaginationLink>
-                  </PaginationItem>
-                );
-              })}
-            </PaginationContent>
-            <PaginationNext onClick={() => setPage((prev) => Math.min(prev + 1, 5))} />
-          </Pagination>
-        </div>
-      </div>
-
       {/* Modal */}
       {selectedAccount && (
         <BalanceHistoryModal username={selectedAccount} coinType={coinType} onClose={closeModal} />
-- 
GitLab


From 6ab21b036f6eee0dbac79539a1fce2b558a40776 Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Mon, 15 Sep 2025 20:07:36 +0300
Subject: [PATCH 7/9] fixing richlist

---
 Config.ts                                     |   4 +
 .../BalanceHistoryModal.tsx}                  |   0
 .../TopHoldersSearchBar.tsx}                  |   0
 components/ui/TopHoldersPagination.tsx        |  46 ---
 hooks/common/useTopHolders.ts                 |  67 ++--
 pages/top-holders.tsx                         | 287 ++++++++----------
 services/FetchingService.ts                   |  14 +
 types/Hive.ts                                 |  13 +
 types/Rest.ts                                 |   9 +
 utils/PageTitlesInfo.tsx                      |  92 +++++-
 10 files changed, 284 insertions(+), 248 deletions(-)
 rename components/{Modal.tsx => top-holders/BalanceHistoryModal.tsx} (100%)
 rename components/{TableSearchBar.tsx => top-holders/TopHoldersSearchBar.tsx} (100%)
 delete mode 100644 components/ui/TopHoldersPagination.tsx

diff --git a/Config.ts b/Config.ts
index 6445c9a73..119e9d457 100644
--- a/Config.ts
+++ b/Config.ts
@@ -14,6 +14,10 @@ export const config = {
   gitHash: process.env.NEXT_PUBLIC_COMMIT_HASH,
   get lastCommitHashRepoUrl() {
     return `https://gitlab.syncad.com/hive/block_explorer_ui/-/commit/${this.gitHash}`;
+  },
+   topHolders: {
+    totalCount: 500,       // Total number of top holders
+    pageSize: 100,         // Page size for pagination
   },
   opsBodyLimit: 100000,
   commentOperationsTypeIds: [0, 1, 17, 19, 51, 53, 61, 63, 72, 73],
diff --git a/components/Modal.tsx b/components/top-holders/BalanceHistoryModal.tsx
similarity index 100%
rename from components/Modal.tsx
rename to components/top-holders/BalanceHistoryModal.tsx
diff --git a/components/TableSearchBar.tsx b/components/top-holders/TopHoldersSearchBar.tsx
similarity index 100%
rename from components/TableSearchBar.tsx
rename to components/top-holders/TopHoldersSearchBar.tsx
diff --git a/components/ui/TopHoldersPagination.tsx b/components/ui/TopHoldersPagination.tsx
deleted file mode 100644
index b3c3efeaa..000000000
--- a/components/ui/TopHoldersPagination.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import React from "react";
-import {
-  Pagination,
-  PaginationItem,
-  PaginationLink,
-  PaginationPrevious,
-  PaginationNext,
-} from "@/components/ui/pagination";
-
-interface Props {
-  currentPage: number;
-  onPageChange: (page: number) => void;
-  totalPages: number;
-}
-
-const TopHoldersPagination: React.FC<Props> = ({ currentPage, onPageChange, totalPages }) => {
-  const pagesToShow = 5; // Number of page buttons to display
-  const startPage = Math.max(1, currentPage - Math.floor(pagesToShow / 2));
-  const endPage = Math.min(totalPages, startPage + pagesToShow - 1);
-
-  const pageNumbers = [];
-  for (let i = startPage; i <= endPage; i++) pageNumbers.push(i);
-
-  return (
-    <Pagination>
-      <PaginationPrevious
-        onClick={() => onPageChange(Math.max(1, currentPage - 1))}
-      />
-      {pageNumbers.map((page) => (
-        <PaginationItem key={page}>
-          <PaginationLink
-            isActive={page === currentPage}
-            onClick={() => onPageChange(page)}
-          >
-            {page}
-          </PaginationLink>
-        </PaginationItem>
-      ))}
-      <PaginationNext
-        onClick={() => onPageChange(Math.min(totalPages, currentPage + 1))}
-      />
-    </Pagination>
-  );
-};
-
-export default TopHoldersPagination;
diff --git a/hooks/common/useTopHolders.ts b/hooks/common/useTopHolders.ts
index c6ab5a5d7..fe80e7f51 100644
--- a/hooks/common/useTopHolders.ts
+++ b/hooks/common/useTopHolders.ts
@@ -1,48 +1,27 @@
-// hooks/common/useTopHolders.ts
-import { useState, useEffect } from "react";
+import { useQuery } from "@tanstack/react-query";
+import fetchingService from "@/services/FetchingService";
+import Hive from "@/types/Hive";
 
 export type CoinType = "HIVE" | "HBD" | "VESTS";
 export type BalanceType = "balance" | "savings_balance";
 
-export interface Holder {
-  rank: number;
-  account: string;
-  value: string;
-}
-
-interface UseTopHoldersProps {
-  page: number;
-  coinType: CoinType;
-  balanceType: BalanceType;
-}
-
-export default function useTopHolders({ page, coinType, balanceType }: UseTopHoldersProps) {
-  const [holders, setHolders] = useState<Holder[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (coinType === "VESTS" && balanceType !== "balance") return;
-
-    const fetchHolders = async () => {
-      setLoading(true);
-      setError(null);
-      try {
-        const res = await fetch(
-          `https://api.syncad.com/balance-api/top-holders?coin-type=${coinType}&balance-type=${balanceType}&page=${page}`
-        );
-        if (!res.ok) throw new Error(`API error: ${res.status}`);
-        const data = await res.json();
-        setHolders(Array.isArray(data) ? data : []);
-      } catch (err: any) {
-        setError(err.message);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchHolders();
-  }, [page, coinType, balanceType]);
-
-  return { holders, loading, error };
-}
+const useTopHolders = (coinType: CoinType, balanceType: BalanceType, page: number) => {
+  const {
+    data: holdersData,
+    isLoading: isTopHoldersLoading,
+    error: isTopHoldersError,
+  } = useQuery<Hive.TopHolder[]>({
+    queryKey: ["topHolders", coinType, balanceType, page],
+    queryFn: () => fetchingService.getTopHolders(coinType, balanceType, page),
+    enabled: !(coinType === "VESTS" && balanceType !== "balance"),
+    refetchOnWindowFocus: false,
+  });
+
+  return {
+    holdersData: holdersData ?? [],
+    isTopHoldersLoading,
+    isTopHoldersError: isTopHoldersError as Error | null,
+  };
+};
+
+export default useTopHolders;
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
index fd5ac69fc..d53f5eeb1 100644
--- a/pages/top-holders.tsx
+++ b/pages/top-holders.tsx
@@ -1,132 +1,146 @@
-// pages/TopHoldersPage.tsx
 import { useState } from "react";
+import { useRouter } from "next/router";
 import { Card } from "@/components/ui/card";
 import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
 import PageTitle from "@/components/PageTitle";
 import ErrorMessage from "@/components/ErrorMessage";
 import NoResult from "@/components/NoResult";
-import BalanceHistoryModal from "@/components/Modal";
 import FilterSectionToggle from "@/components/account/FilterSectionToggle";
-import { Info } from "lucide-react";
 import { useI18n } from "@/i18n/i18n";
 import DataExport from "@/components/DataExport";
-import TableSearchBar from "@/components/TableSearchBar";
 import CustomPagination from "@/components/CustomPagination";
 import useTopHolders, { CoinType, BalanceType } from "@/hooks/common/useTopHolders";
+import { config } from "@/Config";
+import { formatNumber } from "@/lib/utils";
+import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
 
 export default function TopHoldersPage() {
   const { t } = useI18n();
+  const router = useRouter();
 
   const [page, setPage] = useState(1);
   const [coinType, setCoinType] = useState<CoinType>("HIVE");
   const [balanceType, setBalanceType] = useState<BalanceType>("balance");
-  const [searchTerm, setSearchTerm] = useState("");
-  const [selectedAccount, setSelectedAccount] = useState<string | null>(null);
   const [isFiltersVisible, setIsFiltersVisible] = useState(false);
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
 
-  const totalCount = 500;
+  const totalCount = config.topHolders.totalCount;
 
-  const { holders, loading, error } = useTopHolders({ page, coinType, balanceType });
+  const { holdersData, isTopHoldersLoading, isTopHoldersError } = useTopHolders(
+    coinType,
+    balanceType,
+    page
+  );
 
   const defaultCoinType: CoinType = "HIVE";
   const defaultBalanceType: BalanceType = "balance";
   const defaultSortOrder: "asc" | "desc" = "desc";
 
   const filtersChanged =
-    coinType !== defaultCoinType || balanceType !== defaultBalanceType || sortOrder !== defaultSortOrder;
-
-  const handleAccountClick = (account: string) => setSelectedAccount(account);
-  const closeModal = () => setSelectedAccount(null);
+    coinType !== defaultCoinType ||
+    balanceType !== defaultBalanceType ||
+    sortOrder !== defaultSortOrder;
 
-  const filteredHolders = holders
-    .filter((holder) => holder.account.toLowerCase().includes(searchTerm.toLowerCase()))
-    .sort((a, b) => {
-      const valA = parseFloat(a.value);
-      const valB = parseFloat(b.value);
-      if (isNaN(valA) || isNaN(valB)) return 0;
-      return sortOrder === "asc" ? valA - valB : valB - valA;
-    });
+  // Navigate to user's profile page on click
+  const handleAccountClick = (account: string) => {
+    router.push(`/@${account}`);
+  };
 
-  const formatValue = (value: string, coinType: CoinType) => {
-    let num = parseFloat(value);
-    if (isNaN(num)) return value;
-    num = num / 1000;
-    const decimals = coinType === "VESTS" ? 6 : 3;
-    return parseFloat(num.toFixed(decimals)).toLocaleString(undefined, { maximumFractionDigits: decimals });
+  // Sort holders based on value and sortOrder
+  const filteredHolders = holdersData.sort((a, b) => {
+    const valA = parseFloat(a.value);
+    const valB = parseFloat(b.value);
+    if (isNaN(valA) || isNaN(valB)) return 0;
+    return sortOrder === "asc" ? valA - valB : valB - valA;
+  });
+
+  const formatValueForDisplay = (value: string, coinType: CoinType) => {
+    const isVest = coinType === "VESTS";
+    return formatNumber(value, isVest);
   };
 
-const prepareExportData = () => {
-  return filteredHolders.map((holder) => ({
-    [t("table.rank")]: holder.rank + (page - 1) * 100,
-    [t("table.account")]: holder.account,
-    [balanceType === "savings_balance"
-      ? t("table.savings")
-      : t("table.balance")]: holder.value,
-  }));
-};
+  const prepareExportData = () =>
+    filteredHolders.map((holder) => ({
+      [t("table.rank")]: holder.rank + (page - 1) * 100,
+      [t("table.account")]: holder.account,
+      [balanceType === "savings_balance" ? t("table.savings") : t("table.balance")]: holder.value,
+    }));
 
   const exportFileName = `top_holders_${coinType.toLowerCase()}.csv`;
 
+  const HolderRow = ({
+    rank,
+    account,
+    value,
+  }: {
+    rank: number;
+    account: string;
+    value: string;
+  }) => (
+    <TableRow
+      key={account}
+      onClick={() => handleAccountClick(account)}
+      className="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-gray-900 dark:text-gray-100"
+      data-testid="top-holders-table-row"
+    >
+      <TableCell>{rank}</TableCell>
+      <TableCell>{account}</TableCell>
+      <TableCell className="text-right">{formatValueForDisplay(value, coinType)}</TableCell>
+    </TableRow>
+  );
+
+  // Table header with sortable arrows
+  const TableHeaderRow = () => (
+    <TableHeader>
+      <TableRow className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-left">
+        <TableCell
+          className="cursor-pointer"
+          onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
+        >
+          <div className="flex items-center">
+            {t("table.rank")}
+            {sortOrder === "asc" ? (
+              <ChevronDown size={15} className="ml-1" />
+            ) : (
+              <ChevronUp size={15} className="ml-1" />
+            )}
+          </div>
+        </TableCell>
+        <TableCell>{t("table.account")}</TableCell>
+        <TableCell
+          className="text-right cursor-pointer"
+          onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
+        >
+          <div className="flex items-center justify-end">
+            {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
+            <ChevronsUpDown size={15} className="ml-1" />
+          </div>
+        </TableCell>
+      </TableRow>
+    </TableHeader>
+  );
+
   return (
-    <div className="page-container space-y-6 px-6 w-full max-w-[98vw] mx-auto">
+    <div className="page-container space-y-6 w-full">
       {/* Top Section */}
-      <Card className="w-full rounded shadow-md mt-4 px-6 py-4">
-        <div className="hidden sm:flex items-start justify-between w-full relative">
-          <div className="flex items-start gap-2 relative">
-            <PageTitle titleKey={t("pageTitle.topHolders")} className="mt-4" />
-            <div className="absolute -top-1 right-[-24px] group">
-              <Info
-                width={18}
-                height={18}
-                stroke="#EF4444"
-                strokeWidth={2} 
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                fill="none"
-                className="cursor-pointer"
-              />
-              <div className="absolute top-full left-0 mt-2 hidden group-hover:block w-64 p-2 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-xs rounded shadow-md z-10">
-                {t("topHoldersPage.infoDescription")}
-              </div>
-            </div>
+      <Card className="w-full rounded shadow-md mt-4 py-2">
+        <div className="flex flex-col sm:flex-row items-start justify-between w-full relative gap-3">
+          <div className="flex flex-col md:flex-row justify-between items-start">
+            <PageTitle titleKey="pageTitle.topHolders" className="py-4" />
           </div>
-          <FilterSectionToggle
-            isFiltersActive={filtersChanged}
-            toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
-          />
-        </div>
-
-        <div className="flex flex-col sm:hidden items-start gap-3 w-full relative">
-          <div className="flex items-start gap-2 relative">
-            <PageTitle titleKey={t("pageTitle.topHolders")} className="mt-4" />
-            <div className="absolute -top-1 right-[-24px] group">
-              <Info
-                width={18}
-                height={18}
-                stroke="#EF4444"
-                strokeWidth={2}
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                fill="none"
-                className="cursor-pointer"
-              />
-              <div className="absolute top-full left-0 mt-2 hidden group-hover:block w-64 p-2 bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white text-xs rounded shadow-md z-10">
-                {t("topHoldersPage.infoDescription")}
-              </div>
-            </div>
+          <div className="flex-shrink-0 md:mt-2">
+            <FilterSectionToggle
+              isFiltersActive={filtersChanged}
+              toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
+            />
           </div>
-          <FilterSectionToggle
-            isFiltersActive={filtersChanged}
-            toggleFilters={() => setIsFiltersVisible(!isFiltersVisible)}
-          />
         </div>
       </Card>
 
       {/* Filter Section */}
       {isFiltersVisible && (
-        <Card className="w-full rounded shadow-sm p-4">
-          <div className="flex flex-col sm:flex-row gap-4 items-start">
+        <Card className="w-full rounded shadow-sm">
+          <div className="flex flex-col sm:flex-row gap-4 items-start p-4">
             <select
               value={coinType}
               onChange={(e) => setCoinType(e.target.value as CoinType)}
@@ -146,30 +160,16 @@ const prepareExportData = () => {
               <option value="balance">{t("filters.balance")}</option>
               <option value="savings_balance">{t("filters.savings")}</option>
             </select>
-
-            <select
-              value={sortOrder}
-              onChange={(e) => setSortOrder(e.target.value as "asc" | "desc")}
-              className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
-            >
-              <option value="asc">{t("filters.ascending")}</option>
-              <option value="desc">{t("filters.descending")}</option>
-            </select>
-
-            <div className="flex-1 w-full">
-              <TableSearchBar value={searchTerm} onChange={setSearchTerm} />
-            </div>
           </div>
         </Card>
       )}
 
       {/* Export Button */}
-      <div className="w-full flex justify-end mt-2 px-2">
-        {!loading && !error && filteredHolders.length > 0 && (
+      <div className="w-full flex justify-end mt-2">
+        {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length > 0 && (
           <DataExport
             data={prepareExportData()}
             filename={exportFileName}
-            skipColumnSelection={true}
             className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
           />
         )}
@@ -177,38 +177,27 @@ const prepareExportData = () => {
 
       {/* Table */}
       <Card className="w-full rounded">
-        <div className="p-4">
-          {loading && <p>{t("modal.loading")}</p>}
-          {error && <ErrorMessage message={error} />}
-          {!loading && !error && filteredHolders.length === 0 && <NoResult />}
+        <div>
+          {isTopHoldersLoading && <p>{t("modal.loading")}</p>}
+          {isTopHoldersError && <ErrorMessage message={isTopHoldersError.message} />}
+          {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length === 0 && <NoResult />}
 
-          {!loading && !error && filteredHolders.length > 0 && (
+          {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length > 0 && (
             <>
               {/* Desktop Table */}
               <div className="hidden sm:block min-w-[700px]">
                 <Table className="rounded border w-full">
-                  <TableHeader>
-                    <TableRow className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-left">
-                      <TableCell>{t("table.rank")}</TableCell>
-                      <TableCell>{t("table.account")}</TableCell>
-                      <TableCell className="text-right">
-                        {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
-                      </TableCell>
-                    </TableRow>
-                  </TableHeader>
-                  <TableBody>
+                  <TableHeaderRow />
+                  <TableBody data-testid="table-body">
                     {filteredHolders.map((holder) => {
                       const displayRank = holder.rank + (page - 1) * 100;
                       return (
-                        <TableRow
+                        <HolderRow
                           key={holder.account}
-                          onClick={() => handleAccountClick(holder.account)}
-                          className="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-gray-900 dark:text-gray-100"
-                        >
-                          <TableCell>{displayRank}</TableCell>
-                          <TableCell>{holder.account}</TableCell>
-                          <TableCell className="text-right">{formatValue(holder.value, coinType)}</TableCell>
-                        </TableRow>
+                          rank={displayRank}
+                          account={holder.account}
+                          value={holder.value}
+                        />
                       );
                     })}
                   </TableBody>
@@ -216,32 +205,23 @@ const prepareExportData = () => {
               </div>
 
               {/* Mobile Table */}
-              <div className="sm:hidden space-y-3">
-                {filteredHolders.map((holder) => {
-                  const displayRank = holder.rank + (page - 1) * 100;
-                  return (
-                    <div
-                      key={holder.account}
-                      onClick={() => handleAccountClick(holder.account)}
-                      className="border rounded p-3 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 cursor-pointer"
-                    >
-                      <div className="flex justify-between mb-1">
-                        <span className="text-sm font-medium">{t("table.rank")}</span>
-                        <span className="text-sm">{displayRank}</span>
-                      </div>
-                      <div className="flex justify-between mb-1">
-                        <span className="text-sm font-medium">{t("table.account")}</span>
-                        <span className="text-sm break-all">{holder.account}</span>
-                      </div>
-                      <div className="flex justify-between">
-                        <span className="text-sm font-medium">
-                          {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
-                        </span>
-                        <span className="text-sm">{formatValue(holder.value, coinType)}</span>
-                      </div>
-                    </div>
-                  );
-                })}
+              <div className="sm:hidden overflow-x-auto">
+                <Table className="rounded border w-full text-sm">
+                  <TableHeaderRow />
+                  <TableBody data-testid="table-body">
+                    {filteredHolders.map((holder) => {
+                      const displayRank = holder.rank + (page - 1) * 100;
+                      return (
+                        <HolderRow
+                          key={holder.account}
+                          rank={displayRank}
+                          account={holder.account}
+                          value={holder.value}
+                        />
+                      );
+                    })}
+                  </TableBody>
+                </Table>
               </div>
 
               {/* Pagination */}
@@ -251,19 +231,12 @@ const prepareExportData = () => {
                   onPageChange={setPage}
                   pageSize={100}
                   totalCount={totalCount}
-                  className="rounded"
-                  isMirrored={false}
                 />
               </div>
             </>
           )}
         </div>
       </Card>
-
-      {/* Modal */}
-      {selectedAccount && (
-        <BalanceHistoryModal username={selectedAccount} coinType={coinType} onClose={closeModal} />
-      )}
     </div>
   );
 }
diff --git a/services/FetchingService.ts b/services/FetchingService.ts
index 463c52b60..2bde9a8c9 100644
--- a/services/FetchingService.ts
+++ b/services/FetchingService.ts
@@ -769,6 +769,20 @@ class FetchingService {
    async getBlockChainProps(): Promise<Hive.BlockChainProps> {
     return await this.extendedHiveChain!.api.condenser_api.get_chain_properties([]);
   }
+  async getTopHolders(
+  coinType: "HIVE" | "HBD" | "VESTS",
+  balanceType: "balance" | "savings_balance",
+  page: number
+): Promise<Hive.TopHolder[]> {
+  return await this.extendedHiveChain!.restApi["balance-api"].topHolders({
+    "coin-type": coinType,
+    "balance-type": balanceType,
+    page,
+    
+  });
+}
+
+
 }
 
 const fetchingService = new FetchingService();
diff --git a/types/Hive.ts b/types/Hive.ts
index 95b2b4560..f6d3de261 100644
--- a/types/Hive.ts
+++ b/types/Hive.ts
@@ -1094,6 +1094,19 @@ namespace Hive {
     account_subsidy_limit!: number;
 
   }
+  export class GetTopHoldersParams {
+  "coin-type"!: string;
+  "balance-type"!: string;
+  page!: number;
+  "page-size"?: number;
+}
+
+export class TopHolder {
+  rank!: number;
+  account!: string;
+  value!: string;
+}
+
 }
 
 export default Hive;
diff --git a/types/Rest.ts b/types/Rest.ts
index 8bda3399d..abb7e89a5 100644
--- a/types/Rest.ts
+++ b/types/Rest.ts
@@ -171,5 +171,14 @@ export const extendedRest = {
       result: Hive.AccountRecurrentBalanceTransfersResponse,
       urlPath: "accounts/{accountName}/recurrent-transfers",
     },
+    topHolders: {
+    params: Hive.GetTopHoldersParams,
+    result: Hive.TopHolder,
+    urlPath: "top-holders",
+    responseArray: true,
+    },
+
+    
   },
+  
 };
diff --git a/utils/PageTitlesInfo.tsx b/utils/PageTitlesInfo.tsx
index 23eea1b1a..84614ac18 100644
--- a/utils/PageTitlesInfo.tsx
+++ b/utils/PageTitlesInfo.tsx
@@ -68,6 +68,84 @@ const TransactionDetailsInfoEn: React.FC = () => (
     <li>You can change the setting from Data View in the main menu to view data in other formats</li>
   </ul>
 );
+//top holders section
+// --- English (en) ---
+const TopHoldersInfoEn: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>This page shows the top holders for each coin. Use filters to search, sort, and select balances.</li>
+  </ul>
+);
+
+// --- Spanish (es) ---
+const TopHoldersInfoEs: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>Esta página muestra los principales poseedores de cada moneda. Usa filtros para buscar, ordenar y seleccionar saldos.</li>
+  </ul>
+);
+
+// --- Italian (it) ---
+const TopHoldersInfoIt: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>Questa pagina mostra i principali detentori per ogni moneta. Usa i filtri per cercare, ordinare e selezionare i saldi.</li>
+  </ul>
+);
+
+// --- German (de) ---
+const TopHoldersInfoDe: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>Diese Seite zeigt die größten Inhaber jeder Münze. Verwenden Sie Filter, um Salden zu suchen, zu sortieren und auszuwählen.</li>
+  </ul>
+);
+
+// --- Portuguese (pt) ---
+const TopHoldersInfoPt: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>Esta página mostra os principais detentores de cada moeda. Use filtros para pesquisar, classificar e selecionar saldos.</li>
+  </ul>
+);
+
+// --- French (fr) ---
+const TopHoldersInfoFr: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>Cette page affiche les principaux détenteurs de chaque monnaie. Utilisez des filtres pour rechercher, trier et sélectionner les soldes.</li>
+  </ul>
+);
+
+// --- Polish (pl) ---
+const TopHoldersInfoPl: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>Ta strona pokazuje największych posiadaczy każdej monety. Użyj filtrów, aby wyszukać, posortować i wybrać salda.</li>
+  </ul>
+);
+
+// --- Chinese (Simplified) (zh) ---
+const TopHoldersInfoZh: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>此页面显示每种代币的最大持有者。使用筛选器来搜索、排序和选择余额。</li>
+  </ul>
+);
+
+// --- Japanese (ja) ---
+const TopHoldersInfoJa: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>このページでは、各コインの最大保有者が表示されます。フィルターを使って検索、並べ替え、残高の選択ができます。</li>
+  </ul>
+);
+
+// --- Romanian (ro) ---
+const TopHoldersInfoRo: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>Această pagină afișează principalii deținători pentru fiecare monedă. Folosiți filtre pentru a căuta, sorta și selecta soldurile.</li>
+  </ul>
+);
+
+// --- Arabic (ar) ---
+const TopHoldersInfoAr: React.FC = () => (
+  <ul className="list-disc list-inside">
+    <li>تعرض هذه الصفحة كبار الحائزين لكل عملة. استخدم الفلاتر للبحث والفرز وتحديد الأرصدة.</li>
+  </ul>
+);
+
 // src/components/info/ProposalsInfo.tsx
 
 const ProposalsInfoEn: React.FC = () => (
@@ -804,8 +882,20 @@ const pageTitlesInfo: InfoContent = {
     ro: <ProposalsInfoRo />,
     ar: <ProposalsInfoAr/>
   },
+  "pageTitle.topHolders": {
+  en: <TopHoldersInfoEn />,
+  es: <TopHoldersInfoEs />,
+  it: <TopHoldersInfoIt />,
+  de: <TopHoldersInfoDe />,
+  pt: <TopHoldersInfoPt />,
+  fr: <TopHoldersInfoFr />,
+  pl: <TopHoldersInfoPl />,
+  zh: <TopHoldersInfoZh />,
+  ja: <TopHoldersInfoJa />,
+  ro: <TopHoldersInfoRo />,
+  ar: <TopHoldersInfoAr />
+},
 
-  
 };
 
 export default pageTitlesInfo;
\ No newline at end of file
-- 
GitLab


From 7754f722521ce29a3cb479d7d202ccf25a823c6b Mon Sep 17 00:00:00 2001
From: Dima Rifai <dima.rifai@gmail.com>
Date: Mon, 15 Sep 2025 21:33:57 +0300
Subject: [PATCH 8/9] Peer Notes

---
 pages/top-holders.tsx | 273 +++++++++++++++++++++++++++++-------------
 types/Hive.ts         |  19 ++-
 2 files changed, 200 insertions(+), 92 deletions(-)

diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
index d53f5eeb1..b12516fd5 100644
--- a/pages/top-holders.tsx
+++ b/pages/top-holders.tsx
@@ -1,7 +1,7 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/router";
 import { Card } from "@/components/ui/card";
-import { Table, TableHeader, TableBody, TableRow, TableCell } from "@/components/ui/table";
+import { Table, TableHeader, TableBody, TableRow, TableCell, TableHead } from "@/components/ui/table";
 import PageTitle from "@/components/PageTitle";
 import ErrorMessage from "@/components/ErrorMessage";
 import NoResult from "@/components/NoResult";
@@ -12,7 +12,16 @@ import CustomPagination from "@/components/CustomPagination";
 import useTopHolders, { CoinType, BalanceType } from "@/hooks/common/useTopHolders";
 import { config } from "@/Config";
 import { formatNumber } from "@/lib/utils";
-import { ChevronDown, ChevronUp, ChevronsUpDown } from "lucide-react";
+import { ChevronDown, ChevronUp, ChevronsUpDown, Loader2 } from "lucide-react";
+import { getHiveAvatarUrl } from "@/utils/HiveBlogUtils";
+import Image from "next/image";
+import Link from "next/link";
+import useDynamicGlobal from "@/hooks/api/homePage/useDynamicGlobal";
+import { convertVestsToHP } from "@/utils/Calculations";
+import { useHiveChainContext } from "@/contexts/HiveChainContext";
+import Hive from "@/types/Hive";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
 
 export default function TopHoldersPage() {
   const { t } = useI18n();
@@ -41,10 +50,6 @@ export default function TopHoldersPage() {
     balanceType !== defaultBalanceType ||
     sortOrder !== defaultSortOrder;
 
-  // Navigate to user's profile page on click
-  const handleAccountClick = (account: string) => {
-    router.push(`/@${account}`);
-  };
 
   // Sort holders based on value and sortOrder
   const filteredHolders = holdersData.sort((a, b) => {
@@ -65,6 +70,39 @@ export default function TopHoldersPage() {
       [t("table.account")]: holder.account,
       [balanceType === "savings_balance" ? t("table.savings") : t("table.balance")]: holder.value,
     }));
+  const { dynamicGlobalData } = useDynamicGlobal() as any;
+  const [totalVestingShares, setTotalVestingShares] = useState<Hive.Supply>(
+    dynamicGlobalData?.headBlockDetails.rawTotalVestingShares
+  );
+  const [totalVestingFundHive, setTotalVestingFundHive] = useState<Hive.Supply>(
+    dynamicGlobalData?.headBlockDetails.rawTotalVestingFundHive
+  );
+  
+    const { hiveChain } = useHiveChainContext();
+
+ useEffect(() => {
+    if (dynamicGlobalData?.headBlockDetails) {
+      setTotalVestingShares(
+        dynamicGlobalData.headBlockDetails.rawTotalVestingShares
+      );
+      setTotalVestingFundHive(
+        dynamicGlobalData.headBlockDetails.rawTotalVestingFundHive
+      );
+    }
+  }, [dynamicGlobalData]);
+
+     const fetchHivePower = (value: string, isHP: boolean): string => {
+        if (isHP) {
+          if (!hiveChain) return "";
+          return convertVestsToHP(
+            hiveChain,
+            value,
+            totalVestingFundHive,
+            totalVestingShares
+          );
+        }
+        return `${formatNumber(value, true)} VESTS`;
+      };
 
   const exportFileName = `top_holders_${coinType.toLowerCase()}.csv`;
 
@@ -79,12 +117,31 @@ export default function TopHoldersPage() {
   }) => (
     <TableRow
       key={account}
-      onClick={() => handleAccountClick(account)}
-      className="hover:bg-gray-50 dark:hover:bg-gray-700 cursor-pointer text-gray-900 dark:text-gray-100"
+     //onClick={() => handleAccountClick(account)}
+      className="hover:bg-rowHover cursor-pointer text-sm"
       data-testid="top-holders-table-row"
     >
       <TableCell>{rank}</TableCell>
-      <TableCell>{account}</TableCell>
+      <TableCell className="text-link">
+        <div className="flex items-center space-x-2">
+                                          <Image
+                                            src={getHiveAvatarUrl(account)}
+                                            alt={`${account}'s profile`}
+                                            width={30}
+                                            height={30}
+                                            className="rounded-full"
+                                          />
+                                          <Link
+                                            className="text-link"
+                                            href={`/@${account}`}
+                                          >
+                                          </Link>
+                                        </div>
+        
+        
+        
+        
+        {account}</TableCell>
       <TableCell className="text-right">{formatValueForDisplay(value, coinType)}</TableCell>
     </TableRow>
   );
@@ -93,7 +150,7 @@ export default function TopHoldersPage() {
   const TableHeaderRow = () => (
     <TableHeader>
       <TableRow className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-left">
-        <TableCell
+        <TableHead
           className="cursor-pointer"
           onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
         >
@@ -105,9 +162,9 @@ export default function TopHoldersPage() {
               <ChevronUp size={15} className="ml-1" />
             )}
           </div>
-        </TableCell>
-        <TableCell>{t("table.account")}</TableCell>
-        <TableCell
+        </TableHead>
+        <TableHead>{t("table.account")}</TableHead>
+        <TableHead
           className="text-right cursor-pointer"
           onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
         >
@@ -115,15 +172,15 @@ export default function TopHoldersPage() {
             {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
             <ChevronsUpDown size={15} className="ml-1" />
           </div>
-        </TableCell>
+        </TableHead>
       </TableRow>
     </TableHeader>
   );
 
   return (
-    <div className="page-container space-y-6 w-full">
+    <div className="page-container">
       {/* Top Section */}
-      <Card className="w-full rounded shadow-md mt-4 py-2">
+      <Card className="w-full rounded-[0px] rounded-t shadow-md mt-4 py-2">
         <div className="flex flex-col sm:flex-row items-start justify-between w-full relative gap-3">
           <div className="flex flex-col md:flex-row justify-between items-start">
             <PageTitle titleKey="pageTitle.topHolders" className="py-4" />
@@ -139,7 +196,7 @@ export default function TopHoldersPage() {
 
       {/* Filter Section */}
       {isFiltersVisible && (
-        <Card className="w-full rounded shadow-sm">
+        <Card className="w-full rounded-[0px] rounded-b shadow-sm">
           <div className="flex flex-col sm:flex-row gap-4 items-start p-4">
             <select
               value={coinType}
@@ -165,76 +222,128 @@ export default function TopHoldersPage() {
       )}
 
       {/* Export Button */}
-      <div className="w-full flex justify-end mt-2">
-        {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length > 0 && (
-          <DataExport
-            data={prepareExportData()}
-            filename={exportFileName}
-            className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
-          />
-        )}
+      <div className="mt-4 flex justify-center w-full">
+                  <CustomPagination
+                    currentPage={page}
+                    onPageChange={setPage}
+                    pageSize={100}
+                    totalCount={totalCount}
+                  />
+                </div>
+               
+      <div className="table-toolbar justify-end w-full rounded-t">
+        <DataExport
+          data={prepareExportData()}
+          filename={exportFileName}
+          //className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
+        />
+          <div className="flex items-center space-x-2 rounded-md p-1.5">
+                      <Label
+                        htmlFor="unit-toggle"
+                        className="text-sm"
+                      >
+                        {t("common.vests")}
+                      </Label>
+                      <Switch
+                        id="unit-toggle"
+                        //checked={unit === "hp"}
+                       // onCheckedChange={(checked) =>
+                          //setUnit(checked ? "hp" : "vests")
+                        
+                      />
+                      <Label
+                        htmlFor="unit-toggle"
+                        className="text-sm "
+                      >
+                        {t("common.hp")}
+                      </Label>
+                    </div>
       </div>
 
+     {/* } <div className="w-full flex justify-end mt-2">
+        {!isTopHoldersLoading &&
+          !isTopHoldersError &&
+          filteredHolders.length > 0 && (
+            <DataExport
+              data={prepareExportData()}
+              filename={exportFileName}
+              className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
+            />
+          )}
+      </div> */}
+
       {/* Table */}
       <Card className="w-full rounded">
         <div>
-          {isTopHoldersLoading && <p>{t("modal.loading")}</p>}
-          {isTopHoldersError && <ErrorMessage message={isTopHoldersError.message} />}
-          {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length === 0 && <NoResult />}
-
-          {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length > 0 && (
-            <>
-              {/* Desktop Table */}
-              <div className="hidden sm:block min-w-[700px]">
-                <Table className="rounded border w-full">
-                  <TableHeaderRow />
-                  <TableBody data-testid="table-body">
-                    {filteredHolders.map((holder) => {
-                      const displayRank = holder.rank + (page - 1) * 100;
-                      return (
-                        <HolderRow
-                          key={holder.account}
-                          rank={displayRank}
-                          account={holder.account}
-                          value={holder.value}
-                        />
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </div>
-
-              {/* Mobile Table */}
-              <div className="sm:hidden overflow-x-auto">
-                <Table className="rounded border w-full text-sm">
-                  <TableHeaderRow />
-                  <TableBody data-testid="table-body">
-                    {filteredHolders.map((holder) => {
-                      const displayRank = holder.rank + (page - 1) * 100;
-                      return (
-                        <HolderRow
-                          key={holder.account}
-                          rank={displayRank}
-                          account={holder.account}
-                          value={holder.value}
-                        />
-                      );
-                    })}
-                  </TableBody>
-                </Table>
-              </div>
-
-              {/* Pagination */}
-              <div className="mt-4 flex justify-center w-full">
-                <CustomPagination
-                  currentPage={page}
-                  onPageChange={setPage}
-                  pageSize={100}
-                  totalCount={totalCount}
-                />
-              </div>
-            </>
+           {isTopHoldersLoading && (
+          <div className="flex justify-center items-center">
+            <Loader2 className="animate-spin mt-1 h-16 w-10 ml-10 dark:text-white" />
+          </div>
+        )}
+        {!isTopHoldersLoading && isTopHoldersError && (
+          <p className="text-sm text-center">
+             <ErrorMessage message={isTopHoldersError.message} />
+          </p>
+        )}
+
+        
+
+        {/*  {isTopHoldersLoading && <p>{t("modal.loading")}</p>}
+          {isTopHoldersError && (
+            <ErrorMessage message={isTopHoldersError.message} />
           )}
+          {!isTopHoldersLoading &&
+            !isTopHoldersError &&
+            filteredHolders.length === 0 && <NoResult */}
+
+          {!isTopHoldersLoading &&
+            !isTopHoldersError &&
+            filteredHolders.length > 0 && (
+              <>
+                {/* Desktop Table */}
+                <div>
+                  <Table className="w-full">
+                    <TableHeaderRow />
+                    <TableBody data-testid="table-body">
+                      {filteredHolders.map((holder) => {
+                        const displayRank = holder.rank + (page - 1) * 100;
+                        return (
+                          <HolderRow
+                            key={holder.account}
+                            rank={displayRank}
+                            account={holder.account}
+                            value={holder.value}
+                          />
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div>
+
+                {/* Mobile Table */}
+              {/*  <div className="sm:hidden overflow-x-auto">
+                  <Table className=" w-full ">
+                    <TableHeaderRow />
+                    <TableBody data-testid="table-body">
+                      {filteredHolders.map((holder) => {
+                        const displayRank = holder.rank + (page - 1) * 100;
+                        return (
+                          <HolderRow
+                            key={holder.account}
+                            rank={displayRank}
+                            account={holder.account}
+                            value={holder.value}
+                          />
+                        );
+                      })}
+                    </TableBody>
+                  </Table>
+                </div> */}
+
+                {/* Pagination */}
+                
+              </>
+            )}
         </div>
       </Card>
     </div>
diff --git a/types/Hive.ts b/types/Hive.ts
index f6d3de261..bad4c4379 100644
--- a/types/Hive.ts
+++ b/types/Hive.ts
@@ -1095,17 +1095,16 @@ namespace Hive {
 
   }
   export class GetTopHoldersParams {
-  "coin-type"!: string;
-  "balance-type"!: string;
-  page!: number;
-  "page-size"?: number;
-}
+    "coin-type"!: string;
+    "balance-type"!: string;
+    page!: number;
+  }
 
-export class TopHolder {
-  rank!: number;
-  account!: string;
-  value!: string;
-}
+  export class TopHolder {
+    rank!: number;
+    account!: string;
+    value!: string;
+  }
 
 }
 
-- 
GitLab


From 6f4910e30a3fa86c40df11fa251ba8da0fd953b7 Mon Sep 17 00:00:00 2001
From: Ghina Al Rashwani <gmalrashwani@gmail.com>
Date: Tue, 16 Sep 2025 23:14:12 +0300
Subject: [PATCH 9/9] fixing notes in top holders page

---
 components/navbar.tsx |   2 +-
 pages/top-holders.tsx | 284 ++++++++++++------------------------------
 2 files changed, 83 insertions(+), 203 deletions(-)

diff --git a/components/navbar.tsx b/components/navbar.tsx
index 0eeb08287..f57ca5e60 100644
--- a/components/navbar.tsx
+++ b/components/navbar.tsx
@@ -95,7 +95,7 @@ export default function Navbar() {
                       <Vote className="mr-2 mt-1 flex-shrink-0" size={20} />
                       <span className="text-base ml-2">{t("navbar.proposalsTitle")}</span>
                     </Link>
-                    <Link href={"/witnesses"} className="py-1 flex items-start justify-start" onClick={() => setMenuOpen(false)}>
+                    <Link href={"/witnesses"} className="py-1 flex items-start  border-b-2 justify-start" onClick={() => setMenuOpen(false)}>
                       <UserCheck className="mr-2 mt-1 flex-shrink-0" size={20} />
                       <span className="text-base ml-2">{t("navbar.witnessesTitle")}</span>
                     </Link>
diff --git a/pages/top-holders.tsx b/pages/top-holders.tsx
index b12516fd5..8b44bb430 100644
--- a/pages/top-holders.tsx
+++ b/pages/top-holders.tsx
@@ -32,6 +32,7 @@ export default function TopHoldersPage() {
   const [balanceType, setBalanceType] = useState<BalanceType>("balance");
   const [isFiltersVisible, setIsFiltersVisible] = useState(false);
   const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
+  const [unit, setUnit] = useState<"vests" | "hp">("vests");
 
   const totalCount = config.topHolders.totalCount;
 
@@ -50,8 +51,6 @@ export default function TopHoldersPage() {
     balanceType !== defaultBalanceType ||
     sortOrder !== defaultSortOrder;
 
-
-  // Sort holders based on value and sortOrder
   const filteredHolders = holdersData.sort((a, b) => {
     const valA = parseFloat(a.value);
     const valB = parseFloat(b.value);
@@ -59,17 +58,6 @@ export default function TopHoldersPage() {
     return sortOrder === "asc" ? valA - valB : valB - valA;
   });
 
-  const formatValueForDisplay = (value: string, coinType: CoinType) => {
-    const isVest = coinType === "VESTS";
-    return formatNumber(value, isVest);
-  };
-
-  const prepareExportData = () =>
-    filteredHolders.map((holder) => ({
-      [t("table.rank")]: holder.rank + (page - 1) * 100,
-      [t("table.account")]: holder.account,
-      [balanceType === "savings_balance" ? t("table.savings") : t("table.balance")]: holder.value,
-    }));
   const { dynamicGlobalData } = useDynamicGlobal() as any;
   const [totalVestingShares, setTotalVestingShares] = useState<Hive.Supply>(
     dynamicGlobalData?.headBlockDetails.rawTotalVestingShares
@@ -77,97 +65,79 @@ export default function TopHoldersPage() {
   const [totalVestingFundHive, setTotalVestingFundHive] = useState<Hive.Supply>(
     dynamicGlobalData?.headBlockDetails.rawTotalVestingFundHive
   );
-  
-    const { hiveChain } = useHiveChainContext();
+  const { hiveChain } = useHiveChainContext();
 
- useEffect(() => {
+  useEffect(() => {
     if (dynamicGlobalData?.headBlockDetails) {
-      setTotalVestingShares(
-        dynamicGlobalData.headBlockDetails.rawTotalVestingShares
-      );
-      setTotalVestingFundHive(
-        dynamicGlobalData.headBlockDetails.rawTotalVestingFundHive
-      );
+      setTotalVestingShares(dynamicGlobalData.headBlockDetails.rawTotalVestingShares);
+      setTotalVestingFundHive(dynamicGlobalData.headBlockDetails.rawTotalVestingFundHive);
     }
   }, [dynamicGlobalData]);
 
-     const fetchHivePower = (value: string, isHP: boolean): string => {
-        if (isHP) {
-          if (!hiveChain) return "";
-          return convertVestsToHP(
-            hiveChain,
-            value,
-            totalVestingFundHive,
-            totalVestingShares
-          );
-        }
-        return `${formatNumber(value, true)} VESTS`;
+  const fetchHivePower = (value: string, isHP: boolean): string => {
+    if (isHP) {
+      if (!hiveChain) return "";
+      return convertVestsToHP(
+        hiveChain,
+        value,
+        totalVestingFundHive,
+        totalVestingShares
+      );
+    }
+    return `${formatNumber(value, true)} VESTS`;
+  };
+
+  const formatValueForDisplay = (value: string, coinType: CoinType) => {
+    if (coinType === "VESTS" && unit === "hp") {
+      return fetchHivePower(value, true);
+    }
+    return formatNumber(value, coinType === "VESTS") + (coinType === "VESTS" ? " VESTS" : "");
+  };
+
+  // Fixed: export respects the toggle (HP / VESTS)
+  const prepareExportData = () =>
+    filteredHolders.map((holder) => {
+      let displayValue = holder.value;
+
+      if (coinType === "VESTS") {
+        displayValue = unit === "hp"
+          ? fetchHivePower(holder.value, true)
+          : `${formatNumber(holder.value, true)} VESTS`;
+      }
+
+      return {
+        [t("table.rank")]: holder.rank + (page - 1) * 100,
+        [t("table.account")]: holder.account,
+        [balanceType === "savings_balance" ? t("table.savings") : t("table.balance")]: displayValue,
       };
+    });
 
   const exportFileName = `top_holders_${coinType.toLowerCase()}.csv`;
 
-  const HolderRow = ({
-    rank,
-    account,
-    value,
-  }: {
-    rank: number;
-    account: string;
-    value: string;
-  }) => (
-    <TableRow
-      key={account}
-     //onClick={() => handleAccountClick(account)}
-      className="hover:bg-rowHover cursor-pointer text-sm"
-      data-testid="top-holders-table-row"
-    >
+  const HolderRow = ({ rank, account, value }: { rank: number; account: string; value: string }) => (
+    <TableRow key={account} className="hover:bg-rowHover cursor-pointer text-sm" data-testid="top-holders-table-row">
       <TableCell>{rank}</TableCell>
       <TableCell className="text-link">
         <div className="flex items-center space-x-2">
-                                          <Image
-                                            src={getHiveAvatarUrl(account)}
-                                            alt={`${account}'s profile`}
-                                            width={30}
-                                            height={30}
-                                            className="rounded-full"
-                                          />
-                                          <Link
-                                            className="text-link"
-                                            href={`/@${account}`}
-                                          >
-                                          </Link>
-                                        </div>
-        
-        
-        
-        
-        {account}</TableCell>
+          <Image src={getHiveAvatarUrl(account)} alt={`${account}'s profile`} width={30} height={30} className="rounded-full " />
+          <Link className="text-link" href={`/@${account}`}>{account}</Link>
+        </div>
+      </TableCell>
       <TableCell className="text-right">{formatValueForDisplay(value, coinType)}</TableCell>
     </TableRow>
   );
 
-  // Table header with sortable arrows
   const TableHeaderRow = () => (
     <TableHeader>
       <TableRow className="bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100 text-left">
-        <TableHead
-          className="cursor-pointer"
-          onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
-        >
+        <TableHead className="cursor-pointer" onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}>
           <div className="flex items-center">
             {t("table.rank")}
-            {sortOrder === "asc" ? (
-              <ChevronDown size={15} className="ml-1" />
-            ) : (
-              <ChevronUp size={15} className="ml-1" />
-            )}
+            {sortOrder === "asc" ? <ChevronDown size={15} className="ml-1" /> : <ChevronUp size={15} className="ml-1" />}
           </div>
         </TableHead>
         <TableHead>{t("table.account")}</TableHead>
-        <TableHead
-          className="text-right cursor-pointer"
-          onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}
-        >
+        <TableHead className="text-right cursor-pointer" onClick={() => setSortOrder(sortOrder === "asc" ? "desc" : "asc")}>
           <div className="flex items-center justify-end">
             {balanceType === "savings_balance" ? t("table.savings") : t("table.balance")}
             <ChevronsUpDown size={15} className="ml-1" />
@@ -181,7 +151,7 @@ export default function TopHoldersPage() {
     <div className="page-container">
       {/* Top Section */}
       <Card className="w-full rounded-[0px] rounded-t shadow-md mt-4 py-2">
-        <div className="flex flex-col sm:flex-row items-start justify-between w-full relative gap-3">
+        <div className="flex flex-row  items-start justify-between w-full relative gap-3">
           <div className="flex flex-col md:flex-row justify-between items-start">
             <PageTitle titleKey="pageTitle.topHolders" className="py-4" />
           </div>
@@ -198,22 +168,13 @@ export default function TopHoldersPage() {
       {isFiltersVisible && (
         <Card className="w-full rounded-[0px] rounded-b shadow-sm">
           <div className="flex flex-col sm:flex-row gap-4 items-start p-4">
-            <select
-              value={coinType}
-              onChange={(e) => setCoinType(e.target.value as CoinType)}
-              className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
-            >
+            <select value={coinType} onChange={(e) => setCoinType(e.target.value as CoinType)} className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto">
               <option value="HIVE">HIVE</option>
               <option value="HBD">HBD</option>
               <option value="VESTS">VESTS</option>
             </select>
 
-            <select
-              value={balanceType}
-              onChange={(e) => setBalanceType(e.target.value as BalanceType)}
-              disabled={coinType === "VESTS"}
-              className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto"
-            >
+            <select value={balanceType} onChange={(e) => setBalanceType(e.target.value as BalanceType)} disabled={coinType === "VESTS"} className="border rounded px-2 py-1 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 w-full sm:w-auto">
               <option value="balance">{t("filters.balance")}</option>
               <option value="savings_balance">{t("filters.savings")}</option>
             </select>
@@ -221,130 +182,49 @@ export default function TopHoldersPage() {
         </Card>
       )}
 
-      {/* Export Button */}
-      <div className="mt-4 flex justify-center w-full">
-                  <CustomPagination
-                    currentPage={page}
-                    onPageChange={setPage}
-                    pageSize={100}
-                    totalCount={totalCount}
-                  />
-                </div>
-               
-      <div className="table-toolbar justify-end w-full rounded-t">
-        <DataExport
-          data={prepareExportData()}
-          filename={exportFileName}
-          //className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
-        />
-          <div className="flex items-center space-x-2 rounded-md p-1.5">
-                      <Label
-                        htmlFor="unit-toggle"
-                        className="text-sm"
-                      >
-                        {t("common.vests")}
-                      </Label>
-                      <Switch
-                        id="unit-toggle"
-                        //checked={unit === "hp"}
-                       // onCheckedChange={(checked) =>
-                          //setUnit(checked ? "hp" : "vests")
-                        
-                      />
-                      <Label
-                        htmlFor="unit-toggle"
-                        className="text-sm "
-                      >
-                        {t("common.hp")}
-                      </Label>
-                    </div>
+      {/* Pagination */}
+      <div className="flex justify-center w-full mt-4 ">
+        <CustomPagination currentPage={page} onPageChange={setPage} pageSize={100} totalCount={totalCount} />
       </div>
 
-     {/* } <div className="w-full flex justify-end mt-2">
-        {!isTopHoldersLoading &&
-          !isTopHoldersError &&
-          filteredHolders.length > 0 && (
-            <DataExport
-              data={prepareExportData()}
-              filename={exportFileName}
-              className="h-10 bg-gray-200 dark:bg-gray-700 text-gray-900 dark:text-gray-100 rounded px-4"
-            />
+      {/* Export + Unit Toggle */}
+      <div className="table-toolbar w-full flex">
+        <div className="ml-auto flex items-center space-x-4">
+          {coinType === "VESTS" && (
+            <div className="flex items-center space-x-2 rounded-md p-1.5">
+              <Label htmlFor="unit-toggle" className="text-sm">{t("common.vests")}</Label>
+              <Switch id="unit-toggle" checked={unit === "hp"} onCheckedChange={(checked) => setUnit(checked ? "hp" : "vests")} />
+              <Label htmlFor="unit-toggle" className="text-sm">{t("common.hp")}</Label>
+            </div>
           )}
-      </div> */}
+          <DataExport data={prepareExportData()} filename={exportFileName} />
+        </div>
+      </div>
 
       {/* Table */}
       <Card className="w-full rounded">
-        <div>
-           {isTopHoldersLoading && (
+        {isTopHoldersLoading && (
           <div className="flex justify-center items-center">
             <Loader2 className="animate-spin mt-1 h-16 w-10 ml-10 dark:text-white" />
           </div>
         )}
         {!isTopHoldersLoading && isTopHoldersError && (
           <p className="text-sm text-center">
-             <ErrorMessage message={isTopHoldersError.message} />
+            <ErrorMessage message={isTopHoldersError.message} />
           </p>
         )}
-
-        
-
-        {/*  {isTopHoldersLoading && <p>{t("modal.loading")}</p>}
-          {isTopHoldersError && (
-            <ErrorMessage message={isTopHoldersError.message} />
-          )}
-          {!isTopHoldersLoading &&
-            !isTopHoldersError &&
-            filteredHolders.length === 0 && <NoResult */}
-
-          {!isTopHoldersLoading &&
-            !isTopHoldersError &&
-            filteredHolders.length > 0 && (
-              <>
-                {/* Desktop Table */}
-                <div>
-                  <Table className="w-full">
-                    <TableHeaderRow />
-                    <TableBody data-testid="table-body">
-                      {filteredHolders.map((holder) => {
-                        const displayRank = holder.rank + (page - 1) * 100;
-                        return (
-                          <HolderRow
-                            key={holder.account}
-                            rank={displayRank}
-                            account={holder.account}
-                            value={holder.value}
-                          />
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
-                </div>
-
-                {/* Mobile Table */}
-              {/*  <div className="sm:hidden overflow-x-auto">
-                  <Table className=" w-full ">
-                    <TableHeaderRow />
-                    <TableBody data-testid="table-body">
-                      {filteredHolders.map((holder) => {
-                        const displayRank = holder.rank + (page - 1) * 100;
-                        return (
-                          <HolderRow
-                            key={holder.account}
-                            rank={displayRank}
-                            account={holder.account}
-                            value={holder.value}
-                          />
-                        );
-                      })}
-                    </TableBody>
-                  </Table>
-                </div> */}
-
-                {/* Pagination */}
-                
-              </>
-            )}
-        </div>
+        {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length === 0 && <NoResult />}
+        {!isTopHoldersLoading && !isTopHoldersError && filteredHolders.length > 0 && (
+          <Table className="w-full">
+            <TableHeaderRow />
+            <TableBody data-testid="table-body">
+              {filteredHolders.map((holder) => {
+                const displayRank = holder.rank + (page - 1) * 100;
+                return <HolderRow key={holder.account} rank={displayRank} account={holder.account} value={holder.value} />;
+              })}
+            </TableBody>
+          </Table>
+        )}
       </Card>
     </div>
   );
-- 
GitLab