feat(dashboard): add migratable object details (#4424)

* feat(dashboard): add migration overview

* feat: refine values

* fix: update summarizeMigratableObjectValues function

* feat(dashboard): add migratable object details

* feat: add object details

* fix: add missing type

* feat: use react query to cache data

* refactor: show expiration label correctly

* feat: add missing asset fallback

* feat: simplify code, add correct timestamps

* fix: remove package id

* fix: bring back missing logic

* fix: remove unnecesary memos and improve skeleton

* perf: fetch objects in chunks

* fix: remove duplicated export

* fix: show correct time in expiration

* feat: disable buttons

* fix: remove file and improve sorting

apps/core/src/utils/migration/createMigrationTransaction.ts

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { IotaClient, IotaObjectData } from '@iota/iota-sdk/client';
+import { DynamicFieldInfo, IotaClient, IotaObjectData } from '@iota/iota-sdk/client';
 import { Transaction } from '@iota/iota-sdk/transactions';
 import { STARDUST_PACKAGE_ID } from '../../constants/migration.constants';
 import { IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
@@ -17,21 +17,28 @@ type NestedResultType = {
     NestedResult: [number, number];
 };
 
-export async function getNativeTokenTypesFromBag(
-    bagId: string,
-    client: IotaClient,
-): Promise<string[]> {
+export async function getNativeTokensFromBag(bagId: string, client: IotaClient) {
     const nativeTokenDynamicFields = await client.getDynamicFields({
         parentId: bagId,
     });
-    const nativeTokenTypes: string[] = [];
+    const nativeTokenTypes: DynamicFieldInfo[] = [];
     for (const nativeToken of nativeTokenDynamicFields.data) {
-        nativeTokenTypes.push(nativeToken?.name?.value as string);
+        nativeTokenTypes.push(nativeToken);
     }
 
     return nativeTokenTypes;
 }
 
+export async function getNativeTokenTypesFromBag(
+    bagId: string,
+    client: IotaClient,
+): Promise<string[]> {
+    const nativeTokenDynamicFields = await client.getDynamicFields({
+        parentId: bagId,
+    });
+    return nativeTokenDynamicFields.data.map(({ name }) => name.value as string);
+}
+
 export function validateBasicOutputObject(outputObject: IotaObjectData): BasicOutputObject {
     if (outputObject.content?.dataType !== 'moveObject') {
         throw new Error('Invalid basic output object');

apps/core/src/utils/parseObjectDetails.ts

@@ -9,10 +9,16 @@ type ObjectChangeWithObjectType = Extract<
     { objectType: string }
 >;
 
+type PackageId = string;
+type ModuleName = string;
+type TypeName = string;
 export function parseObjectChangeDetails(
     objectChange: ObjectChangeWithObjectType,
-): [string, string, string] {
-    const [packageId, moduleName, typeName] =
-        objectChange.objectType?.split('<')[0]?.split('::') || [];
-    return [packageId, moduleName, typeName];
+): [PackageId, ModuleName, TypeName] {
+    return extractObjectTypeStruct(objectChange.objectType);
+}
+
+export function extractObjectTypeStruct(objectType: string): [PackageId, ModuleName, TypeName] {
+    const [packageId, moduleName, functionName] = objectType?.split('<')[0]?.split('::') || [];
+    return [packageId, moduleName, functionName];
 }

apps/ui-kit/src/lib/components/atoms/index.ts

@@ -19,3 +19,4 @@ export * from './snackbar';
 export * from './visual-asset-card';
 export * from './loading-indicator';
 export * from './placeholder';
+export * from './skeleton';

apps/ui-kit/src/lib/components/atoms/skeleton/Skeleton.tsx

@@ -0,0 +1,47 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import cx from 'classnames';
+
+interface SkeletonLoaderProps {
+    /**
+     * Width class for the skeleton div.
+     */
+    widthClass?: string;
+    /**
+     * Height class for the skeleton div.
+     */
+    heightClass?: string;
+    /**
+     * If true, the skeleton will use darker neutral colors.
+     */
+    hasSecondaryColors?: boolean;
+    /**
+     * Whether the class `rounded-full` should be applied. Defaults to true.
+     */
+    isRounded?: boolean;
+}
+
+export function Skeleton({
+    children,
+    widthClass = 'w-full',
+    heightClass = 'h-3',
+    hasSecondaryColors,
+    isRounded = true,
+}: React.PropsWithChildren<SkeletonLoaderProps>): React.JSX.Element {
+    return (
+        <div
+            className={cx(
+                'animate-pulse rounded-full',
+                widthClass,
+                heightClass,
+                isRounded && 'rounded-full',
+                hasSecondaryColors
+                    ? 'bg-neutral-80 dark:bg-neutral-10'
+                    : 'bg-neutral-90 dark:bg-neutral-12',
+            )}
+        >
+            {children}
+        </div>
+    );
+}

apps/ui-kit/src/lib/components/atoms/skeleton/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Skeleton';

apps/ui-kit/src/storybook/stories/atoms/Skeleton.stories.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Card, CardImage, ImageShape, Skeleton } from '@/components';
+
+const meta: Meta<typeof Skeleton> = {
+    component: Skeleton,
+    tags: ['autodocs'],
+} satisfies Meta<typeof Skeleton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const SkeletonCard: Story = {
+    render: () => (
+        <Card>
+            <CardImage shape={ImageShape.SquareRounded}>
+                <div className="h-10 w-10 animate-pulse bg-neutral-90 dark:bg-neutral-12" />
+                <Skeleton widthClass="w-10" heightClass="h-10" isRounded={false} />
+            </CardImage>
+            <div className="flex flex-col gap-y-xs">
+                <Skeleton widthClass="w-40" heightClass="h-3.5" />
+                <Skeleton widthClass="w-32" heightClass="h-3" hasSecondaryColors />
+            </div>
+            <div className="ml-auto flex flex-col gap-y-xs">
+                <Skeleton widthClass="w-20" heightClass="h-3.5" />
+                <Skeleton widthClass="w-16" heightClass="h-3" hasSecondaryColors />
+            </div>
+        </Card>
+    ),
+};