fix: hook crash

iotaledger · Feb 4, 2025 · 07e2a40 · 07e2a40
1 parent 662b862
commit 07e2a40
Showing 1 changed file with 33 additions and 18 deletions.
diff --git a/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx
@@ -20,6 +20,7 @@ import {
     useGetOwnedObjectsMultipleAddresses,
     useGetSharedObjectsMultipleAddresses,
 } from '../../hooks';
+import { useEffect, useState } from 'react';
 
 interface AccountBalanceItemProps {
     accounts: SerializedUIAccount[];
@@ -34,10 +35,14 @@ 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 [addressBalances, setAddressBalances] = useState<Record<string, string>>({});
+
+    const totalBalance =
+        Object.values(addressBalances || {})?.reduce((acc, balance) => {
+            return (BigInt(acc || '0') + BigInt(balance || '0')).toString();
+        }, '0') ?? '0';
+
+    const [formatted, symbol] = useFormatCoin(BigInt(totalBalance), COIN_TYPE);
 
     const { data: ownedObjects } = useGetOwnedObjectsMultipleAddresses(
         addresses,
@@ -85,17 +90,6 @@ export function AccountBalanceItem({
 
     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
             defaultOpen
@@ -119,7 +113,7 @@ export function AccountBalanceItem({
                         </div>
                     </div>
                     <div className="flex flex-col items-end gap-xxs">
-                        {/* <span>{getSumOfBalances()}</span> */}
+                        <span>{`${formatted} ${symbol}`}</span>
                         <div className="flex flex-row gap-xxs">
                             {hasAccountAssets && <Badge type={BadgeType.Neutral} label="Assets" />}
                             {hasVestingObjects && (
@@ -135,19 +129,40 @@ 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 }) => (
-                    <AddressItem key={id} address={address} />
+                    <AddressItem
+                        key={id}
+                        address={address}
+                        onBalanceUpdate={(balance) => {
+                            setAddressBalances((prev) => ({
+                                ...prev,
+                                [address]: balance,
+                            }));
+                        }}
+                    />
                 ))}
             </div>
         </Collapsible>
     );
 }
 
-export function AddressItem({ address }: { address: string }): JSX.Element {
+export function AddressItem({
+    address,
+    onBalanceUpdate,
+}: {
+    address: string;
+    onBalanceUpdate?: (balance: string) => void;
+}): JSX.Element {
     const { data: balance } = useBalance(address!);
     const totalBalance = balance?.totalBalance || '0';
     const coinType = balance?.coinType || '';
     const [formatted, symbol] = useFormatCoin(BigInt(totalBalance), coinType);
 
+    useEffect(() => {
+        if (onBalanceUpdate) {
+            onBalanceUpdate(totalBalance);
+        }
+    }, [totalBalance]);
+
     return (
         <div className="flex w-full flex-row justify-between">
             <span>{formatAddress(address)}</span>