From 2a5bb6e1a1c1e79191d42935d01fcbb5d78f59cb Mon Sep 17 00:00:00 2001 From: Yana Date: Wed, 18 Dec 2024 18:57:29 +0700 Subject: [PATCH] Refactor ProgressBar --- explorer-nextjs/src/app/account/[id]/page.tsx | 50 +++---------------- explorer-nextjs/src/app/api/types.ts | 33 ++++++++++++ explorer-nextjs/src/app/api/urls.ts | 1 - .../src/app/nym-node/[id]/page.tsx | 5 +- .../AccountBalancesCard.tsx | 50 ++++++++++++------- .../accountPageComponents/AccountInfoCard.tsx | 4 +- 6 files changed, 76 insertions(+), 67 deletions(-) diff --git a/explorer-nextjs/src/app/account/[id]/page.tsx b/explorer-nextjs/src/app/account/[id]/page.tsx index d139b0639a..b641e82438 100644 --- a/explorer-nextjs/src/app/account/[id]/page.tsx +++ b/explorer-nextjs/src/app/account/[id]/page.tsx @@ -1,4 +1,4 @@ -import type { CurrencyRates } from "@/app/api/types"; +import type { CurrencyRates, IAccountBalancesInfo } from "@/app/api/types"; import { NYM_ACCOUNT_ADDRESS, NYM_PRICES_API } from "@/app/api/urls"; import { AccountBalancesCard } from "@/components/accountPageComponents/AccountBalancesCard"; import { AccountInfoCard } from "@/components/accountPageComponents/AccountInfoCard"; @@ -7,42 +7,6 @@ import SectionHeading from "@/components/headings/SectionHeading"; import ExplorerButtonGroup from "@/components/toggleButton/ToggleButton"; 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 | IAmountDetails; - total_delegations: ITotalDetails; - total_value: ITotalDetails; - vesting_account?: null | string; -} - export default async function Account({ params, }: { @@ -61,12 +25,12 @@ export default async function Account({ next: { revalidate: 60 }, // refresh event list cache at given interval }); - const nymAccountData: IAccountInfo = await accountData.json(); + const nymAccountBalancesData: IAccountBalancesInfo = await accountData.json(); - if (!nymAccountData) { + if (!nymAccountBalancesData) { return null; } - + console.log("nymAccountBalancesData :>> ", nymAccountBalancesData); const nymPrice = await fetch(NYM_PRICES_API, { headers: { Accept: "application/json", @@ -80,7 +44,7 @@ export default async function Account({ console.log("nymPriceData :>> ", nymPriceData); - console.log("nymAccountData :>> ", nymAccountData); + console.log("nymAccountData :>> ", nymAccountBalancesData); return ( @@ -102,11 +66,11 @@ export default async function Account({ - + diff --git a/explorer-nextjs/src/app/api/types.ts b/explorer-nextjs/src/app/api/types.ts index f6ac573c5e..e6d3de56e6 100644 --- a/explorer-nextjs/src/app/api/types.ts +++ b/explorer-nextjs/src/app/api/types.ts @@ -114,3 +114,36 @@ export interface CurrencyRates { timestamp: number; usd: number; } + +// ACCOUNT BALANCES + +export interface IRewardDetails { + amount_staked: IAmountDetails; + node_id: number; + node_still_fully_bonded: boolean; + rewards: IAmountDetails; +} + +export interface IAmountDetails { + denom: string; + amount: string; +} + +export interface IDelegationDetails { + node_id: number; + delegated: IAmountDetails; + height: number; + proxy: null | string; +} + +export interface IAccountBalancesInfo { + accumulated_rewards: IRewardDetails[]; + address: string; + balances: IAmountDetails[]; + claimable_rewards: IAmountDetails; + delegations: IDelegationDetails[]; + operator_rewards?: null | IAmountDetails; + total_delegations: IAmountDetails; + total_value: IAmountDetails; + vesting_account?: null | string; +} diff --git a/explorer-nextjs/src/app/api/urls.ts b/explorer-nextjs/src/app/api/urls.ts index d2ec69f27a..26dcd014f7 100644 --- a/explorer-nextjs/src/app/api/urls.ts +++ b/explorer-nextjs/src/app/api/urls.ts @@ -26,7 +26,6 @@ export const NYM_NODE_DESCRIPTION = "https://nym-api.swiss-staking.ch/v1/nym-nodes/described"; export const NYM_NODE_BONDED = "https://nym-api.swiss-staking.ch/v1/nym-nodes/bonded"; - export const NYM_ACCOUNT_ADDRESS = "https://explorer.nymtech.net/api/v1/tmp/unstable/account/"; export const NYM_PRICES_API = diff --git a/explorer-nextjs/src/app/nym-node/[id]/page.tsx b/explorer-nextjs/src/app/nym-node/[id]/page.tsx index 21ddbe0e06..c783e2ff87 100644 --- a/explorer-nextjs/src/app/nym-node/[id]/page.tsx +++ b/explorer-nextjs/src/app/nym-node/[id]/page.tsx @@ -16,8 +16,7 @@ export default async function NymNode({ }: { params: Promise<{ id: string }>; }) { - const id = (await params).id; - console.log("id :>> ", id); + const id = Number((await params).id); const descriptionData = await fetch(NYM_NODE_DESCRIPTION, { headers: { @@ -44,7 +43,7 @@ export default async function NymNode({ } const nodeBondInfo = nymbondedData.data.filter( - (item: IBondInfo) => item.bond_information.node_id === 5, + (item: IBondInfo) => item.bond_information.node_id === id, ); const nodeDescriptionInfo = nymNodesDescription.data.filter( diff --git a/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx b/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx index 0b2f06e865..71cfd3f745 100644 --- a/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx +++ b/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx @@ -1,5 +1,5 @@ "use client"; -import type { IAccountInfo } from "@/app/account/[id]/page"; +import type { IAccountBalancesInfo, IRewardDetails } from "@/app/api/types"; import { AccountBalancesTable } from "../cards/AccountBalancesTable"; import ExplorerCard from "../cards/ExplorerCard"; @@ -14,7 +14,7 @@ export interface IAccontStatsRowProps { } interface IAccountBalancesCardProps { - accountInfo: IAccountInfo; + accountInfo: IAccountBalancesInfo; nymPrice: number; } @@ -33,6 +33,18 @@ 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; @@ -75,6 +87,11 @@ 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", @@ -87,10 +104,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", @@ -98,22 +115,19 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => { amount: claimableNYM, value: claimableUSD, history: [ - { type: "Unlocked", amount: 6900 }, - { type: "Staking rewards", amount: 6900 }, - { type: "Operator comission", amount: 6900 }, + // { type: "Unlocked", amount: 6900 }, + { + type: "Staking rewards", + amount: stakingRewards, + }, + { type: "Operator comission", amount: 0 }, ], }, { type: "Self bonded", - allocation: 15.53, - amount: 12800, - value: 1200, - }, - { - type: "Locked", - allocation: 15.53, - amount: 12800, - value: 1200, + allocation: 0, + amount: 0, + value: 0, }, ]; diff --git a/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx b/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx index bd3ea8ad8d..ee8f4401c4 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 { IAccountInfo } from "@/app/account/[id]/page"; +import type { IAccountBalancesInfo } from "@/app/api/types"; 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: IAccountInfo; + accountInfo: IAccountBalancesInfo; } export const AccountInfoCard = (props: IAccountInfoCardProps) => {