Add profile card

explorer-nextjs/package.json

@@ -32,6 +32,7 @@
     "qrcode.react": "^4.1.0",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
+    "react-random-avatars": "^1.3.1",
     "react-world-flags": "^1.6.0"
   },
   "devDependencies": {

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";
@@ -71,9 +72,10 @@ export default async function NymNode({
           </Box>
         </Grid2>
         <Grid2 size={4}>
-          <ExplorerCard label="Action" sx={{ height: "100%" }}>
-            <div />
-          </ExplorerCard>
+          <NodeProfileCard
+            bondInfo={nodeBondInfo[0]}
+            nodeDescription={nodeDescriptionInfo[0]}
+          />
         </Grid2>
         <Grid2 size={4}>
           <BasicInfoCard

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

@@ -0,0 +1,53 @@
+"use client";
+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: 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={nodeDescription.description.address}
+            size={80}
+            square
+          />
+        </Box>
+        <Typography
+          variant="h3"
+          mt={3}
+          sx={{ color: "pine.950", wordWrap: "break-word", maxWidth: "95%" }}
+        >
+          {"Moniker"}
+        </Typography>
+        <CountryFlag
+          countryCode={
+            nodeDescription.description.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>
+        <Box mt={3}>
+          <Button variant="contained" size="small">
+            Stake on node
+          </Button>
+        </Box>
+      </Stack>
+    </ExplorerCard>
+  );
+};

yarn.lock

@@ -21868,6 +21868,11 @@ react-mui-dropzone@^4.0.6:
     clsx "^1.0.2"
     react-dropzone "^10.2.1"
 
+react-random-avatars@^1.3.1:
+  version "1.3.1"
+  resolved "https://registry.yarnpkg.com/react-random-avatars/-/react-random-avatars-1.3.1.tgz#cfea11dd80262939656e4134438fa76eb2d95371"
+  integrity sha512-HyMGoWniK2D5CRthoA1he4c6LVFIX/yBjp4qarEXN/DsgJ+1R6M5gJwYhTBoATO+3itrGCAGnKZNqimG1sDjAA==
+
 react-refresh-typescript@^2.0.2, react-refresh-typescript@^2.0.3:
   version "2.0.9"
   resolved "https://registry.yarnpkg.com/react-refresh-typescript/-/react-refresh-typescript-2.0.9.tgz#f8a86efcb34f8d717100230564b9b57477d74b10"