fix fav filtering

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>

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} />
     </>