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,
   NYM_NODE_DESCRIPTION,
 } from "./urls";
@@ -100,36 +102,21 @@ export interface IBondInfo {
     };
     owner: string;
   };
-  rewarding_details: {
-    cost_params: {
-      profit_margin_percent: string;
-      interval_operating_cost: {
-        denom: string;
-        amount: string;
-      };
-    };
-    delegates: string;
-    last_rewarded_epoch: number;
-    operator: string;
-    total_unit_reward: string;
-    unique_delegations: number;
-    unit_delegation: string;
-  };
 }
 
 export interface INodeDescription {
   contract_node_type: string;
   description: {
     authenticator: object;
+
     address: string;
-    auxiliary_details: {
-      location: string;
-      accepted_operator_terms_and_conditions: boolean;
-      announce_ports: {
-        verloc_port: number | null;
-        mix_port: number | null;
-      };
+    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;

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

@@ -26,7 +26,3 @@ 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";
-export const NYM_ACCOUNT_ADDRESS =
-  "https://explorer.nymtech.net/api/v1/tmp/unstable/account/";
-export const NYM_PRICES_API =
-  "https://canary-nym-vpn-chain-payment-watcher.nymte.ch/v1/price/average";

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

@@ -1,23 +1,22 @@
-import type NodeData from "@/app/api/types";
-import { NYM_NODES } from "@/app/api/urls";
+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 { NodeMetricsCard } from "@/components/nymNodePageComponents/NodeMetricsCard";
-import { NodeProfileCard } from "@/components/nymNodePageComponents/NodeProfileCard";
-import { NodeRewardsCard } from "@/components/nymNodePageComponents/NodeRewardsCard";
-import { QualityIndicatorsCard } from "@/components/nymNodePageComponents/QualityIndicatorsCard";
+import { StarRating } from "@/components/starRating";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
 import { Box, Grid2 } from "@mui/material";
 
 export default async function NymNode({
   params,
 }: {
-  params: Promise<{ id: string; account?: string }>;
+  params: Promise<{ id: string }>;
 }) {
-  const id = Number((await params).id);
+  const id = (await params).id;
 
-  const response = await fetch(NYM_NODES, {
+  const descriptionData = await fetch(NYM_NODE_DESCRIPTION, {
     headers: {
       Accept: "application/json",
       "Content-Type": "application/json; charset=utf-8",
@@ -25,19 +24,38 @@ export default async function NymNode({
     next: { revalidate: 60 },
     // refresh event list cache at given interval
   });
+  const nymNodesDescription = await descriptionData.json();
 
-  const nymNodes: NodeData[] = await response.json();
-
-  if (!nymNodes) {
+  if (!nymNodesDescription) {
     return null;
   }
 
-  const nymNode = nymNodes.find((node) => node.node_id === id);
+  console.log("id :>> ", id);
 
-  if (!nymNode) {
+  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}>
@@ -67,16 +85,10 @@ export default async function NymNode({
             nodeDescription={nymNode.description}
           />
         </Grid2>
-        <Grid2
-          size={{
-            xs: 12,
-            md: 4,
-          }}
-        >
+        <Grid2 size={4}>
           <BasicInfoCard
-            bondInfo={nymNode.bond_information}
-            nodeDescription={nymNode.description}
-            rewardDetails={nymNode.rewarding_details}
+            bondInfo={nodeBondInfo[0]}
+            nodeDescription={nodeDescriptionInfo[0]}
           />
         </Grid2>
         <Grid2

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

@@ -1,76 +1,37 @@
-import type {
-  BondInformation,
-  NodeDescription,
-  RewardingDetails,
-} from "@/app/api/types";
-import { formatBigNum } from "@/utils/formatBigNumbers";
-import { Stack, Typography } from "@mui/material";
-import { format } from "date-fns";
+import type { IBondInfo, INodeDescription } from "@/app/api";
+import { Stack } from "@mui/material";
 import ExplorerCard from "../cards/ExplorerCard";
-import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
 import ExplorerListItem from "../list/ListItem";
 
 interface IBasicInfoCardProps {
-  bondInfo: BondInformation;
-  nodeDescription: NodeDescription;
-  rewardDetails: RewardingDetails;
+  bondInfo: IBondInfo;
+  nodeDescription: INodeDescription;
 }
 
 export const BasicInfoCard = (props: IBasicInfoCardProps) => {
-  const { bondInfo, nodeDescription, rewardDetails } = props;
+  const { bondInfo, nodeDescription } = props;
 
-  const timeBonded = format(
-    new Date(nodeDescription.build_information.build_timestamp),
-    "dd/MM/yyyy",
-  );
-
-  const selfBond = formatBigNum(Number(rewardDetails.operator) / 1_000_000);
-  const selfBondFormated = `${selfBond} NYM`;
   return (
     <ExplorerCard label="Basic info">
       <Stack gap={1}>
         <ExplorerListItem
           divider
           label="NYM Address"
-          value={
-            <Stack
-              direction="row"
-              gap={0.1}
-              alignItems="center"
-              justifyContent="space-between"
-              width="100%"
-            >
-              <Typography variant="body4">{bondInfo.owner}</Typography>
-              <CopyToClipboard text={bondInfo.owner} />
-            </Stack>
-          }
+          value={bondInfo.bond_information.owner}
         />
         <ExplorerListItem
           divider
           label="Identity Key"
-          value={
-            <Stack
-              direction="row"
-              gap={0.1}
-              alignItems="center"
-              justifyContent="space-between"
-              width="100%"
-            >
-              <Typography variant="body4">
-                {bondInfo.node.identity_key}
-              </Typography>
-              <CopyToClipboard text={bondInfo.node.identity_key} />
-            </Stack>
-          }
+          value={bondInfo.bond_information.node.identity_key}
         />
-        <ExplorerListItem row divider label="Node bonded" value={timeBonded} />
         <ExplorerListItem
           row
           divider
-          label="Nr. of stakes"
-          value={rewardDetails.unique_delegations.toString()}
+          label="Node bonded"
+          value={nodeDescription.description.build_information.build_timestamp}
         />
-        <ExplorerListItem row label="Self bonded" value={selfBondFormated} />
+        <ExplorerListItem row divider label="Nr. of stakes" value="56" />
+        <ExplorerListItem row label="Self bonded" value="10,000 NYM" />
       </Stack>
     </ExplorerCard>
   );