feat(wallet-dashboard): add send view and enhance asset transfer func…

…tionality
iotaledger · Nov 21, 2024 · b3291fb · b3291fb
1 parent 093c3f4
commit b3291fb
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 17 deletions.
diff --git a/apps/core/src/hooks/useNftDetails.ts b/apps/core/src/hooks/useNftDetails.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useGetNFTMeta, useOwnedNFT, useNFTBasicData, useGetKioskContents } from './';
 import { formatAddress } from '@iota/iota-sdk/utils';
-import { truncateString } from '../utils';
+import { isAssetTransferable, truncateString } from '../utils';
 
 type NftFields = {
     metadata?: { fields?: { attributes?: { fields?: { keys: string[]; values: string[] } } } };
@@ -15,10 +15,7 @@ export function useNftDetails(nftId: string, accountAddress: string | null) {
     const isContainedInKiosk = data?.lookup.get(nftId!);
     const kioskItem = data?.list.find((k) => k.data?.objectId === nftId);
 
-    const isTransferable =
-        !!objectData &&
-        objectData.content?.dataType === 'moveObject' &&
-        objectData.content?.hasPublicTransfer;
+    const isTransferable = isAssetTransferable(objectData);
 
     const { nftFields } = useNFTBasicData(objectData);
 

diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/AssetsDialog.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/AssetsDialog.tsx
@@ -8,6 +8,7 @@ import { IotaObjectData } from '@iota/iota-sdk/client';
 
 export enum AssetsDialogView {
     Details,
+    Send,
 }
 
 interface AssetsDialogProps {
@@ -17,12 +18,20 @@ interface AssetsDialogProps {
 }
 
 export function AssetsDialog({ isOpen, handleClose, asset }: AssetsDialogProps): JSX.Element {
-    const [view] = React.useState<AssetsDialogView>(AssetsDialogView.Details);
+    const [view, setView] = React.useState<AssetsDialogView>(AssetsDialogView.Details);
+
+    function handleDetailsSend() {
+        setView(AssetsDialogView.Send);
+    }
 
     return (
         <Dialog open={isOpen} onOpenChange={() => handleClose()}>
             {view === AssetsDialogView.Details && asset && (
-                <DetailsView asset={asset} handleClose={handleClose} />
+                <DetailsView
+                    asset={asset}
+                    handleClose={handleClose}
+                    handleSend={handleDetailsSend}
+                />
             )}
         </Dialog>
     );

diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/DetailsView.tsx
@@ -22,9 +22,10 @@ import { useCurrentAccount } from '@iota/dapp-kit';
 interface DetailsViewProps {
     asset: IotaObjectData;
     handleClose: () => void;
+    handleSend: () => void;
 }
 
-export function DetailsView({ handleClose, asset }: DetailsViewProps) {
+export function DetailsView({ handleClose, asset, handleSend }: DetailsViewProps) {
     const account = useCurrentAccount();
 
     const senderAddress = account?.address ?? '';
@@ -52,10 +53,6 @@ export function DetailsView({ handleClose, asset }: DetailsViewProps) {
         window.open('https://wiki.iota.org/', '_blank');
     }
 
-    function handleSend() {
-        console.log('send');
-    }
-
     return (
         <Layout>
             <Header title="Asset" onClose={handleClose} />
@@ -146,9 +143,13 @@ export function DetailsView({ handleClose, asset }: DetailsViewProps) {
                                                 key={idx}
                                                 keyText={aKey}
                                                 value={
-                                                    <Link key={aKey} href={valueLink || ''}>
-                                                        {value}
-                                                    </Link>
+                                                    valueLink ? (
+                                                        <Link key={aKey} href={valueLink || ''}>
+                                                            {value}
+                                                        </Link>
+                                                    ) : (
+                                                        value
+                                                    )
                                                 }
                                                 fullwidth
                                             />

diff --git a/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx b/apps/wallet-dashboard/components/Dialogs/Assets/views/SendView.tsx
@@ -0,0 +1,17 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { Layout, LayoutBody } from '../../Staking/views/Layout';
+
+export function SendView() {
+    return (
+        <Layout>
+            <LayoutBody>
+                <div className="flex w-full flex-col items-center justify-center gap-xs">
+                    Send view
+                </div>
+            </LayoutBody>
+        </Layout>
+    );
+}
diff --git a/apps/wallet/src/ui/app/pages/home/nft-transfer/index.tsx b/apps/wallet/src/ui/app/pages/home/nft-transfer/index.tsx
@@ -4,11 +4,10 @@
 
 import { useActiveAddress } from '_app/hooks/useActiveAddress';
 import { Loading, NFTDisplayCard, Overlay } from '_components';
-import { useOwnedNFT } from '_hooks';
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
 import { Navigate, useNavigate, useParams } from 'react-router-dom';
 import { TransferNFTForm } from './TransferNFTForm';
-import { isAssetTransferable } from '@iota/core';
+import { isAssetTransferable, useOwnedNFT } from '@iota/core';
 
 function NftTransferPage() {
     const { nftId } = useParams();