card refactors

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 (
     <ExplorerCard label="Basic info">

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;
-  };
-}
+type DelcaredRoleKey = keyof NodeDescription["declared_role"];
+type RoleString = "Entry Node" | "Exit IPR Node" | "Exit NR Node" | "Mix Node";
 
-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",
-  };
+const roleMapping: Record<DelcaredRoleKey, RoleString> = {
+  entry: "Entry Node",
+  exit_ipr: "Exit IPR Node",
+  exit_nr: "Exit NR Node",
+  mixnode: "Mix Node",
+};
 
-  const { declared_role } = rolesObject;
-
-  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) => (
+    <Stack key={role} direction="row" gap={1}>
+      <Chip key={role} label={role} size="small" />
+    </Stack>
+  ));
 
   return (
     <ExplorerCard label="Quality indicatiors" sx={{ height: "100%" }}>
-      <ExplorerListItem row divider label="Role" value={nodeRoles} />
+      <ExplorerListItem
+        row
+        divider
+        label="Role"
+        value={
+          <Stack direction="row" gap={1}>
+            {NodeRoles}
+          </Stack>
+        }
+      />
       <ExplorerListItem
         row
         divider