feat(wallet): update balance finder style

apps/core/src/components/collapsible/Collapsible.tsx

@@ -37,7 +37,6 @@ export function Collapsible({
     return (
         <Accordion hideBorder={hideBorder}>
             <AccordionHeader
-                hideBorder={hideBorder}
                 hideArrow={hideArrow}
                 isExpanded={isOpen ?? open}
                 onToggle={() => handleOpenChange(!open)}

apps/core/src/hooks/useFormatCoin.ts

@@ -64,14 +64,7 @@ export function useCoinMetadata(coinType?: string | null) {
 
             // Optimize the known case of IOTA to avoid a network call:
             if (coinType === IOTA_TYPE_ARG) {
-                const metadata: CoinMetadata = {
-                    id: null,
-                    decimals: 9,
-                    description: '',
-                    iconUrl: null,
-                    name: 'IOTA',
-                    symbol: 'IOTA',
-                };
+                const metadata: CoinMetadata = IOTA_COIN_METADATA;
 
                 return metadata;
             }
@@ -100,6 +93,15 @@ export function useCoinMetadata(coinType?: string | null) {
     });
 }
 
+export const IOTA_COIN_METADATA: CoinMetadata = {
+    id: null,
+    decimals: 9,
+    description: '',
+    iconUrl: null,
+    name: 'IOTA',
+    symbol: 'IOTA',
+};
+
 // TODO #1: This handles undefined values to make it easier to integrate with
 // the reset of the app as it is today, but it really shouldn't in a perfect world.
 export function useFormatCoin(

apps/explorer/src/components/ui/collapsible/CollapsibleCard.tsx

@@ -46,7 +46,6 @@ export function CollapsibleCard({
         <div className="relative w-full">
             <Accordion hideBorder={hideBorder}>
                 <AccordionHeader
-                    hideBorder={hideBorder}
                     hideArrow={hideArrow}
                     isExpanded={open}
                     onToggle={() => setOpen(!open)}

apps/explorer/src/pages/transaction-result/Events.tsx

@@ -47,12 +47,7 @@ function Event({ event, divider }: { event: IotaEvent; divider: boolean }): JSX.
                     isTruncated
                 />
                 <Accordion hideBorder>
-                    <AccordionHeader
-                        hideBorder
-                        hideArrow
-                        isExpanded={open}
-                        onToggle={() => setOpen(!open)}
-                    >
+                    <AccordionHeader hideArrow isExpanded={open} onToggle={() => setOpen(!open)}>
                         <div className="flex w-full flex-row justify-between gap-xxxs pl-xxs text-neutral-40 dark:text-neutral-60">
                             <span className="text-body-md">
                                 {open ? 'Hide' : 'View'} Event Data

apps/explorer/src/pages/transaction-result/transaction-summary/ObjectChanges.tsx

@@ -95,7 +95,7 @@ function ObjectDetailPanel({ panelContent, headerContent }: ObjectDetailPanelPro
     const [open, setOpen] = useState(false);
     return (
         <Accordion hideBorder>
-            <AccordionHeader hideBorder hideArrow isExpanded={open} onToggle={() => setOpen(!open)}>
+            <AccordionHeader hideArrow isExpanded={open} onToggle={() => setOpen(!open)}>
                 <div className="flex w-full flex-row items-center justify-between px-md--rs">
                     <div className="flex flex-row gap-xxxs text-neutral-40 dark:text-neutral-60">
                         <span className="text-body-md">Object</span>

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

@@ -44,16 +44,14 @@ export function AccordionHeader({
     children,
     isExpanded,
     hideArrow,
-    hideBorder,
 }: PropsWithChildren<AccordionHeaderProps>) {
     return (
         <div
             onClick={onToggle}
             className={cx(
-                'state-layer relative flex cursor-pointer items-center justify-between gap-md py-sm--rs',
+                'state-layer relative flex cursor-pointer items-center justify-between gap-md overflow-hidden rounded-xl py-sm--rs',
                 {
                     'pr-md--rs': !hideArrow,
-                    'rounded-xl': hideBorder,
                 },
             )}
         >
@@ -100,8 +98,8 @@ export function Accordion({
 }): React.JSX.Element {
     return (
         <div
-            className={cx('overflow-hidden rounded-xl bg-neutral-100 dark:bg-neutral-6', {
-                ' border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8':
+            className={cx('rounded-xl bg-neutral-100 dark:bg-neutral-6', {
+                'border border-shader-neutral-light-8 dark:border-shader-neutral-dark-8':
                     !hideBorder,
             })}
         >

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

@@ -1,46 +1,175 @@
 // Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
-import { formatAddress } from '@iota/iota-sdk/utils';
-import { useCopyToClipboard } from '_hooks';
 import { type SerializedUIAccount } from '_src/background/accounts/account';
-import { useBalance, useFormatCoin } from '@iota/core';
-import { Copy } from '@iota/apps-ui-icons';
-import { Panel, ButtonUnstyled } from '@iota/apps-ui-kit';
+import {
+    COIN_TYPE,
+    Collapsible,
+    formatBalance,
+    IOTA_COIN_METADATA,
+    STARDUST_BASIC_OUTPUT_TYPE,
+    STARDUST_NFT_OUTPUT_TYPE,
+    TIMELOCK_IOTA_TYPE,
+    TIMELOCK_STAKED_TYPE,
+    useBalance,
+    useFormatCoin,
+} from '@iota/core';
+import { TriangleDown } from '@iota/apps-ui-icons';
+import clsx from 'clsx';
+import { Badge, BadgeType } from '@iota/apps-ui-kit';
+import { formatAddress, IOTA_TYPE_ARG } from '@iota/iota-sdk/utils';
+import {
+    useGetOwnedObjectsMultipleAddresses,
+    useGetSharedObjectsMultipleAddresses,
+} from '../../hooks';
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useIotaClientContext } from '@iota/dapp-kit';
 
 interface AccountBalanceItemProps {
-    account: SerializedUIAccount;
+    accounts: SerializedUIAccount[];
+    accountIndex: string;
 }
 
-export function AccountBalanceItem({ account }: AccountBalanceItemProps): JSX.Element {
-    const copyAddress = useCopyToClipboard(account.address, {
-        copySuccessMessage: 'Address copied',
-    });
-    const { data: balance } = useBalance(account.address, {
-        refetchInterval: false,
+const OBJECT_PER_REQ = 1;
+
+export function AccountBalanceItem({
+    accounts,
+    accountIndex,
+}: AccountBalanceItemProps): JSX.Element {
+    const addresses = accounts.map(({ address }) => address);
+
+    const queryClient = useQueryClient();
+    const iotaContext = useIotaClientContext();
+
+    const { data: sumOfBalances } = useQuery({
+        queryKey: ['getBalance', ...addresses],
+        async queryFn() {
+            return await Promise.all(
+                addresses.map(async (address) => {
+                    const params = {
+                        coinType: IOTA_TYPE_ARG,
+                        owner: address!,
+                    };
+                    return queryClient.ensureQueryData({
+                        queryKey: [iotaContext.network, 'getBalance'],
+                        queryFn: () => iotaContext.client.getBalance(params),
+                    });
+                }),
+            );
+        },
+        select(balances) {
+            const balance = balances.reduce((acc, { totalBalance }) => {
+                return BigInt(acc) + BigInt(totalBalance);
+            }, BigInt(0));
+            const [formatted, symbol] = formatBalance(balance, IOTA_COIN_METADATA.decimals);
+            return `${formatted} ${symbol}`;
+        },
+        gcTime: 0,
+        staleTime: 0,
     });
 
-    const totalBalance = balance?.totalBalance || '0';
-    const coinType = balance?.coinType;
-    const [formatted, symbol] = useFormatCoin(BigInt(totalBalance), coinType);
+    const { data: ownedObjects } = useGetOwnedObjectsMultipleAddresses(
+        addresses,
+        {
+            MatchNone: [
+                { StructType: COIN_TYPE },
+                { StructType: TIMELOCK_IOTA_TYPE },
+                { StructType: TIMELOCK_STAKED_TYPE },
+                { StructType: STARDUST_BASIC_OUTPUT_TYPE },
+                { StructType: STARDUST_NFT_OUTPUT_TYPE },
+            ],
+        },
+        OBJECT_PER_REQ,
+    );
+
+    const { data: vestingObjects } = useGetOwnedObjectsMultipleAddresses(
+        addresses,
+        {
+            MatchAny: [{ StructType: TIMELOCK_IOTA_TYPE }, { StructType: TIMELOCK_STAKED_TYPE }],
+        },
+        OBJECT_PER_REQ,
+    );
+
+    const { data: stardustOwnedObjects } = useGetOwnedObjectsMultipleAddresses(
+        addresses,
+        {
+            MatchAny: [
+                { StructType: STARDUST_BASIC_OUTPUT_TYPE },
+                { StructType: STARDUST_NFT_OUTPUT_TYPE },
+            ],
+        },
+        OBJECT_PER_REQ,
+    );
+
+    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;
+
     return (
-        <Panel hasBorder>
-            <div className="group flex cursor-pointer flex-col gap-sm rounded-xl px-md py-sm">
-                <div className="flex w-full flex-row items-center justify-between">
-                    <div className="text-steel-dark flex gap-xs leading-none">
-                        <span className="text-body-md">{formatAddress(account.address)}</span>
-                        <div className="flex gap-xxs opacity-0 duration-100 group-hover:opacity-100">
-                            <ButtonUnstyled onClick={copyAddress}>
-                                <Copy className="h-2.5 w-2.5" />
-                            </ButtonUnstyled>
+        <Collapsible
+            defaultOpen
+            hideArrow
+            render={({ isOpen }) => (
+                <div className="relative flex min-h-[52px] w-full items-center justify-between gap-1 py-2 pl-1 pr-sm text-neutral-10 dark:text-neutral-92">
+                    <div className="flex items-center gap-xxs">
+                        <TriangleDown
+                            className={clsx(
+                                'h-5 w-5 ',
+                                isOpen
+                                    ? 'rotate-0 transition-transform ease-linear'
+                                    : '-rotate-90 transition-transform ease-linear',
+                            )}
+                        />
+                        <div className="flex flex-col items-start gap-xxs">
+                            <div className="text-title-md">Wallet {Number(accountIndex) + 1}</div>
+                            <span className="text-body-sm text-neutral-40 dark:text-neutral-60">
+                                {accounts.length} {accounts.length > 1 ? 'addresses' : 'address'}
+                            </span>
+                        </div>
+                    </div>
+                    <div className="flex flex-col items-end gap-xxs">
+                        <span>{sumOfBalances}</span>
+                        <div className="flex flex-row gap-xxs">
+                            {hasAccountAssets && <Badge type={BadgeType.Neutral} label="Assets" />}
+                            {hasVestingObjects && (
+                                <Badge type={BadgeType.Neutral} label="Vesting" />
+                            )}
+                            {hasMigrationObjects && (
+                                <Badge type={BadgeType.Neutral} label="Migration" />
+                            )}
                         </div>
                     </div>
-
-                    <span className="text-body-sm">
-                        {formatted} {symbol}
-                    </span>
                 </div>
+            )}
+        >
+            <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 }) => (
+                    <AddressItem key={id} address={address} />
+                ))}
             </div>
-        </Panel>
+        </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

@@ -37,3 +37,5 @@ export * from './useSigner';
 export * from './useStorageMigrationStatus';
 export * from './useUnlockMutation';
 export * from './useUnlockedGuard';
+export * from './useGetOwnedObjectsMultipleAddresses';
+export * from './useGetSharedObjectsMultipleAddresses';

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

@@ -0,0 +1,49 @@
+// Copyright (c) 2024 IOTA Stiftung
+// SPDX-License-Identifier: Apache-2.0
+
+import { useIotaClient } from '@iota/dapp-kit';
+import { type PaginatedObjectsResponse, type IotaObjectDataFilter } from '@iota/iota-sdk/client';
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+const MAX_OBJECTS_PER_REQ = 6;
+
+export function useGetOwnedObjectsMultipleAddresses(
+    addresses: string[],
+    filter?: IotaObjectDataFilter,
+    maxObjectRequests = MAX_OBJECTS_PER_REQ,
+) {
+    const client = useIotaClient();
+
+    return useInfiniteQuery<PaginatedObjectsResponse[]>({
+        initialPageParam: null,
+        queryKey: ['get-owned-objects', addresses, filter, maxObjectRequests],
+        queryFn: async ({ pageParam }) => {
+            try {
+                const responses = await Promise.all(
+                    addresses.map((address) =>
+                        client.getOwnedObjects({
+                            owner: address,
+                            filter,
+                            options: {
+                                showType: true,
+                                showContent: true,
+                                showDisplay: true,
+                            },
+                            limit: maxObjectRequests,
+                            cursor: pageParam as string | null,
+                        }),
+                    ),
+                );
+                return responses.flat();
+            } catch (error) {
+                return [];
+            }
+        },
+        staleTime: 10 * 1000,
+        enabled: addresses.length > 0,
+        getNextPageParam: (lastPage) => {
+            const nextCursor = lastPage.find((res) => res.hasNextPage)?.nextCursor;
+            return nextCursor || null;
+        },
+    });
+}