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() {
+
+
@@ -67,6 +69,8 @@ export default async function Home() {
+
+
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("nym-node-favorites", []);
-
const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN);
+ const [filteredNodes, setFilteredNodes] = useState(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: Quality of Service,
Cell: ({ row }) => (
@@ -163,7 +172,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
{
id: "location",
header: "Location",
- accessorKey: "location.country_name",
+ accessorKey: "countryName",
Header: Location,
Cell: ({ row }) =>
row.original.countryCode && row.original.countryName ? (
@@ -207,6 +216,7 @@ const NodeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
accessorKey: "Action",
Header: Action,
hidden: !isWalletConnected,
+ enableColumnFilter: false,
Cell: ({ row }) => (