feat(wallet-dashboard): style selected visual Assets.

apps/core/src/components/collapsible/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Collapsible';

apps/core/src/components/index.ts

@@ -5,5 +5,5 @@ export * from './coin';
 export * from './icon';
 export * from './Inputs';
 export * from './QR';
-
+export * from './collapsible';
 export * from './providers';

apps/core/src/hooks/index.ts

@@ -42,5 +42,8 @@ export * from './useTransactionData';
 export * from './useGetStakingValidatorDetails';
 export * from './useCursorPagination';
 export * from './useTheme';
+export * from './useNFTBasicData';
+export * from './useOwnedNFT';
+export * from './useNftDetails';
 
 export * from './stake';

apps/wallet/src/ui/app/hooks/useNFTBasicData.ts → apps/core/src/hooks/useNFTBasicData.ts

@@ -7,7 +7,7 @@ import type { IotaObjectData } from '@iota/iota-sdk/client';
 import useFileExtensionType from './useFileExtensionType';
 import useMediaUrl from './useMediaUrl';
 
-export default function useNFTBasicData(nftObj: IotaObjectData | null) {
+export function useNFTBasicData(nftObj: IotaObjectData | null) {
     const nftObjectID = nftObj?.objectId || null;
     const filePath = useMediaUrl(nftObj?.content || null);
     let objType = null;

apps/core/src/hooks/useNftDetails.ts

@@ -0,0 +1,85 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+import { useGetNFTMeta, useOwnedNFT, useNFTBasicData, useGetKioskContents } from './';
+import { formatAddress } from '@iota/iota-sdk/utils';
+import { isAssetTransferable, truncateString } from '../utils';
+
+type NftFields = {
+    metadata?: { fields?: { attributes?: { fields?: { keys: string[]; values: string[] } } } };
+};
+
+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 = isAssetTransferable(objectData);
+
+    const { nftFields } = useNFTBasicData(objectData);
+
+    const { data: nftMeta, isPending: isPendingMeta } = useGetNFTMeta(nftId);
+
+    const nftName = nftMeta?.name || formatAddress(nftId);
+    const nftImageUrl = nftMeta?.imageUrl || '';
+
+    // Extract either the attributes, or use the top-level NFT fields:
+    const { keys: metaKeys, values: metaValues } =
+        (nftFields as NftFields)?.metadata?.fields?.attributes?.fields ||
+        Object.entries(nftFields ?? {})
+            .filter(([key]) => key !== 'id')
+            .reduce(
+                (acc, [key, value]) => {
+                    acc.keys.push(key);
+                    acc.values.push(value as string);
+                    return acc;
+                },
+                { keys: [] as string[], values: [] as string[] },
+            );
+
+    const ownerAddress =
+        (objectData?.owner &&
+            typeof objectData?.owner === 'object' &&
+            'AddressOwner' in objectData.owner &&
+            objectData.owner.AddressOwner) ||
+        '';
+
+    function formatMetaValue(value: string | object) {
+        if (typeof value === 'object') {
+            return {
+                value: JSON.stringify(value),
+                valueLink: undefined,
+            };
+        } else {
+            if (value.includes('http')) {
+                return {
+                    value: value.startsWith('http')
+                        ? truncateString(value, 20, 8)
+                        : formatAddress(value),
+                    valueLink: value,
+                };
+            }
+            return {
+                value: value,
+                valueLink: undefined,
+            };
+        }
+    }
+
+    return {
+        objectData,
+        isNftLoading,
+        nftName,
+        nftImageUrl,
+        ownerAddress,
+        isTransferable,
+        metaKeys,
+        metaValues,
+        formatMetaValue,
+        isContainedInKiosk,
+        kioskItem,
+        nftMeta,
+        isPendingMeta,
+    };
+}

apps/wallet/src/ui/app/hooks/useOwnedNFT.ts → apps/core/src/hooks/useOwnedNFT.ts

@@ -2,7 +2,7 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { useGetKioskContents, useGetObject } from '@iota/core';
+import { useGetKioskContents, useGetObject } from './';
 import { useMemo } from 'react';
 
 export function useOwnedNFT(nftObjectId: string | null, address: string | null) {

apps/core/src/utils/index.ts

@@ -21,6 +21,7 @@ export * from './getDelegationDataByStakeId';
 export * from './api-env';
 export * from './getExplorerPaths';
 export * from './getExplorerLink';
+export * from './truncateString';
 
 export * from './stake';
 export * from './transaction';

apps/ui-kit/src/lib/components/organisms/accordion/Accordion.tsx

@@ -7,7 +7,7 @@ import { ArrowDown } from '@iota/ui-icons';
 import { Button, ButtonType } from '@/lib';
 import { ICON_STYLE } from './accordion.classes';
 
-interface AccordionHeaderProps {
+export interface AccordionHeaderProps {
     /**
      * Flag for show/hide content
      */

apps/wallet-dashboard/app/(protected)/assets/page.tsx

@@ -10,6 +10,7 @@ import { IotaObjectData } from '@iota/iota-sdk/client';
 import { useState } from 'react';
 import { AssetCategory } from '@/lib/enums';
 import { AssetList } from '@/components/AssetsList';
+import { AssetsDialog, AssetsDialogView, useAssetsDialog } from '@/components/Dialogs/Assets';
 
 const OBJECTS_PER_REQ = 50;
 
@@ -25,7 +26,9 @@ const ASSET_CATEGORIES: { label: string; value: AssetCategory }[] = [
 ];
 
 export default function AssetsDashboardPage(): React.JSX.Element {
+    const { view, setView } = useAssetsDialog();
     const [selectedCategory, setSelectedCategory] = useState<AssetCategory>(AssetCategory.Visual);
+    const [selectedAsset, setSelectedAsset] = useState<IotaObjectData | null>(null);
     const account = useCurrentAccount();
     const { data, isFetching, fetchNextPage, hasNextPage } = useGetOwnedObjects(
         account?.address,
@@ -49,6 +52,15 @@ export default function AssetsDashboardPage(): React.JSX.Element {
         }
     }
 
+    function handleClickAsset(asset: IotaObjectData) {
+        setSelectedAsset(asset);
+        setView(AssetsDialogView.Details);
+    }
+
+    function handleCloseDialog() {
+        setSelectedAsset(null);
+    }
+
     return (
         <Panel>
             <Title title="Assets" size={TitleSize.Medium} />
@@ -67,10 +79,20 @@ export default function AssetsDashboardPage(): React.JSX.Element {
                 <AssetList
                     assets={assets}
                     selectedCategory={selectedCategory}
+                    onClick={handleClickAsset}
                     hasNextPage={hasNextPage}
                     isFetchingNextPage={isFetching}
                     fetchNextPage={fetchNextPage}
                 />
+                {view && (
+                    <AssetsDialog
+                        view={view}
+                        setView={setView}
+                        isOpen={!!selectedAsset}
+                        handleClose={handleCloseDialog}
+                        asset={selectedAsset}
+                    />
+                )}
             </div>
         </Panel>
     );

apps/wallet-dashboard/components/AssetsList.tsx

@@ -15,6 +15,7 @@ interface AssetListProps {
     hasNextPage: boolean;
     isFetchingNextPage: boolean;
     fetchNextPage: () => void;
+    onClick: (asset: IotaObjectData) => void;
 }
 
 const ASSET_LAYOUT: Record<AssetCategory, string> = {
@@ -29,6 +30,7 @@ export function AssetList({
     hasNextPage,
     isFetchingNextPage,
     fetchNextPage,
+    onClick,
 }: AssetListProps): React.JSX.Element {
     const observerElem = useRef<HTMLDivElement | null>(null);
     const { isIntersecting } = useOnScreen(observerElem);
@@ -43,7 +45,12 @@ export function AssetList({
     return (
         <div className={cl('max-h-[600px]', ASSET_LAYOUT[selectedCategory])}>
             {assets.map((asset) => (
-                <AssetTileLink key={asset.digest} asset={asset} type={selectedCategory} />
+                <AssetTileLink
+                    key={asset.digest}
+                    asset={asset}
+                    type={selectedCategory}
+                    onClick={onClick}
+                />
             ))}
             <div ref={observerElem}>
                 {isSpinnerVisible ? (

apps/wallet-dashboard/components/Dialogs/Assets/AssetsDialog.tsx

@@ -0,0 +1,107 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import { Dialog } from '@iota/apps-ui-kit';
+import { FormikProvider, useFormik } from 'formik';
+import { useCurrentAccount } from '@iota/dapp-kit';
+import { createNftSendValidationSchema } from '@iota/core';
+import { DetailsView, SendView } from './views';
+import { IotaObjectData } from '@iota/iota-sdk/client';
+import { AssetsDialogView } from './hooks';
+import { useCreateSendAssetTransaction, useNotifications } from '@/hooks';
+import { NotificationType } from '@/stores/notificationStore';
+import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
+import { useRouter } from 'next/navigation';
+
+interface AssetsDialogProps {
+    isOpen: boolean;
+    handleClose: () => void;
+    asset: IotaObjectData | null;
+    view: AssetsDialogView;
+    setView: (view: AssetsDialogView | undefined) => void;
+}
+
+export interface FormValues {
+    to: string;
+}
+
+const INITIAL_VALUES: FormValues = {
+    to: '',
+};
+
+export function AssetsDialog({
+    isOpen,
+    handleClose,
+    asset,
+    setView,
+    view,
+}: AssetsDialogProps): JSX.Element {
+    const account = useCurrentAccount();
+    const activeAddress = account?.address ?? '';
+    const objectId = asset?.objectId ?? '';
+    const router = useRouter();
+    const { addNotification } = useNotifications();
+    const validationSchema = createNftSendValidationSchema(activeAddress, objectId);
+
+    function handleDetailsSend() {
+        setView(AssetsDialogView.Send);
+    }
+
+    const { mutation: sendAsset } = useCreateSendAssetTransaction(
+        objectId,
+        onSendAssetSuccess,
+        onSendAssetError,
+    );
+
+    const formik = useFormik<FormValues>({
+        initialValues: INITIAL_VALUES,
+        validationSchema: validationSchema,
+        onSubmit: onSubmit,
+        validateOnChange: true,
+    });
+
+    function onSendAssetSuccess() {
+        addNotification('Transfer transaction successful', NotificationType.Success);
+        router.push(ASSETS_ROUTE.path + '/assets');
+    }
+
+    function onSendAssetError() {
+        addNotification('Transfer transaction failed', NotificationType.Error);
+    }
+
+    async function onSubmit(values: FormValues) {
+        try {
+            await sendAsset.mutateAsync(values.to);
+        } catch (error) {
+            addNotification('Transfer transaction failed', NotificationType.Error);
+        }
+    }
+
+    function onSendClose() {
+        setView(undefined);
+    }
+
+    function onSendBack() {
+        setView(AssetsDialogView.Details);
+    }
+
+    return (
+        <Dialog open={isOpen} onOpenChange={() => handleClose()}>
+            <FormikProvider value={formik}>
+                <>
+                    {view === AssetsDialogView.Details && asset && (
+                        <DetailsView
+                            asset={asset}
+                            handleClose={handleClose}
+                            handleSend={handleDetailsSend}
+                        />
+                    )}
+                    {view === AssetsDialogView.Send && asset && (
+                        <SendView asset={asset} onClose={onSendClose} onBack={onSendBack} />
+                    )}
+                </>
+            </FormikProvider>
+        </Dialog>
+    );
+}

apps/wallet-dashboard/components/Dialogs/Assets/hooks/index.ts

@@ -0,0 +1,4 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './useAssetsDialog';

apps/wallet-dashboard/components/Dialogs/Assets/hooks/useAssetsDialog.ts

@@ -0,0 +1,18 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+export enum AssetsDialogView {
+    Details = 'Details',
+    Send = 'Send',
+}
+
+export function useAssetsDialog() {
+    const [view, setView] = React.useState<AssetsDialogView | undefined>(AssetsDialogView.Details);
+
+    return {
+        view,
+        setView,
+    };
+}

apps/wallet-dashboard/components/Dialogs/Assets/index.ts

@@ -0,0 +1,5 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './AssetsDialog';
+export * from './hooks';