feat(core): Add hook with logic to check if an asset is 'Transferable…

…'. (#4159)

* feat(tooling-core): Add hook with logic to check if an asset is 'Transferabe'. Remove old util

* feat(apps-core): Use useQuery in place of useEffect in useIsAssetTransferable

* feat(apps-core): Improve early return condition in useIsAssetTransferable

* feat(apps-core): Improve per PR comments

apps/core/src/hooks/index.ts

@@ -24,6 +24,7 @@ export * from './useGetKioskContents';
 export * from './useZodForm';
 export * from './useElementDimensions';
 export * from './useIotaCoinData';
+export * from './useIsAssetTransferable';
 export * from './useLocalStorage';
 export * from './useTokenPrice';
 export * from './useKioskClient';

apps/core/src/hooks/useIsAssetTransferable.ts

@@ -0,0 +1,50 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useIotaClient } from '@iota/dapp-kit';
+import { IotaMoveNormalizedStruct, IotaObjectData } from '@iota/iota-sdk/client';
+import { useQuery } from '@tanstack/react-query';
+
+function getObjectTypeParams(obj: IotaObjectData | null | undefined) {
+    const objectType =
+        obj?.type ??
+        (obj?.content?.dataType === 'package' ? 'package' : obj?.content?.type) ??
+        null;
+
+    return objectType?.split('<')[0]?.split('::') || [];
+}
+
+export function useIsAssetTransferable(obj: IotaObjectData | null | undefined) {
+    const client = useIotaClient();
+    const [packageId, moduleName, functionName] = getObjectTypeParams(obj);
+
+    return useQuery({
+        // eslint-disable-next-line @tanstack/query/exhaustive-deps
+        queryKey: ['is-asset-transferable', packageId, moduleName, functionName],
+        queryFn: async () => {
+            if (!packageId || !moduleName || !functionName) {
+                return undefined;
+            }
+
+            return await client.getNormalizedMoveStruct({
+                package: packageId,
+                module: moduleName,
+                struct: functionName,
+            });
+        },
+        select: (moveNormalizedStruct: IotaMoveNormalizedStruct | undefined): boolean => {
+            if (!moveNormalizedStruct) {
+                return false;
+            }
+
+            const structAbilities = moveNormalizedStruct?.abilities?.abilities ?? null;
+
+            if (!structAbilities) {
+                return false;
+            }
+
+            return structAbilities.includes('Store');
+        },
+        enabled: !!packageId && !!moduleName && !!functionName,
+    });
+}

apps/core/src/utils/index.ts

@@ -1,7 +1,6 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './isAssetTransferable';
 export * from './calculateStakeShare';
 export * from './chunkArray';
 export * from './formatAmount';

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

@@ -6,7 +6,7 @@
 import React, { useCallback } from 'react';
 import { useParams } from 'next/navigation';
 import { Button, RouteLink, SendAssetPopup, VisualAssetDetailsCard } from '@/components';
-import { isAssetTransferable, useGetObject } from '@iota/core';
+import { useIsAssetTransferable, useGetObject } from '@iota/core';
 import { usePopups } from '@/hooks';
 import { useCurrentAccount } from '@iota/dapp-kit';
 import { ASSETS_ROUTE } from '@/lib/constants/routes.constants';
@@ -15,6 +15,7 @@ const VisualAssetDetailPage = () => {
     const params = useParams();
     const objectId = params.objectId as string;
     const { data: asset } = useGetObject(objectId);
+    const { data: isAssetTransferable } = useIsAssetTransferable(asset?.data);
     const activeAccount = useCurrentAccount();
 
     const { openPopup, closePopup } = usePopups();
@@ -25,8 +26,6 @@ const VisualAssetDetailPage = () => {
         }
     }, [asset, openPopup, closePopup]);
 
-    const assetIsTransferable = asset?.data ? isAssetTransferable(asset?.data) : false;
-
     return (
         <div className="flex h-full w-full flex-col space-y-4 px-40">
             <RouteLink path={ASSETS_ROUTE.path} title="Back" />
@@ -35,7 +34,7 @@ const VisualAssetDetailPage = () => {
             ) : (
                 <div className="flex justify-center p-20">Asset not found</div>
             )}
-            {assetIsTransferable && activeAccount ? (
+            {isAssetTransferable && activeAccount ? (
                 <Button onClick={showSendAssetPopup}>Send Asset</Button>
             ) : null}
         </div>

apps/wallet/src/ui/app/pages/home/nft-details/index.tsx

@@ -7,7 +7,7 @@ import { Collapsible } from '_app/shared/collapse';
 import { ExplorerLink, ExplorerLinkType, Loading, NFTDisplayCard, PageTemplate } from '_components';
 import { useNFTBasicData, useOwnedNFT } from '_hooks';
 import { useUnlockedGuard } from '_src/ui/app/hooks/useUnlockedGuard';
-import { isAssetTransferable, useGetKioskContents, useGetNFTMeta } from '@iota/core';
+import { useIsAssetTransferable, useGetKioskContents, useGetNFTMeta } from '@iota/core';
 import { formatAddress } from '@iota/iota-sdk/utils';
 import cl from 'clsx';
 import { Link, Navigate, useNavigate, useSearchParams } from 'react-router-dom';
@@ -24,7 +24,8 @@ function NFTDetailsPage() {
     const nftId = searchParams.get('objectId');
     const accountAddress = useActiveAddress();
     const { data: objectData, isPending: isNftLoading } = useOwnedNFT(nftId || '', accountAddress);
-    const isTransferable = isAssetTransferable(objectData);
+    const { data: isAssetTransferable, isLoading: isCheckingAssetTransferability } =
+        useIsAssetTransferable(objectData);
     const { nftFields, fileExtensionType, filePath } = useNFTBasicData(objectData);
     const address = useActiveAddress();
     const { data } = useGetKioskContents(address);
@@ -55,7 +56,8 @@ function NFTDetailsPage() {
             objectData.owner.AddressOwner) ||
         '';
     const isGuardLoading = useUnlockedGuard();
-    const isPending = isNftLoading || isPendingDisplay || isGuardLoading;
+    const isPending =
+        isNftLoading || isPendingDisplay || isGuardLoading || isCheckingAssetTransferability;
 
     function handleMoreAboutKiosk() {
         window.open('https://docs.iota.org/references/ts-sdk/kiosk/', '_blank');
@@ -241,7 +243,7 @@ function NFTDetailsPage() {
                                     ) : (
                                         <div className="flex flex-1 items-end">
                                             <Button
-                                                disabled={!isTransferable}
+                                                disabled={!isAssetTransferable}
                                                 onClick={handleSend}
                                                 text="Send"
                                                 fullWidth

apps/wallet/src/ui/app/pages/home/nft-transfer/index.tsx

@@ -8,21 +8,23 @@ 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 { useIsAssetTransferable } from '@iota/core';
 
 function NftTransferPage() {
     const { nftId } = useParams();
     const address = useActiveAddress();
     // verify that the nft is owned by the user and is transferable
     const { data: ownedNFT, isPending: isNftLoading } = useOwnedNFT(nftId || '', address);
+    const { data: isAssetTransferable, isLoading: isCheckingAssetTransferability } =
+        useIsAssetTransferable(ownedNFT);
     const navigate = useNavigate();
     const isGuardLoading = useUnlockedGuard();
-    const isPending = isNftLoading || isGuardLoading;
+    const isPending = isNftLoading || isGuardLoading || isCheckingAssetTransferability;
     return (
         <Overlay showModal title="Send NFT" closeOverlay={() => navigate('/nfts')} showBackButton>
             <Loading loading={isPending}>
                 <div className="flex h-full w-full flex-col gap-md">
-                    {nftId && !!ownedNFT && isAssetTransferable(ownedNFT) ? (
+                    {nftId && !!ownedNFT && isAssetTransferable ? (
                         <>
                             <div className="w-[172px] self-center">
                                 <NFTDisplayCard objectId={nftId} wideView />