chore: move check alias output balance to useAddressBalance.

Signed-off-by: Eugene Panteleymonchuk <[email protected]>
iotaledger · Jan 31, 2024 · 0836b10 · 0836b10
1 parent db70ba2
commit 0836b10
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 34 deletions.
diff --git a/client/src/app/routes/stardust/AddressState.ts b/client/src/app/routes/stardust/AddressState.ts
@@ -118,16 +118,17 @@ export const useAddressPageState = (): [IAddressState, React.Dispatch<Partial<IA
     const addressBech32: string | null = state.bech32AddressDetails?.bech32 ?? null;
     const addressHex: string | null = state.bech32AddressDetails?.hex ?? null;
     const addressType: number | null = state.bech32AddressDetails?.type ?? null;
+    const aliasId = addressType === AddressType.Alias ? addressHex : null;
     const [addressBasicOutputs, isBasicOutputsLoading] = useAddressBasicOutputs(network, addressBech32);
     const [addressAliasOutputs, isAliasOutputsLoading] = useAddressAliasOutputs(network, addressBech32);
     const [addressNftOutputs, isNftOutputsLoading] = useAddressNftOutputs(network, addressBech32);
     const [, nftMetadata, issuerId, isNftDetailsLoading] = useNftDetails(network, addressType === AddressType.Nft ? addressHex : null);
-    const [aliasOutput, isAliasDetailsLoading] = useAliasDetails(network, addressType === AddressType.Alias ? addressHex : null);
+    const [aliasOutput, isAliasDetailsLoading] = useAliasDetails(network, aliasId);
     const [aliasFoundries, isAliasFoundriesLoading] = useAliasControlledFoundries(
         network,
         addressType === AddressType.Alias ? state.bech32AddressDetails : null,
     );
-    const [balance, availableBalance] = useAddressBalance(network, state.bech32AddressDetails?.bech32 ?? null);
+    const [balance, availableBalance] = useAddressBalance(network, state.bech32AddressDetails?.bech32 ?? null, { aliasId: aliasId });
     const [eventDetails] = useParticipationEventDetails(state.participations ?? undefined);
 
     const [aliasContainsDID] = useAliasContainsDID(aliasOutput);
@@ -153,7 +154,6 @@ export const useAddressPageState = (): [IAddressState, React.Dispatch<Partial<IA
     }, [addressFromPath]);
 
     useEffect(() => {
-        const consolidatedAvailableBalance = consolidateOutputBalance(availableBalance, aliasOutput);
         setState({
             addressBasicOutputs,
             isBasicOutputsLoading,
@@ -169,7 +169,7 @@ export const useAddressPageState = (): [IAddressState, React.Dispatch<Partial<IA
             aliasFoundries,
             isAliasFoundriesLoading,
             balance,
-            availableBalance: consolidatedAvailableBalance,
+            availableBalance,
             eventDetails,
             aliasContainsDID,
             resolvedDID,
@@ -236,13 +236,3 @@ export const useAddressPageState = (): [IAddressState, React.Dispatch<Partial<IA
 
     return [state, setState];
 };
-
-const consolidateOutputBalance = (currentBalance: number | string | null, additionalOutput: AliasOutput | null) => {
-    let total = currentBalance ? parseInt(currentBalance as string) : 0;
-
-    if (additionalOutput?.type === OutputType.Alias) {
-        total += parseInt(additionalOutput.amount);
-    }
-
-    return total;
-};
diff --git a/client/src/helpers/hooks/useAddressBalance.ts b/client/src/helpers/hooks/useAddressBalance.ts
@@ -1,16 +1,23 @@
 import { useEffect, useState } from "react";
+import { AliasOutput, OutputType } from "@iota/sdk-wasm/web";
 import { useIsMounted } from "./useIsMounted";
 import { ServiceFactory } from "~factories/serviceFactory";
 import { STARDUST } from "~models/config/protocolVersion";
 import { StardustApiClient } from "~services/stardust/stardustApiClient";
+import { fetchAliasDetailsOutput } from "~helpers/hooks/useAliasDetails";
 
 /**
  * Fetch the address balance
  * @param network The Network in context
  * @param address The bech32 address
+ * @param options
  * @returns The address balance, signature locked balance and a loading bool.
  */
-export function useAddressBalance(network: string, address: string | null): [number | null, number | null, boolean] {
+export function useAddressBalance(
+    network: string,
+    address: string | null,
+    options?: { aliasId?: string | null },
+): [number | null, number | null, boolean] {
     const isMounted = useIsMounted();
     const [apiClient] = useState(ServiceFactory.get<StardustApiClient>(`api-client-${STARDUST}`));
     const [balance, setBalance] = useState<number | null>(null);
@@ -23,10 +30,12 @@ export function useAddressBalance(network: string, address: string | null): [num
             // eslint-disable-next-line no-void
             void (async () => {
                 const response = await apiClient.addressBalanceChronicle({ network, address });
+                const output = options?.aliasId ? await fetchAliasDetailsOutput(network, options.aliasId) : null;
 
                 if (response?.totalBalance !== undefined && isMounted) {
                     setBalance(response.totalBalance);
-                    setAvailableBalance(response.availableBalance ?? null);
+                    const availableBalance = consolidateOutputBalance(response.totalBalance, output);
+                    setAvailableBalance(availableBalance ?? null);
                 } else if (isMounted) {
                     // Fallback balance from iotajs (node)
                     const addressDetailsWithBalance = await apiClient.addressBalance({ network, address });
@@ -40,7 +49,19 @@ export function useAddressBalance(network: string, address: string | null): [num
         } else {
             setIsLoading(false);
         }
-    }, [network, address]);
+    }, [network, address, options?.aliasId]);
 
     return [balance, availableBalance, isLoading];
 }
+
+const consolidateOutputBalance = (currentBalance: number | string | null, additionalOutput?: AliasOutput | null) => {
+    if (!currentBalance) return null;
+
+    let total = currentBalance ? parseInt(currentBalance as string) : 0;
+
+    if (additionalOutput?.type === OutputType.Alias) {
+        total += parseInt(additionalOutput.amount);
+    }
+
+    return total;
+};
diff --git a/client/src/helpers/hooks/useAliasDetails.ts b/client/src/helpers/hooks/useAliasDetails.ts
@@ -14,30 +14,20 @@ import { HexHelper } from "../stardust/hexHelper";
  */
 export function useAliasDetails(network: string, aliasId: string | null): [AliasOutput | null, boolean] {
     const isMounted = useIsMounted();
-    const [apiClient] = useState(ServiceFactory.get<StardustApiClient>(`api-client-${STARDUST}`));
     const [aliasOutput, setAliasOutput] = useState<AliasOutput | null>(null);
     const [isLoading, setIsLoading] = useState<boolean>(true);
 
     useEffect(() => {
         setIsLoading(true);
-        if (aliasId) {
+        if (aliasId && isMounted) {
             // eslint-disable-next-line no-void
             void (async () => {
-                apiClient
-                    .aliasDetails({
-                        network,
-                        aliasId: HexHelper.addPrefix(aliasId),
-                    })
-                    .then((response) => {
-                        if (!response?.error && isMounted) {
-                            const output = response.aliasDetails?.output as AliasOutput;
-
-                            setAliasOutput(output);
-                        }
-                    })
-                    .finally(() => {
-                        setIsLoading(false);
-                    });
+                try {
+                    const aliasOutput = await fetchAliasDetailsOutput(network, aliasId);
+                    setAliasOutput(aliasOutput);
+                } finally {
+                    setIsLoading(false);
+                }
             })();
         } else {
             setIsLoading(false);
@@ -46,3 +36,22 @@ export function useAliasDetails(network: string, aliasId: string | null): [Alias
 
     return [aliasOutput, isLoading];
 }
+
+export const fetchAliasDetailsOutput = async (network: string, aliasId: string | null): Promise<AliasOutput | null> => {
+    if (!aliasId) {
+        return null;
+    }
+
+    const apiClient = ServiceFactory.get<StardustApiClient>(`api-client-${STARDUST}`);
+
+    const response = await apiClient.aliasDetails({
+        network,
+        aliasId: HexHelper.addPrefix(aliasId),
+    });
+
+    if (!response?.error) {
+        return response.aliasDetails?.output as AliasOutput;
+    }
+
+    return null;
+};