From 1da0b34c453457f4a0b7122ed50c662ac7755c41 Mon Sep 17 00:00:00 2001 From: fmtabbara Date: Thu, 19 Dec 2024 18:36:54 +0000 Subject: [PATCH] card refactors --- .../NetworkStakeCard.tsx | 2 +- .../landingPageComponents/NoiseCard.tsx | 2 +- .../landingPageComponents/RewardsCard.tsx | 2 +- .../nymNodePageComponents/BasicInfoCard.tsx | 3 +- .../QualityIndicatorsCard.tsx | 57 ++++++++++--------- .../src/{app => }/utils/formatBigNumbers.ts | 0 6 files changed, 36 insertions(+), 30 deletions(-) rename explorer-nextjs/src/{app => }/utils/formatBigNumbers.ts (100%) diff --git a/explorer-nextjs/src/components/landingPageComponents/NetworkStakeCard.tsx b/explorer-nextjs/src/components/landingPageComponents/NetworkStakeCard.tsx index 276f1a2476..aac8258e70 100644 --- a/explorer-nextjs/src/components/landingPageComponents/NetworkStakeCard.tsx +++ b/explorer-nextjs/src/components/landingPageComponents/NetworkStakeCard.tsx @@ -3,7 +3,7 @@ import { CURRENT_EPOCH_REWARDS, HARBOURMASTER_API_MIXNODES_STATS, } from "@/app/api/urls"; -import { formatBigNum } from "@/app/utils/formatBigNumbers"; +import { formatBigNum } from "@/utils/formatBigNumbers"; import { Box, Stack, Typography } from "@mui/material"; import ExplorerCard from "../cards/ExplorerCard"; import { LineChart } from "../lineChart"; diff --git a/explorer-nextjs/src/components/landingPageComponents/NoiseCard.tsx b/explorer-nextjs/src/components/landingPageComponents/NoiseCard.tsx index 8f8af86ef6..88b880b842 100644 --- a/explorer-nextjs/src/components/landingPageComponents/NoiseCard.tsx +++ b/explorer-nextjs/src/components/landingPageComponents/NoiseCard.tsx @@ -1,6 +1,6 @@ import type { IPacketsAndStakingData } from "@/app/api"; import { HARBOURMASTER_API_MIXNODES_STATS } from "@/app/api/urls"; -import { formatBigNum } from "@/app/utils/formatBigNumbers"; +import { formatBigNum } from "@/utils/formatBigNumbers"; import { Box, Stack, Typography } from "@mui/material"; import ExplorerCard from "../cards/ExplorerCard"; import { LineChart } from "../lineChart"; diff --git a/explorer-nextjs/src/components/landingPageComponents/RewardsCard.tsx b/explorer-nextjs/src/components/landingPageComponents/RewardsCard.tsx index a8c9f9b76b..03d7942ecc 100644 --- a/explorer-nextjs/src/components/landingPageComponents/RewardsCard.tsx +++ b/explorer-nextjs/src/components/landingPageComponents/RewardsCard.tsx @@ -1,4 +1,4 @@ -import { formatBigNum } from "@/app/utils/formatBigNumbers"; +import { formatBigNum } from "@/utils/formatBigNumbers"; import { Stack, Typography } from "@mui/material"; import ExplorerCard from "../cards/ExplorerCard"; diff --git a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx index e9eeaa9029..9057a717aa 100644 --- a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx +++ b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx @@ -3,6 +3,7 @@ import type { NodeDescription, RewardingDetails, } from "@/app/api/types"; +import { formatBigNum } from "@/utils/formatBigNumbers"; import { Stack, Typography } from "@mui/material"; import { format } from "date-fns"; import ExplorerCard from "../cards/ExplorerCard"; @@ -23,7 +24,7 @@ export const BasicInfoCard = (props: IBasicInfoCardProps) => { "dd/MM/yyyy", ); - const selfBond = Number(rewardDetails.operator) / 1_000_000; + const selfBond = formatBigNum(Number(rewardDetails.operator) / 1_000_000); const selfBondFormated = `${selfBond} NYM`; return ( diff --git a/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx index 3b5cdacdd2..b432935af8 100644 --- a/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx +++ b/explorer-nextjs/src/components/nymNodePageComponents/QualityIndicatorsCard.tsx @@ -1,4 +1,5 @@ import type { NodeDescription } from "@/app/api/types"; +import { Chip, Stack } from "@mui/material"; import ExplorerCard from "../cards/ExplorerCard"; import ExplorerListItem from "../list/ListItem"; import StarRating from "../starRating/StarRating"; @@ -7,30 +8,22 @@ interface IQualityIndicatorsCardProps { nodeDescription: NodeDescription; } -interface IDeclaredRoles { - declared_role: { - entry: boolean; - exit_ipr: boolean; - exit_nr: boolean; - mixnode: boolean; - }; -} - -function getNodeRoles(rolesObject: IDeclaredRoles): string { - const roleMapping: { [key: string]: string } = { - entry: "Entry Node", - exit_ipr: "Exit IPR Node", - exit_nr: "Exit NR Node", - mixnode: "Mix Node", - }; +type DelcaredRoleKey = keyof NodeDescription["declared_role"]; +type RoleString = "Entry Node" | "Exit IPR Node" | "Exit NR Node" | "Mix Node"; - const { declared_role } = rolesObject; +const roleMapping: Record = { + entry: "Entry Node", + exit_ipr: "Exit IPR Node", + exit_nr: "Exit NR Node", + mixnode: "Mix Node", +}; - const activeRoles = Object.entries(declared_role) - // eslint-disable-next-line @typescript-eslint/no-unused-vars - .filter(([_, value]) => value) // Filter keys where value is true - .map(([key]) => roleMapping[key]) // Map keys to their corresponding strings - .join(", "); // Join with commas +function getNodeRoles( + declaredRoles: NodeDescription["declared_role"], +): RoleString[] { + const activeRoles = Object.entries(declaredRoles) + .filter(([, isActive]) => isActive) + .map(([role]) => roleMapping[role as DelcaredRoleKey]); return activeRoles; } @@ -38,13 +31,25 @@ function getNodeRoles(rolesObject: IDeclaredRoles): string { export const QualityIndicatorsCard = (props: IQualityIndicatorsCardProps) => { const { nodeDescription } = props; - const nodeRoles = getNodeRoles({ - declared_role: nodeDescription.declared_role, - }); + const nodeRoles = getNodeRoles(nodeDescription.declared_role); + const NodeRoles = nodeRoles.map((role) => ( + + + + )); return ( - + + {NodeRoles} + + } + />