feat(wallet-dashboard): integrate kiosk functionality in NFT details …

…view
iotaledger · Nov 19, 2024 · 029d55d · 029d55d
1 parent f5d8ea2
commit 029d55d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/apps/core/src/hooks/useNftDetails.ts b/apps/core/src/hooks/useNftDetails.ts
@@ -1,6 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
-import { useGetNFTMeta, useOwnedNFT, useNFTBasicData } from './';
+import { useGetNFTMeta, useOwnedNFT, useNFTBasicData, useGetKioskContents } from './';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { truncateString } from '../utils';
 
@@ -10,6 +10,10 @@ type NftFields = {
 
 export function useNftDetails(nftId: string, accountAddress: string | null) {
     const { data: objectData, isPending: isNftLoading } = useOwnedNFT(nftId || '', accountAddress);
+    const { data } = useGetKioskContents(accountAddress);
+
+    const isContainedInKiosk = data?.lookup.get(nftId!);
+    const kioskItem = data?.list.find((k) => k.data?.objectId === nftId);
 
     const isTransferable =
         !!objectData &&
@@ -79,6 +83,9 @@ export function useNftDetails(nftId: string, accountAddress: string | null) {
         metaValues,
         formatMetaValue,
 
+        isContainedInKiosk,
+        kioskItem,
+
         nftMeta,
         isPendingMeta,
     };

diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -39,8 +39,19 @@ export function DetailsView({ handleClose, asset }: DetailsViewProps) {
         metaKeys,
         metaValues,
         formatMetaValue,
+
+        isContainedInKiosk,
+        kioskItem,
     } = useNftDetails(objectId, senderAddress);
 
+    function handleMoreAboutKiosk() {
+        window.open('https://wiki.iota.org/', '_blank');
+    }
+
+    function handleMarketplace() {
+        window.open('https://wiki.iota.org/', '_blank');
+    }
+
     function handleSend() {
         console.log('send');
     }
@@ -150,7 +161,29 @@ export function DetailsView({ handleClose, asset }: DetailsViewProps) {
                 </div>
             </LayoutBody>
             <LayoutFooter>
-                <Button disabled={!isTransferable} onClick={handleSend} text="Send" fullWidth />
+                <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={!isTransferable}
+                            onClick={handleSend}
+                            text="Send"
+                            fullWidth
+                        />
+                    )}
+                </div>
             </LayoutFooter>
         </Layout>
     );

diff --git a/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx b/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx
@@ -6,7 +6,7 @@ import { useActiveAddress } from '_app/hooks/useActiveAddress';
 import { Collapsible } from '_app/shared/collapse';
 import { ExplorerLink, ExplorerLinkType, Loading, NFTDisplayCard, PageTemplate } from '_components';
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
-import { useGetKioskContents, useNFTBasicData, useNftDetails } from '@iota/core';
+import { useNFTBasicData, useNftDetails } from '@iota/core';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import cl from 'clsx';
 import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
@@ -27,13 +27,11 @@ function NFTDetailsPage() {
         metaKeys,
         metaValues,
         formatMetaValue,
+        isContainedInKiosk,
+        kioskItem,
     } = useNftDetails(nftId || '', accountAddress);
 
     const { fileExtensionType, filePath } = useNFTBasicData(objectData);
-    const { data } = useGetKioskContents(accountAddress);
-
-    const isContainedInKiosk = data?.lookup.get(nftId!);
-    const kioskItem = data?.list.find((k) => k.data?.objectId === nftId);
 
     const isGuardLoading = useUnlockedGuard();
     const isPending = isNftLoading || isPendingMeta || isGuardLoading;