From 1ae8de2b83b0beac87249bd305af22e096e658ae Mon Sep 17 00:00:00 2001
From: evavirseda <evirseda@boxfish.studio>
Date: Fri, 27 Dec 2024 14:41:21 +0100
Subject: [PATCH] feat: add available staking in vesting view

---
 .../app/(protected)/vesting/page.tsx          | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx
index 33572a16dff..6c2eec1756a 100644
--- a/apps/wallet-dashboard/app/(protected)/vesting/page.tsx
+++ b/apps/wallet-dashboard/app/(protected)/vesting/page.tsx
@@ -33,6 +33,8 @@ import {
     Button,
     ButtonType,
     LoadingIndicator,
+    LabelText,
+    LabelTextSize,
 } from '@iota/apps-ui-kit';
 import {
     Theme,
@@ -150,6 +152,11 @@ export default function VestingDashboardPage(): JSX.Element {
         IOTA_TYPE_ARG,
     );
 
+    const [formattedAvailableStaking, availableStakingSymbol] = useFormatCoin(
+        supplyIncreaseVestingSchedule.availableStaking,
+        IOTA_TYPE_ARG,
+    );
+
     function handleOnSuccess(digest: string): void {
         setTimelockedObjectsToUnstake(null);
 
@@ -221,7 +228,7 @@ export default function VestingDashboardPage(): JSX.Element {
                     <Panel>
                         <Title title="Vesting" size={TitleSize.Medium} />
                         <div className="flex flex-col gap-md p-lg pt-sm">
-                            <div className="flex h-24 flex-row gap-4">
+                            <div className="flex h-24 flex-row gap-md">
                                 <DisplayStats
                                     label="Total Vested"
                                     value={formattedTotalVested}
@@ -320,8 +327,8 @@ export default function VestingDashboardPage(): JSX.Element {
                                 }
                             />
 
-                            <div className="flex flex-col px-lg py-sm">
-                                <div className="flex flex-row gap-md">
+                            <div className="flex flex-col gap-y-md px-lg py-sm">
+                                <div className="flex flex-row gap-x-md">
                                     <DisplayStats
                                         label="Your stake"
                                         value={`${totalStakedFormatted} ${totalStakedSymbol}`}
@@ -331,6 +338,21 @@ export default function VestingDashboardPage(): JSX.Element {
                                         value={`${totalEarnedFormatted} ${totalEarnedSymbol}`}
                                     />
                                 </div>
+                                <div className="flex w-full">
+                                    <Card type={CardType.Filled}>
+                                        <CardBody
+                                            title=""
+                                            subtitle={
+                                                <LabelText
+                                                    size={LabelTextSize.Large}
+                                                    label="Available for staking"
+                                                    text={formattedAvailableStaking}
+                                                    supportingLabel={availableStakingSymbol}
+                                                />
+                                            }
+                                        />
+                                    </Card>
+                                </div>
                             </div>
                             <div className="flex flex-col px-lg py-sm">
                                 <div className="flex w-full flex-col items-center justify-center space-y-4 pt-4">