feat(wallet-dashboard): hook timelocked staking feature

apps/core/src/utils/stake/createTimelockedStakeTransaction.ts

@@ -0,0 +1,78 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { TransactionBlock, TransactionObjectArgument } from '@iota/iota-sdk/transactions';
+import { IOTA_SYSTEM_STATE_OBJECT_ID, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+
+export interface ExtendedTimelockObject {
+    objectId: string;
+    expirationTimestamp: string;
+    totalLockedAmount: bigint;
+    objectIds: string[];
+    label?: string;
+    splitAmount?: bigint;
+}
+
+export function createTimelockedStakeTransaction(
+    timelockedObjects: ExtendedTimelockObject[],
+    validatorAddress: string,
+) {
+    const tx = new TransactionBlock();
+    /**
+     * Create tranasctions to merge timelocked objects that need merging
+     */
+    const mergeObjects = timelockedObjects.filter((obj) => obj.objectIds.length > 1);
+
+    for (const mergeObject of mergeObjects) {
+        // create an array of objectIds to be merged without the first element because first element is the principal object and its id is contained in mergeObject.objectId
+        const mergeObjectIds = mergeObject.objectIds
+            .slice(1)
+            .map((objectId) => tx.object(objectId));
+        tx.moveCall({
+            target: `0x02::timelock::join_vec`,
+            typeArguments: [`${IOTA_TYPE_ARG}`],
+            arguments: [
+                tx.object(mergeObject.objectId),
+                tx.makeMoveVec({ objects: mergeObjectIds }),
+            ],
+        });
+    }
+    /**
+     * Create transactions to split timelocked objects that need splitting.
+     */
+    const splitTimelockedObjects: ExtendedTimelockObject[] = timelockedObjects.filter(
+        (obj) => obj.splitAmount !== undefined && obj.splitAmount > 0,
+    );
+    const splitTimelockedObjectTransactions: TransactionObjectArgument[] = [];
+    splitTimelockedObjects.forEach((obj) => {
+        const [splitTx] = tx.moveCall({
+            target: `0x02::timelock::split`,
+            typeArguments: [`${IOTA_TYPE_ARG}`],
+            arguments: [tx.object(obj.objectId), tx.pure.u64(obj.splitAmount!)],
+        });
+        splitTimelockedObjectTransactions.push(tx.object(splitTx));
+    });
+
+    /**
+     * Create transactions to stake the timelocked objects
+     */
+    const stakingReadyObjects = timelockedObjects
+        .filter((obj) => obj.splitAmount === undefined || obj.splitAmount === BigInt(0))
+        .map((obj) => tx.object(obj.objectId));
+    tx.moveCall({
+        target: `0x3::timelocked_staking::request_add_stake_mul_bal`,
+        arguments: [
+            tx.sharedObjectRef({
+                objectId: IOTA_SYSTEM_STATE_OBJECT_ID,
+                initialSharedVersion: 1,
+                mutable: true,
+            }),
+            tx.makeMoveVec({
+                objects: [...splitTimelockedObjectTransactions, ...stakingReadyObjects],
+            }),
+            tx.pure.address(validatorAddress),
+        ],
+    });
+
+    return tx;
+}

apps/core/src/utils/stake/createTimelockedUnstakeTransaction.ts

@@ -0,0 +1,25 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { TransactionBlock } from '@iota/iota-sdk/transactions';
+import { IOTA_SYSTEM_STATE_OBJECT_ID } from '@iota/iota-sdk/utils';
+
+export function createTimelockedUnstakeTransaction(timelockedStakedObjectIds: string[]) {
+    const tx = new TransactionBlock();
+    // TODO: check the max tx limit per ptb
+    for (const timelockedStakedObjectId of timelockedStakedObjectIds) {
+        tx.moveCall({
+            target: `0x3::timelocked_staking::request_withdraw_stake`,
+            arguments: [
+                tx.sharedObjectRef({
+                    objectId: IOTA_SYSTEM_STATE_OBJECT_ID,
+                    initialSharedVersion: 1,
+                    mutable: true,
+                }),
+                tx.object(timelockedStakedObjectId),
+            ],
+        });
+    }
+
+    return tx;
+}

apps/core/src/utils/stake/index.ts

@@ -4,3 +4,5 @@
 export * from './createUnstakeTransaction';
 export * from './formatDelegatedStake';
 export * from './createStakeTransaction';
+export * from './createTimelockedUnstakeTransaction';
+export * from './createTimelockedStakeTransaction';

apps/wallet-dashboard/app/dashboard/vesting/page.tsx

@@ -3,8 +3,8 @@
 
 'use client';
 
-import { Button } from '@/components';
-import { useGetCurrentEpochStartTimestamp, useNotifications } from '@/hooks';
+import { Button, NewStakePopup, TimelockedUnstakePopup } from '@/components';
+import { useGetCurrentEpochStartTimestamp, useNotifications, usePopups } from '@/hooks';
 import {
     formatDelegatedTimelockedStake,
     getVestingOverview,
@@ -26,14 +26,15 @@ import {
     useIotaClient,
     useSignAndExecuteTransactionBlock,
 } from '@iota/dapp-kit';
+import { IotaValidatorSummary } from '@iota/iota-sdk/client';
 import { useQueryClient } from '@tanstack/react-query';
 
 function VestingDashboardPage(): JSX.Element {
     const account = useCurrentAccount();
     const queryClient = useQueryClient();
     const iotaClient = useIotaClient();
-
     const { addNotification } = useNotifications();
+    const { openPopup, closePopup } = usePopups();
     const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp();
     const { data: activeValidators } = useGetActiveValidatorsInfo();
     const { data: timelockedObjects } = useGetAllOwnedObjects(account?.address || '', {
@@ -53,11 +54,9 @@ function VestingDashboardPage(): JSX.Element {
         Number(currentEpochMs),
     );
 
-    function getValidatorName(validatorAddress: string): string {
-        return (
-            activeValidators?.find(
-                (activeValidator) => activeValidator.iotaAddress === validatorAddress,
-            )?.name || validatorAddress
+    function getValidatorByAddress(validatorAddress: string): IotaValidatorSummary | undefined {
+        return activeValidators?.find(
+            (activeValidator) => activeValidator.iotaAddress === validatorAddress,
         );
     }
 
@@ -78,7 +77,7 @@ function VestingDashboardPage(): JSX.Element {
             })
             .then(() => {
                 queryClient.invalidateQueries({
-                    queryKey: ['get-staked-timelocked-objects', account?.address],
+                    queryKey: ['get-timelocked-staked-objects', account?.address],
                 });
                 queryClient.invalidateQueries({
                     queryKey: [
@@ -114,13 +113,29 @@ function VestingDashboardPage(): JSX.Element {
                 addNotification('Collect transaction was not sent', NotificationType.Error);
             });
     };
-    const handleStake = () => {
-        console.log('Stake');
-    };
 
     function handleUnstake(delegatedTimelockedStake: TimelockedStakedObjectsGrouped): void {
-        // TODO: handle unstake logic
-        console.info('delegatedTimelockedStake', delegatedTimelockedStake);
+        const validatorInfo = getValidatorByAddress(delegatedTimelockedStake.validatorAddress);
+        if (!account || !validatorInfo) {
+            addNotification('Cannot create transaction', NotificationType.Error);
+            return;
+        }
+
+        openPopup(
+            <TimelockedUnstakePopup
+                accountAddress={account.address}
+                delegatedStake={delegatedTimelockedStake}
+                validatorInfo={validatorInfo}
+                closePopup={closePopup}
+                onSuccess={handleOnSuccess}
+            />,
+        );
+    }
+
+    function handleStake(): void {
+        openPopup(
+            <NewStakePopup onClose={closePopup} onSuccess={handleOnSuccess} isTimelockedStaking />,
+        );
     }
 
     return (
@@ -146,6 +161,7 @@ function VestingDashboardPage(): JSX.Element {
                     <div className="flex flex-col items-center rounded-lg border p-4">
                         <span>Available Staking</span>
                         <span>{vestingSchedule.availableStaking}</span>
+                        <Button onClick={() => handleStake()}>Stake</Button>
                     </div>
                 </div>
             </div>
@@ -174,7 +190,8 @@ function VestingDashboardPage(): JSX.Element {
                             >
                                 <span>
                                     Validator:{' '}
-                                    {getValidatorName(timelockedStakedObject.validatorAddress)}
+                                    {getValidatorByAddress(timelockedStakedObject.validatorAddress)
+                                        ?.name || timelockedStakedObject.validatorAddress}
                                 </span>
                                 <span>
                                     Stake Request Epoch: {timelockedStakedObject.stakeRequestEpoch}
@@ -188,17 +205,17 @@ function VestingDashboardPage(): JSX.Element {
                         );
                     })}
                 </div>
+                {account?.address && (
+                    <div className="flex flex-row space-x-4">
+                        {vestingSchedule.availableClaiming ? (
+                            <Button onClick={handleCollect}>Collect</Button>
+                        ) : null}
+                        {vestingSchedule.availableStaking ? (
+                            <Button onClick={handleStake}>Stake</Button>
+                        ) : null}
+                    </div>
+                )}
             </div>
-            {account?.address && (
-                <div className="flex flex-row space-x-4">
-                    {vestingSchedule.availableClaiming ? (
-                        <Button onClick={handleCollect}>Collect</Button>
-                    ) : null}
-                    {vestingSchedule.availableStaking ? (
-                        <Button onClick={handleStake}>Stake</Button>
-                    ) : null}
-                </div>
-            )}
         </div>
     );
 }

apps/wallet-dashboard/components/Popup/Popups/NewStakePopup/NewStakePopup.tsx

@@ -3,35 +3,68 @@
 
 import React, { useState } from 'react';
 import { EnterAmountView, SelectValidatorView } from './views';
-import { useNotifications, useNewStakeTransaction } from '@/hooks';
-import { parseAmount, useCoinMetadata, useGetValidatorsApy } from '@iota/core';
+import {
+    useNotifications,
+    useNewStakeTransaction,
+    useGetCurrentEpochStartTimestamp,
+} from '@/hooks';
+import {
+    ExtendedTimelockObject,
+    parseAmount,
+    TIMELOCK_IOTA_TYPE,
+    useCoinMetadata,
+    useGetAllOwnedObjects,
+    useGetValidatorsApy,
+} from '@iota/core';
 import { useCurrentAccount, useSignAndExecuteTransactionBlock } from '@iota/dapp-kit';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import { NotificationType } from '@/stores/notificationStore';
+import { prepareObjectsForTimelockedStakingTransaction } from '@/lib/utils';
 
 interface NewStakePopupProps {
     onClose: () => void;
+    isTimelockedStaking?: boolean;
+    onSuccess?: (digest: string) => void;
 }
 
 enum Step {
     SelectValidator,
     EnterAmount,
 }
 
-function NewStakePopup({ onClose }: NewStakePopupProps): JSX.Element {
+function NewStakePopup({
+    onClose,
+    onSuccess,
+    isTimelockedStaking,
+}: NewStakePopupProps): JSX.Element {
     const [step, setStep] = useState<Step>(Step.SelectValidator);
     const [selectedValidator, setSelectedValidator] = useState<string>('');
     const [amount, setAmount] = useState<string>('');
     const account = useCurrentAccount();
+    const senderAddress = account?.address ?? '';
 
     const { data: metadata } = useCoinMetadata(IOTA_TYPE_ARG);
     const coinDecimals = metadata?.decimals ?? 0;
     const amountWithoutDecimals = parseAmount(amount, coinDecimals);
+    const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp();
+    const { data: timelockedObjects } = useGetAllOwnedObjects(senderAddress, {
+        StructType: TIMELOCK_IOTA_TYPE,
+    });
+
+    let extendedTimelockObjects: ExtendedTimelockObject[] = [];
+    if (isTimelockedStaking && timelockedObjects && currentEpochMs) {
+        extendedTimelockObjects = prepareObjectsForTimelockedStakingTransaction(
+            timelockedObjects,
+            amountWithoutDecimals,
+            currentEpochMs,
+        );
+    }
 
     const { data: newStakeData } = useNewStakeTransaction(
         selectedValidator,
         amountWithoutDecimals,
-        account?.address ?? '',
+        senderAddress,
+        extendedTimelockObjects,
     );
 
     const { mutateAsync: signAndExecuteTransactionBlock } = useSignAndExecuteTransactionBlock();
@@ -58,9 +91,18 @@ function NewStakePopup({ onClose }: NewStakePopupProps): JSX.Element {
             addNotification('Stake transaction was not created', NotificationType.Error);
             return;
         }
-        signAndExecuteTransactionBlock({
-            transactionBlock: newStakeData?.transaction,
-        })
+        signAndExecuteTransactionBlock(
+            {
+                transactionBlock: newStakeData?.transaction,
+            },
+            {
+                onSuccess: (tx) => {
+                    if (onSuccess) {
+                        onSuccess(tx.digest);
+                    }
+                },
+            },
+        )
             .then(() => {
                 onClose();
                 addNotification('Stake transaction has been sent');