diff --git a/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx index 7089dacac9..84daa3c76c 100644 --- a/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx +++ b/explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx @@ -2,12 +2,12 @@ import { fetchNodeIdByIdentityKey, fetchNodeInfo } from "@/app/api"; import { ContentLayout } from "@/components/contentLayout/ContentLayout"; import SectionHeading from "@/components/headings/SectionHeading"; import { BasicInfoCard } from "@/components/nymNodePageComponents/BasicInfoCard"; +import { NodeDataCard } from "@/components/nymNodePageComponents/NodeDataCard"; // import { NodeChatCard } from "@/components/nymNodePageComponents/ChatCard"; import NodeDelegationsCard from "@/components/nymNodePageComponents/NodeDelegationsCard"; -import { NodeMetricsCard } from "@/components/nymNodePageComponents/NodeMetricsCard"; +import { NodeParametersCard } from "@/components/nymNodePageComponents/NodeParametersCard"; import { NodeProfileCard } from "@/components/nymNodePageComponents/NodeProfileCard"; -import { NodeRewardsCard } from "@/components/nymNodePageComponents/NodeRewardsCard"; -import { QualityIndicatorsCard } from "@/components/nymNodePageComponents/QualityIndicatorsCard"; +import { NodeRoleCard } from "@/components/nymNodePageComponents/NodeRoleCard"; import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton"; import { Box } from "@mui/material"; import Grid from "@mui/material/Grid2"; @@ -15,7 +15,7 @@ import Grid from "@mui/material/Grid2"; export default async function NymNode({ params, }: { - params: Promise<{ id: string }>; + params: Promise<{ id: string }>; // node_id or identity_key }) { try { let id: string | number; @@ -82,7 +82,7 @@ export default async function NymNode({ md: 4, }} > - + - + - + { > {title} - {stakeLineGraphData && ( + {/* {stakeLineGraphData && ( - )} + )} */} ); diff --git a/explorer-nextjs/src/components/landingPageComponents/StakersNumberCard.tsx b/explorer-nextjs/src/components/landingPageComponents/StakersNumberCard.tsx index 59ef4ba213..c287a39a05 100644 --- a/explorer-nextjs/src/components/landingPageComponents/StakersNumberCard.tsx +++ b/explorer-nextjs/src/components/landingPageComponents/StakersNumberCard.tsx @@ -17,7 +17,7 @@ export const RewardsCard = () => { if (isLoading) { return ( - + ); @@ -25,7 +25,7 @@ export const RewardsCard = () => { if (isError || !observatoryNodes) { return ( - + Failed to load node data. @@ -41,7 +41,7 @@ export const RewardsCard = () => { const allStakers = getActiveStakersNumber(observatoryNodes); return ( - + {allStakers} diff --git a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx index 265146c543..db7403c0a6 100644 --- a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx +++ b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx @@ -46,19 +46,11 @@ export const BasicInfoCard = ({ id }: IBasicInfoCardProps) => { ); } - const timeBonded = format( - new Date(nodeInfo.description.build_information.build_timestamp), - "dd/MM/yyyy", - ); - const selfBond = formatBigNum( Number(nodeInfo.rewarding_details.operator) / 1_000_000, ); const selfBondFormatted = `${selfBond} NYM`; - const totalStake = formatBigNum(Number(nodeInfo.total_stake) / 1_000_000); - const totalStakeFormatted = `${totalStake} NYM`; - return ( @@ -104,20 +96,14 @@ export const BasicInfoCard = ({ id }: IBasicInfoCardProps) => { } /> - + - - + ); diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeDataCard.tsx similarity index 84% rename from explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx rename to explorer-nextjs/src/components/nymNodePageComponents/NodeDataCard.tsx index 4a708e8df7..81898d8cff 100644 --- a/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx +++ b/explorer-nextjs/src/components/nymNodePageComponents/NodeDataCard.tsx @@ -4,6 +4,7 @@ import { useQuery } from "@tanstack/react-query"; import { fetchEpochRewards, fetchNodeInfo } from "../../app/api"; import { Skeleton, Typography } from "@mui/material"; +import { format } from "date-fns"; import ExplorerCard from "../cards/ExplorerCard"; import ExplorerListItem from "../list/ListItem"; @@ -11,7 +12,7 @@ interface INodeMetricsCardProps { id: number; // Node ID } -export const NodeMetricsCard = ({ id }: INodeMetricsCardProps) => { +export const NodeDataCard = ({ id }: INodeMetricsCardProps) => { const { data: epochRewardsData, isLoading: isEpochLoading, @@ -79,6 +80,11 @@ export const NodeMetricsCard = ({ id }: INodeMetricsCardProps) => { epochRewardsData.interval.stake_saturation_point, ); + const softwareUpdateTime = format( + new Date(nodeInfo.description.build_information.build_timestamp), + "dd/MM/yyyy", + ); + return ( { label="Version" value={nodeInfo.description.build_information.build_version} /> - + + ); }; diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeParametersCard.tsx similarity index 81% rename from explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx rename to explorer-nextjs/src/components/nymNodePageComponents/NodeParametersCard.tsx index 42b0bbadac..305896f3b0 100644 --- a/explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx +++ b/explorer-nextjs/src/components/nymNodePageComponents/NodeParametersCard.tsx @@ -1,5 +1,6 @@ "use client"; +import { formatBigNum } from "@/utils/formatBigNumbers"; import { Skeleton, Typography } from "@mui/material"; import { useQuery } from "@tanstack/react-query"; import { fetchEpochRewards, fetchNodeInfo } from "../../app/api"; @@ -7,11 +8,11 @@ import type { RewardingDetails } from "../../app/api/types"; import ExplorerCard from "../cards/ExplorerCard"; import ExplorerListItem from "../list/ListItem"; -interface INodeRewardsCardProps { +interface INodeParametersCardProps { id: number; // Node ID } -export const NodeRewardsCard = ({ id }: INodeRewardsCardProps) => { +export const NodeParametersCard = ({ id }: INodeParametersCardProps) => { // Fetch epoch rewards const { data: epochRewardsData, @@ -34,10 +35,7 @@ export const NodeRewardsCard = ({ id }: INodeRewardsCardProps) => { if (isEpochLoading || isNodeLoading) { return ( - + @@ -48,10 +46,7 @@ export const NodeRewardsCard = ({ id }: INodeRewardsCardProps) => { if (isEpochError || isNodeError || !nodeInfo || !epochRewardsData) { return ( - + Failed to load node data. @@ -59,11 +54,11 @@ export const NodeRewardsCard = ({ id }: INodeRewardsCardProps) => { ); } + const totalStake = formatBigNum(Number(nodeInfo.total_stake) / 1_000_000); + const totalStakeFormatted = `${totalStake} NYM`; + // Extract reward details const rewardDetails: RewardingDetails = nodeInfo.rewarding_details; - // Calculated data - const operatorRewards = Number(rewardDetails.operator) / 1_000_000; - const operatorRewardsFormated = `${operatorRewards.toFixed(2)} NYM`; const profitMarginPercent = Number(rewardDetails.cost_params.profit_margin_percent) * 100; @@ -95,16 +90,19 @@ export const NodeRewardsCard = ({ id }: INodeRewardsCardProps) => { ); return ( - + + {/* + /> */} { +export const NodeRoleCard = ({ id }: INodeRoleCardProps) => { // Fetch node info const { data: nodeInfo, @@ -169,7 +169,7 @@ export const QualityIndicatorsCard = ({ id }: IQualityIndicatorsCardProps) => { if (isLoading) { return ( - + @@ -179,7 +179,7 @@ export const QualityIndicatorsCard = ({ id }: IQualityIndicatorsCardProps) => { if (isError || !nodeInfo) { return ( - + Failed to load node data. @@ -211,7 +211,7 @@ export const QualityIndicatorsCard = ({ id }: IQualityIndicatorsCardProps) => { NodeRoles.length === 1 && nodeRoles[0] === "Mix Node"; return ( - +