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()} /> -