feat(Wallet-dashboard): add styles for non visual assets

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

@@ -3,16 +3,14 @@
 
 'use client';
 
-import { AssetCard, PageSizeSelector, PaginationOptions } from '@/components';
-import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
+import { PageSizeSelector, PaginationOptions } from '@/components';
 import { Panel, Title, Chip, TitleSize, DropdownPosition } from '@iota/apps-ui-kit';
 import { hasDisplayData, useCursorPagination, useGetOwnedObjects } from '@iota/core';
 import { useCurrentAccount } from '@iota/dapp-kit';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { useMemo, useState } from 'react';
 import { AssetCategory } from '@/lib/enums';
-import { VisibilityOff } from '@iota/ui-icons';
-import { useRouter } from 'next/navigation';
+import { AssetList } from '@/components/AssetsList';
 
 const PAGINATION_RANGE = [20, 40, 60];
 
@@ -34,7 +32,6 @@ const ASSET_CATEGORIES: { label: string; value: AssetCategory }[] = [
 export default function AssetsDashboardPage(): React.JSX.Element {
     const [selectedCategory, setSelectedCategory] = useState<AssetCategory>(AssetCategory.Visual);
     const [limit, setLimit] = useState<number>(PAGINATION_RANGE[1]);
-    const router = useRouter();
 
     const account = useCurrentAccount();
     const ownedObjectsQuery = useGetOwnedObjects(account?.address, undefined, limit);
@@ -85,19 +82,7 @@ export default function AssetsDashboardPage(): React.JSX.Element {
                     ))}
                 </div>
 
-                <div className="grid-template-visual-assets grid max-h-[600px] gap-md overflow-auto py-sm">
-                    {assetList.map((asset) => (
-                        <div key={asset.digest}>
-                            <AssetCard
-                                asset={asset}
-                                icon={<VisibilityOff />}
-                                onClick={() =>
-                                    router.push(ASSETS_ROUTE.path + `/${asset.objectId}`)
-                                }
-                            />
-                        </div>
-                    ))}
-                </div>
+                <AssetList assets={assetList} selectedCategory={selectedCategory} />
                 <div className="flex flex-row items-center justify-end py-xs">
                     <PaginationOptions
                         pagination={pagination}

apps/wallet-dashboard/components/AssetCard.tsx

@@ -0,0 +1,74 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { AssetCategory } from '@/lib/enums';
+import { ArrowTopRight, VisibilityOff } from '@iota/ui-icons';
+import {
+    Card,
+    CardAction,
+    CardActionType,
+    CardBody,
+    CardType,
+    VisualAssetCard,
+    VisualAssetType,
+} from '@iota/apps-ui-kit';
+import { useGetNFTMeta } from '@iota/core';
+import { IotaObjectData } from '@iota/iota-sdk/client';
+import { formatAddress, parseStructTag } from '@iota/iota-sdk/utils';
+
+interface AssetCardProps {
+    asset: IotaObjectData;
+    type: AssetCategory;
+    onClick?: () => void;
+}
+
+export function AssetCard({ asset, type, onClick }: AssetCardProps): React.JSX.Element {
+    return type === AssetCategory.Visual ? (
+        <VisualAsset asset={asset} icon={<VisibilityOff />} onClick={onClick} />
+    ) : (
+        <NonVisualAssetCard key={asset.digest} asset={asset} onClick={onClick} />
+    );
+}
+
+type NonVisualAssetCardProps = {
+    asset: IotaObjectData;
+} & Pick<React.ComponentProps<typeof Card>, 'onClick'>;
+
+export function NonVisualAssetCard({ asset, onClick }: NonVisualAssetCardProps): React.JSX.Element {
+    const { address, module, name } = parseStructTag(asset.type!);
+    return (
+        <Card type={CardType.Default} isHoverable onClick={onClick}>
+            <CardBody
+                title={formatAddress(asset.objectId!)}
+                subtitle={`${formatAddress(address)}::${module}::${name}`}
+                isTextTruncated
+            />
+            <CardAction type={CardActionType.Link} icon={<ArrowTopRight />} />
+        </Card>
+    );
+}
+
+type VisualAssetProps = {
+    asset: IotaObjectData;
+} & Pick<React.ComponentProps<typeof VisualAssetCard>, 'onClick' | 'onIconClick' | 'icon'>;
+
+export function VisualAsset({
+    asset,
+    icon,
+    onClick,
+    onIconClick,
+}: VisualAssetProps): React.JSX.Element | null {
+    const { data: nftMeta } = useGetNFTMeta(asset.objectId);
+    return asset.display && nftMeta && nftMeta.imageUrl ? (
+        <VisualAssetCard
+            assetSrc={nftMeta?.imageUrl ?? asset?.display?.data?.imageUrl ?? ''}
+            assetTitle={nftMeta?.name ?? asset?.display?.data?.name}
+            assetType={VisualAssetType.Image}
+            altText={nftMeta?.name ?? (asset?.display?.data?.name || 'NFT')}
+            isHoverable
+            icon={icon}
+            onClick={onClick}
+            onIconClick={onIconClick}
+        />
+    ) : null;
+}

apps/wallet-dashboard/components/AssetsList.tsx

@@ -0,0 +1,40 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
+import { AssetCategory } from '@/lib/enums';
+import { IotaObjectData } from '@iota/iota-sdk/client';
+import { useRouter } from 'next/navigation';
+import { AssetCard } from './AssetCard';
+
+interface AssetListProps {
+    assets: IotaObjectData[];
+    selectedCategory: AssetCategory;
+}
+
+const ASSET_LAYOUT: Record<AssetCategory, string> = {
+    [AssetCategory.Visual]:
+        'grid-template-visual-assets grid max-h-[600px] gap-md overflow-auto py-sm',
+    [AssetCategory.Other]: 'flex flex-col overflow-auto py-sm',
+};
+
+export function AssetList({ assets, selectedCategory }: AssetListProps): React.JSX.Element {
+    const router = useRouter();
+
+    function handleAssetClick(asset: IotaObjectData) {
+        router.push(ASSETS_ROUTE.path + `/${asset.objectId}`);
+    }
+
+    return (
+        <div className={ASSET_LAYOUT[selectedCategory]}>
+            {assets.map((asset) => (
+                <AssetCard
+                    key={asset.digest}
+                    asset={asset}
+                    type={selectedCategory}
+                    onClick={() => handleAssetClick(asset)}
+                />
+            ))}
+        </div>
+    );
+}