Yana/node page (#5276)

* Add nym-node page api WIP

* nym-node page api WIP

* Add rewards card

* Add account balances

* fix build

* Add USD price to tokenomics card

* fix build

* fix build

* fix build

* Refactor ProgressBar

* Add profile card

* fix build

* replace hardcoded id

* Add build version and node roles

* fix build

* rename id param to address

* add node table to explorer page

* get node details from unstable endpoint + layout updates

* allow node select from table

* stop propogation on favorite/unfavorite

* update self bond data

* card refactors

* revert node engine requirement

* use node v20

---------

Co-authored-by: Yana <yanok87@users.noreply.github.com>
Co-authored-by: fmtabbara <fmtabbara@hotmail.co.uk>

.github/workflows/ci-build-ts.yml

@@ -19,7 +19,7 @@ jobs:
     - uses: rlespinasse/github-slug-action@v3.x
     - uses: actions/setup-node@v4
       with:
-        node-version: 18
+        node-version: 20
     - name: Setup yarn
       run: npm install -g yarn
     - name: Build

.github/workflows/ci-lint-typescript.yml

@@ -22,7 +22,7 @@ jobs:
 
       - uses: actions/setup-node@v4
         with:
-          node-version: 18
+          node-version: 20
       - name: Setup yarn
         run: npm install -g yarn
 

explorer-nextjs/package.json

@@ -12,6 +12,8 @@
     "node": ">=20.0.0"
   },
   "dependencies": {
+    "@cosmjs/cosmwasm-stargate": "^0.32.4",
+    "@cosmjs/proto-signing": "^0.32.4",
     "@emotion/cache": "^11.13.5",
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
@@ -20,6 +22,7 @@
     "@mui/material-nextjs": "^6.1.9",
     "@mui/x-date-pickers": "^7.23.2",
     "@nivo/line": "^0.88.0",
+    "@nymproject/contract-clients": "^1.4.1",
     "@tanstack/react-table": "^8.20.6",
     "@uidotdev/usehooks": "^2.4.1",
     "cldr-compact-number": "^0.4.0",
@@ -29,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/account/[address]/page.tsx

@@ -0,0 +1,103 @@
+import type { CurrencyRates, IAccountBalancesInfo } from "@/app/api/types";
+import type NodeData from "@/app/api/types";
+import { NYM_ACCOUNT_ADDRESS, NYM_NODES, NYM_PRICES_API } from "@/app/api/urls";
+import { AccountBalancesCard } from "@/components/accountPageComponents/AccountBalancesCard";
+import { AccountInfoCard } from "@/components/accountPageComponents/AccountInfoCard";
+import { ContentLayout } from "@/components/contentLayout/ContentLayout";
+import SectionHeading from "@/components/headings/SectionHeading";
+import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
+import { Box, Grid2, Typography } from "@mui/material";
+
+export default async function Account({
+  params,
+}: {
+  params: Promise<{ address: string }>;
+}) {
+  try {
+    const { address } = await params;
+
+    const accountData = await fetch(`${NYM_ACCOUNT_ADDRESS}${address}`, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      next: { revalidate: 60 },
+      // refresh event list cache at given interval
+    });
+
+    const response = await fetch(NYM_NODES, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      next: { revalidate: 60 },
+      // refresh event list cache at given interval
+    });
+
+    const nymNodes: NodeData[] = await response.json();
+
+    const nymNode = nymNodes.find(
+      (node) => node.bond_information.owner === address,
+    );
+
+    const nymAccountBalancesData: IAccountBalancesInfo =
+      await accountData.json();
+
+    if (!nymAccountBalancesData) {
+      return <Typography>Account not found</Typography>;
+    }
+
+    const nymPrice = await fetch(NYM_PRICES_API, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json; charset=utf-8",
+      },
+      next: { revalidate: 60 },
+      // refresh event list cache at given interval
+    });
+
+    const nymPriceData: CurrencyRates = await nymPrice.json();
+
+    return (
+      <ContentLayout>
+        <Grid2 container columnSpacing={5} rowSpacing={5}>
+          <Grid2 size={6}>
+            <SectionHeading title="Account Details" />
+          </Grid2>
+          <Grid2 size={6} justifyContent="flex-end">
+            <Box sx={{ display: "flex", justifyContent: "end" }}>
+              <ExplorerButtonGroup
+                options={[
+                  {
+                    label: "Nym Node",
+                    isSelected: false,
+                    link: nymNode
+                      ? `/nym-node/${nymNode.node_id}`
+                      : "/nym-node/not-found",
+                  },
+                  {
+                    label: "Account",
+                    isSelected: true,
+                    link: "/account/1",
+                  },
+                ]}
+              />
+            </Box>
+          </Grid2>
+          <Grid2 size={4}>
+            <AccountInfoCard accountInfo={nymAccountBalancesData} />
+          </Grid2>
+          <Grid2 size={8}>
+            <AccountBalancesCard
+              accountInfo={nymAccountBalancesData}
+              nymPrice={nymPriceData.usd}
+            />
+          </Grid2>
+        </Grid2>
+      </ContentLayout>
+    );
+  } catch (error) {
+    console.error("error :>> ", error);
+    return <Typography>Error loading account data</Typography>;
+  }
+}

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

@@ -3,6 +3,7 @@ import {
   CIRCULATING_NYM_SUPPLY,
   HARBOURMASTER_API_MIXNODES_STATS,
   NYM_NODES_DESCRIBED,
+  NYM_NODE_DESCRIPTION,
 } from "./urls";
 
 type Denom = "unym" | "nym";
@@ -83,6 +84,96 @@ 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;
+  };
+  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;
+      };
+    };
+    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 +205,45 @@ const getExplorerData = async () => {
     next: { revalidate: Number(process.env.NEXT_PUBLIC_REVALIDATE_CACHE) },
   });
 
-  const [circulatingNymSupplyRes, nymNodesRes, packetsAndStakingRes] =
-    await Promise.all([
-      fetchCirculatingNymSupply,
-      fetchNymNodes,
-      fetchPacketsAndStaking,
-    ]);
-
-  const [circulatingNymSupplyData, nymNodesData, packetsAndStakingData] =
-    await Promise.all([
-      circulatingNymSupplyRes.json(),
-      nymNodesRes.json(),
-      packetsAndStakingRes.json(),
-    ]);
-
-  return [circulatingNymSupplyData, nymNodesData, packetsAndStakingData];
+  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 [
+    circulatingNymSupplyRes,
+    nymNodesRes,
+    packetsAndStakingRes,
+    nymNodeDescriptionRes,
+  ] = await Promise.all([
+    fetchCirculatingNymSupply,
+    fetchNymNodes,
+    fetchPacketsAndStaking,
+    fetchNymNodeDescription,
+  ]);
+
+  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() {