fix: ledger locked stx, ref #4721

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

@@ -4,14 +4,17 @@ import {
   useStacksAccounts,
 } from '@app/store/accounts/blockchain/stacks/stacks-account.hooks';
 import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
+import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks';
 
-interface CurrentStacksAccountLoaderProps {
-  children(data: StacksAccount): React.ReactNode;
+interface CurrentStacksAccountAddressLoaderProps {
+  children(data: string): React.ReactNode;
 }
-export function CurrentStacksAccountLoader({ children }: CurrentStacksAccountLoaderProps) {
+export function CurrentStacksAccountAddressLoader({
+  children,
+}: CurrentStacksAccountAddressLoaderProps) {
   const currentAccount = useCurrentStacksAccount();
-  if (!currentAccount) return null;
-  return children(currentAccount);
+  const hasStacksKeys = useHasStacksLedgerKeychain();
+  return children(hasStacksKeys && currentAccount ? currentAccount.address : '');
 }
 
 interface StacksAccountBaseLoaderProps {

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

@@ -8,7 +8,7 @@ import { useWalletType } from '@app/common/use-wallet-type';
 import { BitcoinContractEntryPoint } from '@app/components/bitcoin-contract-entry-point/bitcoin-contract-entry-point';
 import { Brc20TokensLoader } from '@app/components/brc20-tokens-loader';
 import { CryptoCurrencyAssetItem } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item';
-import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader';
+import { CurrentStacksAccountAddressLoader } from '@app/components/loaders/stacks-account-loader';
 import { useHasBitcoinLedgerKeychain } from '@app/store/accounts/blockchain/bitcoin/bitcoin.ledger';
 import { useCurrentAccountNativeSegwitAddressIndexZero } from '@app/store/accounts/blockchain/bitcoin/native-segwit-account.hooks';
 import { useCurrentNetwork } from '@app/store/networks/networks.selectors';
@@ -18,8 +18,7 @@ import { Collectibles } from '../collectibles/collectibles';
 import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-brc-20-transfers';
 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 +60,9 @@ export function AssetsList() {
           ledger: null,
         })}
 
-      {whenWallet({
-        software: (
-          <CurrentStacksAccountLoader>
-            {account => <StacksBalanceItem account={account} />}
-          </CurrentStacksAccountLoader>
-        ),
-        ledger: <StacksLedgerAssetsList />,
-      })}
+      <CurrentStacksAccountAddressLoader>
+        {accountAddress => <StacksAssetList address={accountAddress} />}
+      </CurrentStacksAccountAddressLoader>
 
       {whenWallet({
         software: (

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

@@ -3,18 +3,19 @@ import { ftDecimals } from '@app/common/stacks-utils';
 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 { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
-import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
+import { useHasStacksLedgerKeychain } from '@app/store/accounts/blockchain/stacks/stacks.hooks';
 import { Caption } from '@app/ui/components/typography/caption';
 
+import { ConnectLedgerAssetBtn } from './connect-ledger-asset-button';
 import { StacksFungibleTokenAssetList } from './stacks-fungible-token-asset-list';
 
-interface StacksBalanceItemProps {
-  account: StacksAccount;
+interface StacksAssetListProps {
+  address: string;
 }
-export function StacksBalanceItem({ account }: StacksBalanceItemProps) {
-  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(
-    account.address
-  );
+export function StacksAssetList({ address }: StacksAssetListProps) {
+  const hasStacksKeys = useHasStacksLedgerKeychain();
+
+  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(address);
 
   const { stxEffectiveBalance, stxEffectiveUsdBalance, stxLockedBalance, stxUsdLockedBalance } =
     useStxBalance();
@@ -32,10 +33,11 @@ export function StacksBalanceItem({ account }: StacksBalanceItemProps) {
       <CryptoCurrencyAssetItem
         assetBalance={stxEffectiveBalance}
         usdBalance={stxEffectiveUsdBalance}
-        address={account.address}
+        address={address}
         additionalBalanceInfo={stxAdditionalBalanceInfo}
         additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
         icon={<StxAvatar />}
+        rightElement={hasStacksKeys ? undefined : <ConnectLedgerAssetBtn chain="stacks" />}
       />
       <StacksFungibleTokenAssetList assetBalances={stacksFtAssetBalances} />
     </>

src/app/features/collectibles/collectibles.tsx

@@ -7,7 +7,7 @@ import { RouteUrls } from '@shared/route-urls';
 
 import { useWalletType } from '@app/common/use-wallet-type';
 import { CurrentBitcoinAccountLoader } from '@app/components/loaders/bitcoin-account-loader';
-import { CurrentStacksAccountLoader } from '@app/components/loaders/stacks-account-loader';
+import { CurrentStacksAccountAddressLoader } from '@app/components/loaders/stacks-account-loader';
 import { useConfigNftMetadataEnabled } from '@app/query/common/remote-config/remote-config.query';
 
 import { AddCollectible } from './components/add-collectible';
@@ -50,9 +50,9 @@ export function Collectibles() {
       <CurrentBitcoinAccountLoader>{() => <AddCollectible />}</CurrentBitcoinAccountLoader>
 
       {isNftMetadataEnabled && (
-        <CurrentStacksAccountLoader>
-          {account => <StacksCryptoAssets account={account} />}
-        </CurrentStacksAccountLoader>
+        <CurrentStacksAccountAddressLoader>
+          {accountAddress => <StacksCryptoAssets address={accountAddress} />}
+        </CurrentStacksAccountAddressLoader>
       )}
 
       <CurrentBitcoinAccountLoader>

src/app/features/collectibles/components/stacks/stacks-crypto-assets.tsx

@@ -4,17 +4,16 @@ import { useAnalytics } from '@app/common/hooks/analytics/use-analytics';
 import { parseIfValidPunycode } from '@app/common/utils';
 import { useCurrentAccountNames } from '@app/query/stacks/bns/bns.hooks';
 import { useStacksNonFungibleTokensMetadata } from '@app/query/stacks/tokens/non-fungible-tokens/non-fungible-token-metadata.hooks';
-import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 
 import { StacksBnsName } from './stacks-bns-name';
 import { StacksNonFungibleTokens } from './stacks-non-fungible-tokens';
 
 interface StacksCryptoAssetsProps {
-  account: StacksAccount;
+  address: string;
 }
-export function StacksCryptoAssets({ account }: StacksCryptoAssetsProps) {
+export function StacksCryptoAssets({ address }: StacksCryptoAssetsProps) {
   const { data: names = [] } = useCurrentAccountNames();
-  const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(account);
+  const stacksNftsMetadataResp = useStacksNonFungibleTokensMetadata(address);
   const analytics = useAnalytics();
 
   useEffect(() => {

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

@@ -1,12 +1,10 @@
 import { useMemo } from 'react';
 
-import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
-
 import { isNftAsset } from '../token-metadata.utils';
 import { useGetNonFungibleTokenMetadataListQuery } from './non-fungible-token-metadata.query';
 
-export function useStacksNonFungibleTokensMetadata(account: StacksAccount) {
-  const respList = useGetNonFungibleTokenMetadataListQuery(account);
+export function useStacksNonFungibleTokensMetadata(address: string) {
+  const respList = useGetNonFungibleTokenMetadataListQuery(address);
 
   return useMemo(
     () =>

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

@@ -3,7 +3,6 @@ import { UseQueryResult, useQueries } from '@tanstack/react-query';
 
 import { pullContractIdFromIdentity } from '@app/common/utils';
 import { QueryPrefixes } from '@app/query/query-prefixes';
-import { StacksAccount } from '@app/store/accounts/blockchain/stacks/stacks-account.models';
 import { useTokenMetadataClient } from '@app/store/common/api-clients.hooks';
 
 import { RateLimiter, useHiroApiRateLimiter } from '../../rate-limiter';
@@ -30,11 +29,11 @@ function fetchNonFungibleTokenMetadata(client: TokenMetadataClient, limiter: Rat
 }
 
 export function useGetNonFungibleTokenMetadataListQuery(
-  account: StacksAccount
+  address: string
 ): UseQueryResult<NftAssetResponse>[] {
   const client = useTokenMetadataClient();
   const limiter = useHiroApiRateLimiter();
-  const nftHoldings = useGetNonFungibleTokenHoldingsQuery(account.address);
+  const nftHoldings = useGetNonFungibleTokenHoldingsQuery(address);
 
   return useQueries({
     queries: (nftHoldings.data?.results ?? []).map(nft => {