nym-node page api WIP

explorer-nextjs/src/app/api/index.tsx

@@ -107,7 +107,6 @@ export interface INodeDescription {
   contract_node_type: string;
   description: {
     authenticator: object;
-
     address: string;
     auxiliary_details: object;
     accepted_operator_terms_and_conditions: boolean;

explorer-nextjs/src/app/nym-node/[id]/page.tsx

@@ -5,6 +5,7 @@ import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
 import ExplorerListItem from "@/components/list/ListItem";
 import { BasicInfoCard } from "@/components/nymNodePageComponents/BasicInfoCard";
+import { NodeMetricsCard } from "@/components/nymNodePageComponents/NodeMetricsCard";
 import { StarRating } from "@/components/starRating";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box, Grid2, Stack } from "@mui/material";
@@ -148,23 +149,7 @@ export default async function NymNode({
           </ExplorerCard>
         </Grid2>
         <Grid2 size={6}>
-          <ExplorerCard label="Nym node metrics" sx={{ height: "100%" }}>
-            <ExplorerListItem row divider label="Node ID." value="209" />
-            <ExplorerListItem row divider label="Host" value="45.10.145.123" />
-            <ExplorerListItem
-              row
-              divider
-              label="Staker rew."
-              value="10,000 NYM"
-            />
-            <ExplorerListItem row divider label="Version" value="1.1.1.1" />
-            <ExplorerListItem
-              row
-              divider
-              label="Active set Prob."
-              value="High"
-            />
-          </ExplorerCard>
+          <NodeMetricsCard nodeDescription={nodeDescriptionInfo[0]} />
         </Grid2>
       </Grid2>
     </ContentLayout>

explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx

@@ -1,5 +1,6 @@
 import type { IBondInfo, INodeDescription } from "@/app/api";
 import { Stack } from "@mui/material";
+import { format } from "date-fns";
 import ExplorerCard from "../cards/ExplorerCard";
 import ExplorerListItem from "../list/ListItem";
 
@@ -11,6 +12,11 @@ interface IBasicInfoCardProps {
 export const BasicInfoCard = (props: IBasicInfoCardProps) => {
   const { bondInfo, nodeDescription } = props;
 
+  const timeBonded = format(
+    new Date(nodeDescription.description.build_information.build_timestamp),
+    "dd/MM/yyyy",
+  );
+
   return (
     <ExplorerCard label="Basic info">
       <Stack gap={1}>
@@ -24,12 +30,7 @@ export const BasicInfoCard = (props: IBasicInfoCardProps) => {
           label="Identity Key"
           value={bondInfo.bond_information.node.identity_key}
         />
-        <ExplorerListItem
-          row
-          divider
-          label="Node bonded"
-          value={nodeDescription.description.build_information.build_timestamp}
-        />
+        <ExplorerListItem row divider label="Node bonded" value={timeBonded} />
         <ExplorerListItem row divider label="Nr. of stakes" value="56" />
         <ExplorerListItem row label="Self bonded" value="10,000 NYM" />
       </Stack>

explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx

@@ -0,0 +1,30 @@
+import type { IBondInfo, INodeDescription } from "@/app/api";
+import ExplorerCard from "../cards/ExplorerCard";
+import ExplorerListItem from "../list/ListItem";
+
+interface INodeMetricsCardProps {
+  nodeDescription: INodeDescription;
+}
+
+export const NodeMetricsCard = (props: INodeMetricsCardProps) => {
+  const { nodeDescription } = props;
+  return (
+    <ExplorerCard label="Nym node metrics" sx={{ height: "100%" }}>
+      <ExplorerListItem
+        row
+        divider
+        label="Node ID."
+        value={nodeDescription.node_id.toString()}
+      />
+      <ExplorerListItem
+        row
+        divider
+        label="Host"
+        value={nodeDescription.description.host_information.ip_address.toString()}
+      />
+      <ExplorerListItem row divider label="Staker rew." value="10,000 NYM" />
+      <ExplorerListItem row divider label="Version" value="1.1.1.1" />
+      <ExplorerListItem row divider label="Active set Prob." value="High" />
+    </ExplorerCard>
+  );
+};