diff --git a/explorer-nextjs/src/app/account/[id]/page.tsx b/explorer-nextjs/src/app/account/[id]/page.tsx
index 92fc2cb796..f3029bd4bf 100644
--- a/explorer-nextjs/src/app/account/[id]/page.tsx
+++ b/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 (
@@ -51,33 +100,13 @@ export default async function Account({
-
-
-
+
-
-
-
-
-
-
-
-
-
+
diff --git a/explorer-nextjs/src/app/api/urls.ts b/explorer-nextjs/src/app/api/urls.ts
index 1a5f4db8af..a10204aee2 100644
--- a/explorer-nextjs/src/app/api/urls.ts
+++ b/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";
diff --git a/explorer-nextjs/src/app/mocks/dummy_data.ts b/explorer-nextjs/src/app/mocks/dummy_data.ts
index 522f1d3319..b671bb36ba 100644
--- a/explorer-nextjs/src/app/mocks/dummy_data.ts
+++ b/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 },
{
diff --git a/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx b/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx
index 71cfd3f745..6f437d10ad 100644
--- a/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx
+++ b/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,
},
];
diff --git a/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx b/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx
index ee8f4401c4..bd3ea8ad8d 100644
--- a/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx
+++ b/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) => {
diff --git a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx b/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
index 71403146c1..70b003243c 100644
--- a/explorer-nextjs/src/components/nymNodePageComponents/BasicInfoCard.tsx
+++ b/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) => {
+
+ {bondInfo.bond_information.owner}
+
+
+
+ }
/>
+
+ {bondInfo.bond_information.node.identity_key}
+
+
+
+ }
/>
{
label="Host"
value={nodeDescription.description.host_information.ip_address.toString()}
/>
-