feat(wallet): hint user about migration in homepage

apps/core/src/api/StardustIndexerClient.ts

@@ -9,7 +9,7 @@ export interface PageParams {
 }
 
 export class StardustIndexerClient {
-    private baseUrl: string;
+    public baseUrl: string;
 
     constructor(baseUrl?: string) {
         if (!baseUrl) {

apps/wallet-dashboard/providers/StardustIndexerClientProvider.tsx → apps/core/src/contexts/StardustIndexerClientProvider.tsx

@@ -4,7 +4,10 @@
 'use client';
 
 import { useIotaClientContext } from '@iota/dapp-kit';
-import { StardustIndexerClientContext, useStardustIndexerClient } from '@iota/core';
+import {
+    StardustIndexerClientContext,
+    useStardustIndexerClient,
+} from './StardustIndexerClientContext';
 
 export const StardustIndexerClientProvider: React.FC<React.PropsWithChildren> = ({ children }) => {
     const { network } = useIotaClientContext();

apps/core/src/contexts/index.ts

@@ -4,3 +4,4 @@
 export * from './ThemeContext';
 export * from './HiddenAssetsProvider';
 export * from './StardustIndexerClientContext';
+export * from './StardustIndexerClientProvider';

apps/core/src/hooks/index.ts

@@ -52,6 +52,9 @@ export * from './useGetNFTs';
 export * from './useRecognizedPackages';
 export * from './useTransferAsset';
 export * from './useFeatureEnabledByNetwork';
+export * from './useGetAllStardustSharedObjects';
+export * from './useGetStardustSharedBasicObjects';
+export * from './useGetStardustSharedNftObjects';
 
 export * from './stake';
 export * from './ui';

apps/core/src/hooks/useGetAllStardustSharedObjects.ts

@@ -0,0 +1,65 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useQuery } from '@tanstack/react-query';
+import { IotaObjectData } from '@iota/iota-sdk/client';
+import { useGetStardustSharedBasicObjects } from './useGetStardustSharedBasicObjects';
+import { useGetStardustSharedNftObjects } from './useGetStardustSharedNftObjects';
+
+const LIMIT_PER_REQ = 50;
+
+export function useGetAllStardustSharedObjects(address: string) {
+    const fetchPaginatedData = async () => {
+        let allBasicOutputs: IotaObjectData[] = [];
+        let allNftOutputs: IotaObjectData[] = [];
+
+        let basicOutputPage = 1;
+        do {
+            const { data: basicObjects } = await useGetStardustSharedBasicObjects(
+                address,
+                LIMIT_PER_REQ,
+                basicOutputPage,
+            );
+
+            if (!basicObjects || !basicObjects?.length) {
+                break;
+            }
+
+            allBasicOutputs = [
+                ...allBasicOutputs,
+                ...(basicObjects as unknown as IotaObjectData[]),
+            ];
+
+            basicOutputPage = basicObjects.length < LIMIT_PER_REQ ? 0 : basicOutputPage + 1;
+        } while (basicOutputPage > 0);
+
+        let nftOutputPage = 1;
+        do {
+            const { data: nftObjects } = await useGetStardustSharedNftObjects(
+                address,
+                LIMIT_PER_REQ,
+                nftOutputPage,
+            );
+
+            if (!nftObjects || !nftObjects?.length) {
+                break;
+            }
+
+            allNftOutputs = [...allNftOutputs, ...(nftObjects as unknown as IotaObjectData[])];
+
+            nftOutputPage = nftObjects.length < LIMIT_PER_REQ ? 0 : nftOutputPage + 1;
+        } while (nftOutputPage > 0);
+
+        return {
+            basic: allBasicOutputs,
+            nfts: allNftOutputs,
+        };
+    };
+
+    return useQuery({
+        queryKey: ['stardust-all-shared-objects', address],
+        queryFn: fetchPaginatedData,
+        enabled: !!address,
+        staleTime: 1000 * 60 * 5,
+        placeholderData: { basic: [], nfts: [] },
+    });
+}

apps/core/src/hooks/useGetStardustSharedBasicObjects.ts

@@ -0,0 +1,36 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useQuery } from '@tanstack/react-query';
+import { useStardustIndexerClientContext } from '../contexts';
+
+export function useGetStardustSharedBasicObjects(
+    address: string,
+    pageSize?: number,
+    page?: number,
+) {
+    const { stardustIndexerClient } = useStardustIndexerClientContext();
+
+    return useQuery({
+        queryKey: [
+            'stardust-shared-basic-objects',
+            address,
+            pageSize,
+            page,
+            stardustIndexerClient?.baseUrl,
+        ],
+        queryFn: async () => {
+            if (!stardustIndexerClient?.baseUrl) return [];
+
+            const basicOutputs = await stardustIndexerClient.getBasicResolvedOutputs(address, {
+                page,
+                pageSize,
+            });
+
+            return basicOutputs || [];
+        },
+        enabled: !!address,
+        staleTime: 1000 * 60 * 5,
+        placeholderData: [],
+    });
+}

apps/core/src/hooks/useGetStardustSharedNftObjects.ts

@@ -0,0 +1,32 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useQuery } from '@tanstack/react-query';
+import { useStardustIndexerClientContext } from '../contexts';
+
+export function useGetStardustSharedNftObjects(address: string, pageSize?: number, page?: number) {
+    const { stardustIndexerClient } = useStardustIndexerClientContext();
+
+    return useQuery({
+        queryKey: [
+            'stardust-shared-nft-objects',
+            address,
+            pageSize,
+            page,
+            stardustIndexerClient?.baseUrl,
+        ],
+        queryFn: async () => {
+            if (!stardustIndexerClient?.baseUrl) return [];
+
+            const nftOutputs = await stardustIndexerClient.getNftResolvedOutputs(address, {
+                page,
+                pageSize,
+            });
+
+            return nftOutputs || [];
+        },
+        enabled: !!address,
+        staleTime: 1000 * 60 * 5,
+        placeholderData: [],
+    });
+}

apps/wallet-dashboard/hooks/useGetStardustMigratableObjects.ts

@@ -9,8 +9,8 @@ import {
     STARDUST_NFT_OUTPUT_TYPE,
     TimeUnit,
     useGetAllOwnedObjects,
+    useGetAllStardustSharedObjects,
 } from '@iota/core';
-import { useGetAllStardustSharedObjects } from './useGetAllStardustSharedObjects';
 
 export function useGetStardustMigratableObjects(address: string) {
     const { data: currentEpochMs } = useGetCurrentEpochStartTimestamp();
@@ -23,8 +23,8 @@ export function useGetStardustMigratableObjects(address: string) {
         StructType: STARDUST_NFT_OUTPUT_TYPE,
     });
 
-    const sharedBasicOutputObjects = stardustSharedObjectsData!.basic;
-    const sharedNftOutputObjects = stardustSharedObjectsData!.nfts;
+    const sharedBasicOutputObjects = stardustSharedObjectsData?.basic ?? [];
+    const sharedNftOutputObjects = stardustSharedObjectsData?.nfts ?? [];
 
     return useQuery({
         queryKey: [

apps/wallet-dashboard/providers/AppProviders.tsx

@@ -10,10 +10,9 @@ import { getAllNetworks, getDefaultNetwork } from '@iota/iota-sdk/client';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { useState } from 'react';
-import { KioskClientProvider, useLocalStorage } from '@iota/core';
+import { KioskClientProvider, StardustIndexerClientProvider, useLocalStorage } from '@iota/core';
 import { growthbook } from '@/lib/utils';
 import { ThemeProvider } from '@iota/core';
-import { StardustIndexerClientProvider } from './StardustIndexerClientProvider';
 import { createIotaClient } from '@/lib/utils/defaultRpcClient';
 
 growthbook.init();

apps/wallet/src/ui/app/pages/home/tokens/MigrationDialog.tsx

@@ -0,0 +1,46 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, Dialog, DialogContent, DialogBody, Header } from '@iota/apps-ui-kit';
+import { Theme, useTheme } from '@iota/core';
+import MigrationImage from '_assets/images/migration_dialog.png';
+import MigrationDarkImage from '_assets/images/migration_dialog_darkmode.png';
+import { WALLET_DASHBOARD_URL } from '_src/shared/constants';
+
+interface MigrationDialogProps {
+    open: boolean;
+    setOpen: (isOpen: boolean) => void;
+}
+
+export function MigrationDialog({ open, setOpen }: MigrationDialogProps) {
+    const { theme } = useTheme();
+
+    const imgSrc = theme === Theme.Dark ? MigrationDarkImage : MigrationImage;
+
+    function navigateToDashboard() {
+        window.open(WALLET_DASHBOARD_URL, '_blank');
+    }
+    return (
+        <Dialog open={open} onOpenChange={setOpen}>
+            <DialogContent containerId="overlay-portal-container">
+                <Header title="Migration" onClose={() => setOpen(false)} titleCentered />
+                <DialogBody>
+                    <div className="flex flex-col gap-lg text-center">
+                        <img src={imgSrc} alt="Migration" />
+                        <div className="flex flex-col items-center justify-center gap-y-sm pb-md">
+                            <span className="text-headline-sm text-neutral-10 dark:text-neutral-92">
+                                Fast and Easy Migration
+                            </span>
+                            <span className="max-w-56 text-body-md text-neutral-40 dark:text-neutral-60">
+                                Migrate your tokens to the new network to enjoy the latest features.
+                            </span>
+                        </div>
+                    </div>
+                </DialogBody>
+                <div className="flex w-full flex-row justify-center gap-2 px-md--rs pb-md--rs pt-sm--rs">
+                    <Button onClick={navigateToDashboard} fullWidth text="Go to Dashboard" />
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}