From ea69c3d3d512a303423b01a7d4bd8e73e3557879 Mon Sep 17 00:00:00 2001
From: Panteleymonchuk <panteleymonchuk@gmail.com>
Date: Mon, 23 Dec 2024 14:41:36 +0200
Subject: [PATCH 1/5] feat(wallet-dashboard): add KioskTile component and
 integrate with AssetTileLink

---
 .../components/tiles/AssetTileLink.tsx        |  9 ++-
 .../components/tiles/KioskTile.tsx            | 60 +++++++++++++++++++
 .../components/tiles/index.ts                 |  1 +
 .../ui/app/components/nft-display/Kiosk.tsx   | 11 ++--
 .../ui/app/components/nft-display/index.tsx   |  6 +-
 5 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 apps/wallet-dashboard/components/tiles/KioskTile.tsx

diff --git a/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx b/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
index 6d5d25d23b7..7ff70bc255d 100644
--- a/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
+++ b/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
@@ -3,9 +3,10 @@
 
 'use client';
 
+import { isKioskOwnerToken, useKioskClient } from '@iota/core';
 import { AssetCategory } from '@/lib/enums';
 import { VisibilityOff } from '@iota/ui-icons';
-import { VisualAssetTile } from '.';
+import { VisualAssetTile, KioskTile } from '.';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { NonVisualAssetCard } from './NonVisualAssetTile';
 
@@ -16,13 +17,17 @@ interface AssetTileLinkProps {
 }
 
 export function AssetTileLink({ asset, type, onClick }: AssetTileLinkProps): React.JSX.Element {
+    const kioskClient = useKioskClient();
+    const isOwnerToken = isKioskOwnerToken(kioskClient.network, asset);
     function handleClick() {
         onClick(asset);
     }
 
     return (
         <>
-            {type === AssetCategory.Visual ? (
+            {type === AssetCategory.Visual && isOwnerToken ? (
+                <KioskTile object={asset} />
+            ) : type === AssetCategory.Visual ? (
                 <VisualAssetTile asset={asset} icon={<VisibilityOff />} onClick={handleClick} />
             ) : (
                 <NonVisualAssetCard asset={asset} />
diff --git a/apps/wallet-dashboard/components/tiles/KioskTile.tsx b/apps/wallet-dashboard/components/tiles/KioskTile.tsx
new file mode 100644
index 00000000000..37b9f95d81d
--- /dev/null
+++ b/apps/wallet-dashboard/components/tiles/KioskTile.tsx
@@ -0,0 +1,60 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { getKioskIdFromOwnerCap, hasDisplayData, useGetKioskContents } from '@iota/core';
+import { type IotaObjectData } from '@iota/iota-sdk/client';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { ButtonUnstyled, CardImage, ImageType, truncate } from '@iota/apps-ui-kit';
+import { PlaceholderReplace } from '@iota/ui-icons';
+
+interface KioskProps {
+    object: IotaObjectData;
+}
+
+export function KioskTile({ object }: KioskProps) {
+    const account = useCurrentAccount();
+    const { data: kioskData, isPending } = useGetKioskContents(account?.address);
+
+    const kioskId = getKioskIdFromOwnerCap(object);
+    const kiosk = kioskData?.kiosks.get(kioskId!);
+    const itemsWithDisplay = kiosk?.items.filter((item) => hasDisplayData(item)) ?? [];
+
+    const items = kiosk?.items ?? [];
+    const displayBackgroundImage =
+        itemsWithDisplay.length === 0
+            ? null
+            : itemsWithDisplay[0].data?.display?.data?.image_url || null;
+
+    if (isPending) return null;
+
+    return (
+        <div className="group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl">
+            <div
+                className={
+                    'group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl'
+                }
+            >
+                <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:dark:bg-shader-primary-dark-48" />
+                <div className="relative flex aspect-square h-full w-full items-center justify-center overflow-hidden rounded-xl">
+                    {displayBackgroundImage ? (
+                        <img
+                            src={displayBackgroundImage}
+                            alt={kioskId}
+                            className="h-full w-full object-cover"
+                        />
+                    ) : (
+                        <CardImage type={ImageType.BgTransparent}>
+                            <PlaceholderReplace className="text-neutral-40" />
+                        </CardImage>
+                    )}
+                </div>
+                <ButtonUnstyled className="absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-primary-100">
+                    <span className="text-neutral-90">{items.length}</span>
+                </ButtonUnstyled>
+                <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
+                    <span className="text-title-md text-neutral-100">{truncate(kioskId)}</span>
+                </div>
+            </div>
+        </div>
+    );
+}
diff --git a/apps/wallet-dashboard/components/tiles/index.ts b/apps/wallet-dashboard/components/tiles/index.ts
index 5db2ac71d5c..e472291d965 100644
--- a/apps/wallet-dashboard/components/tiles/index.ts
+++ b/apps/wallet-dashboard/components/tiles/index.ts
@@ -4,3 +4,4 @@
 export * from './VisualAssetTile';
 export * from './NonVisualAssetTile';
 export * from './AssetTileLink';
+export * from './KioskTile';
diff --git a/apps/wallet/src/ui/app/components/nft-display/Kiosk.tsx b/apps/wallet/src/ui/app/components/nft-display/Kiosk.tsx
index 33516853a5c..62cf393e9fc 100644
--- a/apps/wallet/src/ui/app/components/nft-display/Kiosk.tsx
+++ b/apps/wallet/src/ui/app/components/nft-display/Kiosk.tsx
@@ -2,17 +2,16 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 import { getKioskIdFromOwnerCap, hasDisplayData, useGetKioskContents } from '@iota/core';
-import { type IotaObjectResponse } from '@iota/iota-sdk/client';
-import { useActiveAddress } from '../../hooks';
+import { type IotaObjectData, type IotaObjectResponse } from '@iota/iota-sdk/client';
 import { ButtonUnstyled, CardImage, ImageType, truncate } from '@iota/apps-ui-kit';
 import { PlaceholderReplace } from '@iota/ui-icons';
 
-interface KioskProps {
-    object: IotaObjectResponse;
+interface KioskTileProps {
+    object: IotaObjectResponse | IotaObjectData;
+    address: string | null;
 }
 
-export function Kiosk({ object }: KioskProps) {
-    const address = useActiveAddress();
+export function KioskTile({ object, address }: KioskTileProps) {
     const { data: kioskData, isPending } = useGetKioskContents(address);
 
     const kioskId = getKioskIdFromOwnerCap(object);
diff --git a/apps/wallet/src/ui/app/components/nft-display/index.tsx b/apps/wallet/src/ui/app/components/nft-display/index.tsx
index 779afa87e49..7ce63cf7b3e 100644
--- a/apps/wallet/src/ui/app/components/nft-display/index.tsx
+++ b/apps/wallet/src/ui/app/components/nft-display/index.tsx
@@ -8,7 +8,8 @@ import { formatAddress } from '@iota/iota-sdk/utils';
 import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 import { useResolveVideo } from '../../hooks/useResolveVideo';
-import { Kiosk } from './Kiosk';
+import { KioskTile } from './Kiosk';
+import { useActiveAddress } from '../../hooks';
 
 const nftDisplayCardStyles = cva('flex flex-nowrap items-center h-full relative', {
     variants: {
@@ -48,13 +49,14 @@ export function NFTDisplayCard({
     const video = useResolveVideo(objectData);
     const kioskClient = useKioskClient();
     const isOwnerToken = isKioskOwnerToken(kioskClient.network, objectData);
+    const address = useActiveAddress();
 
     return (
         <div className={nftDisplayCardStyles({ isHoverable, wideView })}>
             <Loading loading={isPending}>
                 <div className="flex w-full flex-col justify-center gap-sm text-center">
                     {objectData?.data && isOwnerToken ? (
-                        <Kiosk object={objectData} />
+                        <KioskTile object={objectData} address={address} />
                     ) : (
                         <NftImage
                             title={nftName}

From 6565fd67ddfb689d2e9613e5b2413d4c0880ebcc Mon Sep 17 00:00:00 2001
From: Panteleymonchuk <panteleymonchuk@gmail.com>
Date: Mon, 23 Dec 2024 14:58:16 +0200
Subject: [PATCH 2/5] feat(dashboard): move KioskTile component to core and
 update references

---
 apps/core/src/components/index.ts             |  1 +
 .../src/components/kiosk/KioskTile.tsx}       | 27 +++++++--
 apps/core/src/components/kiosk/index.ts       |  4 ++
 .../components/tiles/AssetTileLink.tsx        |  8 ++-
 .../components/tiles/KioskTile.tsx            | 60 -------------------
 .../components/tiles/index.ts                 |  1 -
 .../ui/app/components/nft-display/index.tsx   | 10 +++-
 7 files changed, 39 insertions(+), 72 deletions(-)
 rename apps/{wallet/src/ui/app/components/nft-display/Kiosk.tsx => core/src/components/kiosk/KioskTile.tsx} (79%)
 create mode 100644 apps/core/src/components/kiosk/index.ts
 delete mode 100644 apps/wallet-dashboard/components/tiles/KioskTile.tsx

diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts
index 01683e56bb0..8ef025c6211 100644
--- a/apps/core/src/components/index.ts
+++ b/apps/core/src/components/index.ts
@@ -12,3 +12,4 @@ export * from './buttons';
 export * from './collapsible';
 export * from './providers';
 export * from './stake';
+export * from './kiosk';
diff --git a/apps/wallet/src/ui/app/components/nft-display/Kiosk.tsx b/apps/core/src/components/kiosk/KioskTile.tsx
similarity index 79%
rename from apps/wallet/src/ui/app/components/nft-display/Kiosk.tsx
rename to apps/core/src/components/kiosk/KioskTile.tsx
index 62cf393e9fc..ce40089d340 100644
--- a/apps/wallet/src/ui/app/components/nft-display/Kiosk.tsx
+++ b/apps/core/src/components/kiosk/KioskTile.tsx
@@ -1,17 +1,24 @@
 // Copyright (c) Mysten Labs, Inc.
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { getKioskIdFromOwnerCap, hasDisplayData, useGetKioskContents } from '@iota/core';
+import { getKioskIdFromOwnerCap, hasDisplayData, useGetKioskContents } from '../..';
 import { type IotaObjectData, type IotaObjectResponse } from '@iota/iota-sdk/client';
-import { ButtonUnstyled, CardImage, ImageType, truncate } from '@iota/apps-ui-kit';
+import {
+    ButtonUnstyled,
+    CardImage,
+    ImageType,
+    truncate,
+    LoadingIndicator,
+} from '@iota/apps-ui-kit';
 import { PlaceholderReplace } from '@iota/ui-icons';
 
 interface KioskTileProps {
     object: IotaObjectResponse | IotaObjectData;
-    address: string | null;
+    address?: string | null;
+    onClick?: () => void;
 }
 
-export function KioskTile({ object, address }: KioskTileProps) {
+export function KioskTile({ object, address, onClick }: KioskTileProps) {
     const { data: kioskData, isPending } = useGetKioskContents(address);
 
     const kioskId = getKioskIdFromOwnerCap(object);
@@ -24,10 +31,18 @@ export function KioskTile({ object, address }: KioskTileProps) {
             ? null
             : itemsWithDisplay[0].data?.display?.data?.image_url || null;
 
-    if (isPending) return null;
+    if (isPending)
+        return (
+            <div className="group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl flex items-center justify-center">
+                <LoadingIndicator />
+            </div>
+        );
 
     return (
-        <div className="group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl">
+        <div
+            onClick={onClick}
+            className="group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl"
+        >
             <div
                 className={
                     'group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl'
diff --git a/apps/core/src/components/kiosk/index.ts b/apps/core/src/components/kiosk/index.ts
new file mode 100644
index 00000000000..8da2944740d
--- /dev/null
+++ b/apps/core/src/components/kiosk/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './KioskTile';
diff --git a/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx b/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
index 7ff70bc255d..ede69e50dc0 100644
--- a/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
+++ b/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
@@ -3,12 +3,13 @@
 
 'use client';
 
-import { isKioskOwnerToken, useKioskClient } from '@iota/core';
+import { isKioskOwnerToken, useKioskClient, KioskTile } from '@iota/core';
 import { AssetCategory } from '@/lib/enums';
 import { VisibilityOff } from '@iota/ui-icons';
-import { VisualAssetTile, KioskTile } from '.';
+import { VisualAssetTile } from '.';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { NonVisualAssetCard } from './NonVisualAssetTile';
+import { useCurrentAccount } from '@iota/dapp-kit';
 
 interface AssetTileLinkProps {
     asset: IotaObjectData;
@@ -17,6 +18,7 @@ interface AssetTileLinkProps {
 }
 
 export function AssetTileLink({ asset, type, onClick }: AssetTileLinkProps): React.JSX.Element {
+    const account = useCurrentAccount();
     const kioskClient = useKioskClient();
     const isOwnerToken = isKioskOwnerToken(kioskClient.network, asset);
     function handleClick() {
@@ -26,7 +28,7 @@ export function AssetTileLink({ asset, type, onClick }: AssetTileLinkProps): Rea
     return (
         <>
             {type === AssetCategory.Visual && isOwnerToken ? (
-                <KioskTile object={asset} />
+                <KioskTile object={asset} address={account?.address} />
             ) : type === AssetCategory.Visual ? (
                 <VisualAssetTile asset={asset} icon={<VisibilityOff />} onClick={handleClick} />
             ) : (
diff --git a/apps/wallet-dashboard/components/tiles/KioskTile.tsx b/apps/wallet-dashboard/components/tiles/KioskTile.tsx
deleted file mode 100644
index 37b9f95d81d..00000000000
--- a/apps/wallet-dashboard/components/tiles/KioskTile.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-// Copyright (c) 2024 IOTA Stiftung
-// SPDX-License-Identifier: Apache-2.0
-
-import { getKioskIdFromOwnerCap, hasDisplayData, useGetKioskContents } from '@iota/core';
-import { type IotaObjectData } from '@iota/iota-sdk/client';
-import { useCurrentAccount } from '@iota/dapp-kit';
-import { ButtonUnstyled, CardImage, ImageType, truncate } from '@iota/apps-ui-kit';
-import { PlaceholderReplace } from '@iota/ui-icons';
-
-interface KioskProps {
-    object: IotaObjectData;
-}
-
-export function KioskTile({ object }: KioskProps) {
-    const account = useCurrentAccount();
-    const { data: kioskData, isPending } = useGetKioskContents(account?.address);
-
-    const kioskId = getKioskIdFromOwnerCap(object);
-    const kiosk = kioskData?.kiosks.get(kioskId!);
-    const itemsWithDisplay = kiosk?.items.filter((item) => hasDisplayData(item)) ?? [];
-
-    const items = kiosk?.items ?? [];
-    const displayBackgroundImage =
-        itemsWithDisplay.length === 0
-            ? null
-            : itemsWithDisplay[0].data?.display?.data?.image_url || null;
-
-    if (isPending) return null;
-
-    return (
-        <div className="group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl">
-            <div
-                className={
-                    'group relative aspect-square w-full cursor-pointer overflow-hidden rounded-xl'
-                }
-            >
-                <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:dark:bg-shader-primary-dark-48" />
-                <div className="relative flex aspect-square h-full w-full items-center justify-center overflow-hidden rounded-xl">
-                    {displayBackgroundImage ? (
-                        <img
-                            src={displayBackgroundImage}
-                            alt={kioskId}
-                            className="h-full w-full object-cover"
-                        />
-                    ) : (
-                        <CardImage type={ImageType.BgTransparent}>
-                            <PlaceholderReplace className="text-neutral-40" />
-                        </CardImage>
-                    )}
-                </div>
-                <ButtonUnstyled className="absolute right-2 top-2 h-9 w-9 cursor-pointer rounded-full p-xs opacity-0 transition-opacity duration-300 group-hover:bg-shader-neutral-light-72 group-hover:opacity-100 [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-primary-100">
-                    <span className="text-neutral-90">{items.length}</span>
-                </ButtonUnstyled>
-                <div className="absolute bottom-0 flex items-center justify-center p-xs opacity-0 transition-opacity duration-300 group-hover:opacity-100">
-                    <span className="text-title-md text-neutral-100">{truncate(kioskId)}</span>
-                </div>
-            </div>
-        </div>
-    );
-}
diff --git a/apps/wallet-dashboard/components/tiles/index.ts b/apps/wallet-dashboard/components/tiles/index.ts
index e472291d965..5db2ac71d5c 100644
--- a/apps/wallet-dashboard/components/tiles/index.ts
+++ b/apps/wallet-dashboard/components/tiles/index.ts
@@ -4,4 +4,3 @@
 export * from './VisualAssetTile';
 export * from './NonVisualAssetTile';
 export * from './AssetTileLink';
-export * from './KioskTile';
diff --git a/apps/wallet/src/ui/app/components/nft-display/index.tsx b/apps/wallet/src/ui/app/components/nft-display/index.tsx
index 7ce63cf7b3e..67fa76afbfa 100644
--- a/apps/wallet/src/ui/app/components/nft-display/index.tsx
+++ b/apps/wallet/src/ui/app/components/nft-display/index.tsx
@@ -3,12 +3,18 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Loading, NftImage } from '_components';
-import { isKioskOwnerToken, useGetNFTDisplay, useGetObject, useKioskClient } from '@iota/core';
+import {
+    isKioskOwnerToken,
+    useGetNFTDisplay,
+    useGetObject,
+    useKioskClient,
+    KioskTile,
+} from '@iota/core';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { cva } from 'class-variance-authority';
 import type { VariantProps } from 'class-variance-authority';
 import { useResolveVideo } from '../../hooks/useResolveVideo';
-import { KioskTile } from './Kiosk';
+
 import { useActiveAddress } from '../../hooks';
 
 const nftDisplayCardStyles = cva('flex flex-nowrap items-center h-full relative', {

From bde631abd4f9ee5c3f0b231b29a88ffbb9150e9a Mon Sep 17 00:00:00 2001
From: Panteleymonchuk <panteleymonchuk@gmail.com>
Date: Mon, 23 Dec 2024 16:26:08 +0200
Subject: [PATCH 3/5] feat(dashboard): add KioskDetailsView and integrate with
 asset dialog flow

---
 .../app/(protected)/assets/page.tsx           |   1 +
 .../components/Dialogs/Assets/AssetDialog.tsx |  14 ++-
 .../Assets/constants/AssetsDialogView.ts      |   1 +
 .../Dialogs/Assets/views/DetailsView.tsx      |   1 +
 .../Dialogs/Assets/views/KioskDetailsView.tsx | 104 ++++++++++++++++++
 .../components/Dialogs/Assets/views/index.ts  |   1 +
 .../components/tiles/AssetTileLink.tsx        |   2 +-
 7 files changed, 120 insertions(+), 4 deletions(-)
 create mode 100644 apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx

diff --git a/apps/wallet-dashboard/app/(protected)/assets/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/page.tsx
index b1bd76ad0b3..6929fe4b3a1 100644
--- a/apps/wallet-dashboard/app/(protected)/assets/page.tsx
+++ b/apps/wallet-dashboard/app/(protected)/assets/page.tsx
@@ -53,6 +53,7 @@ export default function AssetsDashboardPage(): React.JSX.Element {
     }
 
     function onAssetClick(asset: IotaObjectData) {
+        console.log(asset);
         setSelectedAsset(asset);
     }
 
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
index c71390a33aa..6e4dd6f5e13 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
@@ -5,8 +5,8 @@ import React, { useState } from 'react';
 import { Dialog } from '@iota/apps-ui-kit';
 import { FormikProvider, useFormik } from 'formik';
 import { useIotaClient, useCurrentAccount } from '@iota/dapp-kit';
-import { createNftSendValidationSchema } from '@iota/core';
-import { DetailsView, SendView } from './views';
+import { createNftSendValidationSchema, isKioskOwnerToken, useKioskClient } from '@iota/core';
+import { DetailsView, SendView, KioskDetailsView } from './views';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { AssetsDialogView } from './constants';
 import { useCreateSendAssetTransaction, useNotifications } from '@/hooks';
@@ -29,7 +29,12 @@ const INITIAL_VALUES: FormValues = {
 };
 
 export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps): JSX.Element {
-    const [view, setView] = useState<AssetsDialogView>(AssetsDialogView.Details);
+    const kioskClient = useKioskClient();
+    const isOwnerToken = isKioskOwnerToken(kioskClient.network, asset);
+
+    const initView = isOwnerToken ? AssetsDialogView.KioskDetails : AssetsDialogView.Details;
+    const [view, setView] = useState<AssetsDialogView>(initView);
+
     const account = useCurrentAccount();
     const [digest, setDigest] = useState<string>('');
     const activeAddress = account?.address ?? '';
@@ -79,6 +84,9 @@ export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps
         <Dialog open onOpenChange={onOpenChange}>
             <DialogLayout>
                 <>
+                    {view === AssetsDialogView.KioskDetails && (
+                        <KioskDetailsView asset={asset} onClose={onOpenChange} />
+                    )}
                     {view === AssetsDialogView.Details && (
                         <DetailsView asset={asset} onClose={onOpenChange} onSend={onDetailsSend} />
                     )}
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts b/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts
index 242da33c2c3..8b4221c98a7 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/constants/AssetsDialogView.ts
@@ -5,4 +5,5 @@ export enum AssetsDialogView {
     Details = 'Details',
     Send = 'Send',
     TransactionDetails = 'TransactionDetails',
+    KioskDetails = 'KioskDetails',
 }
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
index 8520d62a484..41a7dbc6fe7 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -43,6 +43,7 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
         kioskItem,
         objectData,
     } = useNftDetails(objectId, senderAddress);
+
     const { fileExtensionType, filePath } = useNFTBasicData(objectData);
 
     function handleMoreAboutKiosk() {
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
new file mode 100644
index 00000000000..37509f98ad3
--- /dev/null
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
@@ -0,0 +1,104 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { useGetKioskContents, getKioskIdFromOwnerCap, useNftDetails } from '@iota/core';
+import { Header, LoadingIndicator, VisualAssetCard, VisualAssetType } from '@iota/apps-ui-kit';
+import { DialogLayoutBody } from '../../layout';
+import { IotaObjectData } from '@iota/iota-sdk/client';
+import { useCurrentAccount } from '@iota/dapp-kit';
+
+interface DetailsViewProps {
+    asset: IotaObjectData;
+    onClose: () => void;
+}
+
+export function KioskDetailsView({ onClose, asset }: DetailsViewProps) {
+    const account = useCurrentAccount();
+    const senderAddress = account?.address ?? '';
+    const objectId = getKioskIdFromOwnerCap(asset);
+    const { data: kioskData, isPending } = useGetKioskContents(account?.address);
+    const kiosk = kioskData?.kiosks.get(objectId);
+    const items = kiosk?.items;
+
+    if (isPending) {
+        return (
+            <div className="flex h-full items-center justify-center">
+                <LoadingIndicator />
+            </div>
+        );
+    }
+
+    return (
+        <>
+            <Header title="Kiosk" onClose={onClose} titleCentered />
+            <DialogLayoutBody>
+                {items?.map((item) => {
+                    return item.data?.objectId ? (
+                        <KioskItem
+                            key={item.data?.objectId}
+                            object={item.data}
+                            address={senderAddress}
+                        />
+                    ) : null;
+                })}
+            </DialogLayoutBody>
+            {/* <DialogLayoutFooter>
+                <div className="flex flex-col">
+                    {isContainedInKiosk && kioskItem?.isLocked ? (
+                        <div className="flex flex-col gap-2">
+                            <Button
+                                type={ButtonType.Secondary}
+                                onClick={handleMoreAboutKiosk}
+                                text="Learn more about Kiosks"
+                            />
+                            <Button
+                                type={ButtonType.Primary}
+                                onClick={handleMarketplace}
+                                text="Marketplace"
+                            />
+                        </div>
+                    ) : (
+                        <Button
+                            disabled={!isAssetTransferable}
+                            onClick={onSend}
+                            text="Send"
+                            fullWidth
+                        />
+                    )}
+                </div>
+            </DialogLayoutFooter> */}
+        </>
+    );
+}
+
+interface KioskItemProps {
+    object: IotaObjectData;
+    address: string;
+}
+
+function KioskItem({ object, address }: KioskItemProps) {
+    const {
+        nftName,
+        nftImageUrl,
+        // nftDisplayData,
+        // ownerAddress,
+        // isAssetTransferable,
+        // metaKeys,
+        // metaValues,
+        // formatMetaValue,
+        // isContainedInKiosk,
+        // kioskItem,
+        // objectData,
+    } = useNftDetails(object.objectId, address);
+
+    return (
+        <VisualAssetCard
+            assetSrc={nftImageUrl}
+            assetTitle={nftName}
+            assetType={VisualAssetType.Image}
+            altText={nftName || 'NFT'}
+            isHoverable={false}
+        />
+    );
+}
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/index.ts b/apps/wallet-dashboard/components/Dialogs/Assets/views/index.ts
index fcc3856cac3..20ad446cf93 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/index.ts
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/index.ts
@@ -3,3 +3,4 @@
 
 export * from './DetailsView';
 export * from './SendView';
+export * from './KioskDetailsView';
diff --git a/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx b/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
index ede69e50dc0..51046749025 100644
--- a/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
+++ b/apps/wallet-dashboard/components/tiles/AssetTileLink.tsx
@@ -28,7 +28,7 @@ export function AssetTileLink({ asset, type, onClick }: AssetTileLinkProps): Rea
     return (
         <>
             {type === AssetCategory.Visual && isOwnerToken ? (
-                <KioskTile object={asset} address={account?.address} />
+                <KioskTile object={asset} address={account?.address} onClick={handleClick} />
             ) : type === AssetCategory.Visual ? (
                 <VisualAssetTile asset={asset} icon={<VisibilityOff />} onClick={handleClick} />
             ) : (

From 81008ced67c7497812e977c47866a0efb321374b Mon Sep 17 00:00:00 2001
From: Panteleymonchuk <panteleymonchuk@gmail.com>
Date: Mon, 23 Dec 2024 17:56:55 +0200
Subject: [PATCH 4/5] feat(core, wallet): move NftImage component to core and
 update references in KioskDetailsView

---
 apps/core/src/components/index.ts             |   1 +
 .../src/components/nft}/NftImage.tsx          |  11 +-
 apps/core/src/components/nft/index.ts         |   4 +
 .../Dialogs/Assets/views/KioskDetailsView.tsx | 102 ++++++++----------
 apps/wallet/src/ui/app/components/index.ts    |   1 -
 .../ui/app/components/nft-display/index.tsx   |   3 +-
 6 files changed, 61 insertions(+), 61 deletions(-)
 rename apps/{wallet/src/ui/app/components/nft-display => core/src/components/nft}/NftImage.tsx (84%)
 create mode 100644 apps/core/src/components/nft/index.ts

diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts
index 8ef025c6211..e5f23b1ff51 100644
--- a/apps/core/src/components/index.ts
+++ b/apps/core/src/components/index.ts
@@ -13,3 +13,4 @@ export * from './collapsible';
 export * from './providers';
 export * from './stake';
 export * from './kiosk';
+export * from './nft';
diff --git a/apps/wallet/src/ui/app/components/nft-display/NftImage.tsx b/apps/core/src/components/nft/NftImage.tsx
similarity index 84%
rename from apps/wallet/src/ui/app/components/nft-display/NftImage.tsx
rename to apps/core/src/components/nft/NftImage.tsx
index b25525d753d..69457f596b9 100644
--- a/apps/wallet/src/ui/app/components/nft-display/NftImage.tsx
+++ b/apps/core/src/components/nft/NftImage.tsx
@@ -2,8 +2,10 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import React from 'react';
 import { CardImage, ImageType, VisualAssetCard, VisualAssetType } from '@iota/apps-ui-kit';
 import { PlaceholderReplace } from '@iota/ui-icons';
+import cx from 'clsx';
 
 export interface NftImageProps {
     src: string | null;
@@ -33,7 +35,14 @@ export function NftImage({ src, title, isHoverable, video, icon, onIconClick }:
     }
     if (!imgSrc) {
         return (
-            <div className="relative flex aspect-square h-full w-full items-center justify-center overflow-hidden rounded-xl">
+            <div
+                className={cx(
+                    'relative flex aspect-square h-full w-full items-center justify-center overflow-hidden rounded-xl',
+                    {
+                        'group cursor-pointer': isHoverable,
+                    },
+                )}
+            >
                 {isHoverable && (
                     <div className="absolute left-0 top-0 h-full w-full bg-cover bg-center bg-no-repeat group-hover:bg-shader-neutral-light-48 group-hover:transition group-hover:duration-300 group-hover:ease-in-out group-hover:dark:bg-shader-primary-dark-48" />
                 )}
diff --git a/apps/core/src/components/nft/index.ts b/apps/core/src/components/nft/index.ts
new file mode 100644
index 00000000000..ffc837bd846
--- /dev/null
+++ b/apps/core/src/components/nft/index.ts
@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './NftImage';
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
index 37509f98ad3..20fd8b234ca 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
@@ -2,11 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { useGetKioskContents, getKioskIdFromOwnerCap, useNftDetails } from '@iota/core';
-import { Header, LoadingIndicator, VisualAssetCard, VisualAssetType } from '@iota/apps-ui-kit';
-import { DialogLayoutBody } from '../../layout';
+import {
+    useGetKioskContents,
+    getKioskIdFromOwnerCap,
+    useNftDetails,
+    NftImage,
+    Collapsible,
+    ExplorerLinkType,
+} from '@iota/core';
+import { Header, KeyValueInfo, LoadingIndicator } from '@iota/apps-ui-kit';
+import { DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 import { IotaObjectData } from '@iota/iota-sdk/client';
 import { useCurrentAccount } from '@iota/dapp-kit';
+import { ExplorerLink } from '@/components/ExplorerLink';
+import { formatAddress } from '@iota/iota-sdk/utils';
 
 interface DetailsViewProps {
     asset: IotaObjectData;
@@ -33,41 +42,38 @@ export function KioskDetailsView({ onClose, asset }: DetailsViewProps) {
         <>
             <Header title="Kiosk" onClose={onClose} titleCentered />
             <DialogLayoutBody>
-                {items?.map((item) => {
-                    return item.data?.objectId ? (
-                        <KioskItem
-                            key={item.data?.objectId}
-                            object={item.data}
-                            address={senderAddress}
-                        />
-                    ) : null;
-                })}
-            </DialogLayoutBody>
-            {/* <DialogLayoutFooter>
-                <div className="flex flex-col">
-                    {isContainedInKiosk && kioskItem?.isLocked ? (
-                        <div className="flex flex-col gap-2">
-                            <Button
-                                type={ButtonType.Secondary}
-                                onClick={handleMoreAboutKiosk}
-                                text="Learn more about Kiosks"
-                            />
-                            <Button
-                                type={ButtonType.Primary}
-                                onClick={handleMarketplace}
-                                text="Marketplace"
+                <div className="mb-auto grid grid-cols-3 items-center justify-center gap-3">
+                    {items?.map((item) => {
+                        return item.data?.objectId ? (
+                            <KioskItem
+                                key={item.data?.objectId}
+                                object={item.data}
+                                address={senderAddress}
                             />
-                        </div>
-                    ) : (
-                        <Button
-                            disabled={!isAssetTransferable}
-                            onClick={onSend}
-                            text="Send"
-                            fullWidth
-                        />
-                    )}
+                        ) : null;
+                    })}
                 </div>
-            </DialogLayoutFooter> */}
+            </DialogLayoutBody>
+            <DialogLayoutFooter>
+                <Collapsible defaultOpen title="Details">
+                    <div className="flex flex-col gap-y-sm px-md py-xs">
+                        <KeyValueInfo
+                            keyText="Number of Items"
+                            value={items?.length || '0'}
+                            fullwidth
+                        />
+                        <KeyValueInfo
+                            keyText="Kiosk ID"
+                            value={
+                                <ExplorerLink objectID={objectId!} type={ExplorerLinkType.Object}>
+                                    {formatAddress(objectId!)}
+                                </ExplorerLink>
+                            }
+                            fullwidth
+                        />
+                    </div>
+                </Collapsible>
+            </DialogLayoutFooter>
         </>
     );
 }
@@ -78,27 +84,7 @@ interface KioskItemProps {
 }
 
 function KioskItem({ object, address }: KioskItemProps) {
-    const {
-        nftName,
-        nftImageUrl,
-        // nftDisplayData,
-        // ownerAddress,
-        // isAssetTransferable,
-        // metaKeys,
-        // metaValues,
-        // formatMetaValue,
-        // isContainedInKiosk,
-        // kioskItem,
-        // objectData,
-    } = useNftDetails(object.objectId, address);
+    const { nftName, nftImageUrl } = useNftDetails(object.objectId, address);
 
-    return (
-        <VisualAssetCard
-            assetSrc={nftImageUrl}
-            assetTitle={nftName}
-            assetType={VisualAssetType.Image}
-            altText={nftName || 'NFT'}
-            isHoverable={false}
-        />
-    );
+    return <NftImage title={nftName} src={nftImageUrl} isHoverable />;
 }
diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
index bd2ecfa34c1..3e8988affb5 100644
--- a/apps/wallet/src/ui/app/components/index.ts
+++ b/apps/wallet/src/ui/app/components/index.ts
@@ -26,7 +26,6 @@ export * from './menu';
 export * from './navigation';
 export * from './network-selector';
 export * from './nft-display';
-export * from './nft-display/NftImage';
 export * from './receipt-card';
 export * from './receipt-card/TxnAmount';
 export * from './transactions-card';
diff --git a/apps/wallet/src/ui/app/components/nft-display/index.tsx b/apps/wallet/src/ui/app/components/nft-display/index.tsx
index 67fa76afbfa..0eef6084884 100644
--- a/apps/wallet/src/ui/app/components/nft-display/index.tsx
+++ b/apps/wallet/src/ui/app/components/nft-display/index.tsx
@@ -2,8 +2,9 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { Loading, NftImage } from '_components';
+import { Loading } from '_components';
 import {
+    NftImage,
     isKioskOwnerToken,
     useGetNFTDisplay,
     useGetObject,

From 4b710db90cb85f66173f9644fb1209e35709deb7 Mon Sep 17 00:00:00 2001
From: Panteleymonchuk <panteleymonchuk@gmail.com>
Date: Mon, 23 Dec 2024 18:06:41 +0200
Subject: [PATCH 5/5] feat(dashboard): enhance AssetDialog and KioskDetailsView
 with selected asset handling

---
 .../app/(protected)/assets/page.tsx           |  2 +-
 .../components/Dialogs/Assets/AssetDialog.tsx | 20 ++++++++++++++--
 .../Dialogs/Assets/views/DetailsView.tsx      | 24 +++++++------------
 .../Dialogs/Assets/views/KioskDetailsView.tsx | 14 +++++++----
 4 files changed, 36 insertions(+), 24 deletions(-)

diff --git a/apps/wallet-dashboard/app/(protected)/assets/page.tsx b/apps/wallet-dashboard/app/(protected)/assets/page.tsx
index 6929fe4b3a1..30a63020334 100644
--- a/apps/wallet-dashboard/app/(protected)/assets/page.tsx
+++ b/apps/wallet-dashboard/app/(protected)/assets/page.tsx
@@ -53,7 +53,6 @@ export default function AssetsDashboardPage(): React.JSX.Element {
     }
 
     function onAssetClick(asset: IotaObjectData) {
-        console.log(asset);
         setSelectedAsset(asset);
     }
 
@@ -99,6 +98,7 @@ export default function AssetsDashboardPage(): React.JSX.Element {
                     <AssetDialog
                         onClose={() => setSelectedAsset(null)}
                         asset={selectedAsset}
+                        setSelectedAsset={setSelectedAsset}
                         refetchAssets={refetch}
                     />
                 )}
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
index 6e4dd6f5e13..87b513e0588 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/AssetDialog.tsx
@@ -17,6 +17,7 @@ import { DialogLayout } from '../layout';
 interface AssetsDialogProps {
     onClose: () => void;
     asset: IotaObjectData;
+    setSelectedAsset: (asset: IotaObjectData) => void;
     refetchAssets: () => void;
 }
 
@@ -28,7 +29,12 @@ const INITIAL_VALUES: FormValues = {
     to: '',
 };
 
-export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps): JSX.Element {
+export function AssetDialog({
+    onClose,
+    asset,
+    setSelectedAsset,
+    refetchAssets,
+}: AssetsDialogProps): JSX.Element {
     const kioskClient = useKioskClient();
     const isOwnerToken = isKioskOwnerToken(kioskClient.network, asset);
 
@@ -80,12 +86,22 @@ export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps
         setView(AssetsDialogView.Details);
         onClose();
     }
+
+    function onKioskItemClick(item: IotaObjectData) {
+        setSelectedAsset(item);
+        setView(AssetsDialogView.Details);
+    }
+
     return (
         <Dialog open onOpenChange={onOpenChange}>
             <DialogLayout>
                 <>
                     {view === AssetsDialogView.KioskDetails && (
-                        <KioskDetailsView asset={asset} onClose={onOpenChange} />
+                        <KioskDetailsView
+                            asset={asset}
+                            onClose={onOpenChange}
+                            onItemClick={onKioskItemClick}
+                        />
                     )}
                     {view === AssetsDialogView.Details && (
                         <DetailsView asset={asset} onClose={onOpenChange} onSend={onDetailsSend} />
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
index 41a7dbc6fe7..3ab8702566d 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -2,15 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
-import { ExplorerLinkType, useNftDetails, Collapsible, useNFTBasicData } from '@iota/core';
 import {
-    Button,
-    ButtonType,
-    Header,
-    KeyValueInfo,
-    VisualAssetCard,
-    VisualAssetType,
-} from '@iota/apps-ui-kit';
+    ExplorerLinkType,
+    useNftDetails,
+    Collapsible,
+    useNFTBasicData,
+    NftImage,
+} from '@iota/core';
+import { Button, ButtonType, Header, KeyValueInfo } from '@iota/apps-ui-kit';
 import Link from 'next/link';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { DialogLayoutBody, DialogLayoutFooter } from '../../layout';
@@ -43,7 +42,6 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
         kioskItem,
         objectData,
     } = useNftDetails(objectId, senderAddress);
-
     const { fileExtensionType, filePath } = useNFTBasicData(objectData);
 
     function handleMoreAboutKiosk() {
@@ -61,13 +59,7 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
             <DialogLayoutBody>
                 <div className="flex w-full flex-col items-center justify-center gap-xs">
                     <div className="w-[172px]">
-                        <VisualAssetCard
-                            assetSrc={nftImageUrl}
-                            assetTitle={nftName}
-                            assetType={VisualAssetType.Image}
-                            altText={nftName || 'NFT'}
-                            isHoverable={false}
-                        />
+                        <NftImage src={nftImageUrl} title={nftName || 'NFT'} isHoverable={false} />
                     </div>
                     <ExplorerLink type={ExplorerLinkType.Object} objectID={objectId}>
                         <Button type={ButtonType.Ghost} text="View on Explorer" />
diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
index 20fd8b234ca..64a63347116 100644
--- a/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
+++ b/apps/wallet-dashboard/components/Dialogs/Assets/views/KioskDetailsView.tsx
@@ -20,9 +20,10 @@ import { formatAddress } from '@iota/iota-sdk/utils';
 interface DetailsViewProps {
     asset: IotaObjectData;
     onClose: () => void;
+    onItemClick: (asset: IotaObjectData) => void;
 }
 
-export function KioskDetailsView({ onClose, asset }: DetailsViewProps) {
+export function KioskDetailsView({ onClose, asset, onItemClick }: DetailsViewProps) {
     const account = useCurrentAccount();
     const senderAddress = account?.address ?? '';
     const objectId = getKioskIdFromOwnerCap(asset);
@@ -45,11 +46,14 @@ export function KioskDetailsView({ onClose, asset }: DetailsViewProps) {
                 <div className="mb-auto grid grid-cols-3 items-center justify-center gap-3">
                     {items?.map((item) => {
                         return item.data?.objectId ? (
-                            <KioskItem
+                            <div
+                                onClick={() => {
+                                    item.data && onItemClick(item.data);
+                                }}
                                 key={item.data?.objectId}
-                                object={item.data}
-                                address={senderAddress}
-                            />
+                            >
+                                <KioskItem object={item.data} address={senderAddress} />
+                            </div>
                         ) : null;
                     })}
                 </div>