Add account balances

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

@@ -1,10 +1,46 @@
-import { NYM_ACCOUNT_ADDRESS } from "@/app/api/urls";
-import ExplorerCard from "@/components/cards/ExplorerCard";
+import { NYM_ACCOUNT_ADDRESS, 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 ExplorerListItem from "@/components/list/ListItem";
 import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton";
-import { Box, Grid2, Stack } from "@mui/material";
+import { Box, Grid2 } from "@mui/material";
+
+interface IRewardDetails {
+  amount_staked: IAmountDetails;
+  node_id: number;
+  node_still_fully_bonded: boolean;
+  rewards: IAmountDetails;
+}
+
+interface IAmountDetails {
+  denom: string;
+  amount: string;
+}
+
+interface IDelegationDetails {
+  node_id: number;
+  delegated: IAmountDetails;
+  height: number;
+  proxy: null | string;
+}
+
+interface ITotalDetails {
+  amount: string;
+  denom: string;
+}
+
+export interface IAccountInfo {
+  accumulated_rewards: IRewardDetails[];
+  address: string;
+  balances: IAmountDetails[];
+  claimable_rewards: IAmountDetails;
+  delegations: IDelegationDetails[];
+  operator_rewards: null | any;
+  total_delegations: ITotalDetails;
+  total_value: ITotalDetails;
+  vesting_account: null | any;
+}
 
 export default async function Account({
   params,
@@ -12,7 +48,7 @@ export default async function Account({
   params: Promise<{ address: string }>;
 }) {
   // const address = (await params).address;
-  const address = "n17hllefp8rn3ayk23rsgp7agtxkv56mazv3w637";
+  const address = "n1z0msxu8c098umdhnthpr2ac3ck2n3an97dm8pn";
 
   const nymAccountAddress = `${NYM_ACCOUNT_ADDRESS}${address}`;
   const accountData = await fetch(nymAccountAddress, {
@@ -23,12 +59,25 @@ export default async function Account({
     next: { revalidate: 60 },
     // refresh event list cache at given interval
   });
-  const nymAccountData = await accountData.json();
+  const nymAccountData: IAccountInfo = await accountData.json();
 
   if (!nymAccountData) {
     return null;
   }
 
+  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 = await nymPrice.json();
+
+  console.log("nymPriceData :>> ", nymPriceData);
+
   console.log("nymAccountData :>> ", nymAccountData);
   return (
     <ContentLayout>
@@ -51,33 +100,13 @@ export default async function Account({
           </Box>
         </Grid2>
         <Grid2 size={4}>
-          <ExplorerCard label="Action" sx={{ height: "100%" }}>
-            <div />
-          </ExplorerCard>
+          <AccountInfoCard accountInfo={nymAccountData} />
         </Grid2>
         <Grid2 size={8}>
-          <ExplorerCard label="Basic info">
-            <Stack gap={1}>
-              <ExplorerListItem
-                divider
-                label="NYM Address"
-                value="0x1234567890"
-              />
-              <ExplorerListItem
-                divider
-                label="Identity Key"
-                value="0x1234567890"
-              />
-              <ExplorerListItem
-                row
-                divider
-                label="Node bonded"
-                value="24/11/2024"
-              />
-              <ExplorerListItem row divider label="Nr. of stakes" value="56" />
-              <ExplorerListItem row label="Self bonded" value="10,000 NYM" />
-            </Stack>
-          </ExplorerCard>
+          <AccountBalancesCard
+            accountInfo={nymAccountData}
+            nymPrice={nymPriceData.usd}
+          />
         </Grid2>
       </Grid2>
     </ContentLayout>

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

@@ -29,3 +29,6 @@ export const NYM_NODE_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/mocks/dummy_data.ts

@@ -79,8 +79,8 @@ const explorerCard: ContentCardProps = {
 };
 
 const accountStatsCard: IAccountBalancesTableProps = {
-  // overTitle: "Total value",
-  // priceTitle: 1990.0174,
+  overTitle: "Total value",
+  priceTitle: 1990.0174,
   rows: [
     { type: "Spendable", allocation: 15.53, amount: 12800, value: 1200 },
     {

explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx

@@ -1,8 +1,10 @@
 "use client";
-import type { IAccountBalancesInfo, IRewardDetails } from "@/app/api/types";
-import { AccountBalancesTable } from "../cards/AccountBalancesTable";
+import type { IAccountInfo } from "@/app/account/[id]/page";
 import ExplorerCard from "../cards/ExplorerCard";
 
+import { runTurboTracing } from "next/dist/build/swc/generated-native";
+import { AccountBalancesTable } from "../cards/AccountBalancesTable";
+
 export interface IAccontStatsRowProps {
   type: string;
   allocation: number;
@@ -14,7 +16,7 @@ export interface IAccontStatsRowProps {
 }
 
 interface IAccountBalancesCardProps {
-  accountInfo: IAccountBalancesInfo;
+  accountInfo: IAccountInfo;
   nymPrice: number;
 }
 
@@ -33,18 +35,6 @@ const getAllocation = (unyms: number, totalUnyms: number): number => {
   return Number(allocationPercentage.toFixed(2));
 };
 
-const calculateStakingRewards = (
-  accumulatedRewards: IRewardDetails[],
-): number => {
-  const totalRewards = accumulatedRewards.reduce((total, rewardDetail) => {
-    return total + Number.parseFloat(rewardDetail.rewards.amount);
-  }, 0);
-
-  const result = getNymsFormated(totalRewards);
-
-  return result;
-};
-
 export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
   const { accountInfo, nymPrice } = props;
 
@@ -87,11 +77,6 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
     Number(accountInfo.total_value.amount),
   );
 
-  const stakingRewards =
-    accountInfo.accumulated_rewards.length > 0
-      ? calculateStakingRewards(accountInfo.accumulated_rewards)
-      : 0;
-
   const tableRows = [
     {
       type: "Spendable",
@@ -104,10 +89,10 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
       allocation: delegationsAllocation,
       amount: delegationsNYM,
       value: delegationsUSD,
-      // history: [
-      //   { type: "Liquid", amount: 6900 },
-      //   { type: "Locked", amount: 6900 },
-      // ],
+      history: [
+        { type: "Liquid", amount: 6900 },
+        { type: "Locked", amount: 6900 },
+      ],
     },
     {
       type: "Claimable",
@@ -115,19 +100,22 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
       amount: claimableNYM,
       value: claimableUSD,
       history: [
-        // { type: "Unlocked", amount: 6900 },
-        {
-          type: "Staking rewards",
-          amount: stakingRewards,
-        },
-        { type: "Operator comission", amount: 0 },
+        { type: "Unlocked", amount: 6900 },
+        { type: "Staking rewards", amount: 6900 },
+        { type: "Operator comission", amount: 6900 },
       ],
     },
     {
       type: "Self bonded",
-      allocation: 0,
-      amount: 0,
-      value: 0,
+      allocation: 15.53,
+      amount: 12800,
+      value: 1200,
+    },
+    {
+      type: "Locked",
+      allocation: 15.53,
+      amount: 12800,
+      value: 1200,
     },
   ];
 

explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx

@@ -1,5 +1,5 @@
 "use client";
-import type { IAccountBalancesInfo } from "@/app/api/types";
+import type { IAccountInfo } from "@/app/account/[id]/page";
 import { Box, Stack, Typography } from "@mui/material";
 import ExplorerCard from "../cards/ExplorerCard";
 import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
@@ -7,7 +7,7 @@ import ExplorerListItem from "../list/ListItem";
 import { CardQRCode } from "../qrCode/QrCode";
 
 interface IAccountInfoCardProps {
-  accountInfo: IAccountBalancesInfo;
+  accountInfo: IAccountInfo;
 }
 
 export const AccountInfoCard = (props: IAccountInfoCardProps) => {

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

@@ -1,7 +1,8 @@
 import type { IBondInfo, INodeDescription } from "@/app/api";
-import { Stack } from "@mui/material";
+import { Stack, Typography } from "@mui/material";
 import { format } from "date-fns";
 import ExplorerCard from "../cards/ExplorerCard";
+import CopyToClipboard from "../copyToClipboard/CopyToClipboard";
 import ExplorerListItem from "../list/ListItem";
 
 interface IBasicInfoCardProps {
@@ -25,12 +26,40 @@ export const BasicInfoCard = (props: IBasicInfoCardProps) => {
         <ExplorerListItem
           divider
           label="NYM Address"
-          value={bondInfo.bond_information.owner}
+          value={
+            <Stack
+              direction="row"
+              gap={0.1}
+              alignItems="center"
+              justifyContent="space-between"
+              width="100%"
+            >
+              <Typography variant="body4">
+                {bondInfo.bond_information.owner}
+              </Typography>
+              <CopyToClipboard text={bondInfo.bond_information.owner} />
+            </Stack>
+          }
         />
         <ExplorerListItem
           divider
           label="Identity Key"
-          value={bondInfo.bond_information.node.identity_key}
+          value={
+            <Stack
+              direction="row"
+              gap={0.1}
+              alignItems="center"
+              justifyContent="space-between"
+              width="100%"
+            >
+              <Typography variant="body4">
+                {bondInfo.bond_information.node.identity_key}
+              </Typography>
+              <CopyToClipboard
+                text={bondInfo.bond_information.node.identity_key}
+              />
+            </Stack>
+          }
         />
         <ExplorerListItem row divider label="Node bonded" value={timeBonded} />
         <ExplorerListItem

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

@@ -22,7 +22,6 @@ export const NodeMetricsCard = (props: INodeMetricsCardProps) => {
         label="Host"
         value={nodeDescription.description.host_information.ip_address.toString()}
       />
-      <ExplorerListItem row divider label="Staker rew." value="10,000 NYM" />
       <ExplorerListItem row divider label="Version" value="1.1.1.1" />
       <ExplorerListItem row label="Active set Prob." value="High" />
     </ExplorerCard>