feat(wallet-dashboard): determine max ptb for unlock/unwrap and unstake timelocked objects

apps/core/src/hooks/useUnlockTimelockedObjectsTransaction.ts

@@ -4,17 +4,19 @@
 import { useIotaClient } from '@iota/dapp-kit';
 import { createUnlockTimelockedObjectsTransaction } from '../utils';
 import { useQuery } from '@tanstack/react-query';
+import { useMaxTransactionSizeBytes } from './useMaxTransactionSizeBytes';
 
 export function useUnlockTimelockedObjectsTransaction(address: string, objectIds: string[]) {
     const client = useIotaClient();
+    const { data: maxSizeBytes = Infinity } = useMaxTransactionSizeBytes();
 
     return useQuery({
         // eslint-disable-next-line @tanstack/query/exhaustive-deps
         queryKey: ['unlock-timelocked-objects', address, objectIds],
         queryFn: async () => {
             const transaction = createUnlockTimelockedObjectsTransaction({ address, objectIds });
             transaction.setSender(address);
-            await transaction.build({ client });
+            await transaction.build({ client, maxSizeBytes });
             return transaction;
         },
         enabled: !!address && !!objectIds,

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

@@ -35,6 +35,9 @@ import {
     LoadingIndicator,
     LabelText,
     LabelTextSize,
+    InfoBox,
+    InfoBoxStyle,
+    InfoBoxType,
 } from '@iota/apps-ui-kit';
 import {
     Theme,
@@ -52,7 +55,7 @@ import {
 } from '@iota/dapp-kit';
 import { IotaValidatorSummary } from '@iota/iota-sdk/client';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { Calendar, StarHex } from '@iota/apps-ui-icons';
+import { Calendar, StarHex, Warning } from '@iota/apps-ui-icons';
 import { useRouter } from 'next/navigation';
 import { useEffect, useState } from 'react';
 import { StakedTimelockObject } from '@/components';
@@ -90,6 +93,10 @@ export default function VestingDashboardPage(): JSX.Element {
         refreshStakeList,
         isSupplyIncreaseVestingScheduleEmpty,
         supplyIncreaseVestingMapped,
+        isMaxTransactionSizeError,
+        supplyIncreaseVestingUnlockedMaxSize,
+        isUnlockPending,
+        resetMaxTransactionSize,
     } = useGetSupplyIncreaseVestingObjects(address);
 
     const timelockedStakedObjectsGrouped: TimelockedStakedObjectsGrouped[] =
@@ -159,6 +166,11 @@ export default function VestingDashboardPage(): JSX.Element {
         IOTA_TYPE_ARG,
     );
 
+    const [
+        formattedSupplyIncreaseVestingUnlockedMaxSize,
+        supplyIncreaseVestingUnlockedMaxSizeSymbol,
+    ] = useFormatCoin(supplyIncreaseVestingUnlockedMaxSize, IOTA_TYPE_ARG);
+
     function handleOnSuccess(digest: string): void {
         setTimelockedObjectsToUnstake(null);
 
@@ -182,6 +194,10 @@ export default function VestingDashboardPage(): JSX.Element {
                 onSuccess: (tx) => {
                     handleOnSuccess(tx.digest);
                     ampli.timelockCollect();
+
+                    if (isMaxTransactionSizeError) {
+                        resetMaxTransactionSize();
+                    }
                 },
             },
         )
@@ -261,12 +277,24 @@ export default function VestingDashboardPage(): JSX.Element {
                                     onClick={handleCollect}
                                     title="Collect"
                                     buttonType={ButtonType.Primary}
+                                    iconAfterText={isUnlockPending}
+                                    icon={isUnlockPending ? <LoadingIndicator /> : null}
                                     buttonDisabled={
                                         !supplyIncreaseVestingSchedule.availableClaiming ||
-                                        supplyIncreaseVestingSchedule.availableClaiming === 0n
+                                        supplyIncreaseVestingSchedule.availableClaiming === 0n ||
+                                        isUnlockPending
                                     }
                                 />
                             </Card>
+                            {isMaxTransactionSizeError ? (
+                                <InfoBox
+                                    title="Partial collect"
+                                    supportingText={`Due to the large number of objects, a partial collect will be attempted for ${formattedSupplyIncreaseVestingUnlockedMaxSize} ${supplyIncreaseVestingUnlockedMaxSizeSymbol}. After the operation is complete, you can collect the remaining value.`}
+                                    style={InfoBoxStyle.Elevated}
+                                    type={InfoBoxType.Error}
+                                    icon={<Warning />}
+                                />
+                            ) : null}
                             <Card type={CardType.Outlined}>
                                 <CardImage
                                     type={ImageType.BgSolid}

apps/wallet-dashboard/app/page.tsx

@@ -53,7 +53,7 @@ function HomeDashboardPage(): JSX.Element {
                             <div className="flex flex-col items-center gap-4">
                                 <span className="text-headline-sm text-neutral-40">Welcome to</span>
                                 <h1 className="text-display-lg text-neutral-10 dark:text-neutral-100">
-                                    IOTA Wallet
+                                    IOTA Wallet Dashboard
                                 </h1>
                                 <span className="text-title-lg text-neutral-40">
                                     Connecting you to the decentralized web and IOTA network

apps/wallet-dashboard/components/dialogs/migration/MigrationDialog.tsx

@@ -11,7 +11,7 @@ import { TransactionDialogView } from '../TransactionDialog';
 import { MigrationDialogView } from './enums';
 import { ConfirmMigrationView } from './views';
 import { ampli } from '@/lib/utils/analytics';
-import { SIZE_LIMIT_EXCEEDED } from '@iota/core';
+import { isSizeExceededError } from '@/lib/utils';
 
 // Number of objects to reduce on every attempt
 const REDUCTION_STEP_SIZE = 25;
@@ -53,7 +53,7 @@ export function MigrationDialog({
         useSignAndExecuteTransaction();
 
     useEffect(() => {
-        if (isMigrationError && error?.message.includes(SIZE_LIMIT_EXCEEDED)) {
+        if (isMigrationError && isSizeExceededError(error)) {
             reductionSize.current += REDUCTION_STEP_SIZE;
             setBasicOutputs(basicOutputObjects.slice(0, -reductionSize.current));
             setNftOutputs(nftOutputObjects.slice(0, -reductionSize.current));

apps/wallet-dashboard/components/dialogs/unstake/views/UnstakeTimelockedObjectsView.tsx

@@ -12,7 +12,11 @@ import {
     useGetActiveValidatorsInfo,
     useTimeAgo,
 } from '@iota/core';
-import { ExtendedDelegatedTimelockedStake, TimelockedStakedObjectsGrouped } from '@/lib/utils';
+import {
+    ExtendedDelegatedTimelockedStake,
+    TimelockedStakedObjectsGrouped,
+    isSizeExceededError,
+} from '@/lib/utils';
 import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
 import {
     Panel,
@@ -21,11 +25,16 @@ import {
     Header,
     ButtonType,
     Button,
+    InfoBox,
+    InfoBoxStyle,
+    InfoBoxType,
 } from '@iota/apps-ui-kit';
 import { useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit';
 import { IotaSignAndExecuteTransactionOutput } from '@iota/wallet-standard';
 import toast from 'react-hot-toast';
 import { ampli } from '@/lib/utils/analytics';
+import { Warning } from '@iota/apps-ui-icons';
+import { useEffect, useRef, useState } from 'react';
 
 interface UnstakeTimelockedObjectsViewProps {
     onClose: () => void;
@@ -34,22 +43,35 @@ interface UnstakeTimelockedObjectsViewProps {
     onBack?: () => void;
 }
 
+const REDUCTION_STEP_SIZE = 5;
+
 export function UnstakeTimelockedObjectsView({
     groupedTimelockedObjects,
     onClose,
     onBack,
     onSuccess,
 }: UnstakeTimelockedObjectsViewProps) {
+    const reductionSize = useRef(0);
+    const [isMaxTransactionSizeError, setIsMaxTransactionSizeError] = useState(false);
     const activeAddress = useCurrentAccount()?.address ?? '';
     const { data: activeValidators } = useGetActiveValidatorsInfo();
 
-    const stakes = groupedTimelockedObjects.stakes;
+    const stakes = (() => {
+        if (isMaxTransactionSizeError) {
+            return groupedTimelockedObjects.stakes.slice(0, -reductionSize.current);
+        }
+        return groupedTimelockedObjects.stakes;
+    })();
+
     const timelockedStakedIotaIds = stakes.map((stake) => stake.timelockedStakedIotaId);
 
-    const { data: unstakeData, isPending: isUnstakeTxPending } = useNewUnstakeTimelockedTransaction(
-        activeAddress,
-        timelockedStakedIotaIds,
-    );
+    const {
+        data: unstakeData,
+        isPending: isUnstakeTxPending,
+        isError: isUnstakeError,
+        error: unstakeError,
+    } = useNewUnstakeTimelockedTransaction(activeAddress, timelockedStakedIotaIds);
+
     const { mutateAsync: signAndExecuteTransaction, isPending: isTransactionPending } =
         useSignAndExecuteTransaction();
 
@@ -58,13 +80,19 @@ export function UnstakeTimelockedObjectsView({
             validatorAddress === groupedTimelockedObjects.validatorAddress,
     );
 
-    const stakeId = stakes[0].timelockedStakedIotaId;
-    const totalStakedAmount = stakes.reduce((acc, stake) => acc + parseInt(stake.principal), 0);
+    const stakeId = stakes[0]?.timelockedStakedIotaId;
+    const totalStakedAmount = stakes.reduce((acc, stake) => acc + BigInt(stake.principal), 0n);
+
     const totalRewards = stakes.reduce(
         (acc, stake) => acc + (stake.status === 'Active' ? parseInt(stake.estimatedReward) : 0),
         0,
     );
 
+    const [totalStakedAmountFormatted, totalStakedAmountSymbol] = useFormatCoin(
+        totalStakedAmount,
+        IOTA_TYPE_ARG,
+    );
+
     const [rewardsPoolFormatted, rewardsToken] = useFormatCoin(
         validatorInfo?.rewardsPool,
         IOTA_TYPE_ARG,
@@ -95,6 +123,14 @@ export function UnstakeTimelockedObjectsView({
         });
     }
 
+    useEffect(() => {
+        if (isUnstakeError && isSizeExceededError(unstakeError)) {
+            setIsMaxTransactionSizeError(true);
+            reductionSize.current += REDUCTION_STEP_SIZE;
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isUnstakeError, unstakeError]);
+
     return (
         <DialogLayout>
             <Header title="Unstake" onClose={onClose} onBack={onBack} />
@@ -151,6 +187,17 @@ export function UnstakeTimelockedObjectsView({
                 </div>
             </DialogLayoutBody>
             <DialogLayoutFooter>
+                {isMaxTransactionSizeError ? (
+                    <div className="mb-2">
+                        <InfoBox
+                            title="Partial unstake"
+                            supportingText={`Due to the large number of objects, a partial unstake of ${totalStakedAmountFormatted} ${totalStakedAmountSymbol} will be attempted. After the operation is complete, you can unstake the remaining value.`}
+                            style={InfoBoxStyle.Elevated}
+                            type={InfoBoxType.Error}
+                            icon={<Warning />}
+                        />
+                    </div>
+                ) : null}
                 <Button
                     onClick={handleUnstake}
                     text="Unstake"

apps/wallet-dashboard/hooks/useGetSupplyIncreaseVestingObjects.ts

@@ -14,6 +14,7 @@ import {
     formatDelegatedTimelockedStake,
     getLatestOrEarliestSupplyIncreaseVestingPayout,
     getVestingOverview,
+    isSizeExceededError,
     isSupplyIncreaseVestingObject,
     isTimelockedUnlockable,
     mapTimelockObjects,
@@ -25,6 +26,9 @@ import {
     useUnlockTimelockedObjectsTransaction,
 } from '@iota/core';
 import { Transaction } from '@iota/iota-sdk/transactions';
+import { useEffect, useState } from 'react';
+
+const REDUCTION_STEP_SIZE = 5;
 
 interface SupplyIncreaseVestingObject {
     nextPayout: SupplyIncreaseVestingPayout | undefined;
@@ -41,9 +45,16 @@ interface SupplyIncreaseVestingObject {
         | undefined;
     refreshStakeList: () => void;
     isSupplyIncreaseVestingScheduleEmpty: boolean;
+    isMaxTransactionSizeError: boolean;
+    supplyIncreaseVestingUnlockedMaxSize: bigint;
+    isUnlockPending: boolean;
+    resetMaxTransactionSize: () => void;
 }
 
 export function useGetSupplyIncreaseVestingObjects(address: string): SupplyIncreaseVestingObject {
+    const [reductionSize, setReductionSize] = useState(0);
+    const [isMaxTransactionSizeError, setIsMaxTransactionSizeError] = useState(false);
+
     const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp();
 
     const { data: timelockedObjects, refetch: refetchGetAllOwnedObjects } = useGetAllOwnedObjects(
@@ -85,13 +96,32 @@ export function useGetSupplyIncreaseVestingObjects(address: string): SupplyIncre
     const supplyIncreaseVestingPortfolio =
         lastPayout && buildSupplyIncreaseVestingSchedule(lastPayout, Number(currentEpochMs));
 
-    const supplyIncreaseVestingUnlocked = supplyIncreaseVestingMapped?.filter(
-        (supplyIncreaseVestingObject) =>
+    const supplyIncreaseVestingUnlocked = (() => {
+        let filtered = supplyIncreaseVestingMapped?.filter((supplyIncreaseVestingObject) =>
             isTimelockedUnlockable(supplyIncreaseVestingObject, Number(currentEpochMs)),
-    );
+        );
+
+        if (isMaxTransactionSizeError) {
+            filtered = filtered.slice(0, -reductionSize);
+        }
+
+        return filtered;
+    })();
+
     const supplyIncreaseVestingUnlockedObjectIds: string[] =
         supplyIncreaseVestingUnlocked.map((unlockedObject) => unlockedObject.id.id) || [];
-    const { data: unlockAllSupplyIncreaseVesting } = useUnlockTimelockedObjectsTransaction(
+
+    const supplyIncreaseVestingUnlockedMaxSize = supplyIncreaseVestingUnlocked.reduce(
+        (acc, curr) => (acc += curr.locked.value),
+        0n,
+    );
+
+    const {
+        data: unlockAllSupplyIncreaseVesting,
+        isPending: isUnlockPending,
+        isError: isUnlockError,
+        error: unlockError,
+    } = useUnlockTimelockedObjectsTransaction(
         address || '',
         supplyIncreaseVestingUnlockedObjectIds,
     );
@@ -108,6 +138,19 @@ export function useGetSupplyIncreaseVestingObjects(address: string): SupplyIncre
         refetchGetAllOwnedObjects();
     }
 
+    function resetMaxTransactionSize() {
+        setIsMaxTransactionSizeError(false);
+        setReductionSize(0);
+    }
+
+    useEffect(() => {
+        if (isUnlockError && isSizeExceededError(unlockError)) {
+            setIsMaxTransactionSizeError(true);
+            setReductionSize((prev) => prev + REDUCTION_STEP_SIZE);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [isUnlockError, unlockError]);
+
     return {
         nextPayout,
         lastPayout,
@@ -119,5 +162,9 @@ export function useGetSupplyIncreaseVestingObjects(address: string): SupplyIncre
         unlockAllSupplyIncreaseVesting,
         refreshStakeList,
         isSupplyIncreaseVestingScheduleEmpty,
+        isMaxTransactionSizeError,
+        supplyIncreaseVestingUnlockedMaxSize,
+        isUnlockPending,
+        resetMaxTransactionSize,
     };
 }

apps/wallet-dashboard/hooks/useNewUnstakeTransaction.ts

@@ -1,7 +1,11 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { createTimelockedUnstakeTransaction, createUnstakeTransaction } from '@iota/core';
+import {
+    createTimelockedUnstakeTransaction,
+    createUnstakeTransaction,
+    useMaxTransactionSizeBytes,
+} from '@iota/core';
 import { useIotaClient } from '@iota/dapp-kit';
 import { useQuery } from '@tanstack/react-query';
 
@@ -33,14 +37,15 @@ export function useNewUnstakeTimelockedTransaction(
     timelockedUnstakeIotaIds: string[],
 ) {
     const client = useIotaClient();
+    const { data: maxSizeBytes = Infinity } = useMaxTransactionSizeBytes();
 
     return useQuery({
         // eslint-disable-next-line @tanstack/query/exhaustive-deps
         queryKey: ['timelocked-unstake-transaction', timelockedUnstakeIotaIds, senderAddress],
         queryFn: async () => {
             const transaction = createTimelockedUnstakeTransaction(timelockedUnstakeIotaIds);
             transaction.setSender(senderAddress);
-            await transaction.build({ client });
+            await transaction.build({ client, maxSizeBytes: maxSizeBytes });
             return transaction;
         },
         enabled: !!(senderAddress && timelockedUnstakeIotaIds?.length),

apps/wallet-dashboard/lib/utils/index.ts

@@ -8,3 +8,4 @@ export * from './timelock';
 export * from './migration';
 export * from './transaction';
 export * from './growthbook';
+export * from './isSizeExceededError';

apps/wallet-dashboard/lib/utils/isSizeExceededError.ts

@@ -0,0 +1,8 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { SIZE_LIMIT_EXCEEDED } from '@iota/core';
+
+export function isSizeExceededError(e: Error | null) {
+    return e?.message?.includes(SIZE_LIMIT_EXCEEDED);
+}