From 0956bbee904aac3f1536e294e632489f8d1c7e4d Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Thu, 23 Jan 2025 23:25:21 +0000
Subject: [PATCH 1/3] fix fav filtering

---
 explorer-nextjs/src/app/page.tsx              |   4 +
 .../src/components/nodeTable/NodeTable.tsx    | 131 +++++++++---------
 2 files changed, 71 insertions(+), 64 deletions(-)

diff --git a/explorer-nextjs/src/app/page.tsx b/explorer-nextjs/src/app/page.tsx
index 91847493d5..e621804faa 100644
--- a/explorer-nextjs/src/app/page.tsx
+++ b/explorer-nextjs/src/app/page.tsx
@@ -59,6 +59,8 @@ export default async function Home() {
             <TokenomicsCard />
           </Suspense>
         </Grid>
+      </Grid>
+      <Grid container>
         <Grid size={12}>
           <SectionHeading title="Nym Nodes" />
         </Grid>
@@ -67,6 +69,8 @@ export default async function Home() {
             <NodeTable />
           </Suspense>
         </Grid>
+      </Grid>
+      <Grid container columnSpacing={5} rowSpacing={5}>
         <Grid size={12}>
           <SectionHeading title="Onboarding" />
         </Grid>
diff --git a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
index ee5d9a80f1..a4f48bc1f2 100644
--- a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
+++ b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
@@ -3,7 +3,7 @@
 import { COSMOS_KIT_USE_CHAIN } from "@/config";
 import { useNymClient } from "@/hooks/useNymClient";
 import { useChain } from "@cosmos-kit/react";
-import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
+import { Box, Button, Stack, Switch, Tooltip, Typography } from "@mui/material";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import {
   type MRT_ColumnDef,
@@ -11,7 +11,7 @@ import {
   useMaterialReactTable,
 } from "material-react-table";
 import { useRouter } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import CountryFlag from "../countryFlag/CountryFlag";
 import { Favorite } from "../favorite/Favorite";
 import Loading from "../loading";
@@ -45,54 +45,63 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
     nodeId: number;
     identityKey: string;
   }>();
-
   const [favorites] = useLocalStorage<string[]>("nym-node-favorites", []);
-
   const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN);
+  const [filteredNodes, setFilteredNodes] = useState<MappedNymNode[]>(nodes);
 
-  const handleStakeOnNode = async ({
-    nodeId,
-    amount,
-  }: {
-    nodeId: number;
-    amount: string;
-  }) => {
-    const amountToDelegate = (Number(amount) * 1_000_000).toString();
-    const uNymFunds = [{ amount: amountToDelegate, denom: "unym" }];
+  const handleToggleFavorites = useCallback(
+    (showOnlyFavorites: boolean) => {
+      if (showOnlyFavorites) {
+        setFilteredNodes(
+          nodes.filter((node) => favorites.includes(node.owner)),
+        );
+      } else {
+        setFilteredNodes(nodes);
+      }
+      setInfoModalProps({ open: false });
+    },
+    [favorites, nodes],
+  );
 
-    setIsLoading(true);
-    setSelectedNodeForStaking(undefined);
-    try {
-      const tx = await nymClient?.delegate(
-        { nodeId },
-        fee,
-        "Delegation from Nym Explorer V2",
-        uNymFunds,
-      );
-      console.log({ tx });
+  const handleStakeOnNode = useCallback(
+    async ({ nodeId, amount }: { nodeId: number; amount: string }) => {
+      const amountToDelegate = (Number(amount) * 1_000_000).toString();
+      const uNymFunds = [{ amount: amountToDelegate, denom: "unym" }];
+
+      setIsLoading(true);
       setSelectedNodeForStaking(undefined);
-      setInfoModalProps({
-        open: true,
-        title: "Success",
-        message: "This operation can take up to one hour to process",
-        tx: tx?.transactionHash,
+      try {
+        const tx = await nymClient?.delegate(
+          { nodeId },
+          fee,
+          "Delegation from Nym Explorer V2",
+          uNymFunds,
+        );
+        setSelectedNodeForStaking(undefined);
+        setInfoModalProps({
+          open: true,
+          title: "Success",
+          message: "This operation can take up to one hour to process",
+          tx: tx?.transactionHash,
 
-        onClose: () => setInfoModalProps({ open: false }),
-      });
-    } catch (e) {
-      const errorMessage =
-        e instanceof Error ? e.message : "An error occurred while staking";
-      setInfoModalProps({
-        open: true,
-        title: "Error",
-        message: errorMessage,
-        onClose: () => {
-          setInfoModalProps({ open: false });
-        },
-      });
-    }
-    setIsLoading(false);
-  };
+          onClose: () => setInfoModalProps({ open: false }),
+        });
+      } catch (e) {
+        const errorMessage =
+          e instanceof Error ? e.message : "An error occurred while staking";
+        setInfoModalProps({
+          open: true,
+          title: "Error",
+          message: errorMessage,
+          onClose: () => {
+            setInfoModalProps({ open: false });
+          },
+        });
+      }
+      setIsLoading(false);
+    },
+    [nymClient],
+  );
 
   const handleOnSelectStake = useCallback(
     (node: MappedNymNode) => {
@@ -152,7 +161,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         id: "qos",
         header: "Quality of Service",
         align: "center",
-        accessorKey: "qos",
+        accessorKey: "qualityOfService",
         Header: <ColumnHeading>Quality of Service</ColumnHeading>,
         Cell: ({ row }) => (
           <Typography variant="body4">
@@ -163,7 +172,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       {
         id: "location",
         header: "Location",
-        accessorKey: "location.country_name",
+        accessorKey: "countryName",
         Header: <ColumnHeading>Location</ColumnHeading>,
         Cell: ({ row }) =>
           row.original.countryCode && row.original.countryName ? (
@@ -207,6 +216,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         accessorKey: "Action",
         Header: <ColumnHeading>Action</ColumnHeading>,
         hidden: !isWalletConnected,
+        enableColumnFilter: false,
         Cell: ({ row }) => (
           <Button
             size="small"
@@ -223,18 +233,24 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       },
       {
         id: "Favorite",
+        enableColumnFilter: false,
         header: "Favorite",
         accessorKey: "Favorite",
-        Header: <ColumnHeading>Favorite</ColumnHeading>,
-        sortingFn: "Favorite",
+        Header: (
+          <Stack direction="row" alignItems="center">
+            <ColumnHeading>Favorite</ColumnHeading>
+            <Switch onChange={(_, checked) => handleToggleFavorites(checked)} />
+          </Stack>
+        ),
+        enableSorting: false,
         Cell: ({ row }) => <Favorite address={row.original.owner} />,
       },
     ],
-    [isWalletConnected, handleOnSelectStake],
+    [isWalletConnected, handleOnSelectStake, handleToggleFavorites],
   );
   const table = useMaterialReactTable({
     columns,
-    data: nodes,
+    data: filteredNodes,
     enableRowSelection: false, //enable some features
     enableColumnOrdering: false, //enable a feature for all columns
     enableColumnActions: false,
@@ -252,23 +268,9 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
       color: "primary",
       shape: "circular",
     },
-    sortingFns: {
-      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;
-      },
-    },
     initialState: {
       columnPinning: { right: ["Action", "Favorite"] },
     },
-
     muiColumnActionsButtonProps: {
       sx: {
         color: "red",
@@ -314,6 +316,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         onStake={handleStakeOnNode}
         onClose={() => setSelectedNodeForStaking(undefined)}
       />
+
       <InfoModal {...infoModalProps} />
       <MaterialReactTable table={table} />
     </>

From f6a547e5c2999e8aa8df7f7866364533e998a43b Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Sun, 26 Jan 2025 22:42:46 +0000
Subject: [PATCH 2/3] fix sort icon color

---
 explorer-nextjs/src/theme/theme.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/explorer-nextjs/src/theme/theme.tsx b/explorer-nextjs/src/theme/theme.tsx
index c5814095f3..cd881d3bda 100644
--- a/explorer-nextjs/src/theme/theme.tsx
+++ b/explorer-nextjs/src/theme/theme.tsx
@@ -167,6 +167,15 @@ const getTheme = (mode: "light" | "dark"): ThemeOptions => {
           },
         },
       },
+      MuiTableSortLabel: {
+        styleOverrides: {
+          root: {
+            "&.Mui-active .MuiTableSortLabel-icon": {
+              color: `${designTokens.palette.text.primary} !important`,
+            },
+          },
+        },
+      },
       MuiOutlinedInput: {
         styleOverrides: {},
       },

From 884d9440f283fa10a11925d0162ff39820d285ff Mon Sep 17 00:00:00 2001
From: fmtabbara <fmtabbara@hotmail.co.uk>
Date: Sun, 26 Jan 2025 22:43:59 +0000
Subject: [PATCH 3/3] use sort by favorite

---
 .../src/components/nodeTable/NodeTable.tsx    | 44 ++++++++-----------
 1 file changed, 19 insertions(+), 25 deletions(-)

diff --git a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
index a4f48bc1f2..0661295b3f 100644
--- a/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
+++ b/explorer-nextjs/src/components/nodeTable/NodeTable.tsx
@@ -3,7 +3,7 @@
 import { COSMOS_KIT_USE_CHAIN } from "@/config";
 import { useNymClient } from "@/hooks/useNymClient";
 import { useChain } from "@cosmos-kit/react";
-import { Box, Button, Stack, Switch, Tooltip, Typography } from "@mui/material";
+import { Box, Button, Stack, Tooltip, Typography } from "@mui/material";
 import { useLocalStorage } from "@uidotdev/usehooks";
 import {
   type MRT_ColumnDef,
@@ -11,7 +11,7 @@ import {
   useMaterialReactTable,
 } from "material-react-table";
 import { useRouter } from "next/navigation";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import CountryFlag from "../countryFlag/CountryFlag";
 import { Favorite } from "../favorite/Favorite";
 import Loading from "../loading";
@@ -47,21 +47,6 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
   }>();
   const [favorites] = useLocalStorage<string[]>("nym-node-favorites", []);
   const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN);
-  const [filteredNodes, setFilteredNodes] = useState<MappedNymNode[]>(nodes);
-
-  const handleToggleFavorites = useCallback(
-    (showOnlyFavorites: boolean) => {
-      if (showOnlyFavorites) {
-        setFilteredNodes(
-          nodes.filter((node) => favorites.includes(node.owner)),
-        );
-      } else {
-        setFilteredNodes(nodes);
-      }
-      setInfoModalProps({ open: false });
-    },
-    [favorites, nodes],
-  );
 
   const handleStakeOnNode = useCallback(
     async ({ nodeId, amount }: { nodeId: number; amount: string }) => {
@@ -149,7 +134,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         id: "node",
         header: "",
         Header: <ColumnHeading>Node</ColumnHeading>,
-        accessorKey: "bondInformation.node.identity_key",
+        accessorKey: "identity_key",
         Cell: ({ row }) => (
           <Stack spacing={1}>
             <Typography variant="body4">{row.original.nodeId}</Typography>
@@ -239,20 +224,30 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         Header: (
           <Stack direction="row" alignItems="center">
             <ColumnHeading>Favorite</ColumnHeading>
-            <Switch onChange={(_, checked) => handleToggleFavorites(checked)} />
           </Stack>
         ),
-        enableSorting: false,
+        sortingFn: (a, b) => {
+          const aIsFavorite = favorites.includes(a.original.owner);
+          const bIsFavorite = favorites.includes(b.original.owner);
+
+          if (aIsFavorite && !bIsFavorite) {
+            return -1;
+          }
+          if (!aIsFavorite && bIsFavorite) {
+            return 1;
+          }
+          return 0;
+        },
         Cell: ({ row }) => <Favorite address={row.original.owner} />,
       },
     ],
-    [isWalletConnected, handleOnSelectStake, handleToggleFavorites],
+    [isWalletConnected, handleOnSelectStake, favorites],
   );
   const table = useMaterialReactTable({
     columns,
-    data: filteredNodes,
-    enableRowSelection: false, //enable some features
-    enableColumnOrdering: false, //enable a feature for all columns
+    data: nodes,
+    enableRowSelection: false,
+    enableColumnOrdering: false,
     enableColumnActions: false,
     enableFullScreenToggle: false,
     enableHiding: false,
@@ -285,7 +280,6 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
         bgcolor: "background.paper",
       },
     },
-
     muiTableBodyCellProps: {
       sx: {
         border: "none",