iotaledger · panteleymonchuk · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024 · Dec 16, 2024
@@ -12,3 +12,5 @@ export * from './buttons';
 export * from './collapsible';
 export * from './providers';
 export * from './stake';
+export * from './kiosk';
+export * from './nft';
@@ -1,18 +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 { type IotaObjectResponse } from '@iota/iota-sdk/client';
-import { useActiveAddress } from '_hooks';
-import { ButtonUnstyled, CardImage, ImageType, truncate } from '@iota/apps-ui-kit';
+import { getKioskIdFromOwnerCap, hasDisplayData, useGetKioskContents } from '../..';
+import { type IotaObjectData, type IotaObjectResponse } from '@iota/iota-sdk/client';
+import {
+    ButtonUnstyled,
+    CardImage,
+    ImageType,
+    truncate,
+    LoadingIndicator,
+} from '@iota/apps-ui-kit';
 import { PlaceholderReplace } from '@iota/ui-icons';
 
-interface KioskProps {
-    object: IotaObjectResponse;
+interface KioskTileProps {
+    object: IotaObjectResponse | IotaObjectData;
+    address?: string | null;
+    onClick?: () => void;
 }
 
-export function Kiosk({ object }: KioskProps) {
-    const address = useActiveAddress();
+export function KioskTile({ object, address, onClick }: KioskTileProps) {
     const { data: kioskData, isPending } = useGetKioskContents(address);
 
     const kioskId = getKioskIdFromOwnerCap(object);
@@ -25,10 +31,18 @@ export function Kiosk({ object }: KioskProps) {
             ? 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'

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './KioskTile';
@@ -4,6 +4,7 @@
 
 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 +34,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" />
                 )}

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './NftImage';
diff --git a/apps/core/src/hooks/useTransferKioskItem.tsx b/apps/core/src/hooks/useTransferKioskItem.tsx
@@ -39,6 +39,7 @@ export function useTransferKioskItem({
 
     return useMutation({
         mutationFn: async ({ to }: { to: string }) => {
+            console.log('Transfering object', objectType, to);
             if (!to || !executeFn || !objectType) {
                 throw new Error('Missing data');
             }

@@ -5,8 +5,14 @@ import { useState } from 'react';
 import { Dialog } from '@iota/apps-ui-kit';
 import { FormikProvider, useFormik } from 'formik';
 import { useIotaClient, useCurrentAccount, useSignAndExecuteTransaction } from '@iota/dapp-kit';
-import { createNftSendValidationSchema, useTransferAsset } from '@iota/core';
-import { DetailsView, SendView } from './views';
+import {
+    createNftSendValidationSchema,
+    useTransferAsset,
+    isKioskOwnerToken,
+    useKioskClient,
+    useNftDetails,
+} from '@iota/core';
+import { DetailsView, SendView, KioskDetailsView } from './views';
 import { IotaObjectData, IotaTransactionBlockResponse } from '@iota/iota-sdk/client';
 import { AssetsDialogView } from './constants';
 import { TransactionDetailsView } from '../send-token';
@@ -28,17 +34,29 @@ const INITIAL_VALUES: FormValues = {
 };
 
 export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps): JSX.Element {
-    const [view, setView] = useState<AssetsDialogView>(AssetsDialogView.Details);
+    const kioskClient = useKioskClient();
     const account = useCurrentAccount();
-    const [digest, setDigest] = useState<string>('');
-    const activeAddress = account?.address ?? '';
-    const objectId = asset?.objectId ?? '';
     const iotaClient = useIotaClient();
-    const validationSchema = createNftSendValidationSchema(activeAddress, objectId);
     const { mutateAsync: signAndExecuteTransaction } =
         useSignAndExecuteTransaction<IotaTransactionBlockResponse>();
+
+    const isTokenOwnedByKiosk = isKioskOwnerToken(kioskClient.network, asset);
+    const activeAddress = account?.address ?? '';
+
+    const initView = isTokenOwnedByKiosk ? AssetsDialogView.KioskDetails : AssetsDialogView.Details;
+
+    const [view, setView] = useState<AssetsDialogView>(initView);
+    const [chosenKioskAsset, setChoosenKioskAsset] = useState<IotaObjectData | null>(null);
+    const [digest, setDigest] = useState<string>('');
+
+    const activeAsset = chosenKioskAsset || asset;
+    const objectId = chosenKioskAsset ? chosenKioskAsset.objectId : asset ? asset.objectId : '';
+    const validationSchema = createNftSendValidationSchema(activeAddress, objectId);
+    const { objectData } = useNftDetails(objectId, activeAddress);
+
     const { mutateAsync: sendAsset } = useTransferAsset({
         objectId,
+        objectType: objectData?.type,
         activeAddress: activeAddress,
         executeFn: signAndExecuteTransaction,
     });
@@ -76,19 +94,49 @@ export function AssetDialog({ onClose, asset, refetchAssets }: AssetsDialogProps
     }
     function onOpenChange() {
         setView(AssetsDialogView.Details);
+        setChoosenKioskAsset(null);
         onClose();
     }
+
+    function onKioskItemClick(item: IotaObjectData) {
+        setChoosenKioskAsset(item);
+        setView(AssetsDialogView.Details);
+    }
+
+    function onBack() {
+        if (!chosenKioskAsset) {
+            return;
+        }
+        return () => {
+            setChoosenKioskAsset(null);
+            setView(AssetsDialogView.KioskDetails);
+        };
+    }
+
     return (
         <Dialog open onOpenChange={onOpenChange}>
             <DialogLayout>
                 <>
+                    {view === AssetsDialogView.KioskDetails && (
+                        <KioskDetailsView
+                            asset={activeAsset}
+                            onClose={onOpenChange}
+                            onItemClick={onKioskItemClick}
+                        />
+                    )}
                     {view === AssetsDialogView.Details && (
-                        <DetailsView asset={asset} onClose={onOpenChange} onSend={onDetailsSend} />
+                        <DetailsView
+                            asset={activeAsset}
+                            onClose={onOpenChange}
+                            onSend={onDetailsSend}
+                            onBack={onBack()}
+                        />
                     )}
                     {view === AssetsDialogView.Send && (
                         <FormikProvider value={formik}>
                             <SendView
-                                asset={asset}
+                                objectId={objectId}
+                                senderAddress={activeAddress}
                                 onClose={onOpenChange}
                                 onBack={onSendViewBack}
                             />

@@ -5,4 +5,5 @@ export enum AssetsDialogView {
     Details = 'Details',
     Send = 'Send',
     TransactionDetails = 'TransactionDetails',
+    KioskDetails = 'KioskDetails',
 }
@@ -1,15 +1,14 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-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 { formatAddress } from '@iota/iota-sdk/utils';
 import { DialogLayoutBody, DialogLayoutFooter } from '../../layout';
 import { IotaObjectData } from '@iota/iota-sdk/client';
@@ -20,9 +19,10 @@ interface DetailsViewProps {
     asset: IotaObjectData;
     onClose: () => void;
     onSend: () => void;
+    onBack?: () => void;
 }
 
-export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
+export function DetailsView({ onClose, asset, onSend, onBack }: DetailsViewProps) {
     const account = useCurrentAccount();
 
     const senderAddress = account?.address ?? '';
@@ -53,17 +53,11 @@ export function DetailsView({ onClose, asset, onSend }: DetailsViewProps) {
 
     return (
         <>
-            <Header title="Asset" onClose={onClose} titleCentered />
+            <Header title="Asset" onClose={onClose} titleCentered onBack={onBack} />
             <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" />

@@ -0,0 +1,93 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+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;
+    onClose: () => void;
+    onItemClick: (asset: IotaObjectData) => void;
+}
+
+export function KioskDetailsView({ onClose, asset, onItemClick }: 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>
+                <div className="mb-auto grid grid-cols-3 items-center justify-center gap-3">
+                    {items?.map((item) => {
+                        return item.data?.objectId ? (
+                            <div
+                                onClick={() => {
+                                    item.data && onItemClick(item.data);
+                                }}
+                                key={item.data?.objectId}
+                            >
+                                <KioskItem object={item.data} address={senderAddress} />
+                            </div>
+                        ) : null;
+                    })}
+                </div>
+            </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>
+        </>
+    );
+}
+
+interface KioskItemProps {
+    object: IotaObjectData;
+    address: string;
+}
+
+function KioskItem({ object, address }: KioskItemProps) {
+    const { nftName, nftImageUrl } = useNftDetails(object.objectId, address);
+
+    return <NftImage title={nftName} src={nftImageUrl} isHoverable />;
+}