fix: ledger locked stx, ref #4539

src/app/components/loaders/stacks-account-loader.tsx

@@ -1,3 +1,5 @@
+import { ReactNode } from 'react';
+
 import { useCurrentAccountIndex } from '@app/store/accounts/account';
 import {
   useCurrentStacksAccount,
@@ -6,11 +8,15 @@ import {
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 
 interface CurrentStacksAccountLoaderProps {
-  children(data: StacksAccount): React.ReactNode;
+  children(data: StacksAccount): ReactNode;
+  fallback?: ReactNode;
 }
-export function CurrentStacksAccountLoader({ children }: CurrentStacksAccountLoaderProps) {
+export function CurrentStacksAccountLoader({
+  children,
+  fallback,
+}: CurrentStacksAccountLoaderProps) {
   const currentAccount = useCurrentStacksAccount();
-  if (!currentAccount) return null;
+  if (!currentAccount) return fallback ? fallback : null;
   return children(currentAccount);
 }
 

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

@@ -16,10 +16,10 @@ import { BtcIcon } from '@app/ui/components/icons/btc-icon';
 
 import { Collectibles } from '../collectibles/collectibles';
 import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers';
+import { AddStacksLedgerKeysItem } from './components/add-stacks-ledger-keys-item';
 import { BitcoinFungibleTokenAssetList } from './components/bitcoin-fungible-tokens-asset-list';
 import { ConnectLedgerAssetBtn } from './components/connect-ledger-asset-button';
-import { StacksBalanceItem } from './components/stacks-balance-item';
-import { StacksLedgerAssetsList } from './components/stacks-ledger-assets';
+import { StacksAssetList } from './components/stacks-asset-list';
 
 export function AssetsList() {
   const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain();
@@ -61,14 +61,9 @@ export function AssetsList() {
           ledger: null,
         })}
 
-      {whenWallet({
-        software: (
-          <CurrentStacksAccountLoader>
-            {account => <StacksBalanceItem account={account} />}
-          </CurrentStacksAccountLoader>
-        ),
-        ledger: <StacksLedgerAssetsList />,
-      })}
+      <CurrentStacksAccountLoader fallback={<AddStacksLedgerKeysItem />}>
+        {account => <StacksAssetList account={account} />}
+      </CurrentStacksAccountLoader>
 
       {whenWallet({
         software: (

src/app/features/asset-list/components/add-stacks-ledger-keys-item.tsx

@@ -0,0 +1,17 @@
+import BigNumber from 'bignumber.js';
+
+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 { createStacksCryptoCurrencyAssetTypeWrapper } from '@app/query/stacks/balance/stacks-ft-balances.utils';
+
+import { ConnectLedgerAssetBtn } from './connect-ledger-asset-button';
+
+export function AddStacksLedgerKeysItem() {
+  return (
+    <CryptoCurrencyAssetItem
+      assetBalance={createStacksCryptoCurrencyAssetTypeWrapper(new BigNumber(0))}
+      icon={<StxAvatar />}
+      rightElement={<ConnectLedgerAssetBtn chain="stacks" />}
+    />
+  );
+}

src/app/features/asset-list/components/stacks-balance-item.tsx → src/app/features/asset-list/components/stacks-asset-list.tsx

@@ -8,10 +8,10 @@ import { Caption } from '@app/ui/components/typography/caption';
 
 import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list';
 
-interface StacksBalanceItemProps {
+interface StacksAssetListProps {
   account: StacksAccount;
 }
-export function StacksBalanceItem({ account }: StacksBalanceItemProps) {
+export function StacksAssetList({ account }: StacksAssetListProps) {
   const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(
     account.address
   );

src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-holdings.query.ts

@@ -52,7 +52,7 @@ function makeNonFungibleTokenHoldingsQuery(
   };
 }
 
-export default function useGetNonFungibleTokenHoldingsQuery(address: string) {
+export function useGetNonFungibleTokenHoldingsQuery(address: string) {
   const client = useStacksClientUnanchored();
   const network = useCurrentNetworkState();
   const limiter = useHiroApiRateLimiter();

src/app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.query.ts

@@ -9,7 +9,7 @@ import { useTokenMetadataClient } from '@app/store/common/api-clients.hooks';
 import { RateLimiter, useHiroApiRateLimiter } from '../../rate-limiter';
 import { TokenMetadataClient } from '../../token-metadata-client';
 import { NftAssetResponse } from '../token-metadata.utils';
-import useGetNonFungibleTokenHoldingsQuery from './non-fungible-token-holdings.query';
+import { useGetNonFungibleTokenHoldingsQuery } from './non-fungible-token-holdings.query';
 
 const queryOptions = {
   refetchOnWindowFocus: false,