From aba10e6a597b5920b28afee0e0113db23dad1266 Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Fri, 17 Jan 2025 19:39:01 +0200
Subject: [PATCH] Add Favorites to StakeTable

---
 .../src/components/staking/StakeTable.tsx     | 24 +++++++++++++++++--
 .../staking/StakeTableWithAction.tsx          |  3 ---
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/explorer-nextjs/src/components/staking/StakeTable.tsx b/explorer-nextjs/src/components/staking/StakeTable.tsx
index c9469a621b..687ba1107a 100644
--- a/explorer-nextjs/src/components/staking/StakeTable.tsx
+++ b/explorer-nextjs/src/components/staking/StakeTable.tsx
@@ -4,6 +4,7 @@ import { useNymClient } from "@/hooks/useNymClient";
 import { formatBigNum } from "@/utils/formatBigNumbers";
 import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
 import type { Delegation } from "@nymproject/contract-clients/Mixnet.types";
+import { useLocalStorage } from "@uidotdev/usehooks";
 import {
   type MRT_ColumnDef,
   MaterialReactTable,
@@ -12,6 +13,7 @@ import {
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useMemo, useState } from "react";
 import CountryFlag from "../countryFlag/CountryFlag";
+import { Favorite } from "../favorite/Favorite";
 import Loading from "../loading";
 import InfoModal, { type InfoModalProps } from "../modal/InfoModal";
 import { Link } from "../muiLink";
@@ -46,6 +48,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
   const [infoModalProps, setInfoModalProps] = useState<InfoModalProps>({
     open: false,
   });
+  const [favorites] = useLocalStorage<string[]>("nym-node-favorites", []);
 
   const router = useRouter();
 
@@ -222,6 +225,16 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
           </Typography>
         ),
       },
+      {
+        id: "Favorite",
+        header: "Favorite",
+        accessorKey: "Favorite",
+        Header: <ColumnHeading>Favorite</ColumnHeading>,
+        sortingFn: "Favorite",
+        Cell: ({ row }) => (
+          <Favorite address={row.original.node?.owner || ""} />
+        ),
+      },
 
       {
         id: "action",
@@ -274,8 +287,15 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       shape: "circular",
     },
     sortingFns: {
-      Favorite: () => {
-        // TODO implement sorting by favorite
+      Favorite: (rowA, rowB) => {
+        const isFavoriteA = favorites.includes(rowA.original.owner);
+        const isFavoriteB = favorites.includes(rowB.original.owner);
+
+        // Sort favorites first
+        if (isFavoriteA && !isFavoriteB) return -1;
+        if (!isFavoriteA && isFavoriteB) return 1;
+
+        // If both are favorites or neither, keep the original order
         return 0;
       },
     },
diff --git a/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx b/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx
index 3335b4db71..6c642fdba9 100644
--- a/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx
+++ b/explorer-nextjs/src/components/staking/StakeTableWithAction.tsx
@@ -18,13 +18,10 @@ function getNodeSaturationPoint(
   stakeSaturationPoint: string,
 ): number {
   const saturation = Number.parseFloat(stakeSaturationPoint);
-
   if (Number.isNaN(saturation) || saturation <= 0) {
     throw new Error("Invalid stake saturation point provided");
   }
-
   const ratio = (totalStake / saturation) * 100;
-
   return Number(ratio.toFixed());
 }