Add profile card

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

@@ -122,13 +122,14 @@ export interface INodeDescription {
   description: {
     authenticator: object;
     address: string;
-    auxiliary_details: object;
-    accepted_operator_terms_and_conditions: boolean;
-    announce_ports: {
-      verloc_port: number | null;
-      mix_port: number | null;
+    auxiliary_details: {
+      location: string;
+      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/nym-node/[id]/page.tsx

@@ -6,6 +6,7 @@ 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 { StarRating } from "@/components/starRating";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
@@ -68,15 +69,10 @@ export default async function NymNode({
             />
           </Box>
         </Grid2>
-        <Grid2
-          size={{
-            xs: 12,
-            md: 4,
-          }}
-        >
+        <Grid2 size={4}>
           <NodeProfileCard
-            bondInfo={nymNode.bond_information}
-            nodeDescription={nymNode.description}
+            bondInfo={nodeBondInfo[0]}
+            nodeDescription={nodeDescriptionInfo[0]}
           />
         </Grid2>
         <Grid2 size={4}>

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

@@ -1,23 +1,30 @@
 "use client";
-import type { BondInformation, NodeDescription } from "@/app/api/types";
+import type { IBondInfo, INodeDescription } from "@/app/api";
 import { Box, Button, Stack, Typography } from "@mui/material";
+import { format } from "date-fns";
 import { RandomAvatar } from "react-random-avatars";
 import ExplorerCard from "../cards/ExplorerCard";
 import CountryFlag from "../countryFlag/CountryFlag";
 
 interface INodeProfileCardProps {
-  bondInfo: BondInformation;
-  nodeDescription: NodeDescription;
+  bondInfo: IBondInfo;
+  nodeDescription: INodeDescription;
 }
 
 export const NodeProfileCard = (props: INodeProfileCardProps) => {
   const { bondInfo, nodeDescription } = props;
 
+  console.log("nodeDescription :>> ", nodeDescription);
+
   return (
     <ExplorerCard label="Nym Node" sx={{ height: "100%" }}>
       <Stack gap={1}>
         <Box display={"flex"} justifyContent={"flex-start"}>
-          <RandomAvatar name={bondInfo.node.identity_key} size={80} square />
+          <RandomAvatar
+            name={nodeDescription.description.address}
+            size={80}
+            square
+          />
         </Box>
         <Typography
           variant="h3"
@@ -27,7 +34,9 @@ export const NodeProfileCard = (props: INodeProfileCardProps) => {
           {"Moniker"}
         </Typography>
         <CountryFlag
-          countryCode={nodeDescription.auxiliary_details.location || ""}
+          countryCode={
+            nodeDescription.description.auxiliary_details.location || ""
+          }
         />
         <Typography variant="body4" sx={{ color: "pine.950" }}>
           Team of professional validators with best digital solutions. Please