feat: add new hook to get sharedobjects

apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx

@@ -11,15 +11,15 @@ import {
     TIMELOCK_STAKED_TYPE,
     useBalance,
     useFormatCoin,
-    useGetStardustSharedBasicObjects,
-    useGetStardustSharedNftObjects,
 } from '@iota/core';
 import { TriangleDown } from '@iota/apps-ui-icons';
 import clsx from 'clsx';
 import { Badge, BadgeType } from '@iota/apps-ui-kit';
 import { formatAddress } from '@iota/iota-sdk/utils';
-import { useMemo } from 'react';
-import { useGetOwnedObjectsMultipleAddresses } from '../../hooks';
+import {
+    useGetOwnedObjectsMultipleAddresses,
+    useGetSharedObjectsMultipleAddresses,
+} from '../../hooks';
 
 interface AccountBalanceItemProps {
     accounts: SerializedUIAccount[];
@@ -34,10 +34,10 @@ export function AccountBalanceItem({
 }: AccountBalanceItemProps): JSX.Element {
     const addresses = accounts.map(({ address }) => address);
 
-    const balances = accounts.map(({ address }) => ({
-        address,
-        balance: useBalance(address, { refetchInterval: false }).data,
-    }));
+    // const balances = accounts.map(({ address }) => ({
+    //     address,
+    //     balance: useBalance(address, { refetchInterval: false }).data,
+    // }));
 
     const { data: ownedObjects } = useGetOwnedObjectsMultipleAddresses(
         addresses,
@@ -72,46 +72,29 @@ export function AccountBalanceItem({
         OBJECT_PER_REQ,
     );
 
-    const migrationObjects = addresses.map((address) => {
-        const stardustSharedBasic = useGetStardustSharedBasicObjects(address, OBJECT_PER_REQ).data;
-        const stardustSharedNft = useGetStardustSharedNftObjects(address, OBJECT_PER_REQ).data;
-        return (
-            !!stardustOwnedObjects?.pages?.[0]?.[0]?.data?.length ||
-            !!stardustSharedBasic?.length ||
-            !!stardustSharedNft?.length
-        );
-    });
-
-    function getAddressBalance(address: string): string {
-        const balanceData = balances.find((b) => b.address === address)?.balance;
-        const totalBalance = balanceData?.totalBalance || '0';
-        const coinType = balanceData?.coinType || '';
-        const [formatted, symbol] = useFormatCoin(BigInt(totalBalance), coinType);
-        return `${formatted} ${symbol}`;
-    }
-
-    function getSumOfBalances(): string {
-        let coinType = '';
-        const balance = balances.reduce((acc, { balance }) => {
-            const totalBalance = balance?.totalBalance || '0';
-            coinType = balance?.coinType || '';
-            return (BigInt(acc) + BigInt(totalBalance)).toString();
-        }, '0');
-        const [formatted, symbol] = useFormatCoin(BigInt(balance), coinType);
-        return `${formatted} ${symbol}`;
-    }
-
-    const hasAccountAssets = useMemo(() => {
-        return ownedObjects?.pages.some((obj) => Boolean(obj[0]?.data?.length));
-    }, [ownedObjects]);
-
-    const hasVestingObjects = useMemo(() => {
-        return vestingObjects?.pages.some((obj) => Boolean(obj[0]?.data?.length));
-    }, [vestingObjects]);
-
-    const hasMigrationObjects = useMemo(() => {
-        return migrationObjects.some((mig) => mig);
-    }, [migrationObjects]);
+    const { data: stardustSharedObjects } = useGetSharedObjectsMultipleAddresses(
+        addresses,
+        OBJECT_PER_REQ,
+    );
+
+    const hasMigrationObjects =
+        !!stardustOwnedObjects?.pages?.[0]?.[0]?.data?.length ||
+        !!stardustSharedObjects?.pages?.[0]?.length;
+
+    const hasAccountAssets = !!ownedObjects?.pages?.[0]?.[0]?.data?.length;
+
+    const hasVestingObjects = !!vestingObjects?.pages?.[0]?.[0]?.data?.length;
+
+    // function getSumOfBalances(): string {
+    //     let coinType = '';
+    //     const balance = balances.reduce((acc, { balance }) => {
+    //         const totalBalance = balance?.totalBalance || '0';
+    //         coinType = balance?.coinType || '';
+    //         return (BigInt(acc) + BigInt(totalBalance)).toString();
+    //     }, '0');
+    //     const [formatted, symbol] = useFormatCoin(BigInt(balance), coinType);
+    //     return `${formatted} ${symbol}`;
+    // }
 
     return (
         <Collapsible
@@ -136,7 +119,7 @@ export function AccountBalanceItem({
                         </div>
                     </div>
                     <div className="flex flex-col items-end gap-xxs">
-                        <span>{getSumOfBalances()}</span>
+                        {/* <span>{getSumOfBalances()}</span> */}
                         <div className="flex flex-row gap-xxs">
                             {hasAccountAssets && <Badge type={BadgeType.Neutral} label="Assets" />}
                             {hasVestingObjects && (
@@ -152,12 +135,23 @@ export function AccountBalanceItem({
         >
             <div className="flex flex-col gap-y-sm p-sm pl-lg text-body-md text-neutral-10 dark:text-neutral-92">
                 {accounts.map(({ address, id }) => (
-                    <div className="flex w-full flex-row justify-between" key={id}>
-                        <span>{formatAddress(address)}</span>
-                        <span>{getAddressBalance(address)}</span>
-                    </div>
+                    <AddressItem key={id} address={address} />
                 ))}
             </div>
         </Collapsible>
     );
 }
+
+export function AddressItem({ address }: { address: string }): JSX.Element {
+    const { data: balance } = useBalance(address!);
+    const totalBalance = balance?.totalBalance || '0';
+    const coinType = balance?.coinType || '';
+    const [formatted, symbol] = useFormatCoin(BigInt(totalBalance), coinType);
+
+    return (
+        <div className="flex w-full flex-row justify-between">
+            <span>{formatAddress(address)}</span>
+            <span>{`${formatted} ${symbol}`}</span>
+        </div>
+    );
+}

apps/wallet/src/ui/app/hooks/index.ts

@@ -38,3 +38,4 @@ export * from './useStorageMigrationStatus';
 export * from './useUnlockMutation';
 export * from './useUnlockedGuard';
 export * from './useGetOwnedObjectsMultipleAddresses';
+export * from './useGetSharedObjectsMultipleAddresses';

apps/wallet/src/ui/app/hooks/useGetSharedObjectsMultipleAddresses.ts

@@ -0,0 +1,64 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useInfiniteQuery } from '@tanstack/react-query';
+import {
+    mapStardustBasicOutputs,
+    mapStardustNftOutputs,
+    useStardustIndexerClientContext,
+} from '@iota/core';
+
+const MAX_OBJECTS_PER_REQ = 6;
+
+export function useGetSharedObjectsMultipleAddresses(
+    addresses: string[],
+    pageSize: number = MAX_OBJECTS_PER_REQ,
+) {
+    const { stardustIndexerClient } = useStardustIndexerClientContext();
+
+    return useInfiniteQuery({
+        initialPageParam: { page: 1 },
+        queryKey: ['get-shared-objects', addresses, pageSize, stardustIndexerClient?.baseUrl],
+        queryFn: async ({ pageParam }) => {
+            try {
+                const responses = await Promise.all(
+                    addresses.map(async (address) => {
+                        const nftOutputs = await stardustIndexerClient?.getNftResolvedOutputs(
+                            address,
+                            {
+                                page: pageParam?.page,
+                                pageSize,
+                            },
+                        );
+
+                        const basicOutputs = await stardustIndexerClient?.getBasicResolvedOutputs(
+                            address,
+                            {
+                                page: pageParam?.page,
+                                pageSize,
+                            },
+                        );
+
+                        return {
+                            address,
+                            nftOutputs: nftOutputs ? nftOutputs.map(mapStardustNftOutputs) : [],
+                            basicOutputs: basicOutputs
+                                ? basicOutputs.map(mapStardustBasicOutputs)
+                                : [],
+                        };
+                    }),
+                );
+
+                return responses;
+            } catch (error) {
+                return [];
+            }
+        },
+        staleTime: 10 * 1000,
+        enabled: addresses.length > 0,
+        getNextPageParam: (lastPage) => {
+            const nextPage = lastPage.find((res) => res.nftOutputs.length === pageSize);
+            return nextPage ? { page: lastPage.length + 1 } : null;
+        },
+    });
+}