feat(wallet-dashboard): add assets page (#3724)

* feat(wallet-dashboard): add protected layout

* feat: add missing TopNav

* fix: tests

* fix: imports

* feat(wallet-dashboard): add assets page

* fix: add missing themes

* feat: improve connect button size

* revert: "feat: improve connect button size"

* refactor: remove unnecessary useMemo

* fix: remove commented lines

---------

Co-authored-by: evavirseda <[email protected]>
Co-authored-by: Begoña Álvarez de la Cruz <[email protected]>

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

@@ -0,0 +1,45 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+'use client';
+
+import React, { useCallback } from 'react';
+import { useParams } from 'next/navigation';
+import { AssetCard, Button, RouteLink, SendAssetPopup } from '@/components';
+import { isAssetTransferable, useGetObject } from '@iota/core';
+import { usePopups } from '@/hooks';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
+
+const VisualAssetDetailPage = () => {
+    const params = useParams();
+    const objectId = params.objectId as string;
+    const { data: asset } = useGetObject(objectId);
+    const activeAccount = useCurrentAccount();
+
+    const { openPopup, closePopup } = usePopups();
+
+    const showSendAssetPopup = useCallback(() => {
+        if (asset?.data) {
+            openPopup(<SendAssetPopup asset={asset?.data} onClose={closePopup} />);
+        }
+    }, [asset, openPopup, closePopup]);
+
+    const assetIsTransferable = asset?.data ? isAssetTransferable(asset?.data) : false;
+
+    return (
+        <div className="flex h-full w-full flex-col space-y-4 px-40">
+            <RouteLink path={ASSETS_ROUTE.path} title="Back" />
+            {asset?.data ? (
+                <AssetCard key={asset.data.objectId} asset={asset.data} />
+            ) : (
+                <div className="flex justify-center p-20">Asset not found</div>
+            )}
+            {assetIsTransferable && activeAccount ? (
+                <Button onClick={showSendAssetPopup}>Send Asset</Button>
+            ) : null}
+        </div>
+    );
+};
+
+export default VisualAssetDetailPage;

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

@@ -1,12 +1,97 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-function AssetsDashboardPage(): JSX.Element {
+'use client';
+
+import { AssetCard, VirtualList } from '@/components';
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
+import { Panel, Title, Chip } from '@iota/apps-ui-kit';
+import { hasDisplayData, useGetOwnedObjects } from '@iota/core';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { IotaObjectData } from '@iota/iota-sdk/client';
+import { useState } from 'react';
+import { AssetCategory } from '@/lib/enums';
+import Link from 'next/link';
+
+const ASSET_CATEGORIES: { label: string; value: AssetCategory }[] = [
+    {
+        label: 'Visual',
+        value: AssetCategory.Visual,
+    },
+    {
+        label: 'Other',
+        value: AssetCategory.Other,
+    },
+];
+
+export default function AssetsDashboardPage(): React.JSX.Element {
+    const [selectedCategory, setSelectedCategory] = useState<AssetCategory>(AssetCategory.Visual);
+
+    const account = useCurrentAccount();
+    const {
+        data: ownedObjects,
+        fetchNextPage,
+        hasNextPage,
+        isFetchingNextPage,
+    } = useGetOwnedObjects(account?.address);
+
+    const [visual, nonVisual] = (() => {
+        const visual: IotaObjectData[] = [];
+        const nonVisual: IotaObjectData[] = [];
+
+        ownedObjects?.pages
+            .flatMap((page) => page.data)
+            .filter((asset) => asset.data && asset.data.objectId)
+            .forEach((asset) => {
+                if (asset.data) {
+                    if (hasDisplayData(asset)) {
+                        visual.push(asset.data);
+                    } else {
+                        nonVisual.push(asset.data);
+                    }
+                }
+            });
+
+        return [visual, nonVisual];
+    })();
+
+    const categoryToAsset: Record<AssetCategory, IotaObjectData[]> = {
+        [AssetCategory.Visual]: visual,
+        [AssetCategory.Other]: nonVisual,
+    };
+
+    const assetList = categoryToAsset[selectedCategory];
+
     return (
-        <div className="flex items-center justify-center pt-12">
-            <h1>ASSETS</h1>
-        </div>
+        <Panel>
+            <Title title="Assets" />
+            <div className="px-lg">
+                <div className="flex flex-row items-center justify-start gap-xs py-xs">
+                    {ASSET_CATEGORIES.map((tab) => (
+                        <Chip
+                            key={tab.label}
+                            label={tab.label}
+                            onClick={() => setSelectedCategory(tab.value)}
+                            selected={selectedCategory === tab.value}
+                        />
+                    ))}
+                </div>
+
+                <div className="max-h-[600px] overflow-auto py-sm">
+                    <VirtualList
+                        items={assetList}
+                        hasNextPage={hasNextPage}
+                        isFetchingNextPage={isFetchingNextPage}
+                        fetchNextPage={fetchNextPage}
+                        estimateSize={() => 180}
+                        render={(asset) => (
+                            <Link href={ASSETS_ROUTE.path + `/${asset.objectId}`}>
+                                <AssetCard asset={asset} />
+                            </Link>
+                        )}
+                    />
+                </div>
+            </div>
+        </Panel>
     );
 }
-
-export default AssetsDashboardPage;

apps/wallet-dashboard/app/(protected)/layout.tsx

@@ -27,11 +27,11 @@ function DashboardLayout({ children }: PropsWithChildren): JSX.Element {
                 <Sidebar />
             </div>
 
-            <div className="container relative min-h-screen">
+            <div className="container relative flex min-h-screen flex-col">
                 <div className="sticky top-0">
                     <TopNav />
                 </div>
-                <div>{children}</div>
+                <div className="flex-1 py-md--rs">{children}</div>
             </div>
 
             <div className="fixed bottom-5 right-5">

apps/wallet-dashboard/components/VirtualList.tsx

@@ -61,7 +61,7 @@ function VirtualList<T>({
     ]);
 
     return (
-        <div className="relative h-[50vh] w-full overflow-auto" ref={containerRef}>
+        <div className="relative h-full w-full" ref={containerRef}>
             <div
                 style={{
                     height: `${virtualizer.getTotalSize()}px`,

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

@@ -0,0 +1,7 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export enum AssetCategory {
+    Visual = 'Visual',
+    Other = 'Other',
+}

apps/wallet-dashboard/lib/enums/index.ts

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

apps/wallet-dashboard/lib/utils/assets.ts

@@ -0,0 +1,17 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { hasDisplayData } from '@iota/core';
+import { PaginatedObjectsResponse } from '@iota/iota-sdk/client';
+
+export function filterAssetList(pages: PaginatedObjectsResponse[], shouldBeVisual: boolean) {
+    return (
+        pages
+            .flatMap((page) => page.data)
+            .filter(
+                (asset) =>
+                    asset.data && asset.data.objectId && hasDisplayData(asset) === shouldBeVisual,
+            )
+            .map((response) => response.data!) ?? []
+    );
+}

apps/wallet-dashboard/next.config.mjs

@@ -7,7 +7,7 @@ const nextConfig = {
         return [
             {
                 source: '/dashboard',
-                destination: '/dashboard/home',
+                destination: '/home',
                 permanent: true,
             },
         ];