fix: brc-20 tokens breaking ledger

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list.tsx

@@ -0,0 +1,46 @@
+import { useNavigate } from 'react-router-dom';
+
+import { RouteUrls } from '@shared/route-urls';
+import { noop } from '@shared/utils';
+
+import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item';
+import { Tooltip } from '@app/components/tooltip';
+import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/bitcoin-balances.query';
+import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
+import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
+
+export function Brc20TokenAssetList(props: { brc20Tokens?: Brc20Token[] }) {
+  const navigate = useNavigate();
+  const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
+  const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
+
+  const hasPositiveBtcBalanceForFees =
+    btcCryptoCurrencyAssetBalance.balance.amount.isGreaterThan(0);
+
+  function navigateToBrc20SendForm(token: Brc20Token) {
+    const { tick, available_balance } = token;
+    navigate(RouteUrls.SendBrc20SendForm.replace(':ticker', tick), {
+      state: { balance: available_balance, tick },
+    });
+  }
+
+  return (
+    <>
+      {props.brc20Tokens?.map(token => (
+        <Tooltip
+          disabled={hasPositiveBtcBalanceForFees}
+          key={token.tick}
+          placement="top"
+          label={'Not enough BTC in balance'}
+          hideOnClick={false}
+        >
+          <Brc20TokenAssetItem
+            token={token}
+            isPressable={hasPositiveBtcBalanceForFees}
+            onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
+          />
+        </Tooltip>
+      ))}
+    </>
+  );
+}

src/app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item.layout.tsx

@@ -4,6 +4,7 @@ import { forwardRefWithAs } from '@stacks/ui-core';
 import type { Money } from '@shared/models/money.model';
 
 import { formatBalance } from '@app/common/format-balance';
+import { AssetCaption } from '@app/components/crypto-assets/components/asset-caption';
 import { Brc20TokenIcon } from '@app/components/icons/brc20-token-icon';
 import { usePressable } from '@app/components/item-hover';
 import { Flag } from '@app/components/layout/flag';
@@ -11,8 +12,6 @@ import { SpaceBetween } from '@app/components/layout/space-between';
 import { Tooltip } from '@app/components/tooltip';
 import { Text } from '@app/components/typography';
 
-import { AssetCaption } from '../../components/asset-caption';
-
 interface Brc20TokenAssetItemLayoutProps extends BoxProps {
   balance: Money;
   caption: string;

src/app/features/balances-list/balances-list.tsx

@@ -5,12 +5,12 @@ import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balanc
 import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
 import { ftDecimals } from '@app/common/stacks-utils';
 import { useWalletType } from '@app/common/use-wallet-type';
+import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
 import { StxAvatar } from '@app/components/crypto-assets/stacks/components/stx-avatar';
 import { BtcIcon } from '@app/components/icons/btc-icon';
 import { LoadingSpinner } from '@app/components/loading-spinner';
 import { Caption } from '@app/components/typography';
-import { Brc20TokensLoader } from '@app/features/balances-list/components/brc-20-tokens-loader';
 import { useConfigBitcoinEnabled } from '@app/query/common/remote-config/remote-config.query';
 import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';

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

@@ -1,6 +1,6 @@
 import { Stack } from '@stacks/ui';
 
-import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20-token-asset/brc20-token-asset-item';
+import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20-token-asset-list/components/brc20-token-asset-item';
 import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
 
 interface BitcoinFungibleTokenAssetListProps {

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

@@ -5,10 +5,10 @@ import { RouteUrls } from '@shared/route-urls';
 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';
+import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { Header } from '@app/components/header';
-import { useBrc20TokensByAddressQuery } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
-import { useCurrentAccountTaprootAddressIndexZeroPayment } from '@app/store/accounts/blockchain/bitcoin/taproot-account.hooks';
 
+import { Brc20TokenAssetList } from '../../../components/crypto-assets/bitcoin/brc20-token-asset-list/brc20-token-asset-list';
 import { ChooseCryptoAssetLayout } from './components/choose-crypto-asset.layout';
 import { CryptoAssetList } from './components/crypto-asset-list';
 
@@ -16,9 +16,6 @@ export function ChooseCryptoAsset() {
   const navigate = useNavigate();
   const allTransferableCryptoAssetBalances = useAllTransferableCryptoAssetBalances();
 
-  const { address: bitcoinAddressTaproot } = useCurrentAccountTaprootAddressIndexZeroPayment();
-  const { data: brc20Tokens = [] } = useBrc20TokensByAddressQuery(bitcoinAddressTaproot);
-
   const { whenWallet } = useWalletType();
 
   useRouteHeader(<Header hideActions onClose={() => navigate(RouteUrls.Home)} title=" " />);
@@ -32,8 +29,15 @@ export function ChooseCryptoAsset() {
             software: true,
           })
         )}
-        brc20Tokens={brc20Tokens}
       />
+      {whenWallet({
+        software: (
+          <Brc20TokensLoader>
+            {brc20Tokens => <Brc20TokenAssetList brc20Tokens={brc20Tokens} />}
+          </Brc20TokensLoader>
+        ),
+        ledger: null,
+      })}
     </ChooseCryptoAssetLayout>
   );
 }

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

@@ -1,57 +1,17 @@
-import { useNavigate } from 'react-router-dom';
-
 import type { AllTransferableCryptoAssetBalances } from '@shared/models/crypto-asset-balance.model';
-import { RouteUrls } from '@shared/route-urls';
-import { noop } from '@shared/utils';
-
-import { Brc20TokenAssetItem } from '@app/components/crypto-assets/bitcoin/brc20-token-asset/brc20-token-asset-item';
-import { Tooltip } from '@app/components/tooltip';
-import { useNativeSegwitBalance } from '@app/query/bitcoin/balance/bitcoin-balances.query';
-import { Brc20Token } from '@app/query/bitcoin/ordinals/brc20/brc20-tokens.query';
-import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 
 import { CryptoAssetListItem } from './crypto-asset-list-item';
 import { CryptoAssetListLayout } from './crypto-asset-list.layout';
 
 interface CryptoAssetListProps {
   cryptoAssetBalances: AllTransferableCryptoAssetBalances[];
-  brc20Tokens: Brc20Token[];
 }
-export function CryptoAssetList({ cryptoAssetBalances, brc20Tokens }: CryptoAssetListProps) {
+export function CryptoAssetList({ cryptoAssetBalances }: CryptoAssetListProps) {
-  const navigate = useNavigate();
-  const currentAccountBtcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
-  const btcCryptoCurrencyAssetBalance = useNativeSegwitBalance(currentAccountBtcAddress);
-
-  const hasPositiveBtcBalanceForFees =
-    btcCryptoCurrencyAssetBalance.balance.amount.isGreaterThan(0);
-
-  function navigateToBrc20SendForm(token: Brc20Token) {
-    const { tick, available_balance } = token;
-    navigate(RouteUrls.SendBrc20SendForm.replace(':ticker', tick), {
-      state: { balance: available_balance, tick },
-    });
-  }
-
   return (
     <CryptoAssetListLayout>
       {cryptoAssetBalances.map(assetBalance => (
         <CryptoAssetListItem assetBalance={assetBalance} key={assetBalance.asset.name} />
       ))}
-      {brc20Tokens.map(token => (
-        <Tooltip
-          disabled={hasPositiveBtcBalanceForFees}
-          key={token.tick}
-          placement="top"
-          label={'Not enough BTC in balance'}
-          hideOnClick={false}
-        >
-          <Brc20TokenAssetItem
-            token={token}
-            isPressable={hasPositiveBtcBalanceForFees}
-            onClick={hasPositiveBtcBalanceForFees ? () => navigateToBrc20SendForm(token) : noop}
-          />
-        </Tooltip>
-      ))}
     </CryptoAssetListLayout>
   );
 }

tests/specs/settings/settings-menu.spec.ts

@@ -18,8 +18,6 @@ test.describe('settings menu', () => {
 
     await test
       .expect(supportPage)
-      .toHaveURL(
+      .toHaveURL('https://hirowallet.gitbook.io/guides/installing/contact-support');
-        'https://wallet.hiro.so/wallet-faq/where-can-i-find-support-for-the-stacks-wallet'
-      );
   });
 });