feat: show stacked balance, closes #2835

src/app/common/hooks/balance/stx/use-stx-balance.ts

@@ -26,6 +26,13 @@ export function useStxBalance() {
     ? i18nFormatCurrency(baseCurrencyAmountInQuote(stxEffectiveBalance, stxMarketData))
     : undefined;
 
+  const stxLockedBalance = anchoredBalanceQuery.data?.stx.locked;
+  const stxUsdLockedBalance = isDefined(stxLockedBalance)
+    ? i18nFormatCurrency(
+        baseCurrencyAmountInQuote(stxLockedBalance, stxMarketData)
+      )
+    : undefined;
+
   return useMemo(() => {
     return {
       anchoredBalanceQuery,
@@ -36,12 +43,16 @@ export function useStxBalance() {
         : createMoney(0, 'STX'),
       stxEffectiveBalance: createStacksCryptoCurrencyAssetTypeWrapper(stxEffectiveBalance.amount),
       stxEffectiveUsdBalance,
+      stxLockedBalance,
+      stxUsdLockedBalance,
     };
   }, [
     anchoredBalanceQuery,
     stxOutboundQuery,
     unlockedStxBalance,
     stxEffectiveBalance,
     stxEffectiveUsdBalance,
+    stxLockedBalance,
+    stxUsdLockedBalance,
   ]);
 }

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

@@ -26,6 +26,8 @@ interface CryptoCurrencyAssetItemLayoutProps extends StackProps {
   canCopy?: boolean;
   isHovered?: boolean;
   currency?: CryptoCurrencies;
+  additionalBalanceInfo?: JSX.Element;
+  additionalUsdBalanceInfo?: JSX.Element;
 }
 export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
   (props: CryptoCurrencyAssetItemLayoutProps, ref) => {
@@ -39,6 +41,8 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
       usdBalance,
       address = '',
       isHovered = false,
+      additionalBalanceInfo,
+      additionalUsdBalanceInfo,
       ...rest
     } = props;
     const [component, bind] = usePressable(isPressable);
@@ -69,13 +73,16 @@ export const CryptoCurrencyAssetItemLayout = forwardRefWithAs(
               placement="left-start"
             >
               <Text data-testid={title} fontVariantNumeric="tabular-nums" textAlign="right">
-                {formattedBalance.value}
+                {formattedBalance.value} {additionalBalanceInfo}
               </Text>
             </Tooltip>
           </SpaceBetween>
           <SpaceBetween height="1.25rem" width="100%">
             <Caption>{caption}</Caption>
-            {balance.amount.toNumber() > 0 && address ? <Caption>{usdBalance}</Caption> : null}
+            <Flex>
+              {balance.amount.toNumber() > 0 && address ? <Caption>{usdBalance}</Caption> : null}
+              {additionalUsdBalanceInfo}
+            </Flex>
           </SpaceBetween>
         </Flag>
         {component}

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

@@ -18,10 +18,22 @@ interface CryptoCurrencyAssetItemProps extends StackProps {
   address?: string;
   isPressable?: boolean;
   canCopy?: boolean;
+  additionalBalanceInfo?: JSX.Element;
+  additionalUsdBalanceInfo?: JSX.Element;
 }
 export const CryptoCurrencyAssetItem = forwardRefWithAs(
   (props: CryptoCurrencyAssetItemProps, ref) => {
-    const { assetBalance, icon, isPressable, address, canCopy, usdBalance, ...rest } = props;
+    const {
+      assetBalance,
+      icon,
+      isPressable,
+      address,
+      canCopy,
+      usdBalance,
+      additionalBalanceInfo,
+      additionalUsdBalanceInfo,
+      ...rest
+    } = props;
     const { balance, asset } = assetBalance;
     const [isHovered, setIsHovered] = useState(false);
     const { onCopy, hasCopied } = useClipboard(address || '');
@@ -65,6 +77,8 @@ export const CryptoCurrencyAssetItem = forwardRefWithAs(
         onClick={onClick}
         onMouseOver={onHover}
         onMouseOut={onBlur}
+        additionalBalanceInfo={additionalBalanceInfo}
+        additionalUsdBalanceInfo={additionalUsdBalanceInfo}
         {...rest}
       />
     );

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

@@ -1,13 +1,15 @@
-import { Box, Stack, StackProps } from '@stacks/ui';
+import { Box, Stack, StackProps, Text } from '@stacks/ui';
 import { HomePageSelectorsLegacy } from '@tests-legacy/page-objects/home.selectors';
 
 import { useBtcAssetBalance } from '@app/common/hooks/balance/btc/use-btc-balance';
 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 { 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/hiro-config/hiro-config.query';
 import { useStacksFungibleTokenAssetBalancesAnchoredWithMetadata } from '@app/query/stacks/balance/stacks-ft-balances.hooks';
@@ -25,13 +27,27 @@ export function BalancesList({ address, ...props }: BalancesListProps) {
   const stacksFtAssetBalances = useStacksFungibleTokenAssetBalancesAnchoredWithMetadata(address);
   const isBitcoinEnabled = useConfigBitcoinEnabled();
   const btcAddress = useCurrentAccountNativeSegwitAddressIndexZero();
-  const { stxEffectiveBalance, stxEffectiveUsdBalance, isLoading } = useStxBalance();
+  const {
+    stxEffectiveBalance,
+    stxEffectiveUsdBalance,
+    stxLockedBalance,
+    stxUsdLockedBalance,
+    isLoading,
+  } = useStxBalance();
   const { btcAvailableAssetBalance, btcAvailableUsdBalance } = useBtcAssetBalance(btcAddress);
   const { whenWallet } = useWalletType();
 
   // Better handle loading state
   if (isLoading) return <LoadingSpinner />;
 
+  const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <Text>({ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked)</Text>
+  ) : undefined;
+
+  const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
+    <Caption ml="4px">({stxUsdLockedBalance} locked)</Caption>
+  ) : undefined;
+
   return (
     <Stack
       pb="extra-loose"
@@ -51,6 +67,8 @@ export function BalancesList({ address, ...props }: BalancesListProps) {
         assetBalance={stxEffectiveBalance}
         usdBalance={stxEffectiveUsdBalance}
         address={address}
+        additionalBalanceInfo={stxAdditionalBalanceInfo}
+        additionalUsdBalanceInfo={stxAdditionalUsdBalanceInfo}
         icon={<StxAvatar {...props} />}
       />
       <StacksFungibleTokenAssetList assetBalances={stacksFtAssetBalances} />

src/app/query/stacks/balance/stx-balance.hooks.ts

@@ -27,6 +27,7 @@ export function parseBalanceResponse(balances: AddressBalanceResponse) {
     ...balances.stx,
     ...stxMoney,
     balance: createMoney(stxMoney.balance.amount, 'STX'),
+    locked: createMoney(stxMoney.locked.amount, 'STX'),
     unlockedStx: createMoney(stxMoney.balance.amount.minus(stxMoney.locked.amount), 'STX'),
   };
   return { ...balances, stx };