From 89848ec91b67ab285d5dc453ed40694e32b06c7a Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Fri, 13 Dec 2024 23:37:38 +0700
Subject: [PATCH] nym-node page api WIP

---
 explorer-nextjs/src/app/api/index.tsx         |  1 -
 .../src/app/nym-node/[id]/page.tsx            | 19 ++----------
 .../nymNodePageComponents/BasicInfoCard.tsx   | 13 ++++----
 .../nymNodePageComponents/NodeMetricsCard.tsx | 30 +++++++++++++++++++
 4 files changed, 39 insertions(+), 24 deletions(-)
 create mode 100644 explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx

diff --git a/explorer-nextjs/src/app/api/index.tsx b/explorer-nextjs/src/app/api/index.tsx
index 99459e963a..4b28ee4b46 100644
--- a/explorer-nextjs/src/app/api/index.tsx
+++ b/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;
diff --git a/explorer-nextjs/src/app/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/nym-node/[id]/page.tsx
index cc88d57085..02f32e260a 100644
--- a/explorer-nextjs/src/app/nym-node/[id]/page.tsx
+++ b/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>
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
index f02bc1e09d..d60a1be1d9 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
+++ b/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>
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/NodeMetricsCard.tsx
new file mode 100644
index 0000000000..2567888911
--- /dev/null
+++ b/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>
+  );
+};