diff --git a/explorer-nextjs/src/components/staking/StakeTable.tsx b/explorer-nextjs/src/components/staking/StakeTable.tsx
index 48f67754d1..790d425fed 100644
--- a/explorer-nextjs/src/components/staking/StakeTable.tsx
+++ b/explorer-nextjs/src/components/staking/StakeTable.tsx
@@ -96,48 +96,45 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
fetchAndMapDelegations();
}, [address, nodes, nymClient]);
- const handleStakeOnNode = async ({
- nodeId,
- amount,
- }: {
- nodeId: number;
- amount: string;
- }) => {
- const amountToDelegate = (Number(amount) * 1_000_000).toString();
- const uNymFunds = [{ amount: amountToDelegate, denom: "unym" }];
+ 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);
- try {
- const tx = await nymClient?.delegate(
- { nodeId },
- fee,
- "Delegation from Nym Explorer V2",
- uNymFunds,
- );
+ 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(
(nodeId: number, nodeIdentityKey: string | undefined) => {
@@ -232,43 +229,47 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
id: "name",
header: "",
Header: Name,
- accessorKey: "name",
- Cell: ({ row }) => (
-
-
- {row.original.node?.name || "-"}
-
-
- ),
+ accessorKey: "node.name",
+ Cell: ({ row }) =>
+ row.original.node?.name ? (
+
+ {row.original.node.name}
+
+ ) : (
+ "-"
+ ),
},
{
id: "node",
header: "",
Header: Node,
- accessorKey: "bondInformation.node.identity_key",
- Cell: ({ row }) => (
-
-
- {row.original.delegation?.node_id || "-"}
-
-
- {row.original.node?.identity_key || "-"}
-
-
- ),
+ accessorKey: "delegation.node_id",
+ Cell: ({ row }) =>
+ row.original.delegation?.node_id ? (
+
+
+ {row.original.delegation.node_id || "-"}
+
+
+ {row.original.node?.identity_key || "-"}
+
+
+ ) : (
+ "-"
+ ),
},
{
id: "location",
header: "Location",
- accessorKey: "location.country_name",
+ accessorKey: "node.countryCode",
Header: Location,
Cell: ({ row }) =>
- row.original.node?.countryCode ? (
+ row.original.node?.countryCode && row.original.node?.countryName ? (
@@ -291,20 +292,42 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
{
id: "stakeSaturation",
header: "Stake saturation",
- accessorKey: "stakeSaturation",
+ accessorKey: "node.stakeSaturation",
Header: Stake saturation,
- Cell: ({ row }) => (
-
- {row.original.node?.stakeSaturation || 0}%
-
- ),
+ Cell: ({ row }) =>
+ row.original.node?.stakeSaturation ? (
+
+ {row.original.node.stakeSaturation}%
+
+ ) : (
+ {0}%
+ ),
},
{
id: "Favorite",
header: "Favorite",
accessorKey: "Favorite",
- Header: Favorite,
- sortingFn: "Favorite",
+ enableColumnFilter: false,
+ Header: (
+
+ Favorite
+
+ ),
+ sortingFn: (rowA, rowB) => {
+ const isFavoriteA = favorites.includes(
+ rowA.original.node?.owner || "-",
+ );
+ const isFavoriteB = favorites.includes(
+ rowB.original.node?.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;
+ },
Cell: ({ row }) => (
),
@@ -312,6 +335,7 @@ const StakeTable = ({ nodes }: { nodes: MappedNymNodes }) => {
{
id: "action",
header: "Action",
+ enableColumnFilter: false,
Header: Action,
Cell: ({ row }) => (
{
),
},
],
- [handleActionSelect],
+ [handleActionSelect, favorites],
);
const table = useMaterialReactTable({
@@ -364,19 +388,7 @@ const StakeTable = ({ 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"] },
},