feat(wallet-dashboard): Improve assets filter

apps/core/package.json

@@ -36,6 +36,7 @@
         "bignumber.js": "^9.1.1",
         "clsx": "^2.1.1",
         "formik": "^2.4.2",
+        "idb-keyval": "^6.2.1",
         "qrcode.react": "^4.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

apps/core/src/contexts/HiddenAssetsProvider.tsx

@@ -0,0 +1,143 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { get, set } from 'idb-keyval';
+import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
+
+const HIDDEN_ASSET_IDS = 'hidden-asset-ids';
+
+export type HiddenAssets =
+    | {
+          type: 'loading';
+      }
+    | {
+          type: 'loaded';
+          assetIds: string[];
+      };
+
+interface HiddenAssetContext {
+    hiddenAssets: HiddenAssets;
+    setHiddenAssetIds: (hiddenAssetIds: string[]) => void;
+    hideAsset: (assetId: string) => Promise<string | undefined>;
+    undoHideAsset: (assetId: string) => Promise<void>;
+    showAsset: (assetId: string) => Promise<string | undefined>;
+    undoShowAsset: (assetId: string) => Promise<void>;
+}
+
+export const HiddenAssetsContext = createContext<HiddenAssetContext>({
+    hiddenAssets: {
+        type: 'loading',
+    },
+    setHiddenAssetIds: () => {},
+    hideAsset: async () => undefined,
+    undoHideAsset: async () => undefined,
+    showAsset: async () => undefined,
+    undoShowAsset: async () => undefined,
+});
+
+export const HiddenAssetsProvider = ({ children }: { children: ReactNode }) => {
+    const [hiddenAssets, setHiddenAssets] = useState<HiddenAssets>({
+        type: 'loading',
+    });
+
+    const hiddenAssetIds = hiddenAssets.type === 'loaded' ? hiddenAssets.assetIds : [];
+
+    useEffect(() => {
+        (async () => {
+            const hiddenAssets = (await get<string[]>(HIDDEN_ASSET_IDS)) ?? [];
+            setHiddenAssetIds(hiddenAssets);
+        })();
+    }, []);
+
+    function setHiddenAssetIds(hiddenAssetIds: string[]) {
+        setHiddenAssets({
+            type: 'loaded',
+            assetIds: hiddenAssetIds,
+        });
+    }
+
+    const hideAssetId = useCallback(
+        async (newAssetId: string) => {
+            if (hiddenAssetIds.includes(newAssetId)) return;
+
+            const newHiddenAssetIds = [...hiddenAssetIds, newAssetId];
+            setHiddenAssetIds(newHiddenAssetIds);
+            await set(HIDDEN_ASSET_IDS, newHiddenAssetIds);
+            return newAssetId;
+        },
+        [hiddenAssetIds],
+    );
+
+    const undoHideAsset = async (assetId: string) => {
+        try {
+            let updatedHiddenAssetIds;
+            setHiddenAssets((previous) => {
+                const previousIds = previous.type === 'loaded' ? previous.assetIds : [];
+                updatedHiddenAssetIds = previousIds.filter((id) => id !== assetId);
+                return {
+                    type: 'loaded',
+                    assetIds: updatedHiddenAssetIds,
+                };
+            });
+            await set(HIDDEN_ASSET_IDS, updatedHiddenAssetIds);
+        } catch (error) {
+            // Restore the asset ID back to the hidden asset IDs list
+            setHiddenAssetIds([...hiddenAssetIds, assetId]);
+            await set(HIDDEN_ASSET_IDS, hiddenAssetIds);
+        }
+    };
+
+    const showAssetId = useCallback(
+        async (newAssetId: string) => {
+            if (!hiddenAssetIds.includes(newAssetId)) return;
+
+            try {
+                const updatedHiddenAssetIds = hiddenAssetIds.filter((id) => id !== newAssetId);
+                setHiddenAssetIds(updatedHiddenAssetIds);
+                await set(HIDDEN_ASSET_IDS, updatedHiddenAssetIds);
+                return newAssetId;
+            } catch (error) {
+                // Restore the asset ID back to the hidden asset IDs list
+                setHiddenAssetIds([...hiddenAssetIds, newAssetId]);
+                await set(HIDDEN_ASSET_IDS, hiddenAssetIds);
+            }
+        },
+        [hiddenAssetIds],
+    );
+
+    const undoShowAsset = async (assetId: string) => {
+        let newHiddenAssetIds;
+        setHiddenAssets((previous) => {
+            const previousIds = previous.type === 'loaded' ? previous.assetIds : [];
+            newHiddenAssetIds = [...previousIds, assetId];
+            return {
+                type: 'loaded',
+                assetIds: newHiddenAssetIds,
+            };
+        });
+        await set(HIDDEN_ASSET_IDS, newHiddenAssetIds);
+    };
+
+    return (
+        <HiddenAssetsContext.Provider
+            value={{
+                hiddenAssets:
+                    hiddenAssets.type === 'loaded'
+                        ? { ...hiddenAssets, assetIds: Array.from(new Set(hiddenAssetIds)) }
+                        : { type: 'loading' },
+                setHiddenAssetIds,
+                hideAsset: hideAssetId,
+                undoHideAsset: undoHideAsset,
+                showAsset: showAssetId,
+                undoShowAsset: undoShowAsset,
+            }}
+        >
+            {children}
+        </HiddenAssetsContext.Provider>
+    );
+};
+
+export const useHiddenAssets = () => {
+    return useContext(HiddenAssetsContext);
+};

apps/core/src/contexts/index.ts

@@ -2,3 +2,4 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export * from './ThemeContext';
+export * from './HiddenAssetsProvider';

apps/core/src/hooks/index.ts

@@ -47,6 +47,7 @@ export * from './useOwnedNFT';
 export * from './useNftDetails';
 export * from './useCountdownByTimestamp';
 export * from './useStakeRewardStatus';
+export * from './useGetNFTs';
 export * from './useRecognizedPackages';
 
 export * from './stake';

apps/wallet/src/ui/app/hooks/useGetNFTs.ts → apps/core/src/hooks/useGetNFTs.ts

@@ -2,10 +2,15 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { hasDisplayData, isKioskOwnerToken, useGetOwnedObjects, useKioskClient } from '@iota/core';
-import { type IotaObjectData } from '@iota/iota-sdk/client';
+import {
+    hasDisplayData,
+    isKioskOwnerToken,
+    useGetOwnedObjects,
+    useKioskClient,
+    HiddenAssets,
+} from '../../';
+import { type IotaObjectData, IotaObjectDataFilter } from '@iota/iota-sdk/client';
 import { useMemo } from 'react';
-import { useHiddenAssets } from '../pages/home/assets/HiddenAssetsProvider';
 
 type OwnedAssets = {
     visual: IotaObjectData[];
@@ -18,25 +23,26 @@ export enum AssetFilterTypes {
     Other = 'other',
 }
 
-export function useGetNFTs(address?: string | null) {
+const OBJECTS_PER_REQ = 50;
+
+export function useGetNFTs(
+    address?: string | null,
+    filter?: IotaObjectDataFilter,
+    hiddenAssets?: HiddenAssets,
+) {
     const kioskClient = useKioskClient();
     const {
         data,
+        isFetching,
         isPending,
         error,
         isError,
         isFetchingNextPage,
         hasNextPage,
         fetchNextPage,
         isLoading,
-    } = useGetOwnedObjects(
-        address,
-        {
-            MatchNone: [{ StructType: '0x2::coin::Coin' }],
-        },
-        50,
-    );
-    const { hiddenAssets } = useHiddenAssets();
+        refetch,
+    } = useGetOwnedObjects(address, filter, OBJECTS_PER_REQ);
 
     const assets = useMemo(() => {
         const ownedAssets: OwnedAssets = {
@@ -45,13 +51,16 @@ export function useGetNFTs(address?: string | null) {
             hidden: [],
         };
 
-        if (hiddenAssets.type === 'loading') {
+        if (hiddenAssets?.type === 'loading') {
             return ownedAssets;
         } else {
             const groupedAssets = data?.pages
                 .flatMap((page) => page.data)
                 .reduce((acc, curr) => {
-                    if (curr.data?.objectId && hiddenAssets.assetIds.includes(curr.data?.objectId))
+                    if (
+                        curr.data?.objectId &&
+                        hiddenAssets?.assetIds?.includes(curr.data?.objectId)
+                    )
                         acc.hidden.push(curr.data as IotaObjectData);
                     else if (hasDisplayData(curr) || isKioskOwnerToken(kioskClient.network, curr))
                         acc.visual.push(curr.data as IotaObjectData);
@@ -64,12 +73,14 @@ export function useGetNFTs(address?: string | null) {
 
     return {
         data: assets,
+        isFetching,
         isLoading,
         hasNextPage,
         isFetchingNextPage,
         fetchNextPage,
         isPending: isPending,
         isError: isError,
         error,
+        refetch,
     };
 }

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

@@ -4,16 +4,14 @@
 'use client';
 
 import { Panel, Title, Chip, TitleSize } from '@iota/apps-ui-kit';
-import { hasDisplayData, useGetOwnedObjects } from '@iota/core';
+import { hasDisplayData, useGetNFTs } from '@iota/core';
 import { useCurrentAccount } from '@iota/dapp-kit';
 import { IotaObjectData } from '@iota/iota-sdk/client';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { AssetCategory } from '@/lib/enums';
 import { AssetList } from '@/components/AssetsList';
 import { AssetDialog } from '@/components/Dialogs/Assets';
 
-const OBJECTS_PER_REQ = 50;
-
 const ASSET_CATEGORIES: { label: string; value: AssetCategory }[] = [
     {
         label: 'Visual',
@@ -27,34 +25,46 @@ const ASSET_CATEGORIES: { label: string; value: AssetCategory }[] = [
 
 export default function AssetsDashboardPage(): React.JSX.Element {
     const [selectedAsset, setSelectedAsset] = useState<IotaObjectData | null>(null);
-    const [selectedCategory, setSelectedCategory] = useState<AssetCategory>(AssetCategory.Visual);
+    const [selectedCategory, setSelectedCategory] = useState<AssetCategory | null>(null);
     const account = useCurrentAccount();
-    const { data, isFetching, fetchNextPage, hasNextPage, refetch } = useGetOwnedObjects(
-        account?.address,
-        undefined,
-        OBJECTS_PER_REQ,
-    );
+    const {
+        data: ownedAssets,
+        isFetching,
+        fetchNextPage,
+        hasNextPage,
+        refetch,
+    } = useGetNFTs(account?.address);
 
-    const assets: IotaObjectData[] = [];
+    const assets: IotaObjectData[] = (() => {
+        if (selectedCategory === null) return [] as IotaObjectData[];
 
-    for (const page of data?.pages || []) {
-        for (const asset of page.data) {
-            if (asset.data && asset.data.objectId) {
-                if (selectedCategory == AssetCategory.Visual) {
-                    if (hasDisplayData(asset)) {
-                        assets.push(asset.data);
-                    }
-                } else if (selectedCategory == AssetCategory.Other) {
-                    assets.push(asset.data);
-                }
+        const assetsList = ownedAssets ? ownedAssets[selectedCategory] : [];
+        return assetsList.filter((asset) => {
+            if (selectedCategory === AssetCategory.Visual) {
+                return hasDisplayData({ data: asset });
             }
-        }
-    }
+            return true;
+        });
+    })();
 
     function onAssetClick(asset: IotaObjectData) {
         setSelectedAsset(asset);
     }
 
+    useEffect(() => {
+        if (!ownedAssets || selectedCategory !== null) {
+            return;
+        }
+
+        const defaultCategory =
+            ownedAssets.visual.length > 0
+                ? AssetCategory.Visual
+                : ownedAssets.other.length > 0
+                  ? AssetCategory.Other
+                  : AssetCategory.Visual;
+        setSelectedCategory(defaultCategory);
+    }, [ownedAssets, selectedCategory]);
+
     return (
         <Panel>
             <Title title="Assets" size={TitleSize.Medium} />
@@ -69,15 +79,16 @@ export default function AssetsDashboardPage(): React.JSX.Element {
                         />
                     ))}
                 </div>
-
-                <AssetList
-                    assets={assets}
-                    selectedCategory={selectedCategory}
-                    onClick={onAssetClick}
-                    hasNextPage={hasNextPage}
-                    isFetchingNextPage={isFetching}
-                    fetchNextPage={fetchNextPage}
-                />
+                {selectedCategory && (
+                    <AssetList
+                        assets={assets}
+                        selectedCategory={selectedCategory}
+                        onClick={onAssetClick}
+                        hasNextPage={hasNextPage}
+                        isFetchingNextPage={isFetching}
+                        fetchNextPage={fetchNextPage}
+                    />
+                )}
                 {selectedAsset && (
                     <AssetDialog
                         onClose={() => setSelectedAsset(null)}

apps/wallet-dashboard/lib/enums/assetCategory.enum.ts

@@ -2,6 +2,6 @@
 // SPDX-License-Identifier: Apache-2.0
 
 export enum AssetCategory {
-    Visual = 'Visual',
-    Other = 'Other',
+    Visual = 'visual',
+    Other = 'other',
 }