refactor: add ns addresses for runes balances

src/app/components/loaders/runes-loader.tsx

@@ -1,11 +1,15 @@
+import { isDefined } from '@shared/utils';
+
 import type { RuneToken } from '@app/query/bitcoin/bitcoin-client';
 import { useRuneTokens } from '@app/query/bitcoin/runes/runes.hooks';
 
 interface RunesLoaderProps {
-  address: string;
+  addresses: string[];
   children(runes: RuneToken[]): React.ReactNode;
 }
-export function RunesLoader({ address, children }: RunesLoaderProps) {
-  const { data: runes = [] } = useRuneTokens(address);
+export function RunesLoader({ addresses, children }: RunesLoaderProps) {
+  const runes = useRuneTokens(addresses)
+    .flatMap(query => query.data)
+    .filter(isDefined);
   return children(runes);
 }

src/app/features/asset-list/components/bitcoin-fungible-tokens-asset-list.tsx

@@ -21,7 +21,7 @@ export function BitcoinFungibleTokenAssetList({
       <Src20TokensLoader address={btcAddressNativeSegwit}>
         {src20Tokens => <Src20TokenAssetList src20Tokens={src20Tokens} />}
       </Src20TokensLoader>
-      <RunesLoader address={btcAddressTaproot}>
+      <RunesLoader addresses={[btcAddressNativeSegwit, btcAddressTaproot]}>
         {runes => <RunesAssetList runes={runes} />}
       </RunesLoader>
     </>

src/app/query/bitcoin/runes/runes-wallet-balances.query.ts

@@ -1,4 +1,4 @@
-import { useQuery } from '@tanstack/react-query';
+import { useQueries } from '@tanstack/react-query';
 
 import { useConfigRunesEnabled } from '@app/query/common/remote-config/remote-config.query';
 import type { AppUseQueryConfig } from '@app/query/query-config';
@@ -7,19 +7,26 @@ import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
 
 import type { RuneBalance } from '../bitcoin-client';
 
-export function useGetRunesWalletBalancesQuery<T extends unknown = RuneBalance[]>(
-  address: string,
+export function useGetRunesWalletBalancesByAddressesQuery<T extends unknown = RuneBalance[]>(
+  addresses: string[],
   options?: AppUseQueryConfig<RuneBalance[], T>
 ) {
   const client = useBitcoinClient();
   const network = useCurrentNetwork();
   const runesEnabled = useConfigRunesEnabled();
 
-  return useQuery({
-    enabled: !!address && (network.chain.bitcoin.bitcoinNetwork === 'testnet' || runesEnabled),
-    queryKey: ['runes-wallet-balances', address],
-    queryFn: () =>
-      client.BestinslotApi.getRunesWalletBalances(address, network.chain.bitcoin.bitcoinNetwork),
-    ...options,
+  return useQueries({
+    queries: addresses.map(address => {
+      return {
+        enabled: !!address && (network.chain.bitcoin.bitcoinNetwork === 'testnet' || runesEnabled),
+        queryKey: ['runes-wallet-balances', address],
+        queryFn: () =>
+          client.BestinslotApi.getRunesWalletBalances(
+            address,
+            network.chain.bitcoin.bitcoinNetwork
+          ),
+        ...options,
+      };
+    }),
   });
 }

src/app/query/bitcoin/runes/runes.hooks.ts

@@ -1,16 +1,17 @@
 import { createMoney } from '@shared/models/money.model';
 
-import type { RuneToken } from '../bitcoin-client';
-import { useGetRunesWalletBalancesQuery } from './runes-wallet-balances.query';
+import type { RuneBalance, RuneToken } from '../bitcoin-client';
+import { useGetRunesWalletBalancesByAddressesQuery } from './runes-wallet-balances.query';
 
-export function useRuneTokens(address: string) {
-  return useGetRunesWalletBalancesQuery(address, {
-    select: resp =>
-      resp.map(rune => {
-        return {
-          ...rune,
-          balance: createMoney(Number(rune.total_balance), rune.rune_name, 0),
-        } as RuneToken;
-      }),
+function makeRuneToken(rune: RuneBalance): RuneToken {
+  return {
+    ...rune,
+    balance: createMoney(Number(rune.total_balance), rune.rune_name, 0),
+  };
+}
+
+export function useRuneTokens(addresses: string[]) {
+  return useGetRunesWalletBalancesByAddressesQuery(addresses, {
+    select: resp => resp.map(makeRuneToken),
   });
 }

src/shared/constants.ts

@@ -75,8 +75,8 @@ export interface NetworkConfiguration {
   };
 }
 
-export const BESTINSLOT_API_BASE_URL_MAINNET = 'https://api.bestinslot.xyz/v3';
-export const BESTINSLOT_API_BASE_URL_TESTNET = 'https://testnet.api.bestinslot.xyz/v3';
+export const BESTINSLOT_API_BASE_URL_MAINNET = 'https://leatherapi.bestinslot.xyz/v3';
+export const BESTINSLOT_API_BASE_URL_TESTNET = 'https://testnet.leatherapi.bestinslot.xyz/v3';
 
 export const HIRO_API_BASE_URL_MAINNET = 'https://api.hiro.so';
 export const HIRO_API_BASE_URL_TESTNET = 'https://api.testnet.hiro.so';