feat(wallet): rebrand hidden assets

apps/ui-kit/src/lib/components/molecules/card/CardAction.tsx

@@ -10,16 +10,21 @@ export type CardActionProps = {
     subtitle?: string;
     type: CardActionType;
     onClick?: () => void;
+    icon?: React.ReactNode;
 };
 
-export function CardAction({ type, onClick, subtitle, title }: CardActionProps) {
+export function CardAction({ type, onClick, subtitle, title, icon }: CardActionProps) {
+    const handleActionCardActionClick = (event: React.MouseEvent) => {
+        event?.stopPropagation();
+        onClick?.();
+    };
     if (type === CardActionType.Link) {
         return (
             <div
-                onClick={onClick}
-                className="shrink-0 text-neutral-10 dark:text-neutral-92 [&_svg]:h-6 [&_svg]:w-6"
+                onClick={handleActionCardActionClick}
+                className="shrink-0 text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"
             >
-                <ArrowRight />
+                {icon ? icon : <ArrowRight />}
             </div>
         );
     }
@@ -47,7 +52,7 @@ export function CardAction({ type, onClick, subtitle, title }: CardActionProps)
                     type={ButtonType.Outlined}
                     size={ButtonSize.Small}
                     text={title}
-                    onClick={onClick}
+                    onClick={handleActionCardActionClick}
                 />
             </div>
         );

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

@@ -5,8 +5,7 @@
 import { hasDisplayData, isKioskOwnerToken, useGetOwnedObjects, useKioskClient } from '@iota/core';
 import { type IotaObjectData } from '@iota/iota-sdk/client';
 import { useMemo } from 'react';
-
-import { useHiddenAssets } from '../pages/home/hidden-assets/HiddenAssetsProvider';
+import { useHiddenAssets } from '../pages/home/assets/HiddenAssetsProvider';
 
 type OwnedAssets = {
     visual: IotaObjectData[];

apps/wallet/src/ui/app/pages/home/hidden-assets/HiddenAssetsProvider.tsx → apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx

@@ -7,7 +7,6 @@ import { Check12 } from '@iota/icons';
 import { get, set } from 'idb-keyval';
 import { createContext, useCallback, useContext, useEffect, useState, type ReactNode } from 'react';
 import { toast } from 'react-hot-toast';
-
 import { Link as InlineLink } from '../../../shared/Link';
 
 const HIDDEN_ASSET_IDS = 'hidden-asset-ids';
@@ -80,7 +79,7 @@ export const HiddenAssetsProvider = ({ children }: { children: ReactNode }) => {
                                     }}
                                 >
                                     <InlineLink
-                                        to="/nfts/hidden-assets"
+                                        to="/nfts"
                                         color="hero"
                                         weight="medium"
                                         before={

apps/wallet/src/ui/app/pages/home/assets/index.tsx

@@ -4,9 +4,8 @@
 
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
 import { Route, Routes } from 'react-router-dom';
-
-import { HiddenAssetsPage, NftsPage } from '..';
-import { HiddenAssetsProvider } from '../hidden-assets/HiddenAssetsProvider';
+import { NftsPage } from '..';
+import { HiddenAssetsProvider } from './HiddenAssetsProvider';
 
 function AssetsPage() {
     if (useUnlockedGuard()) {
@@ -15,7 +14,6 @@ function AssetsPage() {
     return (
         <HiddenAssetsProvider>
             <Routes>
-                <Route path="/hidden-assets" element={<HiddenAssetsPage />} />
                 <Route path="/:filterType?/*" element={<NftsPage />} />
             </Routes>
         </HiddenAssetsProvider>

apps/wallet/src/ui/app/pages/home/index.tsx

@@ -31,7 +31,6 @@ const HomePage = ({ disableNavigation }: HomePageProps) => {
 
 export default HomePage;
 export { default as NftsPage } from './nfts';
-export { default as HiddenAssetsPage } from './hidden-assets';
 export { default as AssetsPage } from './assets';
 export { default as TokensPage } from './tokens';
 export { default as TransactionBlocksPage } from './transactions';

apps/wallet/src/ui/app/pages/home/nfts/HiddenAsset.tsx

@@ -0,0 +1,100 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { ErrorBoundary } from '_components';
+import { ampli } from '_src/shared/analytics/ampli';
+import { type IotaObjectData } from '@iota/iota-sdk/client';
+import { useNavigate } from 'react-router-dom';
+import { useHiddenAssets } from '../assets/HiddenAssetsProvider';
+import {
+    getKioskIdFromOwnerCap,
+    isKioskOwnerToken,
+    useGetNFTMeta,
+    useGetObject,
+    useKioskClient,
+} from '@iota/core';
+import {
+    Card,
+    CardAction,
+    CardActionType,
+    CardBody,
+    CardImage,
+    CardType,
+    ImageShape,
+    ImageType,
+} from '@iota/apps-ui-kit';
+import { formatAddress } from '@iota/iota-sdk/utils';
+import { useResolveVideo } from '_src/ui/app/hooks/useResolveVideo';
+import { VisibilityOff } from '@iota/ui-icons';
+
+export interface HiddenAssetProps {
+    data: IotaObjectData | null | undefined;
+    display:
+        | {
+              [key: string]: string;
+          }
+        | null
+        | undefined;
+}
+
+export default function HiddenAsset(item: HiddenAssetProps) {
+    const { showAsset } = useHiddenAssets();
+    const kioskClient = useKioskClient();
+    const navigate = useNavigate();
+    const { objectId, type } = item.data!;
+    const { data: objectData } = useGetObject(objectId);
+    const { data: nftMeta } = useGetNFTMeta(objectId);
+
+    const nftName = nftMeta?.name || formatAddress(objectId);
+    const nftImageUrl = nftMeta?.imageUrl || '';
+    const video = useResolveVideo(objectData);
+    return (
+        <ErrorBoundary>
+            <Card
+                type={CardType.Default}
+                onClick={() => {
+                    navigate(
+                        isKioskOwnerToken(kioskClient.network, item.data)
+                            ? `/kiosk?${new URLSearchParams({
+                                  kioskId: getKioskIdFromOwnerCap(item.data!),
+                              })}`
+                            : `/nft-details?${new URLSearchParams({
+                                  objectId,
+                              }).toString()}`,
+                    );
+                    ampli.clickedCollectibleCard({
+                        objectId,
+                        collectibleType: type!,
+                    });
+                }}
+            >
+                <CardImage type={ImageType.BgTransparent} shape={ImageShape.SquareRounded}>
+                    {video ? (
+                        <video
+                            className="h-full w-full object-cover"
+                            src={video}
+                            controls
+                            autoPlay
+                            muted
+                        />
+                    ) : (
+                        <img
+                            src={nftImageUrl}
+                            alt={nftName}
+                            className="h-full w-full object-cover"
+                        />
+                    )}
+                </CardImage>
+                <CardBody title={nftMeta?.name ?? 'Asset'} subtitle={formatAddress(objectId)} />
+                <CardAction
+                    type={CardActionType.Link}
+                    onClick={() => {
+                        showAsset(objectId);
+                    }}
+                    icon={<VisibilityOff />}
+                />
+            </Card>
+        </ErrorBoundary>
+    );
+}

apps/wallet/src/ui/app/pages/home/nfts/HiddenAssets.tsx

@@ -0,0 +1,17 @@
+// Copyright (c) Mysten Labs, Inc.
+// Modifications Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import HiddenAsset, { type HiddenAssetProps } from './HiddenAsset';
+
+interface HiddenAssetsProps {
+    items: HiddenAssetProps[];
+}
+
+export default function HiddenAssets({ items }: HiddenAssetsProps) {
+    return (
+        <div className="flex w-full flex-col overflow-y-auto">
+            {items?.map((object) => <HiddenAsset key={object.data!.objectId} {...object} />)}
+        </div>
+    );
+}