fix: regression on stacking layout

src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx

@@ -1,9 +1,10 @@
 import { ReactNode } from 'react';
 
-import { styled } from 'leather-styles/jsx';
+import { Flex, styled } from 'leather-styles/jsx';
 
 import { AllCryptoCurrencyAssetBalances } from '@shared/models/crypto-asset-balance.model';
 
+import { BulletSeparator } from '@app/ui/components/bullet-separator/bullet-separator';
 import { ItemInteractive } from '@app/ui/components/item/item-interactive';
 import { ItemLayout } from '@app/ui/components/item/item.layout';
 import { BasicTooltip } from '@app/ui/components/tooltip/basic-tooltip';
@@ -57,10 +58,14 @@ export function CryptoCurrencyAssetItemLayout({
         }
         captionRight={
           !rightElement && (
-            <>
-              <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
-              {additionalUsdBalanceInfo}
-            </>
+            <Caption>
+              <Flex alignItems="center" gap="space.02" color="inherit">
+                <BulletSeparator>
+                  <Caption>{balance.amount.toNumber() > 0 && address ? usdBalance : null}</Caption>
+                  {additionalUsdBalanceInfo}
+                </BulletSeparator>
+              </Flex>
+            </Caption>
           )
         }
       />

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

@@ -19,7 +19,8 @@ import { PendingBrc20TransferList } from '../pending-brc-20-transfers/pending-br
 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 { StacksAssetList } from './components/stacks-asset-list';
+import { StacksBalanceListItem } from './components/stacks-balance-list-item';
+import { StacksFungibleTokenAssetList } from './components/stacks-fungible-token-asset-list';
 
 export function AssetsList() {
   const hasBitcoinLedgerKeys = useHasBitcoinLedgerKeychain();
@@ -62,7 +63,12 @@ export function AssetsList() {
         })}
 
       <CurrentStacksAccountLoader fallback={<AddStacksLedgerKeysItem />}>
-        {account => <StacksAssetList account={account} />}
+        {account => (
+          <>
+            <StacksBalanceListItem address={account.address} />
+            <StacksFungibleTokenAssetList address={account.address} />
+          </>
+        )}
       </CurrentStacksAccountLoader>
 
       {whenWallet({

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

@@ -0,0 +1,64 @@
+import { TooltipProvider } from '@radix-ui/react-tooltip';
+import { Meta, StoryObj } from '@storybook/react';
+import BigNumber from 'bignumber.js';
+
+import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout';
+
+const meta: Meta<typeof StacksBalanceListItemLayout> = {
+  component: StacksBalanceListItemLayout,
+  tags: ['autodocs'],
+  title: 'Feature/StacksBalanceListItem',
+  argTypes: {},
+  parameters: {},
+  decorators: [
+    Story => (
+      <TooltipProvider>
+        <Story />
+      </TooltipProvider>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof StacksBalanceListItemLayout>;
+
+const symbol = 'STX';
+
+export const StacksBalanceItem: Story = {
+  args: {
+    address: 'ST1PQHQKV0YX2K1Z0V2VQZGZGZGZGZGZGZGZGZGZG',
+    stxEffectiveBalance: {
+      balance: { decimals: 8, amount: new BigNumber(100000000000), symbol },
+      blockchain: 'stacks',
+      type: 'crypto-currency',
+      asset: {
+        decimals: 8,
+        hasMemo: true,
+        name: 'Stacks',
+        symbol,
+      } as const,
+    },
+    stxEffectiveUsdBalance: '$100,000',
+  },
+};
+
+export const StacksBalanceItemWithLockedBalance: Story = {
+  args: {
+    address: 'ST1PQHQKV0YX2K1Z0V2VQZGZGZGZGZGZGZGZGZGZG',
+    stxEffectiveBalance: {
+      balance: { decimals: 8, amount: new BigNumber(100000000000), symbol },
+      blockchain: 'stacks',
+      type: 'crypto-currency',
+      asset: {
+        decimals: 8,
+        hasMemo: true,
+        name: 'Stacks',
+        symbol,
+      } as const,
+    },
+    stxEffectiveUsdBalance: '$100,000',
+    stxUsdLockedBalance: '$1,000',
+    stxLockedBalance: { decimals: 8, amount: new BigNumber(1000000000), symbol },
+  },
+};

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

@@ -0,0 +1,52 @@
+import { styled } from 'leather-styles/jsx';
+
+import type { StacksCryptoCurrencyAssetBalance } from '@shared/models/crypto-asset-balance.model';
+import type { Money } from '@shared/models/money.model';
+
+import { ftDecimals } from '@app/common/stacks-utils';
+import { CryptoCurrencyAssetItemLayout } from '@app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout';
+import { StxAvatarIcon } from '@app/ui/components/avatar/stx-avatar-icon';
+import {
+  BulletOperator,
+  BulletSeparator,
+} from '@app/ui/components/bullet-separator/bullet-separator';
+import { Caption } from '@app/ui/components/typography/caption';
+
+interface StacksBalanceListItemLayoutProps {
+  address: string;
+  stxEffectiveBalance: StacksCryptoCurrencyAssetBalance;
+  stxEffectiveUsdBalance?: string;
+  stxLockedBalance?: Money;
+  stxUsdLockedBalance?: string;
+}
+export function StacksBalanceListItemLayout(props: StacksBalanceListItemLayoutProps) {
+  const {
+    address,
+    stxEffectiveBalance,
+    stxEffectiveUsdBalance,
+    stxLockedBalance,
+    stxUsdLockedBalance,
+  } = props;
+
+  const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <styled.span>
+      <BulletOperator ml="space.01" mr="space.02" />
+      {ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked
+    </styled.span>
+  ) : undefined;
+
+  const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <Caption>{stxUsdLockedBalance} locked</Caption>
+  ) : undefined;
+
+  return (
+    <CryptoCurrencyAssetItemLayout
+      assetBalance={stxEffectiveBalance}
+      usdBalance={stxEffectiveUsdBalance}
+      address={address}
+      additionalBalanceInfo={stxAdditionalBalanceInfo}
+      additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
+      icon={<StxAvatarIcon />}
+    />
+  );
+}

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

@@ -0,0 +1,11 @@
+import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
+
+import { StacksBalanceListItemLayout } from './stacks-balance-list-item.layout';
+
+interface StacksBalanceListItemProps {
+  address: string;
+}
+export function StacksBalanceListItem({ address }: StacksBalanceListItemProps) {
+  const balaceDetails = useStxBalance();
+  return <StacksBalanceListItemLayout address={address} {...balaceDetails} />;
+}

src/app/features/asset-list/components/stacks-fungible-token-asset-list.layout.tsx

@@ -0,0 +1,24 @@
+import { Stack } from 'leather-styles/jsx';
+
+import type { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
+
+import { StacksFungibleTokenAssetItemLayout } from '@app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout';
+
+interface StacksFungibleTokenAssetListLayoutProps {
+  assetBalances: StacksFungibleTokenAssetBalance[];
+}
+export function StacksFungibleTokenAssetListLayout({
+  assetBalances,
+}: StacksFungibleTokenAssetListLayoutProps) {
+  if (assetBalances.length === 0) return null;
+  return (
+    <Stack>
+      {assetBalances.map(assetBalance => (
+        <StacksFungibleTokenAssetItemLayout
+          assetBalance={assetBalance}
+          key={assetBalance.asset.contractId}
+        />
+      ))}
+    </Stack>
+  );
+}

src/app/features/asset-list/components/stacks-fungible-token-asset-list.tsx

@@ -1,22 +1,11 @@
-import { Stack } from 'leather-styles/jsx';
+import { useStacksFungibleTokenAssetBalancesWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
 
-import type { StacksFungibleTokenAssetBalance } from '@shared/models/crypto-asset-balance.model';
-
-import { StacksFungibleTokenAssetItemLayout } from '@app/components/crypto-assets/stacks/fungible-token-asset/stacks-fungible-token-asset-item.layout';
+import { StacksFungibleTokenAssetListLayout } from './stacks-fungible-token-asset-list.layout';
 
 interface StacksFungibleTokenAssetListProps {
-  assetBalances: StacksFungibleTokenAssetBalance[];
+  address: string;
 }
-export function StacksFungibleTokenAssetList({ assetBalances }: StacksFungibleTokenAssetListProps) {
-  if (assetBalances.length === 0) return null;
-  return (
-    <Stack>
-      {assetBalances.map(assetBalance => (
-        <StacksFungibleTokenAssetItemLayout
-          assetBalance={assetBalance}
-          key={assetBalance.asset.contractId}
-        />
-      ))}
-    </Stack>
-  );
+export function StacksFungibleTokenAssetList({ address }: StacksFungibleTokenAssetListProps) {
+  const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesWithMetadata(address);
+  return <StacksFungibleTokenAssetListLayout assetBalances={stacksFtAssetBalances} />;
 }