GRIN/nym
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor card names

Browse Source
This commit is contained in:
Yana
2025-02-25 15:47:25 +02:00
parent 9c949988e2
commit 3efb7531ac
7 changed files with 53 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files
explorer-nextjs/src/app/(pages)/nym-node/[id]/page.tsx
+7 -7
View File
@@ -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,
}}
>
<QualityIndicatorsCard id={id} />
<NodeRoleCard id={id} />
</Grid>
<Grid
size={{
@@ -90,7 +90,7 @@ export default async function NymNode({
md: 6,
}}
>
<NodeRewardsCard id={id} />
<NodeParametersCard id={id} />
</Grid>
<Grid
size={{
@@ -98,7 +98,7 @@ export default async function NymNode({
md: 6,
}}
>
<NodeMetricsCard id={id} />
<NodeDataCard id={id} />
</Grid>
<Grid
size={{
explorer-nextjs/src/components/landingPageComponents/NetworkStakeCard.tsx
+2 -2
View File
@@ -71,11 +71,11 @@ export const NetworkStakeCard = () => {
>
{title}
</Typography>
{stakeLineGraphData && (
{/* {stakeLineGraphData && (
<Box height={225}>
<LineChart {...stakeLineGraphData} />
</Box>
)}
)} */}
</Stack>
</ExplorerCard>
);
explorer-nextjs/src/components/landingPageComponents/StakersNumberCard.tsx
+3 -3
View File
@@ -17,7 +17,7 @@ export const RewardsCard = () => {
if (isLoading) {
return (
<ExplorerCard label="NYM Stakers">
<ExplorerCard label="NYM Delegations">
<Skeleton variant="text" height={90} />
</ExplorerCard>
);
@@ -25,7 +25,7 @@ export const RewardsCard = () => {
if (isError || !observatoryNodes) {
return (
<ExplorerCard label="NYM Stakers">
<ExplorerCard label="NYM Delegations">
<Typography variant="h3" sx={{ color: "pine.950" }}>
Failed to load node data.
</Typography>
@@ -41,7 +41,7 @@ export const RewardsCard = () => {
const allStakers = getActiveStakersNumber(observatoryNodes);
return (
<ExplorerCard label="NYM Stakers">
<ExplorerCard label="NYM Delegations">
<Typography variant="h3" sx={{ color: "pine.950" }}>
{allStakers}
</Typography>
explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
+2 -16
View File
@@ -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 (
<ExplorerCard label="Basic info">
<Stack gap={1}>
@@ -104,20 +96,14 @@ export const BasicInfoCard = ({ id }: IBasicInfoCardProps) => {
</Stack>
}
/>
<ExplorerListItem row divider label="Node bonded" value={timeBonded} />
<ExplorerListItem
row
divider
label="Nr. of stakers"
value={nodeInfo.rewarding_details.unique_delegations.toString()}
/>
<ExplorerListItem
row
divider
label="Self bonded"
value={selfBondFormatted}
/>
<ExplorerListItem row label="Total stake" value={totalStakeFormatted} />
<ExplorerListItem row label="Self bonded" value={selfBondFormatted} />
</Stack>
</ExplorerCard>
);
explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx → explorer-nextjs/src/components/nymNodePageComponents/NodeDataCard.tsx
+18 -2
View File
@@ -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 (
<ExplorerCard label="Nym node data" sx={{ height: "100%" }}>
<ExplorerListItem
@@ -99,7 +105,17 @@ export const NodeMetricsCard = ({ id }: INodeMetricsCardProps) => {
label="Version"
value={nodeInfo.description.build_information.build_version}
/>
<ExplorerListItem row label="Active set Prob." value={activeSetProb} />
<ExplorerListItem
row
divider
label="Active set Prob."
value={activeSetProb}
/>
<ExplorerListItem
row
label="Last software update"
value={softwareUpdateTime}
/>
</ExplorerCard>
);
};
explorer-nextjs/src/components/nymNodePageComponents/NodeRewardsCard.tsx → explorer-nextjs/src/components/nymNodePageComponents/NodeParametersCard.tsx
+16 -18
View File
@@ -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 (
<ExplorerCard
label="Node rewards (last epoch/hour)"
sx={{ height: "100%" }}
>
<ExplorerCard label="Node parameters" sx={{ height: "100%" }}>
<Skeleton variant="text" height={50} />
<Skeleton variant="text" height={50} />
<Skeleton variant="text" height={50} />
@@ -48,10 +46,7 @@ export const NodeRewardsCard = ({ id }: INodeRewardsCardProps) => {
if (isEpochError || isNodeError || !nodeInfo || !epochRewardsData) {
return (
<ExplorerCard
label="Node rewards (last epoch/hour)"
sx={{ height: "100%" }}
>
<ExplorerCard label="Node parameters" sx={{ height: "100%" }}>
<Typography variant="h3" sx={{ color: "pine.950" }}>
Failed to load node data.
</Typography>
@@ -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 (
<ExplorerCard
label="Node rewards (last epoch/hour)"
sx={{ height: "100%" }}
>
<ExplorerCard label="Node parameters" sx={{ height: "100%" }}>
<ExplorerListItem
row
divider
label="Total stake"
value={totalStakeFormatted}
/>
{/* <ExplorerListItem
row
divider
label="Operator rew."
value={operatorRewardsFormated}
/>
/> */}
<ExplorerListItem
row
divider
explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx → explorer-nextjs/src/components/nymNodePageComponents/NodeRoleCard.tsx
+5 -5
View File
@@ -8,7 +8,7 @@ import ExplorerCard from "../cards/ExplorerCard";
import ExplorerListItem from "../list/ListItem";
import StarRating from "../starRating/StarRating";
interface IQualityIndicatorsCardProps {
interface INodeRoleCardProps {
id: number; // Node ID
}
@@ -139,7 +139,7 @@ function calculateWireguardPerformance(probeResult: LastProbeResult): number {
}
}
export const QualityIndicatorsCard = ({ id }: IQualityIndicatorsCardProps) => {
export const NodeRoleCard = ({ id }: INodeRoleCardProps) => {
// Fetch node info
const {
data: nodeInfo,
@@ -169,7 +169,7 @@ export const QualityIndicatorsCard = ({ id }: IQualityIndicatorsCardProps) => {
if (isLoading) {
return (
<ExplorerCard label="Quality indicators">
<ExplorerCard label="Node role & performance">
<Skeleton variant="text" height={70} />
<Skeleton variant="text" height={70} />
<Skeleton variant="text" height={300} />
@@ -179,7 +179,7 @@ export const QualityIndicatorsCard = ({ id }: IQualityIndicatorsCardProps) => {
if (isError || !nodeInfo) {
return (
<ExplorerCard label="Quality indicators">
<ExplorerCard label="Node role & performance">
<Typography variant="h3" sx={{ color: "pine.950" }}>
Failed to load node data.
</Typography>
@@ -211,7 +211,7 @@ export const QualityIndicatorsCard = ({ id }: IQualityIndicatorsCardProps) => {
NodeRoles.length === 1 && nodeRoles[0] === "Mix Node";
return (
<ExplorerCard label="Quality indicators" sx={{ height: "100%" }}>
<ExplorerCard label="Node role & performance" sx={{ height: "100%" }}>
<ExplorerListItem
row
divider