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(

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

@@ -16,11 +16,11 @@ 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 { summarizeMigratableObjectValues } from '@/lib/utils';
+import { getStardustObjectsTotals } from '@/lib/utils';
 import { MigrationObjectDetailsCard } from '@/components/migration/migration-object-details-card';
 import { DialogLayout, DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 import { Transaction } from '@iota/iota-sdk/transactions';
@@ -59,12 +59,9 @@ export function ConfirmMigrationView({
         data: resolvedObjects = [],
         isLoading,
         error: isGroupedMigrationError,
-    } = useGroupedMigrationObjectsByExpirationDate(
-        [...basicOutputObjects, ...nftOutputObjects],
-        isTimelocked,
-    );
+    } = useGroupedStardustObjects([...basicOutputObjects, ...nftOutputObjects], isTimelocked);
 
-    const { totalNotOwnedStorageDepositReturnAmount } = summarizeMigratableObjectValues({
+    const { totalNotOwnedStorageDepositReturnAmount } = getStardustObjectsTotals({
         basicOutputs: basicOutputObjects,
         nftOutputs: nftOutputObjects,
         address: account?.address || '',

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,
@@ -51,7 +51,7 @@ export function MigrationObjectsPanel({
         data: resolvedObjects = [],
         isLoading,
         error: isErrored,
-    } = useGroupedMigrationObjectsByExpirationDate(selectedObjects, isTimelocked);
+    } = useGroupedStardustObjects(selectedObjects, isTimelocked);
 
     const filteredObjects = filterMigrationObjects(resolvedObjects, stardustOutputDetailsFilter);
 

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);
 

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

@@ -3,6 +3,9 @@
 
 import { CommonOutputObjectWithUc, MILLISECONDS_PER_SECOND } from '@iota/core';
 import { IotaObjectData } from '@iota/iota-sdk/client';
+import { filterMigrationObjects } from './filterMigrationObjectDetails';
+import { CommonMigrationObjectType, StardustOutputDetailsFilter } from '@/lib/enums';
+import { ResolvedObjectTypes } from '@/lib/types';
 
 export type StardustMigrationGroupedObjects = {
     migratable: IotaObjectData[];
@@ -20,7 +23,7 @@ export function groupStardustObjectsByMigrationStatus(
     const epochUnix = epochTimestampMs / MILLISECONDS_PER_SECOND;
 
     for (const outputObject of stardustOutputObjects) {
-        const outputObjectFields = extractMigrationOutputFields(outputObject);
+        const outputObjectFields = extractOutputFields(outputObject);
 
         if (
             outputObjectFields.timelock_uc &&
@@ -47,36 +50,46 @@ export function groupStardustObjectsByMigrationStatus(
     return { migratable, timelocked };
 }
 
-interface MigratableObjectsData {
+interface StardustObjectsTotals {
     totalNativeTokens: number;
     totalVisualAssets: number;
     totalIotaAmount: bigint;
     totalNotOwnedStorageDepositReturnAmount: bigint;
 }
 
-interface SummarizeMigrationObjectParams {
+interface StardustObjectsTotalsParams {
     basicOutputs: IotaObjectData[] | undefined;
     nftOutputs: IotaObjectData[] | undefined;
     address: string;
+    resolvedObjects?: ResolvedObjectTypes[];
 }
 
-export function summarizeMigratableObjectValues({
+export function getStardustObjectsTotals({
     basicOutputs = [],
     nftOutputs = [],
     address,
-}: SummarizeMigrationObjectParams): MigratableObjectsData {
+    resolvedObjects,
+}: StardustObjectsTotalsParams): StardustObjectsTotals {
     let totalNativeTokens = 0;
     let totalIotaAmount: bigint = 0n;
     let totalNotOwnedStorageDepositReturnAmount: bigint = 0n;
+    let filteredObjects: ResolvedObjectTypes[] = [];
 
     const totalVisualAssets = nftOutputs.length;
     const outputObjects = [...basicOutputs, ...nftOutputs];
 
+    if (resolvedObjects) {
+        filteredObjects = filterMigrationObjects(
+            resolvedObjects,
+            StardustOutputDetailsFilter.NativeTokens,
+        );
+    }
+    totalNativeTokens = getUniqueNativeTokensByCoinType(filteredObjects);
+
     for (const output of outputObjects) {
-        const outputObjectFields = extractMigrationOutputFields(output);
+        const outputObjectFields = extractOutputFields(output);
 
         totalIotaAmount += BigInt(outputObjectFields.balance);
-        totalNativeTokens += parseInt(outputObjectFields.native_tokens.fields.size);
         totalIotaAmount +=
             extractOwnedStorageDepositReturnAmount(outputObjectFields, address) || 0n;
         totalNotOwnedStorageDepositReturnAmount +=
@@ -91,29 +104,6 @@ export function summarizeMigratableObjectValues({
     };
 }
 
-interface UnmmigratableObjectsData {
-    totalTimelockedObjects: number;
-}
-
-export function summarizeTimelockedObjectValues({
-    basicOutputs = [],
-    nftOutputs = [],
-}: Omit<SummarizeMigrationObjectParams, 'address'>): UnmmigratableObjectsData {
-    const basicObjects = basicOutputs.length;
-    const nftObjects = nftOutputs.length;
-    let nativeTokens = 0;
-
-    for (const output of [...basicOutputs, ...nftOutputs]) {
-        const outputObjectFields = extractMigrationOutputFields(output);
-
-        nativeTokens += parseInt(outputObjectFields.native_tokens.fields.size);
-    }
-
-    const totalTimelockedObjects = basicObjects + nativeTokens + nftObjects;
-
-    return { totalTimelockedObjects };
-}
-
 export function extractOwnedStorageDepositReturnAmount(
     { storage_deposit_return_uc }: CommonOutputObjectWithUc,
     address: string,
@@ -127,9 +117,7 @@ export function extractOwnedStorageDepositReturnAmount(
     return null;
 }
 
-export function extractMigrationOutputFields(
-    outputObject: IotaObjectData,
-): CommonOutputObjectWithUc {
+export function extractOutputFields(outputObject: IotaObjectData): CommonOutputObjectWithUc {
     return (
         outputObject.content as unknown as {
             fields: CommonOutputObjectWithUc;
@@ -149,3 +137,11 @@ export function extractNotOwnedStorageDepositReturnAmount(
     }
     return null;
 }
+
+export function getUniqueNativeTokensByCoinType(objects: ResolvedObjectTypes[]): number {
+    return new Set(
+        objects
+            .filter((obj) => obj.commonObjectType === CommonMigrationObjectType.NativeToken)
+            .map((obj) => obj.coinType),
+    ).size;
+}