feat: load balances and additional data separately

leather-io · Aug 15, 2024 · cf16cf2 · cf16cf2
1 parent ce93a4b
commit cf16cf2
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 28 deletions.
diff --git a/packages/query/src/bitcoin/address/utxos-by-address.hooks.ts b/packages/query/src/bitcoin/address/utxos-by-address.hooks.ts
@@ -65,19 +65,32 @@ interface UseFilterUtxosByAddressArgs {
 
 type filterUtxoFunctionType = (utxos: UtxoResponseItem[]) => UtxoResponseItem[];
 
+function useUtxosByAddressQuery(address: string) {
+  const client = useBitcoinClient();
+
+  return useQuery({
+    ...createGetUtxosByAddressQueryOptions({ address, client }),
+  });
+}
+
 export function useNativeSegwitUtxosByAddress({
   address,
   filterInscriptionUtxos,
   filterPendingTxsUtxos,
   filterRunesUtxos,
 }: UseFilterUtxosByAddressArgs) {
+  const client = useBitcoinClient();
+
+  const initialUtxosQuery = useUtxosByAddressQuery(address);
+
   const { filterOutInscriptions, isLoadingInscriptions } = useFilterInscriptionsByAddress(address);
-  const { filterOutPendingTxsUtxos, isLoading } = useFilterPendingUtxosByAddress(address);
+  const { filterOutPendingTxsUtxos, isLoading: isLoadingPendingTxs } =
+    useFilterPendingUtxosByAddress(address);
   const { filterOutRunesUtxos, isLoadingRunesData } = useFilterRuneUtxosByAddress(address);
-  const client = useBitcoinClient();
 
-  const utxosQuery = useQuery({
+  const filteredUtxosQuery = useQuery({
     ...createGetUtxosByAddressQueryOptions({ address, client }),
+    enabled: !!initialUtxosQuery.data, // Enable filtering only after initial UTXOs are fetched
     select(utxos) {
       const filters = [];
       if (filterPendingTxsUtxos) {
@@ -101,8 +114,16 @@ export function useNativeSegwitUtxosByAddress({
   });
 
   return {
-    ...utxosQuery,
-    isLoading: utxosQuery.isLoading || isLoading || isLoadingInscriptions || isLoadingRunesData,
+    initialUtxosQuery,
+    filteredUtxosQuery,
+    data: filteredUtxosQuery.data || initialUtxosQuery.data,
+    isLoading: initialUtxosQuery.isLoading,
+    isLoadingAllData:
+      initialUtxosQuery.isLoading ||
+      isLoadingInscriptions ||
+      isLoadingPendingTxs ||
+      isLoadingRunesData,
+    isLoadingAdditionalData: isLoadingInscriptions || isLoadingPendingTxs || isLoadingRunesData,
   };
 }
 

diff --git a/packages/query/src/bitcoin/balance/btc-balance.hooks.ts b/packages/query/src/bitcoin/balance/btc-balance.hooks.ts
@@ -13,7 +13,7 @@ export function useGetBitcoinBalanceByAddress(address: string) {
   const {
     data: utxos,
     isLoading,
-    isFetching,
+    filteredUtxosQuery,
   } = useNativeSegwitUtxosByAddress({
     address,
     filterInscriptionUtxos: true,
@@ -29,6 +29,6 @@ export function useGetBitcoinBalanceByAddress(address: string) {
   return {
     balance,
     isLoading,
-    isFetching,
+    isFetching: filteredUtxosQuery.isFetching,
   };
 }
diff --git a/packages/query/src/stacks/balance/account-balance.hooks.ts b/packages/query/src/stacks/balance/account-balance.hooks.ts
@@ -43,9 +43,7 @@ export function createStxCryptoAssetBalance(
   };
 }
 
-export function useStxCryptoAssetBalance(address: string) {
-  const inboundBalance = useMempoolTxsInboundBalance(address);
-  const outboundBalance = useMempoolTxsOutboundBalance(address);
+function useStxBalanceQuery(address: string) {
   const client = useStacksClient();
   const network = useCurrentNetworkState();
 
@@ -55,13 +53,46 @@ export function useStxCryptoAssetBalance(address: string) {
       client,
       network: network.chain.stacks.url,
     }),
-    select: resp =>
-      createStxCryptoAssetBalance(createStxMoney(resp), inboundBalance, outboundBalance),
+    select: resp => createStxMoney(resp),
   });
 }
 
+export function useStxCryptoAssetBalance(address: string) {
+  const client = useStacksClient();
+  const network = useCurrentNetworkState();
+
+  const initialBalanceQuery = useStxBalanceQuery(address);
+
+  const defaultPendingBalance = createMoney(0, 'STX');
+  const { balance: inboundBalance = defaultPendingBalance, query } =
+    useMempoolTxsInboundBalance(address);
+  const { balance: outboundBalance = defaultPendingBalance } =
+    useMempoolTxsOutboundBalance(address);
+
+  const filteredBalanceQuery = useQuery({
+    ...createGetStacksAccountBalanceQueryOptions({
+      address,
+      client,
+      network: network.chain.stacks.url,
+    }),
+    select: resp => {
+      const initialBalance = createStxMoney(resp);
+      return createStxCryptoAssetBalance(initialBalance, inboundBalance, outboundBalance);
+    },
+    enabled: !!initialBalanceQuery.data,
+  });
+
+  return {
+    initialBalanceQuery,
+    filteredBalanceQuery,
+    isLoadingAdditionalData: query.isLoading,
+  };
+}
+
 export function useStxAvailableUnlockedBalance(address: string) {
-  return useStxCryptoAssetBalance(address).data?.unlockedBalance ?? createMoney(0, 'STX');
+  const stxBalance = useStxCryptoAssetBalance(address);
+
+  return stxBalance.filteredBalanceQuery.data?.unlockedBalance ?? createMoney(0, 'STX');
 }
 
 export function useStacksAccountBalanceFungibleTokens(address: string) {

diff --git a/packages/query/src/stacks/mempool/mempool.hooks.ts b/packages/query/src/stacks/mempool/mempool.hooks.ts
@@ -39,27 +39,33 @@ export function useStacksPendingTransactions(address: string) {
 }
 
 export function useMempoolTxsInboundBalance(address: string) {
-  const { transactions: pendingTransactions } = useStacksPendingTransactions(address);
+  const { transactions: pendingTransactions, query } = useStacksPendingTransactions(address);
   const confirmedTxs = useStacksConfirmedTransactions(address);
 
-  return calculatePendingTxsMoneyBalance({
-    address,
-    confirmedTxs,
-    pendingTxs: pendingTransactions,
-    type: 'inbound',
-  });
+  return {
+    query,
+    balance: calculatePendingTxsMoneyBalance({
+      address,
+      confirmedTxs,
+      pendingTxs: pendingTransactions,
+      type: 'inbound',
+    }),
+  };
 }
 
 export function useMempoolTxsOutboundBalance(address: string) {
-  const { transactions: pendingTransactions } = useStacksPendingTransactions(address);
+  const { transactions: pendingTransactions, query } = useStacksPendingTransactions(address);
   const confirmedTxs = useStacksConfirmedTransactions(address);
 
-  return calculatePendingTxsMoneyBalance({
-    address,
-    confirmedTxs,
-    pendingTxs: pendingTransactions,
-    type: 'outbound',
-  });
+  return {
+    query,
+    balance: calculatePendingTxsMoneyBalance({
+      address,
+      confirmedTxs,
+      pendingTxs: pendingTransactions,
+      type: 'outbound',
+    }),
+  };
 }
 
 export function useStacksValidateFeeByNonce(address: string) {

diff --git a/packages/query/src/stacks/stacks-client.ts b/packages/query/src/stacks/stacks-client.ts
@@ -49,7 +49,7 @@ export function stacksClient(basePath: string) {
           axios.get<AddressBalanceResponse>(`${basePath}/extended/v1/address/${address}/balances`, {
             signal,
           }),
-        { signal, throwOnTimeout: true }
+        { priority: 1, signal, throwOnTimeout: true }
       );
       return resp.data;
     },