feat(wallet-dashboard): style staked vesting overview

apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx

@@ -2,8 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { ArrowRight } from '@iota/ui-icons';
-import { Button, ButtonSize, ButtonType } from '@/components/atoms/button';
+import { Button, ButtonSize } from '@/components/atoms/button';
 import { CardActionType } from './card.enums';
+import { ButtonType } from '../../atoms/button';
 
 export type CardActionProps = {
     title?: string;
@@ -12,6 +13,7 @@ export type CardActionProps = {
     onClick?: () => void;
     icon?: React.ReactNode;
     iconAfterText?: boolean;
+    buttonType?: ButtonType;
 };
 
 export function CardAction({
@@ -21,6 +23,7 @@ export function CardAction({
     title,
     icon,
     iconAfterText,
+    buttonType,
 }: CardActionProps) {
     function handleActionClick(event: React.MouseEvent) {
         event?.stopPropagation();
@@ -58,7 +61,7 @@ export function CardAction({
         return (
             <div className="shrink-0">
                 <Button
-                    type={ButtonType.Outlined}
+                    type={buttonType || ButtonType.Outlined}
                     size={ButtonSize.Small}
                     text={title}
                     onClick={handleActionClick}

apps/wallet-dashboard/app/(protected)/vesting/page.tsx

@@ -3,7 +3,7 @@
 
 'use client';
 
-import { Button, TimelockedUnstakePopup } from '@/components';
+import { TimelockedUnstakePopup } from '@/components';
 import { useGetCurrentEpochStartTimestamp, useNotifications, usePopups } from '@/hooks';
 import {
     formatDelegatedTimelockedStake,
@@ -17,17 +17,35 @@ import { NotificationType } from '@/stores/notificationStore';
 import { useFeature } from '@growthbook/growthbook-react';
 import {
     Feature,
+    ImageIcon,
+    ImageIconSize,
     TIMELOCK_IOTA_TYPE,
+    useFormatCoin,
     useGetActiveValidatorsInfo,
     useGetAllOwnedObjects,
     useGetTimelockedStakedObjects,
     useUnlockTimelockedObjectsTransaction,
 } from '@iota/core';
 import { useCurrentAccount, useIotaClient, useSignAndExecuteTransaction } from '@iota/dapp-kit';
+import { Stake } from '@iota/ui-icons';
+import {
+    Panel,
+    Title,
+    DisplayStats,
+    Card,
+    CardImage,
+    CardBody,
+    CardAction,
+    CardActionType,
+    ImageShape,
+    CardType,
+    ButtonType,
+} from '@iota/apps-ui-kit';
 import { IotaValidatorSummary } from '@iota/iota-sdk/client';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
+import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 
 function VestingDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
@@ -44,6 +62,7 @@ function VestingDashboardPage(): JSX.Element {
     const { data: timelockedStakedObjects } = useGetTimelockedStakedObjects(account?.address || '');
     const { mutateAsync: signAndExecuteTransaction } = useSignAndExecuteTransaction();
 
+    console.log('dd', timelockedStakedObjects);
     const supplyIncreaseVestingEnabled = useFeature<boolean>(Feature.SupplyIncreaseVesting).value;
 
     const timelockedMapped = mapTimelockObjects(timelockedObjects || []);
@@ -62,6 +81,33 @@ function VestingDashboardPage(): JSX.Element {
             (activeValidator) => activeValidator.iotaAddress === validatorAddress,
         );
     }
+    const [totalVestedFormatted, totalVestedSymbol] = useFormatCoin(
+        vestingSchedule.totalVested,
+        IOTA_TYPE_ARG,
+    );
+    const [totalLockedFormatted, totalLockedSymbol] = useFormatCoin(
+        vestingSchedule.totalLocked,
+        IOTA_TYPE_ARG,
+    );
+    const [availableClaimingFormatted, availableClaimingSymbol] = useFormatCoin(
+        vestingSchedule.availableClaiming,
+        IOTA_TYPE_ARG,
+    );
+
+    const [availableStakingFormatted, availableStakingSymbol] = useFormatCoin(
+        vestingSchedule.availableStaking,
+        IOTA_TYPE_ARG,
+    );
+
+    const [totalStakedFormatted, totalStakedSymbol] = useFormatCoin(
+        vestingSchedule.totalStaked,
+        IOTA_TYPE_ARG,
+    );
+
+    const [totalUnlockedFormatted, totalUnlockedSymbol] = useFormatCoin(
+        vestingSchedule.totalUnlocked,
+        IOTA_TYPE_ARG,
+    );
 
     const unlockedTimelockedObjects = timelockedMapped?.filter((timelockedObject) =>
         isTimelockedUnlockable(timelockedObject, Number(currentEpochMs)),
@@ -142,81 +188,155 @@ function VestingDashboardPage(): JSX.Element {
     }, [router, supplyIncreaseVestingEnabled]);
 
     return (
-        <div className="flex flex-row">
-            <div className="flex w-1/2 flex-col items-center justify-center space-y-4 pt-12">
-                <h1>VESTING</h1>
-                <div className="flex flex-row space-x-4">
-                    <div className="flex flex-col items-center rounded-lg border p-4">
-                        <span>Total Vested</span>
-                        <span>{vestingSchedule.totalVested}</span>
+        <div className="flex flex-row gap-lg">
+            <Panel>
+                <Title title="Vesting" />
+                <div className="flex flex-col gap-md px-lg py-sm">
+                    <div className="flex flex-row gap-md">
+                        <DisplayStats
+                            label="Total Vested"
+                            value={`${totalVestedFormatted} ${totalVestedSymbol}`}
+                        />
+                        <DisplayStats
+                            label="Total Locked"
+                            value={`${totalLockedFormatted} ${totalLockedSymbol}`}
+                        />
                     </div>
-                    <div className="flex flex-col items-center rounded-lg border p-4">
-                        <span>Total Locked</span>
-                        <span>{vestingSchedule.totalLocked}</span>
-                    </div>
-                </div>
-                <hr />
-                <div className="flex flex-row space-x-4">
-                    <div className="flex flex-col items-center rounded-lg border p-4">
-                        <span>Available Claiming</span>
-                        <span>{vestingSchedule.availableClaiming}</span>
+                    <div className="mt-md flex flex-row gap-md">
+                        <DisplayStats
+                            label="Available Claiming"
+                            value={`${availableClaimingFormatted} ${availableClaimingSymbol}`}
+                        />
+                        <DisplayStats
+                            label="Available Staking"
+                            value={`${availableStakingFormatted} ${availableStakingSymbol}`}
+                        />
                     </div>
-                    <div className="flex flex-col items-center rounded-lg border p-4">
-                        <span>Available Staking</span>
-                        <span>{vestingSchedule.availableStaking}</span>
+
+                    <div className="">
+                        {account?.address && vestingSchedule.availableClaiming ? (
+                            <Card type={CardType.Outlined}>
+                                <CardImage shape={ImageShape.SquareRounded}>
+                                    <Stake />
+                                </CardImage>
+                                <CardBody
+                                    title={`${availableClaimingFormatted} ${availableClaimingSymbol}`}
+                                    subtitle={`Available Rewards`}
+                                    isTextTruncated
+                                />
+                                <CardAction
+                                    buttonType={ButtonType.Primary}
+                                    type={CardActionType.Button}
+                                    title="Collect"
+                                    onClick={handleCollect}
+                                />
+                            </Card>
+                        ) : null}
                     </div>
                 </div>
-            </div>
-            <div className="flex w-1/2 flex-col items-center justify-center space-y-4 pt-12">
-                <h1>Staked Vesting</h1>
-                <div className="flex flex-row space-x-4">
-                    <div className="flex flex-col items-center rounded-lg border p-4">
-                        <span>Your stake</span>
-                        <span>{vestingSchedule.totalStaked}</span>
+            </Panel>
+            <Panel>
+                <Title title="Staked Vesting" />
+                <div className="flex flex-col px-lg py-sm">
+                    <div className="flex flex-row gap-md">
+                        <DisplayStats
+                            label="Your stake"
+                            value={`${totalStakedFormatted} ${totalStakedSymbol}`}
+                        />
+                        <DisplayStats
+                            label="Total Unlocked"
+                            value={`${totalUnlockedFormatted} ${totalUnlockedSymbol}`}
+                        />
                     </div>
-                    <div className="flex flex-col items-center rounded-lg border p-4">
-                        <span>Total Unlocked</span>
-                        <span>{vestingSchedule.totalUnlocked}</span>
-                    </div>
-                </div>
-                <div className="flex w-full flex-col items-center justify-center space-y-4 pt-4">
-                    {timelockedStakedObjectsGrouped?.map((timelockedStakedObject) => {
-                        return (
-                            <div
-                                key={
-                                    timelockedStakedObject.validatorAddress +
-                                    timelockedStakedObject.stakeRequestEpoch +
-                                    timelockedStakedObject.label
-                                }
-                                className="flex w-full flex-row items-center justify-center space-x-4"
-                            >
-                                <span>
-                                    Validator:{' '}
-                                    {getValidatorByAddress(timelockedStakedObject.validatorAddress)
-                                        ?.name || timelockedStakedObject.validatorAddress}
-                                </span>
-                                <span>
-                                    Stake Request Epoch: {timelockedStakedObject.stakeRequestEpoch}
-                                </span>
-                                <span>Stakes: {timelockedStakedObject.stakes.length}</span>
-
-                                <Button onClick={() => handleUnstake(timelockedStakedObject)}>
-                                    Unstake
-                                </Button>
-                            </div>
-                        );
-                    })}
                 </div>
-                {account?.address && (
-                    <div className="flex flex-row space-x-4">
-                        {vestingSchedule.availableClaiming ? (
-                            <Button onClick={handleCollect}>Collect</Button>
-                        ) : null}
+                <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">
+                        {timelockedStakedObjectsGrouped?.map((timelockedStakedObject) => {
+                            return (
+                                <TimelockedStakedObject
+                                    key={
+                                        timelockedStakedObject.validatorAddress +
+                                        timelockedStakedObject.stakeRequestEpoch +
+                                        timelockedStakedObject.label
+                                    }
+                                    getValidatorByAddress={getValidatorByAddress}
+                                    timelockedStakedObject={timelockedStakedObject}
+                                    handleUnstake={handleUnstake}
+                                />
+                            );
+                        })}
                     </div>
-                )}
-            </div>
+                </div>
+            </Panel>
         </div>
     );
 }
 
+interface TimelockedStakedObjectProps {
+    timelockedStakedObject: TimelockedStakedObjectsGrouped;
+    handleUnstake: (timelockedStakedObject: TimelockedStakedObjectsGrouped) => void;
+    getValidatorByAddress: (validatorAddress: string) => IotaValidatorSummary | undefined;
+}
+function TimelockedStakedObject({
+    getValidatorByAddress,
+    timelockedStakedObject,
+    handleUnstake,
+}: TimelockedStakedObjectProps) {
+    const name =
+        getValidatorByAddress(timelockedStakedObject.validatorAddress)?.name ||
+        timelockedStakedObject.validatorAddress;
+    const sum = timelockedStakedObject.stakes.reduce(
+        (acc, stake) => {
+            const estimatedReward = stake.status === 'Active' ? stake.estimatedReward : 0;
+
+            return {
+                principal: Number(stake.principal) + acc.principal,
+                estimatedReward: Number(estimatedReward) + acc.estimatedReward,
+            };
+        },
+        {
+            principal: 0,
+            estimatedReward: 0,
+        },
+    );
+
+    const [sumPrincipalFormatted, sumPrincipalSymbol] = useFormatCoin(sum.principal, IOTA_TYPE_ARG);
+    const [estimatedRewardFormatted, estimatedRewardSymbol] = useFormatCoin(
+        sum.estimatedReward,
+        IOTA_TYPE_ARG,
+    );
+
+    const supportingText = (() => {
+        if (timelockedStakedObject.stakes.every((s) => s.status === 'Active')) {
+            return {
+                title: 'Estimated Reward',
+                subtitle: `${estimatedRewardFormatted} ${estimatedRewardSymbol}`,
+            };
+        }
+
+        return {
+            title: 'Stake Request Epoch',
+            subtitle: timelockedStakedObject.stakeRequestEpoch,
+        };
+    })();
+
+    return (
+        <Card onClick={() => handleUnstake(timelockedStakedObject)}>
+            <CardImage>
+                <ImageIcon src={null} label={name} fallback={name} size={ImageIconSize.Large} />
+            </CardImage>
+            <CardBody
+                title={name}
+                subtitle={`${sumPrincipalFormatted} ${sumPrincipalSymbol}`}
+                isTextTruncated
+            />
+            <CardAction
+                type={CardActionType.SupportingText}
+                title={supportingText.title}
+                subtitle={supportingText.subtitle}
+            />
+        </Card>
+    );
+}
+
 export default VestingDashboardPage;