feat(wallet-dashboard): polish homepage scroll

apps/core/src/hooks/useCountdownByTimestamp.ts

@@ -9,7 +9,13 @@ import {
     MILLISECONDS_PER_SECOND,
 } from '../constants';
 
-export function useCountdownByTimestamp(initialTimestamp: number | null): string {
+export function useCountdownByTimestamp(
+    initialTimestamp: number | null,
+    showSeconds = true,
+    showMinutes = true,
+    showHours = true,
+    showDays = true,
+): string {
     const [timeRemainingMs, setTimeRemainingMs] = useState<number>(0);
 
     useEffect(() => {
@@ -22,11 +28,23 @@ export function useCountdownByTimestamp(initialTimestamp: number | null): string
 
         return () => clearInterval(interval);
     }, [initialTimestamp]);
-    const formattedCountdown = formatCountdown(timeRemainingMs);
+    const formattedCountdown = formatCountdown(
+        timeRemainingMs,
+        showSeconds,
+        showMinutes,
+        showHours,
+        showDays,
+    );
     return formattedCountdown;
 }
 
-function formatCountdown(totalMilliseconds: number) {
+function formatCountdown(
+    totalMilliseconds: number,
+    showSeconds: boolean,
+    showMinutes: boolean,
+    showHours: boolean,
+    showDays: boolean,
+) {
     const days = Math.floor(totalMilliseconds / MILLISECONDS_PER_DAY);
     const hours = Math.floor((totalMilliseconds % MILLISECONDS_PER_DAY) / MILLISECONDS_PER_HOUR);
     const minutes = Math.floor(
@@ -36,11 +54,11 @@ function formatCountdown(totalMilliseconds: number) {
         (totalMilliseconds % MILLISECONDS_PER_MINUTE) / MILLISECONDS_PER_SECOND,
     );
 
-    const timeUnits = [];
-    if (days > 0) timeUnits.push(`${days}d`);
-    if (hours > 0) timeUnits.push(`${hours}h`);
-    if (minutes > 0) timeUnits.push(`${minutes}m`);
-    if (seconds > 0 || timeUnits.length === 0) timeUnits.push(`${seconds}s`);
+    const timeUnits: string[] = [];
+    if (showDays && days > 0) timeUnits.push(`${days}d`);
+    if (showHours && hours > 0) timeUnits.push(`${hours}h`);
+    if (showMinutes && minutes > 0) timeUnits.push(`${minutes}m`);
+    if (showSeconds && (seconds > 0 || timeUnits.length === 0)) timeUnits.push(`${seconds}s`);
 
     return timeUnits.join(' ');
 }

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

@@ -8,6 +8,7 @@ import {
     TransactionsOverview,
     StakingOverview,
     MigrationOverview,
+    SupplyIncreaseVestingOverview,
 } from '@/components';
 import { useFeature } from '@growthbook/growthbook-react';
 import { Feature } from '@iota/core';
@@ -18,25 +19,24 @@ function HomeDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
 
     const stardustMigrationEnabled = useFeature<boolean>(Feature.StardustMigration).value;
+    const supplyIncreaseVestingEnabled = useFeature<boolean>(Feature.SupplyIncreaseVesting).value;
 
     return (
         <main className="flex flex-1 flex-col items-center space-y-8 py-md">
             {connectionStatus === 'connected' && account && (
                 <>
-                    <div className="home-page-grid-container h-full w-full">
+                    <div className="home-page-grid-container w-full content-start">
                         <div style={{ gridArea: 'balance' }} className="flex grow overflow-hidden">
                             <AccountBalance />
                         </div>
                         <div style={{ gridArea: 'staking' }} className="flex grow overflow-hidden">
                             <StakingOverview />
                         </div>
                         {stardustMigrationEnabled && <MigrationOverview />}
-                        <div style={{ gridArea: 'coins' }}>
+                        <div style={{ gridArea: 'coins' }} className="flex grow overflow-hidden">
                             <MyCoins />
                         </div>
-                        <div style={{ gridArea: 'vesting' }} className="flex grow overflow-hidden">
-                            Vesting
-                        </div>
+                        {supplyIncreaseVestingEnabled && <SupplyIncreaseVestingOverview />}
                         <div style={{ gridArea: 'activity' }} className="flex grow overflow-hidden">
                             <TransactionsOverview />
                         </div>

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

@@ -11,17 +11,8 @@ import {
     useStakeDialog,
     VestingScheduleDialog,
 } from '@/components';
-import { useGetCurrentEpochStartTimestamp, useNotifications, usePopups } from '@/hooks';
-import {
-    buildSupplyIncreaseVestingSchedule,
-    formatDelegatedTimelockedStake,
-    getLatestOrEarliestSupplyIncreaseVestingPayout,
-    getVestingOverview,
-    groupTimelockedStakedObjects,
-    isTimelockedUnlockable,
-    mapTimelockObjects,
-    TimelockedStakedObjectsGrouped,
-} from '@/lib/utils';
+import { useGetSupplyIncreaseVestingObjects, useNotifications, usePopups } from '@/hooks';
+import { groupTimelockedStakedObjects, TimelockedStakedObjectsGrouped } from '@/lib/utils';
 import { NotificationType } from '@/stores/notificationStore';
 import { useFeature } from '@growthbook/growthbook-react';
 import {
@@ -47,10 +38,7 @@ import {
     TIMELOCK_IOTA_TYPE,
     useFormatCoin,
     useGetActiveValidatorsInfo,
-    useGetAllOwnedObjects,
-    useGetTimelockedStakedObjects,
     useTheme,
-    useUnlockTimelockedObjectsTransaction,
     useCountdownByTimestamp,
     Feature,
 } from '@iota/core';
@@ -70,22 +58,15 @@ import { StakedTimelockObject } from '@/components';
 
 function VestingDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
+    const address = account?.address || '';
     const queryClient = useQueryClient();
     const iotaClient = useIotaClient();
     const router = useRouter();
     const { data: system } = useIotaClientQuery('getLatestIotaSystemState');
     const [isVestingScheduleDialogOpen, setIsVestingScheduleDialogOpen] = useState(false);
     const { addNotification } = useNotifications();
     const { openPopup, closePopup } = usePopups();
-    const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp();
     const { data: activeValidators } = useGetActiveValidatorsInfo();
-    const { data: timelockedObjects } = useGetAllOwnedObjects(account?.address || '', {
-        StructType: TIMELOCK_IOTA_TYPE,
-    });
-
-    const { data: timelockedStakedObjects, isLoading: istimelockedStakedObjectsLoading } =
-        useGetTimelockedStakedObjects(account?.address || '');
-
     const { mutateAsync: signAndExecuteTransaction } = useSignAndExecuteTransaction();
     const { theme } = useTheme();
 
@@ -96,16 +77,18 @@ function VestingDashboardPage(): JSX.Element {
 
     const supplyIncreaseVestingEnabled = useFeature<boolean>(Feature.SupplyIncreaseVesting).value;
 
-    const timelockedMapped = mapTimelockObjects(timelockedObjects || []);
-    const timelockedstakedMapped = formatDelegatedTimelockedStake(timelockedStakedObjects || []);
+    const {
+        nextPayout,
+        supplyIncreaseVestingPortfolio,
+        supplyIncreaseVestingSchedule,
+        supplyIncreaseVestingMapped,
+        supplyIncreaseVestingStakedMapped,
+        isTimelockedStakedObjectsLoading,
+        unlockAllsupplyIncreaseVesting,
+    } = useGetSupplyIncreaseVestingObjects(address);
 
     const timelockedStakedObjectsGrouped: TimelockedStakedObjectsGrouped[] =
-        groupTimelockedStakedObjects(timelockedstakedMapped || []);
-
-    const vestingSchedule = getVestingOverview(
-        [...timelockedMapped, ...timelockedstakedMapped],
-        Number(currentEpochMs),
-    );
+        groupTimelockedStakedObjects(supplyIncreaseVestingStakedMapped || []);
 
     const {
         isDialogStakeOpen,
@@ -118,37 +101,32 @@ function VestingDashboardPage(): JSX.Element {
         handleNewStake,
     } = useStakeDialog();
 
-    const nextPayout = getLatestOrEarliestSupplyIncreaseVestingPayout(
-        [...timelockedMapped, ...timelockedstakedMapped],
-        Number(currentEpochMs),
-        false,
-    );
-
-    const lastPayout = getLatestOrEarliestSupplyIncreaseVestingPayout(
-        [...timelockedMapped, ...timelockedstakedMapped],
-        Number(currentEpochMs),
-        true,
-    );
-
-    const vestingPortfolio =
-        lastPayout && buildSupplyIncreaseVestingSchedule(lastPayout, Number(currentEpochMs));
-
     const formattedLastPayoutExpirationTime = useCountdownByTimestamp(
         Number(nextPayout?.expirationTimestampMs),
     );
 
     const [formattedTotalVested, vestedSymbol] = useFormatCoin(
-        vestingSchedule.totalVested,
+        supplyIncreaseVestingSchedule.totalVested,
         IOTA_TYPE_ARG,
     );
 
     const [formattedTotalLocked, lockedSymbol] = useFormatCoin(
-        vestingSchedule.totalLocked,
+        supplyIncreaseVestingSchedule.totalLocked,
         IOTA_TYPE_ARG,
     );
 
     const [formattedAvailableClaiming, availableClaimingSymbol] = useFormatCoin(
-        vestingSchedule.availableClaiming,
+        supplyIncreaseVestingSchedule.availableClaiming,
+        IOTA_TYPE_ARG,
+    );
+
+    const [totalStakedFormatted, totalStakedSymbol] = useFormatCoin(
+        supplyIncreaseVestingSchedule.totalStaked,
+        IOTA_TYPE_ARG,
+    );
+
+    const [totalEarnedFormatted, totalEarnedSymbol] = useFormatCoin(
+        supplyIncreaseVestingSchedule.totalEarned,
         IOTA_TYPE_ARG,
     );
 
@@ -163,26 +141,6 @@ function VestingDashboardPage(): JSX.Element {
         );
     }
 
-    const [totalStakedFormatted, totalStakedSymbol] = useFormatCoin(
-        vestingSchedule.totalStaked,
-        IOTA_TYPE_ARG,
-    );
-
-    const [totalEarnedFormatted, totalEarnedSymbol] = useFormatCoin(
-        vestingSchedule.totalEarned,
-        IOTA_TYPE_ARG,
-    );
-
-    const unlockedTimelockedObjects = timelockedMapped?.filter((timelockedObject) =>
-        isTimelockedUnlockable(timelockedObject, Number(currentEpochMs)),
-    );
-    const unlockedTimelockedObjectIds: string[] =
-        unlockedTimelockedObjects.map((timelocked) => timelocked.id.id) || [];
-    const { data: unlockAllTimelockedObjects } = useUnlockTimelockedObjectsTransaction(
-        account?.address || '',
-        unlockedTimelockedObjectIds,
-    );
-
     function handleOnSuccess(digest: string): void {
         iotaClient
             .waitForTransaction({
@@ -205,13 +163,13 @@ function VestingDashboardPage(): JSX.Element {
     }
 
     const handleCollect = () => {
-        if (!unlockAllTimelockedObjects?.transactionBlock) {
+        if (!unlockAllsupplyIncreaseVesting?.transactionBlock) {
             addNotification('Failed to create a Transaction', NotificationType.Error);
             return;
         }
         signAndExecuteTransaction(
             {
-                transaction: unlockAllTimelockedObjects.transactionBlock,
+                transaction: unlockAllsupplyIncreaseVesting.transactionBlock,
             },
             {
                 onSuccess: (tx) => {
@@ -255,7 +213,7 @@ function VestingDashboardPage(): JSX.Element {
         }
     }, [router, supplyIncreaseVestingEnabled]);
 
-    if (istimelockedStakedObjectsLoading) {
+    if (isTimelockedStakedObjectsLoading) {
         return (
             <div className="flex w-full max-w-4xl items-start justify-center justify-self-center">
                 <LoadingIndicator />
@@ -297,8 +255,8 @@ function VestingDashboardPage(): JSX.Element {
                                 title="Collect"
                                 buttonType={ButtonType.Primary}
                                 buttonDisabled={
-                                    !vestingSchedule.availableClaiming ||
-                                    vestingSchedule.availableClaiming === 0n
+                                    !supplyIncreaseVestingSchedule.availableClaiming ||
+                                    supplyIncreaseVestingSchedule.availableClaiming === 0n
                                 }
                             />
                         </Card>
@@ -319,20 +277,20 @@ function VestingDashboardPage(): JSX.Element {
                                 onClick={openReceiveTokenPopup}
                                 title="See All"
                                 buttonType={ButtonType.Secondary}
-                                buttonDisabled={!vestingPortfolio}
+                                buttonDisabled={!supplyIncreaseVestingPortfolio}
                             />
                         </Card>
-                        {vestingPortfolio && (
+                        {supplyIncreaseVestingPortfolio && (
                             <VestingScheduleDialog
                                 open={isVestingScheduleDialogOpen}
                                 setOpen={setIsVestingScheduleDialogOpen}
-                                vestingPortfolio={vestingPortfolio}
+                                vestingPortfolio={supplyIncreaseVestingPortfolio}
                             />
                         )}
                     </div>
                 </Panel>
 
-                {timelockedstakedMapped.length === 0 ? (
+                {supplyIncreaseVestingMapped.length === 0 ? (
                     <Banner
                         videoSrc={videoSrc}
                         title="Stake Vested Tokens"
@@ -343,7 +301,7 @@ function VestingDashboardPage(): JSX.Element {
                 ) : null}
             </div>
 
-            {timelockedstakedMapped.length !== 0 ? (
+            {supplyIncreaseVestingStakedMapped.length !== 0 ? (
                 <div className="flex w-full md:w-1/2">
                     <Panel>
                         <Title
@@ -406,7 +364,7 @@ function VestingDashboardPage(): JSX.Element {
                 setView={setStakeDialogView}
                 selectedValidator={selectedValidator}
                 setSelectedValidator={setSelectedValidator}
-                maxStakableTimelockedAmount={BigInt(vestingSchedule.availableStaking)}
+                maxStakableTimelockedAmount={BigInt(supplyIncreaseVestingSchedule.availableStaking)}
             />
         </div>
     );