Account page details updates

components/account/AccountBalanceCard.tsx

-import { ReactNode, Fragment } from "react";
+import { Fragment, useState } from "react";
+import { ArrowDown, ArrowUp } from "lucide-react";
 
 import { Card, CardContent, CardHeader } from "../ui/card";
 import { Table, TableBody, TableCell, TableRow } from "../ui/table";
-import { VEST_HP_KEYS_MAP } from "@/hooks/common/useConvertedAccountDetails";
 import VestsTooltip from "../VestsTooltip";
 import Explorer from "@/types/Explorer";
 import { changeHBDToDollarsDisplay } from "@/utils/StringUtils";
+import { cn } from "@/lib/utils";
 
 type AccountBalanceCardProps = {
   header: string;
@@ -26,42 +27,72 @@ const cardNameMap = new Map([
   ["vesting_withdraw_rate", "Powering down HP"],
 ]);
 
-
+const unclaimedRecourses = new Map([
+  ["reward_hbd_balance", "HBD Unclaimed"],
+  ["reward_hive_balance", "HIVE Unclaimed"],
+  ["reward_vesting_balance", "HP Unclaimed"],
+]);
 
 const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
   header,
   userDetails,
 }) => {
-
-  const keys = Object.keys(userDetails) as (keyof Explorer.AccountDetailsDollars)[];
+  const keys = Object.keys(
+    userDetails
+  ) as (keyof Explorer.AccountDetailsDollars)[];
 
   const renderKey = (key: keyof Explorer.FormattedAccountDetails) => {
     if (Object.keys(userDetails.vests).includes(key)) {
-      const vestKey = key as keyof Explorer.AccountDetailsVests
-      const vestValue = userDetails.vests[vestKey]
-      return <VestsTooltip tooltipTrigger={userDetails[key] as string} tooltipContent={vestValue } />
+      const vestKey = key as keyof Explorer.AccountDetailsVests;
+      const vestValue = userDetails.vests[vestKey];
+
+      return (
+        <VestsTooltip
+          tooltipTrigger={userDetails[key] as string}
+          tooltipContent={vestValue}
+        />
+      );
     }
-    return <>{userDetails[key]}</>;
+    return <>{userDetails[key]} </>;
   };
 
+  const [isBalancesHidden, setIsBalancesHidden] = useState(false);
+
   const buildTableBody = (
-    parameters: (keyof Explorer.AccountDetailsDollars)[],
+    parameters: (keyof Explorer.AccountDetailsDollars)[]
   ) => {
-    return parameters.map((param: keyof Explorer.AccountDetailsDollars, index: number) => {
-      if (cardNameMap.has(param)) {
-        return (
-          <Fragment key={index}>
-            <TableRow className="border-b border-gray-700 hover:bg-inherit">
-              <TableCell>{cardNameMap.get(param)}</TableCell>
-              <TableCell className="text-right">{renderKey(param as keyof Explorer.FormattedAccountDetails)}</TableCell>
-              <TableCell className="text-right">{changeHBDToDollarsDisplay(userDetails.dollars[param])}</TableCell>
-            </TableRow>
-          </Fragment>
-        );
+    return parameters.map(
+      (param: keyof Explorer.AccountDetailsDollars, index: number) => {
+        if (cardNameMap.has(param)) {
+          const hasUnclaimedResources =
+            unclaimedRecourses.has(param) &&
+            Number(userDetails[param].split(" ")[0]);
+
+          return (
+            <Fragment key={index}>
+              <TableRow
+                className={cn("border-b border-gray-700 hover:bg-inherit", {
+                  "bg-explorer-orange": hasUnclaimedResources,
+                })}
+              >
+                <TableCell>{cardNameMap.get(param)}</TableCell>
+                <TableCell className="text-right">
+                  {renderKey(param as keyof Explorer.FormattedAccountDetails)}
+                </TableCell>
+                <TableCell className="text-right">
+                  {changeHBDToDollarsDisplay(userDetails.dollars[param])}
+                </TableCell>
+              </TableRow>
+            </Fragment>
+          );
+        }
       }
-    });
+    );
   };
 
+  const handleBalancesVisibility = () => {
+    setIsBalancesHidden(!isBalancesHidden);
+  };
 
   return (
     <Card
@@ -69,11 +100,18 @@ const AccountBalanceCard: React.FC<AccountBalanceCardProps> = ({
       className="overflow-hidden pb-0"
     >
       <CardHeader className="p-0">
-        <div className="flex justify-between align-center p-2 hover:bg-slate-600 cursor-pointer px-4">
+        <div
+          onClick={handleBalancesVisibility}
+          className="flex justify-between align-center p-2 hover:bg-slate-600 cursor-pointer px-4"
+        >
           <div className="text-lg">{header}</div>
+          {isBalancesHidden ? <ArrowDown /> : <ArrowUp />}
         </div>
       </CardHeader>
-      <CardContent data-testid="card-content">
+      <CardContent
+        hidden={isBalancesHidden}
+        data-testid="card-content"
+      >
         <Table>
           <TableBody>{buildTableBody(keys)}</TableBody>
         </Table>

components/account/AccountDetailsCard.tsx

@@ -6,7 +6,6 @@ import { Card, CardContent, CardHeader } from "../ui/card";
 import { Table, TableBody, TableCell, TableRow } from "../ui/table";
 import CopyToKeyboard from "../CopyToKeyboard";
 import VestsTooltip from "../VestsTooltip";
-import Explorer from "@/types/Explorer";
 
 type AccountDetailsCardProps = {
   header: string;
@@ -20,7 +19,18 @@ const EXCLUDE_KEYS = [
   "profile_image",
   "dollars",
   "vests",
-  "vesting_balance"
+  "vesting_balance",
+  "hbd_balance",
+  "hbd_saving_balance",
+  "reward_hbd_balance",
+  "balance",
+  "savings_balance",
+  "reward_hive_balance",
+  "vesting_shares",
+  "reward_vesting_balance",
+  "received_vesting_shares",
+  "delegated_vesting_shares",
+  "vesting_withdraw_rate",
 ];
 
 const LINK_KEYS = ["recovery_account", "reset_account"];
@@ -86,7 +96,9 @@ const AccountDetailsCard: React.FC<AccountDetailsCardProps> = ({
     keys: string[],
   ) => {
     return keys.map((key, index) => {
-      if (EXCLUDE_KEYS.includes(key)) {
+      const isZeroValue = userDetails[key] === 0 || userDetails[key] === "0";
+
+      if (EXCLUDE_KEYS.includes(key) || isZeroValue) {
         return null;
       } else {
         return (