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 (