diff --git a/CHANGELOG.md b/CHANGELOG.md index 1a81bda8397..3477eb18883 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,8 @@ ## Unreleased (develop) +- fixed: Staked "locked" balance in the wallet view no longer gets cut off. The crypto amount is truncated to an exchange-rate-appropriate number of decimals, and the text is no longer clamped to a fraction of the card width. + ## 4.50.0 (2026-07-21) - added: Changelly swap provider diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx index d8332b3b2cf..96b08f93a0f 100644 --- a/src/components/themed/TransactionListTop.tsx +++ b/src/components/themed/TransactionListTop.tsx @@ -41,6 +41,7 @@ import type { WalletsTabSceneProps } from '../../types/routerTypes' import { CryptoAmount } from '../../util/CryptoAmount' +import { getCryptoText } from '../../util/cryptoTextUtils' import { isKeysOnlyPlugin } from '../../util/CurrencyInfoHelpers' import { triggerHaptic } from '../../util/haptic' import { @@ -55,6 +56,7 @@ import { getUkCompliantString } from '../../util/ukComplianceUtils' import { convertNativeToDenomination, DECIMAL_PRECISION, + getDenomFromIsoCode, removeIsoPrefix, zeroString } from '../../util/utils' @@ -587,12 +589,16 @@ export const TransactionListTop: React.FC = props => { const nativeLocked = add(fioStatus.locked, lockedNativeAmount) if (nativeLocked === '0') return null - const stakingCryptoAmount = convertNativeToDenomination( - displayDenomination.multiplier - )(nativeLocked) - const stakingCryptoAmountFormat = formatNumber( - add(stakingCryptoAmount, '0') - ) + // Truncate to an exchange-rate-appropriate number of decimals, so the + // whole "locked" message stays readable on narrow screens: + const stakingCryptoText = getCryptoText({ + currencyCode: displayDenomination.name, + displayDenomination, + exchangeDenomination, + exchangeRate, + fiatDenomination: getDenomFromIsoCode(defaultIsoFiat), + nativeAmount: nativeLocked + }) const stakingExchangeAmount = convertNativeToDenomination( exchangeDenomination.multiplier @@ -608,7 +614,7 @@ export const TransactionListTop: React.FC = props => { {sprintf( lstrings.staking_status, - stakingCryptoAmountFormat + ' ' + displayDenomination.name, + stakingCryptoText, fiatSymbol + stakingFiatBalanceFormat + ' ' + defaultFiat )} @@ -909,15 +915,12 @@ const getStyles = cacheStyles((theme: Theme) => ({ // Staking Box stakingBoxContainer: { height: theme.rem(1.25), - minWidth: theme.rem(18), - maxWidth: '70%', alignItems: 'center', - flexDirection: 'row', - justifyContent: 'space-between' + flexDirection: 'row' }, stakingStatusText: { + flexShrink: 1, color: theme.secondaryText, - maxWidth: '70%', fontSize: theme.rem(1) } }))