Add moniker and description to Node page

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

@@ -1,5 +1,6 @@
 import type NodeData from "@/app/api/types";
-import { NYM_NODES } from "@/app/api/urls";
+import type { IObservatoryNode } from "@/app/api/types";
+import { DATA_OBSERVATORY_NODES_URL, NYM_NODES } from "@/app/api/urls";
 import BlogArticlesCards from "@/components/blogs/BlogArticleCards";
 import { ContentLayout } from "@/components/contentLayout/ContentLayout";
 import SectionHeading from "@/components/headings/SectionHeading";
@@ -21,6 +22,24 @@ export default async function NymNode({
   try {
     const id = Number((await params).id);
 
+    const observatoryResponse = await fetch(DATA_OBSERVATORY_NODES_URL, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      next: { revalidate: 60 },
+      // refresh event list cache at given interval
+    });
+
+    const observatoryNymNodes: IObservatoryNode[] =
+      await observatoryResponse.json();
+
+    const observatoryNymNode = observatoryNymNodes.find(
+      (node) => node.node_id === id,
+    );
+
+    console.log("observatorynNymNode :>> ", observatoryNymNode);
+
     const response = await fetch(NYM_NODES, {
       headers: {
         Accept: "application/json",
@@ -38,7 +57,7 @@ export default async function NymNode({
 
     const nymNode = nymNodes.find((node) => node.node_id === id);
 
-    if (!nymNode) {
+    if (!nymNode || !observatoryNymNode) {
       return null;
     }
 
@@ -73,6 +92,7 @@ export default async function NymNode({
             <NodeProfileCard
               bondInfo={nymNode.bond_information}
               nodeDescription={nymNode.description}
+              nodeInfo={observatoryNymNode}
             />
           </Grid>
           <Grid

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

@@ -147,3 +147,100 @@ export interface IAccountBalancesInfo {
   total_value: IAmountDetails;
   vesting_account?: null | string;
 }
+
+export interface IObservatoryNode {
+  accepted_tnc: boolean;
+  bonded: boolean;
+  bonding_address: string;
+  description: {
+    authenticator: {
+      address: string;
+    };
+    auxiliary_details: {
+      accepted_operator_terms_and_conditions: boolean;
+      announce_ports: {
+        mix_port: number | null;
+        verloc_port: number | null;
+      };
+      location: string | null;
+    };
+    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: string | null;
+    geoip: {
+      city: string;
+      country: string;
+      ip_address: string;
+      loc: string;
+      node_id: number;
+      org: string;
+      postal: string;
+      region: string;
+    };
+  };
+  identity_key: string;
+  ip_address: string;
+  node_id: number;
+  node_type: string;
+  original_pledge: number;
+  rewarding_details: {
+    cost_params: {
+      interval_operating_cost: {
+        amount: string;
+        denom: string;
+      };
+      profit_margin_percent: string;
+    };
+    delegates: string;
+    last_rewarded_epoch: number;
+    operator: string;
+    total_unit_reward: string;
+    unique_delegations: number;
+    unit_delegation: string;
+  };
+  self_description: {
+    details: string;
+    moniker: string;
+    security_contact: string;
+    website: string;
+  };
+  total_stake: number;
+  uptime: number;
+}

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

@@ -32,3 +32,9 @@ export const NYM_PRICES_API =
   "https://canary-nym-vpn-chain-payment-watcher.nymte.ch/v1/price/average";
 export const VALIDATOR_BASE_URL =
   process.env.NEXT_PUBLIC_VALIDATOR_URL || "https://rpc.nymtech.net";
+export const DATA_OBSERVATORY_NODES_URL =
+  "https://api.nym.spectredao.net/api/v1/nodes";
+export const DATA_OBSERVATORY_BALANCES_URL =
+  "https://api.nym.spectredao.net/api/v1/balances";
+export const DATA_OBSERVATORY_DELEGATIONS_URL =
+  "https://api.nym.spectredao.net/api/v1/delegations";

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

@@ -1,5 +1,9 @@
 "use client";
-import type { BondInformation, NodeDescription } from "@/app/api/types";
+import type {
+  BondInformation,
+  IObservatoryNode,
+  NodeDescription,
+} from "@/app/api/types";
 import { COSMOS_KIT_USE_CHAIN } from "@/config";
 import { useNymClient } from "@/hooks/useNymClient";
 import { useChain } from "@cosmos-kit/react";
@@ -17,10 +21,11 @@ import ConnectWallet from "../wallet/ConnectWallet";
 interface INodeProfileCardProps {
   bondInfo: BondInformation;
   nodeDescription: NodeDescription;
+  nodeInfo: IObservatoryNode;
 }
 
 export const NodeProfileCard = (props: INodeProfileCardProps) => {
-  const { bondInfo, nodeDescription } = props;
+  const { bondInfo, nodeDescription, nodeInfo } = props;
   const { isWalletConnected } = useChain(COSMOS_KIT_USE_CHAIN);
   const { nymClient } = useNymClient();
   const [infoModalProps, setInfoModalProps] = useState<InfoModalProps>({
@@ -111,18 +116,19 @@ export const NodeProfileCard = (props: INodeProfileCardProps) => {
         <Typography
           variant="h3"
           mt={3}
+          mb={1}
           sx={{ color: "pine.950", wordWrap: "break-word", maxWidth: "95%" }}
         >
-          {"Moniker"}
+          {nodeInfo.self_description.moniker}
         </Typography>
         {nodeDescription && (
           <CountryFlag
             countryCode={nodeDescription.auxiliary_details.location}
+            countryName={nodeDescription.auxiliary_details.location}
           />
         )}
-        <Typography variant="body4" sx={{ color: "pine.950" }}>
-          Team of professional validators with best digital solutions. Please
-          visit our Telegram🔹https://t.me/CryptoSailorsAnn🔹
+        <Typography variant="body4" sx={{ color: "pine.950" }} mt={2}>
+          {nodeInfo.self_description.details}
         </Typography>
         <Box mt={3}>
           <Button