fix: no btc signer in ledger mode, ref #4873

src/app/common/hooks/use-transferable-asset-balances.hooks.ts

@@ -2,18 +2,14 @@ import { useMemo } from 'react';
 
 import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
-import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
 import { useTransferableStacksFungibleTokenAssetBalances } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils';
-import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentStacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 
 import { useStxBalance } from './balance/stx/use-stx-balance';
 
 export function useAllTransferableCryptoAssetBalances(): AllTransferableCryptoAssetBalances[] {
   const account = useCurrentStacksAccount();
-  const currentBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
-  const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentBtcAddress);
 
   const { availableBalance: availableStxBalance } = useStxBalance();
   const stxCryptoCurrencyAssetBalance = createStacksCryptoCurrencyAssetTypeWrapper(
@@ -24,6 +20,6 @@ export function useAllTransferableCryptoAssetBalances(): AllTransferableCryptoAs
   );
 
   return useMemo(() => {
-    return [btcCryptoCurrencyAssetBalance, stxCryptoCurrencyAssetBalance, ...stacksFtAssetBalances];
-  }, [btcCryptoCurrencyAssetBalance, stacksFtAssetBalances, stxCryptoCurrencyAssetBalance]);
+    return [stxCryptoCurrencyAssetBalance, ...stacksFtAssetBalances];
+  }, [stacksFtAssetBalances, stxCryptoCurrencyAssetBalance]);
 }

src/app/components/balance/bitcoin-balance-loader.tsx

@@ -0,0 +1,13 @@
+import { BitcoinCryptoCurrencyAssetBalance } from '@shared/models/crypto-asset-balance.model';
+
+import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/btc-native-segwit-balance.hooks';
+
+interface BitcoinBalanceLoaderProps {
+  address: string;
+  children(balance: BitcoinCryptoCurrencyAssetBalance): React.ReactNode;
+}
+
+export function BitcoinBalanceLoader({ address, children }: BitcoinBalanceLoaderProps) {
+  const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(address);
+  return children(btcCryptoCurrencyAssetBalance);
+}

src/app/components/crypto-assets/choose-crypto-asset/crypto-asset-list.tsx

@@ -2,26 +2,39 @@ import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-a
 import { StacksFungibleTokenAsset } from '@shared/models/crypto-asset.model';
 
 import { useWalletType } from '@app/common/use-wallet-type';
+import { BitcoinNativeSegwitAccountLoader } from '@app/components/account/bitcoin-account-loader';
+import { BitcoinBalanceLoader } from '@app/components/balance/bitcoin-balance-loader';
+import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { Brc20TokenAssetList } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
-import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 
+import { CryptoCurrencyAssetItem } from '../crypto-currency-asset/crypto-currency-asset-item';
 import { CryptoAssetListItem } from './crypto-asset-list-item';
 import { CryptoAssetListLayout } from './crypto-asset-list.layout';
 
 interface CryptoAssetListProps {
   cryptoAssetBalances: AllTransferableCryptoAssetBalances[];
   onItemClick(cryptoAssetBalance: AllTransferableCryptoAssetBalances): void;
-  brc20Tokens?: Brc20Token[];
 }
-export function CryptoAssetList({
-  cryptoAssetBalances,
-  onItemClick,
-  brc20Tokens,
-}: CryptoAssetListProps) {
+export function CryptoAssetList({ cryptoAssetBalances, onItemClick }: CryptoAssetListProps) {
   const { whenWallet } = useWalletType();
 
   return (
     <CryptoAssetListLayout>
+      <BitcoinNativeSegwitAccountLoader current>
+        {signer => (
+          <BitcoinBalanceLoader address={signer.address}>
+            {balance => (
+              <CryptoCurrencyAssetItem
+                assetBalance={balance}
+                icon={<BtcIcon />}
+                onClick={() => onItemClick(balance)}
+                isPressable
+              />
+            )}
+          </BitcoinBalanceLoader>
+        )}
+      </BitcoinNativeSegwitAccountLoader>
       {cryptoAssetBalances.map(cryptoAssetBalance => (
         <CryptoAssetListItem
           onClick={() => onItemClick(cryptoAssetBalance)}
@@ -32,12 +45,18 @@ export function CryptoAssetList({
           }
         />
       ))}
-      {brc20Tokens
-        ? whenWallet({
-            software: <Brc20TokenAssetList brc20Tokens={brc20Tokens} />,
-            ledger: null,
-          })
-        : null}
+      {whenWallet({
+        software: (
+          <BitcoinNativeSegwitAccountLoader current>
+            {() => (
+              <Brc20TokensLoader>
+                {brc20Tokens => <Brc20TokenAssetList brc20Tokens={brc20Tokens} />}
+              </Brc20TokensLoader>
+            )}
+          </BitcoinNativeSegwitAccountLoader>
+        ),
+        ledger: null,
+      })}
     </CryptoAssetListLayout>
   );
 }

src/app/pages/fund/choose-asset-to-fund/choose-asset-to-fund.tsx

@@ -5,7 +5,6 @@ import { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-
 import { RouteUrls } from '@shared/route-urls';
 import { isDefined } from '@shared/utils';
 
-import { useBtcCryptoCurrencyAssetBalance } from '@app/common/hooks/balance/btc/use-btc-crypto-currency-asset-balance';
 import { useStxCryptoCurrencyAssetBalance } from '@app/common/hooks/balance/stx/use-stx-crypto-currency-asset-balance';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useWalletType } from '@app/common/use-wallet-type';
@@ -16,28 +15,22 @@ import { ModalHeader } from '@app/components/modal-header';
 import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchain/utils';
 
 export function ChooseCryptoAssetToFund() {
-  const btcCryptoCurrencyAssetBalance = useBtcCryptoCurrencyAssetBalance();
   const stxCryptoCurrencyAssetBalance = useStxCryptoCurrencyAssetBalance();
 
-  const cryptoCurrencyAssetBalances = useMemo(
-    () => [btcCryptoCurrencyAssetBalance, stxCryptoCurrencyAssetBalance],
-    [btcCryptoCurrencyAssetBalance, stxCryptoCurrencyAssetBalance]
-  );
-
   const { whenWallet } = useWalletType();
   const navigate = useNavigate();
 
   const checkBlockchainAvailable = useCheckLedgerBlockchainAvailable();
 
   const filteredCryptoAssetBalances = useMemo(
     () =>
-      cryptoCurrencyAssetBalances.filter(isDefined).filter(assetBalance =>
+      [stxCryptoCurrencyAssetBalance].filter(isDefined).filter(assetBalance =>
         whenWallet({
           ledger: checkBlockchainAvailable(assetBalance?.blockchain),
           software: true,
         })
       ),
-    [cryptoCurrencyAssetBalances, checkBlockchainAvailable, whenWallet]
+    [stxCryptoCurrencyAssetBalance, checkBlockchainAvailable, whenWallet]
   );
 
   useRouteHeader(<ModalHeader hideActions onGoBack={() => navigate(RouteUrls.Home)} title=" " />);

src/app/pages/send/choose-crypto-asset/choose-crypto-asset.tsx

@@ -4,7 +4,6 @@ import { useNavigate } from 'react-router-dom';
 import { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
 import { RouteUrls } from '@shared/route-urls';
 
-import { useBrc20Tokens } from '@app/common/hooks/use-brc20-tokens';
 import { useRouteHeader } from '@app/common/hooks/use-route-header';
 import { useAllTransferableCryptoAssetBalances } from '@app/common/hooks/use-transferable-asset-balances.hooks';
 import { useWalletType } from '@app/common/use-wallet-type';
@@ -16,7 +15,6 @@ import { useCheckLedgerBlockchainAvailable } from '@app/store/accounts/blockchai
 
 export function ChooseCryptoAsset() {
   const allTransferableCryptoAssetBalances = useAllTransferableCryptoAssetBalances();
-  const brc20Tokens = useBrc20Tokens();
 
   const { whenWallet } = useWalletType();
   const navigate = useNavigate();
@@ -49,7 +47,6 @@ export function ChooseCryptoAsset() {
     <ChooseCryptoAssetLayout title="choose asset to send">
       <CryptoAssetList
         onItemClick={cryptoAssetBalance => navigateToSendForm(cryptoAssetBalance)}
-        brc20Tokens={brc20Tokens}
         cryptoAssetBalances={allTransferableCryptoAssetBalances.filter(asset =>
           whenWallet({
             ledger: checkBlockchainAvailable(asset.blockchain),