From e98ef7d12a49ebab5b147fbf3d34cfb1658cdbb6 Mon Sep 17 00:00:00 2001
From: Yana <yanok87@users.noreply.github.com>
Date: Wed, 12 Feb 2025 18:55:56 +0200
Subject: [PATCH] fix account page cards for a fresh wallet with no funds

---
 .../AccountBalancesCard.tsx                   | 52 +++++++++++++------
 .../accountPageComponents/AccountInfoCard.tsx |  3 +-
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx b/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx
index c46f2505e6..c8940183d5 100644
--- a/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx
+++ b/explorer-nextjs/src/components/accountPageComponents/AccountBalancesCard.tsx
@@ -20,17 +20,26 @@ interface IAccountBalancesCardProps {
   address: string;
 }
 
-const getNymsFormated = (unyms: number) => {
+const getNymsFormated = (unyms: number): number => {
+  if (unyms === 0) {
+    return 0;
+  }
   const balance = unyms / 1000000;
   return balance;
 };
-const getPriceInUSD = (unyms: number, usdPrice: number) => {
+const getPriceInUSD = (unyms: number, usdPrice: number): number => {
+  if (unyms === 0) {
+    return 0;
+  }
   const balanceInUSD = (unyms / 1000000) * usdPrice;
   const balanceFormated = Number(balanceInUSD.toFixed(2));
   return balanceFormated;
 };
 
 const getAllocation = (unyms: number, totalUnyms: number): number => {
+  if (unyms === 0) {
+    return 0;
+  }
   const allocationPercentage = (unyms * 100) / totalUnyms;
   return Number(allocationPercentage.toFixed(2));
 };
@@ -38,13 +47,16 @@ const getAllocation = (unyms: number, totalUnyms: number): number => {
 const calculateStakingRewards = (
   accumulatedRewards: IRewardDetails[],
 ): number => {
-  const totalRewards = accumulatedRewards.reduce((total, rewardDetail) => {
-    return total + Number.parseFloat(rewardDetail.rewards.amount);
-  }, 0);
+  if (accumulatedRewards.length > 0) {
+    const totalRewards = accumulatedRewards.reduce((total, rewardDetail) => {
+      return total + Number.parseFloat(rewardDetail.rewards.amount);
+    }, 0);
 
-  const result = getNymsFormated(totalRewards);
+    const result = getNymsFormated(totalRewards);
 
-  return result;
+    return result;
+  }
+  return 0;
 };
 
 export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
@@ -69,6 +81,8 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
     queryFn: fetchNymPrice,
   });
 
+  console.log("accountInfo :>> ", accountInfo);
+
   if (isLoading || isLoadingPrice) {
     return (
       <ExplorerCard label="Total value">
@@ -97,15 +111,21 @@ export const AccountBalancesCard = (props: IAccountBalancesCardProps) => {
     Number(accountInfo.total_value.amount),
     nymPriceData,
   );
-  const spendableNYM = getNymsFormated(Number(accountInfo.balances[0].amount));
-  const spendableUSD = getPriceInUSD(
-    Number(accountInfo.balances[0].amount),
-    nymPriceData,
-  );
-  const spendableAllocation = getAllocation(
-    Number(accountInfo.balances[0].amount),
-    Number(accountInfo.total_value.amount),
-  );
+  const spendableNYM =
+    accountInfo.balances.length > 0
+      ? getNymsFormated(Number(accountInfo.balances[0].amount))
+      : 0;
+  const spendableUSD =
+    accountInfo.balances.length > 0
+      ? getPriceInUSD(Number(accountInfo.balances[0].amount), nymPriceData)
+      : 0;
+  const spendableAllocation =
+    accountInfo.balances.length > 0
+      ? getAllocation(
+          Number(accountInfo.balances[0].amount),
+          Number(accountInfo.total_value.amount),
+        )
+      : 0;
 
   const delegationsNYM = getNymsFormated(
     Number(accountInfo.total_delegations.amount),
diff --git a/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx b/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx
index f2c3583848..aab7ee18e6 100644
--- a/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx
+++ b/explorer-nextjs/src/components/accountPageComponents/AccountInfoCard.tsx
@@ -43,7 +43,8 @@ export const AccountInfoCard = (props: IAccountInfoCardProps) => {
     );
   }
 
-  const balance = Number(data.balances[0].amount) / 1000000;
+  const balance =
+    data.balances.length > 0 ? Number(data.balances[0].amount) / 1000000 : 0;
   const balanceFormated = `${balance} NYM`;
 
   return (