fix(wallet-dashboard): number of different native tokens in migration summary

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

@@ -6,8 +6,8 @@
 import { useState, useMemo, useCallback } from 'react';
 import { useQueryClient } from '@tanstack/react-query';
 import clsx from 'clsx';
-import { useGetStardustMigratableObjects } from '@/hooks';
-import { summarizeMigratableObjectValues, summarizeTimelockedObjectValues } from '@/lib/utils';
+import { useGetStardustMigratableObjects, useGroupedStardustObjects } from '@/hooks';
+import { getStardustObjectsTotals } from '@/lib/utils';
 import {
     Button,
     ButtonSize,
@@ -19,7 +19,7 @@ import {
     Panel,
     Title,
 } from '@iota/apps-ui-kit';
-import { Assets, Clock, IotaLogoMark, Tokens } from '@iota/ui-icons';
+import { Assets, IotaLogoMark, Tokens } from '@iota/ui-icons';
 import { useCurrentAccount, useIotaClient } from '@iota/dapp-kit';
 import { STARDUST_BASIC_OUTPUT_TYPE, STARDUST_NFT_OUTPUT_TYPE, useFormatCoin } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
@@ -47,24 +47,49 @@ function MigrationDashboardPage(): JSX.Element {
         timelockedNftOutputs,
     } = stardustMigrationObjects || {};
 
+    const { data: resolvedMigrationObjects = [] } = useGroupedStardustObjects(
+        [...(migratableBasicOutputs || []), ...(migratableNftOutputs || [])],
+        false,
+    );
+    const { data: resolvedTimelockedObjects = [] } = useGroupedStardustObjects(
+        [...(timelockedBasicOutputs || []), ...(timelockedNftOutputs || [])],
+        true,
+    );
+
     const {
-        totalIotaAmount,
+        totalIotaAmount: migratableIotaAmount,
         totalNativeTokens: migratableNativeTokens,
         totalVisualAssets: migratableVisualAssets,
-    } = summarizeMigratableObjectValues({
+    } = getStardustObjectsTotals({
         basicOutputs: migratableBasicOutputs,
         nftOutputs: migratableNftOutputs,
         address,
+        resolvedObjects: resolvedMigrationObjects,
     });
-    const { totalTimelockedObjects } = summarizeTimelockedObjectValues({
+    const {
+        totalIotaAmount: timelockedIotaAmount,
+        totalNativeTokens: timelockedNativeTokens,
+        totalVisualAssets: timelockedVisualAssets,
+    } = getStardustObjectsTotals({
         basicOutputs: timelockedBasicOutputs,
         nftOutputs: timelockedNftOutputs,
+        address,
+        resolvedObjects: resolvedTimelockedObjects,
     });
 
     const hasMigratableObjects =
         (migratableBasicOutputs?.length || 0) > 0 && (migratableNftOutputs?.length || 0) > 0;
+    const hasTimelockedObjects =
+        (timelockedBasicOutputs?.length || 0) > 0 && (timelockedNftOutputs?.length || 0) > 0;
 
-    const [timelockedIotaTokens, symbol] = useFormatCoin(totalIotaAmount, IOTA_TYPE_ARG);
+    const [migratableIotaAmountFormatted, migratableIotaAmountSymbol] = useFormatCoin(
+        migratableIotaAmount,
+        IOTA_TYPE_ARG,
+    );
+    const [timelockedIotaAmountFormatted, timelockedIotaAmountSymbol] = useFormatCoin(
+        timelockedIotaAmount,
+        IOTA_TYPE_ARG,
+    );
 
     const handleOnSuccess = useCallback(
         (digest: string) => {
@@ -90,7 +115,7 @@ function MigrationDashboardPage(): JSX.Element {
 
     const MIGRATION_CARDS: MigrationDisplayCardProps[] = [
         {
-            title: `${timelockedIotaTokens} ${symbol}`,
+            title: `${migratableIotaAmountFormatted} ${migratableIotaAmountSymbol}`,
             subtitle: 'IOTA Tokens',
             icon: IotaLogoMark,
         },
@@ -108,9 +133,19 @@ function MigrationDashboardPage(): JSX.Element {
 
     const TIMELOCKED_ASSETS_CARDS: MigrationDisplayCardProps[] = [
         {
-            title: `${totalTimelockedObjects}`,
-            subtitle: 'Time-locked',
-            icon: Clock,
+            title: `${timelockedIotaAmountFormatted} ${timelockedIotaAmountSymbol}`,
+            subtitle: 'IOTA Tokens',
+            icon: IotaLogoMark,
+        },
+        {
+            title: `${timelockedNativeTokens}`,
+            subtitle: 'Native Tokens',
+            icon: Tokens,
+        },
+        {
+            title: `${timelockedVisualAssets}`,
+            subtitle: 'Visual Assets',
+            icon: Assets,
         },
     ];
 
@@ -224,7 +259,7 @@ function MigrationDashboardPage(): JSX.Element {
                                 disabled={
                                     selectedStardustObjectsCategory ===
                                         StardustOutputMigrationStatus.TimeLocked ||
-                                    !totalTimelockedObjects
+                                    !hasTimelockedObjects
                                 }
                                 onClick={() =>
                                     setSelectedStardustObjectsCategory(
@@ -239,7 +274,7 @@ function MigrationDashboardPage(): JSX.Element {
                 <MigrationObjectsPanel
                     selectedObjects={selectedObjects}
                     onClose={handleCloseDetailsPanel}
-                    isTimelocked={
+                    groupByTimelockUC={
                         selectedStardustObjectsCategory === StardustOutputMigrationStatus.TimeLocked
                     }
                 />

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

@@ -73,7 +73,7 @@ export function MigrationDialog({
                     nftOutputObjects={nftOutputObjects}
                     onSuccess={handleMigrate}
                     setOpen={setOpen}
-                    isTimelocked={isTimelocked}
+                    groupByTimelockUC={isTimelocked}
                     migrateData={migrateData}
                     isMigrationPending={isMigrationPending}
                     isMigrationError={isMigrationError}

apps/wallet-dashboard/components/dialogs/migration/views/ConfirmMigrationView.tsx

@@ -16,11 +16,12 @@ import {
     Title,
     TitleSize,
 } from '@iota/apps-ui-kit';
-import { useGroupedMigrationObjectsByExpirationDate } from '@/hooks';
+import { useGroupedStardustObjects } from '@/hooks';
 import { Loader, Warning } from '@iota/ui-icons';
 import { Collapsible, useFormatCoin } from '@iota/core';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
-import { filterMigrationObjects, summarizeMigratableObjectValues } from '@/lib/utils';
+import { getStardustObjectsTotals } from '@/lib/utils';
+import { filterMigrationObjects } from '@/lib/utils';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 import { Transaction } from '@iota/iota-sdk/transactions';
 import { StardustOutputDetailsFilter } from '@/lib/enums';
@@ -30,7 +31,7 @@ interface ConfirmMigrationViewProps {
     nftOutputObjects: IotaObjectData[] | undefined;
     onSuccess: () => void;
     setOpen: (bool: boolean) => void;
-    isTimelocked: boolean;
+    groupByTimelockUC: boolean;
     migrateData:
         | {
               transaction: Transaction;
@@ -47,7 +48,7 @@ export function ConfirmMigrationView({
     nftOutputObjects = [],
     onSuccess,
     setOpen,
-    isTimelocked,
+    groupByTimelockUC,
     migrateData,
     isMigrationPending,
     isMigrationError,
@@ -59,17 +60,14 @@ export function ConfirmMigrationView({
         data: resolvedObjects = [],
         isLoading,
         error: isGroupedMigrationError,
-    } = useGroupedMigrationObjectsByExpirationDate(
-        [...basicOutputObjects, ...nftOutputObjects],
-        isTimelocked,
-    );
+    } = useGroupedStardustObjects([...basicOutputObjects, ...nftOutputObjects], groupByTimelockUC);
 
     const {
         totalIotaAmount,
         totalNativeTokens: migratableNativeTokens,
         totalVisualAssets: migratableVisualAssets,
         totalNotOwnedStorageDepositReturnAmount,
-    } = summarizeMigratableObjectValues({
+    } = getStardustObjectsTotals({
         basicOutputs: basicOutputObjects,
         nftOutputs: nftOutputObjects,
         address: account?.address || '',
@@ -166,7 +164,7 @@ export function ConfirmMigrationView({
                                                     render={(migrationObject) => (
                                                         <MigrationObjectDetailsCard
                                                             migrationObject={migrationObject}
-                                                            isTimelocked={isTimelocked}
+                                                            isTimelocked={groupByTimelockUC}
                                                         />
                                                     )}
                                                 />

apps/wallet-dashboard/components/migration/MigrationObjectsPanel.tsx

@@ -3,7 +3,7 @@
 
 'use client';
 
-import { useGroupedMigrationObjectsByExpirationDate } from '@/hooks';
+import { useGroupedStardustObjects } from '@/hooks';
 import {
     STARDUST_MIGRATABLE_OBJECTS_FILTER_LIST,
     STARDUST_TIMELOCKED_OBJECTS_FILTER_LIST,
@@ -36,13 +36,13 @@ const FILTERS = {
 interface MigrationObjectsPanelProps {
     selectedObjects: IotaObjectData[];
     onClose: () => void;
-    isTimelocked: boolean;
+    groupByTimelockUC: boolean;
 }
 
 export function MigrationObjectsPanel({
     selectedObjects,
     onClose,
-    isTimelocked,
+    groupByTimelockUC,
 }: MigrationObjectsPanelProps): React.JSX.Element {
     const [stardustOutputDetailsFilter, setStardustOutputDetailsFilter] =
         useState<StardustOutputDetailsFilter>(StardustOutputDetailsFilter.All);
@@ -51,11 +51,11 @@ export function MigrationObjectsPanel({
         data: resolvedObjects = [],
         isLoading,
         error: isErrored,
-    } = useGroupedMigrationObjectsByExpirationDate(selectedObjects, isTimelocked);
+    } = useGroupedStardustObjects(selectedObjects, groupByTimelockUC);
 
     const filteredObjects = filterMigrationObjects(resolvedObjects, stardustOutputDetailsFilter);
 
-    const filters = isTimelocked ? FILTERS.timelocked : FILTERS.migratable;
+    const filters = groupByTimelockUC ? FILTERS.timelocked : FILTERS.migratable;
     const isHidden = selectedObjects.length === 0;
 
     return (
@@ -101,7 +101,7 @@ export function MigrationObjectsPanel({
                                     render={(migrationObject) => (
                                         <MigrationObjectDetailsCard
                                             migrationObject={migrationObject}
-                                            isTimelocked={isTimelocked}
+                                            isTimelocked={groupByTimelockUC}
                                         />
                                     )}
                                 />

apps/wallet-dashboard/hooks/index.ts

@@ -10,6 +10,6 @@ export * from './useTimelockedUnstakeTransaction';
 export * from './useExplorerLinkGetter';
 export * from './useGetStardustMigratableObjects';
 export * from './useGetSupplyIncreaseVestingObjects';
-export * from './useGroupedMigrationObjectsByExpirationDate';
+export * from './useGroupedStardustObjects';
 export * from './useTransferTransaction';
 export * from './usePersistedNetwork';

apps/wallet-dashboard/hooks/useGroupedMigrationObjectsByExpirationDate.ts → apps/wallet-dashboard/hooks/useGroupedStardustObjects.ts

@@ -13,9 +13,9 @@ import { useQuery } from '@tanstack/react-query';
 import { useGetCurrentEpochStartTimestamp } from './useGetCurrentEpochStartTimestamp';
 import { useGetCurrentEpochEndTimestamp } from './useGetCurrentEpochEndTimestamp';
 
-export function useGroupedMigrationObjectsByExpirationDate(
+export function useGroupedStardustObjects(
     objects: IotaObjectData[],
-    isTimelockUnlockCondition: boolean = false,
+    groupByTimelockUC: boolean = false,
 ) {
     const client = useIotaClient();
     const address = useCurrentAccount()?.address;
@@ -32,7 +32,7 @@ export function useGroupedMigrationObjectsByExpirationDate(
             'grouped-migration-objects',
             objects,
             address,
-            isTimelockUnlockCondition,
+            groupByTimelockUC,
             epochStartMs,
             epochEndMs,
         ],
@@ -44,7 +44,7 @@ export function useGroupedMigrationObjectsByExpirationDate(
                 objects,
                 client,
                 address,
-                isTimelockUnlockCondition,
+                groupByTimelockUC,
             );
 
             return sortStardustResolvedObjectsByExpiration(

apps/wallet-dashboard/lib/utils/migration/groupMigrationObjects.ts

@@ -16,15 +16,15 @@ import {
     STARDUST_BASIC_OUTPUT_TYPE,
     STARDUST_NFT_OUTPUT_TYPE,
 } from '@iota/core';
-import { extractMigrationOutputFields, extractOwnedStorageDepositReturnAmount } from '.';
+import { extractOutputFields, extractOwnedStorageDepositReturnAmount } from '.';
 import { IotaClient, IotaObjectData } from '@iota/iota-sdk/client';
 import { MIGRATION_OBJECT_WITHOUT_UC_KEY } from '@/lib/constants';
 
 export async function groupMigrationObjectsByUnlockCondition(
     objectsData: IotaObjectData[],
     client: IotaClient,
     currentAddress: string = '',
-    isTimelockUnlockCondition: boolean = false,
+    groupByTimelockUC: boolean = false, // If true, group by timelock unlock condition, else group by expiration unlock condition
 ): Promise<ResolvedObjectTypes[]> {
     const flatObjects: ResolvedObjectTypes[] = [];
     const basicObjectMap: Map<string, ResolvedBasicObject> = new Map();
@@ -37,10 +37,10 @@ export async function groupMigrationObjectsByUnlockCondition(
         const chunk = objectsData.slice(i, i + PROMISE_CHUNK_SIZE);
 
         const promises = chunk.map(async (object) => {
-            const objectFields = extractMigrationOutputFields(object);
+            const objectFields = extractOutputFields(object);
 
             let groupKey: string | undefined;
-            if (isTimelockUnlockCondition) {
+            if (groupByTimelockUC) {
                 const timestamp = objectFields.timelock_uc?.fields.unix_time.toString();
                 groupKey = timestamp;
             } else {
@@ -160,7 +160,7 @@ async function getNftDetails(
     expirationKey: UnlockConditionTimestamp,
     client: IotaClient,
 ): Promise<ResolvedNftObject[]> {
-    const objectFields = extractMigrationOutputFields(object);
+    const objectFields = extractOutputFields(object);
     const nftOutputDynamicFields = await client.getDynamicFields({
         parentId: objectFields.id.id,
     });
@@ -195,7 +195,7 @@ async function extractNativeTokensFromObject(
     client: IotaClient,
     expirationKey: UnlockConditionTimestamp,
 ): Promise<ResolvedNativeToken[]> {
-    const fields = extractMigrationOutputFields(object);
+    const fields = extractOutputFields(object);
     const bagId = fields.native_tokens.fields.id.id;
     const bagSize = Number(fields.native_tokens.fields.size);