Add nym-node page api WIP

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

@@ -2,6 +2,8 @@
 import {
   CIRCULATING_NYM_SUPPLY,
   HARBOURMASTER_API_MIXNODES_STATS,
+  HARBOURMASTER_API_SUMMARY,
+  NYM_NODE_DESCRIPTION,
   NYM_NODES_DESCRIBED,
 } from "./urls";
 
@@ -83,6 +85,81 @@ export interface ExplorerCache {
   };
 }
 
+export interface IBondInfo {
+  bond_information: {
+    bonding_height: number;
+    is_unbonding: boolean;
+    node: {
+      custom_http_port: number;
+      host: string;
+      identity_key: string;
+    };
+    node_id: number;
+    original_pledge: {
+      amount: string;
+      denom: string;
+    };
+    owner: string;
+  };
+}
+
+export interface INodeDescription {
+  contract_node_type: string;
+  description: {
+    authenticator: object;
+
+    address: string;
+    auxiliary_details: object;
+    accepted_operator_terms_and_conditions: boolean;
+    announce_ports: {
+      verloc_port: number | null;
+      mix_port: number | null;
+    };
+    location: string;
+    build_information: {
+      binary_name: string;
+      build_timestamp: string;
+      build_version: string;
+      cargo_profile: string;
+      cargo_triple: string;
+      commit_branch: string;
+      commit_sha: string;
+      commit_timestamp: string;
+      rustc_channel: string;
+      rustc_version: string;
+    };
+    declared_role: {
+      entry: boolean;
+      exit_ipr: boolean;
+      exit_nr: boolean;
+      mixnode: boolean;
+    };
+    host_information: {
+      hostname: string | null;
+      ip_address: string[];
+      keys: {
+        ed25519: string;
+        x25519: string;
+        x25519_noise: string | null;
+      };
+    };
+    ip_packet_router: {
+      address: string;
+    };
+    last_polled: string;
+    mixnet_websockets: {
+      ws_port: number;
+      wss_port: number | null;
+    };
+    network_requester: {
+      address: string;
+      uses_exit_policy: boolean;
+    };
+    wireguard: null | object;
+  };
+  node_id: number;
+}
+
 const getExplorerData = async () => {
   // FETCH NYMNODES
   const fetchNymNodes = await fetch(NYM_NODES_DESCRIBED, {
@@ -114,21 +191,45 @@ const getExplorerData = async () => {
     next: { revalidate: Number(process.env.NEXT_PUBLIC_REVALIDATE_CACHE) },
   });
 
-  const [circulatingNymSupplyRes, nymNodesRes, packetsAndStakingRes] =
-    await Promise.all([
-      fetchCirculatingNymSupply,
-      fetchNymNodes,
-      fetchPacketsAndStaking,
-    ]);
+  const fetchNymNodeDescription = await fetch(NYM_NODE_DESCRIPTION, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    // refresh event list cache at given interval
+    next: { revalidate: Number(process.env.NEXT_PUBLIC_REVALIDATE_CACHE) },
+  });
 
-  const [circulatingNymSupplyData, nymNodesData, packetsAndStakingData] =
-    await Promise.all([
-      circulatingNymSupplyRes.json(),
-      nymNodesRes.json(),
-      packetsAndStakingRes.json(),
-    ]);
+  const [
+    circulatingNymSupplyRes,
+    nymNodesRes,
+    packetsAndStakingRes,
+    nymNodeDescriptionRes,
+  ] = await Promise.all([
+    fetchCirculatingNymSupply,
+    fetchNymNodes,
+    fetchPacketsAndStaking,
+    fetchNymNodeDescription,
+  ]);
 
-  return [circulatingNymSupplyData, nymNodesData, packetsAndStakingData];
+  const [
+    circulatingNymSupplyData,
+    nymNodesData,
+    packetsAndStakingData,
+    nymNodeDescriptionData,
+  ] = await Promise.all([
+    circulatingNymSupplyRes.json(),
+    nymNodesRes.json(),
+    packetsAndStakingRes.json(),
+    nymNodeDescriptionRes.json(),
+  ]);
+
+  return [
+    circulatingNymSupplyData,
+    nymNodesData,
+    packetsAndStakingData,
+    nymNodeDescriptionData,
+  ];
 };
 
 export async function ensureCacheExists() {

explorer-nextjs/src/app/api/urls.ts

@@ -22,3 +22,7 @@ export const CURRENT_EPOCH_REWARDS =
   "https://validator.nymtech.net/api/v1/epoch/reward_params";
 export const CIRCULATING_NYM_SUPPLY =
   "https://validator.nymtech.net/api/v1/circulating-supply";
+export const NYM_NODE_DESCRIPTION =
+  "https://nym-api.swiss-staking.ch/v1/nym-nodes/described";
+export const NYM_NODE_BONDED =
+  "https://nym-api.swiss-staking.ch/v1/nym-nodes/bonded";

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

@@ -1,12 +1,61 @@
+import type { IBondInfo, INodeDescription } from "@/app/api";
+import { NYM_NODE_BONDED, NYM_NODE_DESCRIPTION } from "@/app/api/urls";
 import ExplorerCard from "@/components/cards/ExplorerCard";
 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 { StarRating } from "@/components/starRating";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box, Grid2, Stack } from "@mui/material";
 
-export default function NymNode() {
+export default async function NymNode({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const id = (await params).id;
+
+  const descriptionData = await fetch(NYM_NODE_DESCRIPTION, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    next: { revalidate: 60 },
+    // refresh event list cache at given interval
+  });
+  const nymNodesDescription = await descriptionData.json();
+
+  if (!nymNodesDescription) {
+    return null;
+  }
+
+  console.log("id :>> ", id);
+
+  const bondedData = await fetch(NYM_NODE_BONDED, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json; charset=utf-8",
+    },
+    next: { revalidate: 60 },
+    // refresh event list cache at given interval
+  });
+  const nymbondedData = await bondedData.json();
+
+  if (!bondedData) {
+    return null;
+  }
+
+  const nodeBondInfo = nymbondedData.data.filter(
+    (item: IBondInfo) => item.bond_information.node_id === 5,
+  );
+
+  const nodeDescriptionInfo = nymNodesDescription.data.filter(
+    (item: INodeDescription) => item.node_id === 5,
+  );
+
+  console.log("nodeDescriptionInfo :>> ", nodeDescriptionInfo);
+
   return (
     <ContentLayout>
       <Grid2 container columnSpacing={5} rowSpacing={5}>
@@ -33,28 +82,10 @@ export default function NymNode() {
           </ExplorerCard>
         </Grid2>
         <Grid2 size={4}>
-          <ExplorerCard label="Basic info">
-            <Stack gap={1}>
-              <ExplorerListItem
-                divider
-                label="NYM Address"
-                value="0x1234567890"
-              />
-              <ExplorerListItem
-                divider
-                label="Identity Key"
-                value="0x1234567890"
-              />
-              <ExplorerListItem
-                row
-                divider
-                label="Node bonded"
-                value="24/11/2024"
-              />
-              <ExplorerListItem row divider label="Nr. of stakes" value="56" />
-              <ExplorerListItem row label="Self bonded" value="10,000 NYM" />
-            </Stack>
-          </ExplorerCard>
+          <BasicInfoCard
+            bondInfo={nodeBondInfo[0]}
+            nodeDescription={nodeDescriptionInfo[0]}
+          />
         </Grid2>
         <Grid2 size={4}>
           <ExplorerCard

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

@@ -0,0 +1,38 @@
+import type { IBondInfo, INodeDescription } from "@/app/api";
+import { Stack } from "@mui/material";
+import ExplorerCard from "../cards/ExplorerCard";
+import ExplorerListItem from "../list/ListItem";
+
+interface IBasicInfoCardProps {
+  bondInfo: IBondInfo;
+  nodeDescription: INodeDescription;
+}
+
+export const BasicInfoCard = (props: IBasicInfoCardProps) => {
+  const { bondInfo, nodeDescription } = props;
+
+  return (
+    <ExplorerCard label="Basic info">
+      <Stack gap={1}>
+        <ExplorerListItem
+          divider
+          label="NYM Address"
+          value={bondInfo.bond_information.owner}
+        />
+        <ExplorerListItem
+          divider
+          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="Nr. of stakes" value="56" />
+        <ExplorerListItem row label="Self bonded" value="10,000 NYM" />
+      </Stack>
+    </ExplorerCard>
+  );
+};