diff --git a/src/app/components/caption-dot-separator.tsx b/src/app/components/caption-dot-separator.tsx
index f7a27864bdc..15aaf40f257 100644
--- a/src/app/components/caption-dot-separator.tsx
+++ b/src/app/components/caption-dot-separator.tsx
@@ -1,13 +1,9 @@
import { cloneElement, isValidElement } from 'react';
-import { BoxProps, styled } from 'leather-styles/jsx';
+import { Circle, CircleProps } from 'leather-styles/jsx';
-function CaptionSeparatorDot(props: BoxProps) {
- return (
-
- •
-
- );
+export function CaptionSeparatorDot(props: CircleProps) {
+ return ;
}
interface CaptionDotSeparatorProps {
diff --git a/src/app/components/crypto-assets/components/asset-row-grid.tsx b/src/app/components/crypto-assets/components/asset-row-grid.tsx
index 50abc1384ac..3508934ab32 100644
--- a/src/app/components/crypto-assets/components/asset-row-grid.tsx
+++ b/src/app/components/crypto-assets/components/asset-row-grid.tsx
@@ -22,7 +22,13 @@ export function AssetRowGrid({
{balance}
);
return (
-
+
{title}
diff --git a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
index e864ae23d1c..bf4a65215d5 100644
--- a/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
+++ b/src/app/components/crypto-assets/crypto-currency-asset/crypto-currency-asset-item.layout.tsx
@@ -79,11 +79,17 @@ export function CryptoCurrencyAssetItemLayout({
}
- caption={{caption}}
+ caption={
+
+ {caption}
+
+ }
usdBalance={
{balance.amount.toNumber() > 0 && address ? (
- {usdBalance}
+
+ {usdBalance}
+
) : null}
{additionalUsdBalanceInfo}
diff --git a/src/app/features/asset-list/components/stacks-asset-list.tsx b/src/app/features/asset-list/components/stacks-asset-list.tsx
index 0c8d0e6308e..1cc84917b9a 100644
--- a/src/app/features/asset-list/components/stacks-asset-list.tsx
+++ b/src/app/features/asset-list/components/stacks-asset-list.tsx
@@ -1,5 +1,8 @@
+import { styled } from 'leather-styles/jsx';
+
import { useStxBalance } from '@app/common/hooks/balance/stx/use-stx-balance';
import { ftDecimals } from '@app/common/stacks-utils';
+import { CaptionSeparatorDot } from '@app/components/caption-dot-separator';
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';
@@ -20,11 +23,17 @@ export function StacksAssetList({ account }: StacksAssetListProps) {
useStxBalance();
const stxAdditionalBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
- <>({ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked)>
+
+
+ {ftDecimals(stxLockedBalance.amount, stxLockedBalance.decimals || 0)} locked
+
) : undefined;
const stxAdditionalUsdBalanceInfo = stxLockedBalance?.amount.isGreaterThan(0) ? (
- ({stxUsdLockedBalance} locked)
+
+
+ {stxUsdLockedBalance} locked
+
) : undefined;
return (