From 5a7a5dfb3a78c2117da5f56462c47b321d9cdc46 Mon Sep 17 00:00:00 2001 From: Patrick Choo Date: Sat, 11 Jul 2026 20:35:38 +0800 Subject: [PATCH 1/6] refactor: drop the app-wide tabular default; text is proportional by default --- .../components/src/content/Badge/index.tsx | 28 ++++++----- .../src/content/NumberSizeableText/index.tsx | 6 +-- .../src/hocs/Provider/web-fonts.css | 6 --- .../src/primitives/SizeableText/index.tsx | 11 ++--- packages/components/src/utils/tabularNums.ts | 48 ++++++++----------- .../pages/TokenDetails/TokenDetailsHeader.tsx | 5 -- .../components/BalanceDetailsDialog/index.tsx | 3 +- .../Home/components/WalletOverview/index.tsx | 11 +---- .../Home/pages/HomeOverviewContainer.tsx | 4 -- 9 files changed, 45 insertions(+), 77 deletions(-) diff --git a/packages/components/src/content/Badge/index.tsx b/packages/components/src/content/Badge/index.tsx index 9df9a9c10d14..f0082def36f2 100644 --- a/packages/components/src/content/Badge/index.tsx +++ b/packages/components/src/content/Badge/index.tsx @@ -11,7 +11,7 @@ import type { GetProps } from '@onekeyhq/components/src/shared/tamagui'; import platformEnv from '@onekeyhq/shared/src/platformEnv'; import { XStack } from '../../primitives/Stack'; -import { TABULAR_NUMS, getFontVariantStyle } from '../../utils/tabularNums'; +import { getFontVariantStyle } from '../../utils/tabularNums'; import type { IXStackProps } from '../../primitives'; @@ -98,19 +98,21 @@ const BadgeTextStyled = styled(SizableText, { } as const, }); -// Badge.Text is styled from raw tamagui text, so it bypasses the SizableText -// wrapper's app-wide tabular default. Re-apply it here (computed once) so badge -// digits (countdowns, rates, counts) stay equal-width on native. On web the -// web-fonts.css body rule already covers it, so getFontVariantStyle returns -// undefined and this is a passthrough. -const BADGE_TABULAR_STYLE = getFontVariantStyle(TABULAR_NUMS); - -function BadgeText({ style, ...props }: GetProps) { +// Badge.Text is styled from raw tamagui text, which silently drops the RN +// `fontVariant` prop. Translate it into a real style so a badge holding dense +// numeric data (a ticking countdown, a rate) can opt in with +// `fontVariant={TABULAR_NUMS}`. Badges are proportional by default like all +// other text — most of them hold names or labels. +function BadgeText({ + style, + fontVariant, + ...props +}: GetProps) { // Merge (not overwrite) so a caller-provided `style` still wins. - const mergedStyle = useMemo( - () => (BADGE_TABULAR_STYLE ? [BADGE_TABULAR_STYLE, style] : style), - [style], - ); + const mergedStyle = useMemo(() => { + const variantStyle = getFontVariantStyle(fontVariant); + return variantStyle ? [variantStyle, style] : style; + }, [fontVariant, style]); return ; } diff --git a/packages/components/src/content/NumberSizeableText/index.tsx b/packages/components/src/content/NumberSizeableText/index.tsx index 7779e7283137..68f1a0264206 100644 --- a/packages/components/src/content/NumberSizeableText/index.tsx +++ b/packages/components/src/content/NumberSizeableText/index.tsx @@ -146,9 +146,9 @@ export function NumberSizeableText({ {result.map((r, index) => typeof r === 'string' ? ( // These slices build fresh SizableTexts (not spreading `props`), so - // they'd otherwise fall back to the app-wide tabular default and - // ignore a caller override (e.g. PROPORTIONAL_NUMS on a hero - // balance) — forward `fontVariant` explicitly to every slice. + // a caller's `fontVariant={TABULAR_NUMS}` would not reach them — + // forward it explicitly, or a split number in a table column would + // have only its decimal part tabular. ` / `StyleSheet.create`, - * or `Badge.Text` — via `getFontVariantStyle(TABULAR_NUMS)`. + * Apply as `fontVariant={TABULAR_NUMS}` (or a `fontVariant` StyleSheet entry on + * raw React Native ``) to numbers that are **small, sit in a column, and + * tick**: market/perps list columns, order books, trading tables, ticker strips. + * Every digit then shares one advance width, so columns stay aligned and a value + * doesn't reflow as it updates. * - * Every digit shares one advance width, so number columns stay aligned and a - * value doesn't reflow as it ticks. Unlike a monospace family (`$monoRegular`), - * only digits are equalized — letters keep Roobert's natural proportional - * widths. Roobert ships the `tnum` OpenType feature, so this works on iOS, - * Android and web. - * - * Monospace is still the right choice for addresses / hashes / mnemonics / - * codes, where character (not just digit) alignment matters — do NOT replace - * those with tabular-nums. + * Do NOT apply it to anything a human reads as words. Text is proportional by + * default and that is almost always right: + * - names & identifiers (account "A1787", wallet "OneKey Pro2-1-6") + * - addresses / hashes (mixed hex — tabular equalizes only the digits, leaving + * the letters proportional, which reads worse than either) + * - prose and marketing copy + * - large hero numbers (a single big number has no column to align with, and + * Roobert's tabular `1` is nearly 2x wider and grows a foot serif) + * - amount input fields */ export const TABULAR_NUMS: ['tabular-nums'] = ['tabular-nums']; -/** - * Escape hatch from the app-wide tabular default (`SizableText` defaults - * `fontVariant` to TABULAR_NUMS): pass `fontVariant={PROPORTIONAL_NUMS}` to - * restore the font's natural proportional figures for a specific text. - */ -export const PROPORTIONAL_NUMS: ['proportional-nums'] = ['proportional-nums']; - type IFontVariantStyle = CSSProperties | TextStyle; function buildFontVariantStyle( @@ -51,13 +44,10 @@ function buildFontVariantStyle( return Object.freeze(style); } -// Web applies tabular figures globally via the `body` rule in web-fonts.css, -// so the DEFAULT variant needs no inline style — leaving it undefined avoids a -// redundant style attr on every text node and keeps `style` reference-stable. -// Native has no CSS inheritance, so it must carry the variant inline. -const TABULAR_NUMS_STYLE: IFontVariantStyle | undefined = platformEnv.isNative - ? buildFontVariantStyle(TABULAR_NUMS) - : undefined; +// Hoisted so the common opt-in path allocates nothing and stays +// reference-stable. Both platforms carry it inline: there is no global rule to +// inherit from any more. +const TABULAR_NUMS_STYLE = buildFontVariantStyle(TABULAR_NUMS); const fontVariantStyleCache = new WeakMap< NonNullable, diff --git a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx index 98c8b5bf289c..127a79231a2e 100644 --- a/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx +++ b/packages/kit/src/views/AssetDetails/pages/TokenDetails/TokenDetailsHeader.tsx @@ -9,7 +9,6 @@ import { DebugRenderTracker, Divider, Icon, - PROPORTIONAL_NUMS, SizableText, Skeleton, Stack, @@ -543,10 +542,6 @@ function TokenDetailsHeaderContent({ fontSize={48} lineHeight={48} fontWeight={500} - // Large hero value uses natural proportional figures (matches - // the home total-balance hero); tabular is reserved for - // tables / ticking data. - fontVariant={PROPORTIONAL_NUMS} > {displayFiatValueOrUnavailable( tokenDetails?.fiatValue, diff --git a/packages/kit/src/views/Home/components/BalanceDetailsDialog/index.tsx b/packages/kit/src/views/Home/components/BalanceDetailsDialog/index.tsx index 5859c8381276..f543dfa060ef 100644 --- a/packages/kit/src/views/Home/components/BalanceDetailsDialog/index.tsx +++ b/packages/kit/src/views/Home/components/BalanceDetailsDialog/index.tsx @@ -10,7 +10,6 @@ import { Dialog, Divider, ESwitchSize, - PROPORTIONAL_NUMS, SizableText, Skeleton, Stack, @@ -392,7 +391,7 @@ function BalanceDetailsContent({ {isLoading ? ( ) : ( - + {`${overview?.balanceParsed ?? '-'} ${network?.symbol ?? ''}`} )} diff --git a/packages/kit/src/views/Home/components/WalletOverview/index.tsx b/packages/kit/src/views/Home/components/WalletOverview/index.tsx index 1537294772d4..fa053878b577 100644 --- a/packages/kit/src/views/Home/components/WalletOverview/index.tsx +++ b/packages/kit/src/views/Home/components/WalletOverview/index.tsx @@ -1,9 +1,4 @@ -import { - PROPORTIONAL_NUMS, - SizableText, - Skeleton, - YStack, -} from '@onekeyhq/components'; +import { SizableText, Skeleton, YStack } from '@onekeyhq/components'; import { HomeTestIDs } from '../../testIDs'; @@ -32,9 +27,7 @@ function WalletOverview(props: IProps) { {address} - - {value} - + {value} ); diff --git a/packages/kit/src/views/Home/pages/HomeOverviewContainer.tsx b/packages/kit/src/views/Home/pages/HomeOverviewContainer.tsx index b2b1488bdca7..b00b491a9f0d 100644 --- a/packages/kit/src/views/Home/pages/HomeOverviewContainer.tsx +++ b/packages/kit/src/views/Home/pages/HomeOverviewContainer.tsx @@ -6,7 +6,6 @@ import { useIntl } from 'react-intl'; import { Button, IconButton, - PROPORTIONAL_NUMS, Skeleton, XStack, YStack, @@ -1010,9 +1009,6 @@ function HomeOverviewContainer() { fontSize={48} lineHeight={48} fontWeight={500} - // Large hero balance reads better with the font's natural - // proportional figures than equal-width tabular ones. - fontVariant={PROPORTIONAL_NUMS} {...numberFormatter} > {renderedBalanceStringDisplay ?? '0'} From 0f67f59b7ca6573b298c161dbc6ee9f4e22d2b68 Mon Sep 17 00:00:00 2001 From: Patrick Choo Date: Sat, 11 Jul 2026 21:04:29 +0800 Subject: [PATCH 2/6] feat: opt dense numeric data into tabular figures (lists, tables, order book, tickers) --- .../DeFi/DeFiPositionHealthFactorRow.tsx | 10 +- .../DeFi/ProtocolPositionSection.tsx | 8 +- .../src/components/DeFi/ProtocolValueCell.tsx | 5 +- .../src/components/TokenListItem/index.tsx | 3 + .../TokenListView/TokenBalanceView.tsx | 13 +- .../TokenListView/TokenPriceChangeView.tsx | 4 +- .../TokenListView/TokenPriceView.tsx | 2 + .../TokenListView/TokenValueView.tsx | 13 +- .../components/TxAction/TxActionCommon.tsx | 5 + .../BorrowTableList/AmountField.tsx | 15 ++- .../components/BorrowTableList/ApyTextV2.tsx | 17 ++- .../kit/src/views/Earn/components/AprText.tsx | 16 ++- .../components/AvailableAssetsTabViewList.tsx | 3 +- .../Earn/components/PortfolioTabContent.tsx | 35 ++++- .../ProtocolAssetBalanceText.tsx | 3 +- .../DeFiListBlock/ProtocolHeaderRow.tsx | 3 +- .../DeFiListBlock/ProtocolRewardsCell.tsx | 8 +- .../ProtocolSectionedPositionTable.tsx | 3 - .../DeFiListBlock/ProtocolUnifiedTable.tsx | 3 - .../InformationPanel/InformationPanel.tsx | 5 +- .../HolderItemNormal/HolderItemNormal.tsx | 23 +++- .../HolderItemSmall/HolderItemSmall.tsx | 21 ++- .../Portfolio/components/PnlCell.tsx | 14 +- .../Portfolio/layout/PortfolioItemNormal.tsx | 3 + .../Portfolio/layout/PortfolioItemSmall.tsx | 9 +- .../components/TransactionAmount.tsx | 8 +- .../components/TransactionRelativeTime.tsx | 9 +- .../TransactionItemNormal.tsx | 5 + .../TransactionItemSmall.tsx | 3 + .../components/StockDescriptionRows.tsx | 14 +- .../components/TimeRangeSelector.tsx | 9 +- .../components/TransactionRow.tsx | 15 ++- .../components/VolumeRow.tsx | 10 +- .../TokenDetailHeaderRight.tsx | 3 + .../TokenOverview/components/StatCard.tsx | 7 +- .../TokenSelector/MarketTokenSelectorRow.tsx | 6 + .../TokenSupplementaryInfo.tsx | 2 + .../MarketPerpsTokenListItem.tsx | 3 + .../MarketPerpsList/hooks/usePerpsColumns.tsx | 7 + .../hooks/usePerpsColumnsMobile.tsx | 4 + .../TokenIdentityItem/TokenIdentityItem.tsx | 2 + .../components/TokenListItem.tsx | 2 + .../MarketTokenList/components/Txns.tsx | 9 +- .../useColumnsDesktop.tsx | 31 ++++- .../useColumnsMobile.tsx | 3 + .../components/PriceChangeBadge.tsx | 8 +- .../Market/components/Chart/PriceLabel.tsx | 3 + .../Market/components/MarketHomeList.tsx | 3 + .../components/PriceChangePercentage.tsx | 2 + .../FavoritesBar/FavoriteTokenItem.tsx | 18 ++- .../MarketDetail/PerpMarketDetailContent.tsx | 7 +- .../OrderBook/AnimatedDepthBlock.tsx | 4 + .../OrderBook/DefaultLoadingNode.tsx | 17 +-- .../OrderBook/defaultAggregationBtn.tsx | 3 + .../views/Perp/components/OrderBook/index.tsx | 27 +++- .../OrderInfoPanel/Components/AccountRow.tsx | 30 +++-- .../OrderInfoPanel/Components/BalanceRow.tsx | 26 ++-- .../Components/MobileTwapOpenOrdersRow.tsx | 10 +- .../Components/OpenOrdersRow.tsx | 66 ++++++---- .../Components/PerpTableCellText.tsx | 18 +++ .../Components/PositionsRow.tsx | 121 ++++++++++-------- .../Components/TradesHistoryRow.tsx | 53 ++++---- .../OrderInfoPanel/List/PerpTwapList.tsx | 105 +++++++++------ .../views/Perp/components/PerpOrderBook.tsx | 24 +++- .../TickerBar/MobilePerpMarketHeader.tsx | 19 ++- .../TickerBar/PerpTickerBarDesktop.tsx | 15 ++- .../TokenSelector/MoblieTokenSelector.tsx | 9 +- .../TokenSelector/PerpTokenSelectorRow.tsx | 19 ++- .../components/LiquidationPriceDisplay.tsx | 7 +- .../components/PerpsAccountNumberValue.tsx | 2 + .../Swap/components/PreSwapInfoGroup.tsx | 9 +- .../components/ProtocolFeeComparisonList.tsx | 9 +- .../Swap/components/SwapProBuySellInfo.tsx | 17 ++- .../Swap/components/SwapProPositionItem.tsx | 4 + .../SwapProTokenTransactionItem.tsx | 9 +- .../Swap/components/SwapProviderListItem.tsx | 9 +- .../Swap/components/SwapTxHistoryListCell.tsx | 3 + .../valueRenderers.tsx | 22 +++- 78 files changed, 825 insertions(+), 269 deletions(-) create mode 100644 packages/kit/src/views/Perp/components/OrderInfoPanel/Components/PerpTableCellText.tsx diff --git a/packages/kit/src/components/DeFi/DeFiPositionHealthFactorRow.tsx b/packages/kit/src/components/DeFi/DeFiPositionHealthFactorRow.tsx index 66051a4e2bac..54c62c12a4e0 100644 --- a/packages/kit/src/components/DeFi/DeFiPositionHealthFactorRow.tsx +++ b/packages/kit/src/components/DeFi/DeFiPositionHealthFactorRow.tsx @@ -1,11 +1,15 @@ import { useIntl } from 'react-intl'; -import { Popover, SizableText, XStack, YStack } from '@onekeyhq/components'; +import { + Popover, + SizableText, + TABULAR_NUMS, + XStack, + YStack, +} from '@onekeyhq/components'; import type { ColorTokens } from '@onekeyhq/components'; import { ETranslations } from '@onekeyhq/shared/src/locale'; -const TABULAR_NUMS: ['tabular-nums'] = ['tabular-nums']; - type IHealthFactorRisk = 'critical' | 'warning' | 'success'; // Risk band is a client-side heuristic on the bare health factor. The portfolio diff --git a/packages/kit/src/components/DeFi/ProtocolPositionSection.tsx b/packages/kit/src/components/DeFi/ProtocolPositionSection.tsx index 976452b2f729..116ae3381752 100644 --- a/packages/kit/src/components/DeFi/ProtocolPositionSection.tsx +++ b/packages/kit/src/components/DeFi/ProtocolPositionSection.tsx @@ -2,7 +2,12 @@ import { memo } from 'react'; import { useIntl } from 'react-intl'; -import { SizableText, XStack, YStack } from '@onekeyhq/components'; +import { + SizableText, + TABULAR_NUMS, + XStack, + YStack, +} from '@onekeyhq/components'; import NumberSizeableTextWrapper from '@onekeyhq/kit/src/components/NumberSizeableTextWrapper'; import { Token } from '@onekeyhq/kit/src/components/Token'; import type { ITokenProps } from '@onekeyhq/kit/src/components/Token'; @@ -73,6 +78,7 @@ const ProtocolPositionSection = memo( color="$textSubdued" formatter="balance" textAlign="right" + fontVariant={TABULAR_NUMS} > {asset.amount} diff --git a/packages/kit/src/components/DeFi/ProtocolValueCell.tsx b/packages/kit/src/components/DeFi/ProtocolValueCell.tsx index 3afda59d2955..71468a7efad3 100644 --- a/packages/kit/src/components/DeFi/ProtocolValueCell.tsx +++ b/packages/kit/src/components/DeFi/ProtocolValueCell.tsx @@ -6,6 +6,7 @@ import { DashText, type INumberSizeableTextProps, SizableText, + TABULAR_NUMS, Tooltip, XStack, } from '@onekeyhq/components'; @@ -44,7 +45,9 @@ const ProtocolValueCell = memo( color, textAlign, numberOfLines, - fontVariant, + // A value cell is by definition dense column data, so it opts into tabular + // figures by default; callers can still override. + fontVariant = TABULAR_NUMS, }: IProtocolValueCellProps) => { const [{ hideValue }] = useSettingsValuePersistAtom(); const valueBN = new BigNumber(value); diff --git a/packages/kit/src/components/TokenListItem/index.tsx b/packages/kit/src/components/TokenListItem/index.tsx index 662c2288b6ff..8b3e625dd374 100644 --- a/packages/kit/src/components/TokenListItem/index.tsx +++ b/packages/kit/src/components/TokenListItem/index.tsx @@ -4,6 +4,7 @@ import { PulseContainer, SizableText, Stack, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -140,6 +141,7 @@ export function TokenListItem({ color="$text" formatter="balance" size="$bodyLgMedium" + fontVariant={TABULAR_NUMS} > {balance} @@ -154,6 +156,7 @@ export function TokenListItem({ formatter="value" color="$textSubdued" formatterOptions={{ currency: valueProps?.currency ?? '$' }} + fontVariant={TABULAR_NUMS} > {valueProps.value} diff --git a/packages/kit/src/components/TokenListView/TokenBalanceView.tsx b/packages/kit/src/components/TokenListView/TokenBalanceView.tsx index da7c1eb55f92..25f264aff053 100644 --- a/packages/kit/src/components/TokenListView/TokenBalanceView.tsx +++ b/packages/kit/src/components/TokenListView/TokenBalanceView.tsx @@ -1,6 +1,10 @@ import { memo } from 'react'; -import { type ISizableTextProps, SizableText } from '@onekeyhq/components'; +import { + type ISizableTextProps, + SizableText, + TABULAR_NUMS, +} from '@onekeyhq/components'; import { displayOrUnavailable } from '@onekeyhq/shared/src/utils/tokenValueUtils'; import NumberSizeableTextWrapper from '../NumberSizeableTextWrapper'; @@ -23,13 +27,18 @@ function TokenBalanceView(props: IProps) { const balanceParsed = useTokenBalanceParsed($key || ''); if (balanceParsed === undefined) { - return -; + return ( + + - + + ); } return ( {displayOrUnavailable(balanceParsed)} diff --git a/packages/kit/src/components/TokenListView/TokenPriceChangeView.tsx b/packages/kit/src/components/TokenListView/TokenPriceChangeView.tsx index dba173f889c1..a0d81edc6543 100644 --- a/packages/kit/src/components/TokenListView/TokenPriceChangeView.tsx +++ b/packages/kit/src/components/TokenListView/TokenPriceChangeView.tsx @@ -1,7 +1,7 @@ import { memo } from 'react'; import type { ISizableTextProps } from '@onekeyhq/components'; -import { NumberSizeableText } from '@onekeyhq/components'; +import { NumberSizeableText, TABULAR_NUMS } from '@onekeyhq/components'; import { getTokenPriceChangeStyle } from '@onekeyhq/shared/src/utils/tokenUtils'; import { UNAVAILABLE_DISPLAY, @@ -24,6 +24,7 @@ function TokenPriceChangeView(props: IProps) { {UNAVAILABLE_DISPLAY} @@ -40,6 +41,7 @@ function TokenPriceChangeView(props: IProps) { formatter="priceChange" formatterOptions={{ showPlusMinusSigns }} color={changeColor} + fontVariant={TABULAR_NUMS} {...rest} > {price24h} diff --git a/packages/kit/src/components/TokenListView/TokenPriceView.tsx b/packages/kit/src/components/TokenListView/TokenPriceView.tsx index 73a1cc232a60..f8fde0fd2fa1 100644 --- a/packages/kit/src/components/TokenListView/TokenPriceView.tsx +++ b/packages/kit/src/components/TokenListView/TokenPriceView.tsx @@ -1,6 +1,7 @@ import { memo } from 'react'; import type { ISizableTextProps } from '@onekeyhq/components'; +import { TABULAR_NUMS } from '@onekeyhq/components'; import { displayOrUnavailable } from '@onekeyhq/shared/src/utils/tokenValueUtils'; import { Currency } from '../Currency'; @@ -20,6 +21,7 @@ function TokenPriceView(props: IProps) { )} > {displayOrUnavailable(price)} diff --git a/packages/kit/src/components/TokenListView/TokenValueView.tsx b/packages/kit/src/components/TokenListView/TokenValueView.tsx index 5df04a1cabc4..23f0de7d0149 100644 --- a/packages/kit/src/components/TokenListView/TokenValueView.tsx +++ b/packages/kit/src/components/TokenListView/TokenValueView.tsx @@ -1,6 +1,10 @@ import { memo } from 'react'; -import { type ISizableTextProps, SizableText } from '@onekeyhq/components'; +import { + type ISizableTextProps, + SizableText, + TABULAR_NUMS, +} from '@onekeyhq/components'; import { displayFiatValueOrUnavailable } from '@onekeyhq/shared/src/utils/tokenValueUtils'; import { Currency } from '../Currency'; @@ -20,13 +24,18 @@ function TokenValueView(props: IProps) { const { has, fiatValue, balanceParsed, currency } = useTokenValueSlice($key); if (!has) { - return -; + return ( + + - + + ); } return ( )} > {displayFiatValueOrUnavailable(fiatValue, balanceParsed)} diff --git a/packages/kit/src/components/TxAction/TxActionCommon.tsx b/packages/kit/src/components/TxAction/TxActionCommon.tsx index 33595f938dbb..8f3a06251fc6 100644 --- a/packages/kit/src/components/TxAction/TxActionCommon.tsx +++ b/packages/kit/src/components/TxAction/TxActionCommon.tsx @@ -10,6 +10,7 @@ import { NumberSizeableText, SizableText, Stack, + TABULAR_NUMS, XStack, } from '@onekeyhq/components'; import { ListItem } from '@onekeyhq/kit/src/components/ListItem'; @@ -335,6 +336,7 @@ function TxActionCommonChange({ minWidth={0} numberOfLines={1} size="$bodyLgMedium" + fontVariant={TABULAR_NUMS} {...(!tableLayout && { textAlign: 'right', })} @@ -360,6 +362,7 @@ function TxActionCommonChangeDescription({ color="$textSubdued" numberOfLines={1} minWidth={0} + fontVariant={TABULAR_NUMS} {...(!tableLayout && { textAlign: 'right', })} @@ -403,6 +406,7 @@ function TxActionCommonFee({ numberOfLines={1} flexShrink={1} minWidth={0} + fontVariant={TABULAR_NUMS} > {fee} @@ -414,6 +418,7 @@ function TxActionCommonFee({ numberOfLines={1} flexShrink={1} minWidth={0} + fontVariant={TABULAR_NUMS} > {feeFiatValue} diff --git a/packages/kit/src/views/Borrow/components/BorrowTableList/AmountField.tsx b/packages/kit/src/views/Borrow/components/BorrowTableList/AmountField.tsx index 99dfd2767462..28a552e028d9 100644 --- a/packages/kit/src/views/Borrow/components/BorrowTableList/AmountField.tsx +++ b/packages/kit/src/views/Borrow/components/BorrowTableList/AmountField.tsx @@ -1,5 +1,6 @@ import BigNumber from 'bignumber.js'; +import { TABULAR_NUMS } from '@onekeyhq/components'; import type { IEarnText } from '@onekeyhq/shared/types/staking'; import { EarnText } from '../../../Staking/components/ProtocolDetails/EarnText'; @@ -16,9 +17,19 @@ export const AmountField = ({ title, description }: IAmountFieldProps) => { return ( - + {!isZero ? ( - + ) : null} ); diff --git a/packages/kit/src/views/Borrow/components/BorrowTableList/ApyTextV2.tsx b/packages/kit/src/views/Borrow/components/BorrowTableList/ApyTextV2.tsx index a4c210eb4cd5..8e0855d22f4c 100644 --- a/packages/kit/src/views/Borrow/components/BorrowTableList/ApyTextV2.tsx +++ b/packages/kit/src/views/Borrow/components/BorrowTableList/ApyTextV2.tsx @@ -12,6 +12,7 @@ import { ScrollView, SizableText, Stack, + TABULAR_NUMS, Tooltip, XStack, YStack, @@ -338,6 +339,7 @@ function TextWithDottedUnderline({ textAlign="right" dashColor={textColor} dashThickness={1} + fontVariant={TABULAR_NUMS} > {text} @@ -361,7 +363,12 @@ function TextWithTrigger({ if (triggerMode === 'icon') { return ( - + {text} {showChevron ? ( @@ -481,6 +488,7 @@ export const ApyTextV2 = ({ textAlign="right" color={deprecated.color || '$textSubdued'} textDecorationLine="line-through" + fontVariant={TABULAR_NUMS} > {deprecated.text} @@ -535,7 +543,12 @@ export const ApyTextV2 = ({ return ( - + {displayText} diff --git a/packages/kit/src/views/Earn/components/AprText.tsx b/packages/kit/src/views/Earn/components/AprText.tsx index ad2030ac0f2e..91e4fa512635 100644 --- a/packages/kit/src/views/Earn/components/AprText.tsx +++ b/packages/kit/src/views/Earn/components/AprText.tsx @@ -1,6 +1,12 @@ import type { ComponentProps } from 'react'; -import { Icon, SizableText, XStack, YStack } from '@onekeyhq/components'; +import { + Icon, + SizableText, + TABULAR_NUMS, + XStack, + YStack, +} from '@onekeyhq/components'; import type { IEarnAvailableAsset } from '@onekeyhq/shared/types/earn'; import { @@ -49,6 +55,7 @@ export function AprText({ aprInfo?.normal?.color || '$text' } + fontVariant={TABULAR_NUMS} > {formatRewardText({ text: aprRangeText, @@ -76,6 +83,7 @@ export function AprText({ size={size} textAlign="right" color={highlight.color || '$textSuccess'} + fontVariant={TABULAR_NUMS} > {formatRewardText({ text: highlight.text, @@ -89,6 +97,7 @@ export function AprText({ textAlign="right" color={deprecated.color || '$textSubdued'} textDecorationLine="line-through" + fontVariant={TABULAR_NUMS} > {formatRewardText({ text: deprecated.text, @@ -116,6 +125,7 @@ export function AprText({ size={size} textAlign="right" color={highlight.color || '$textSuccess'} + fontVariant={TABULAR_NUMS} > {formatRewardText({ text: highlight.text, @@ -135,6 +145,7 @@ export function AprText({ size={size} textAlign="right" color={normal.color || '$text'} + fontVariant={TABULAR_NUMS} > {formatRewardText({ text: normal.text, @@ -154,6 +165,7 @@ export function AprText({ textAlign="right" color={deprecated.color || '$textSubdued'} textDecorationLine="line-through" + fontVariant={TABULAR_NUMS} > {formatRewardText({ text: deprecated.text, @@ -166,7 +178,7 @@ export function AprText({ // Priority 4: fallback to current logic return ( - + {hideSuffix ? aprWithoutFee : buildAprText(aprWithoutFee, rewardUnit)} ); diff --git a/packages/kit/src/views/Earn/components/AvailableAssetsTabViewList.tsx b/packages/kit/src/views/Earn/components/AvailableAssetsTabViewList.tsx index b015a42b4b33..b5baead4e9ca 100644 --- a/packages/kit/src/views/Earn/components/AvailableAssetsTabViewList.tsx +++ b/packages/kit/src/views/Earn/components/AvailableAssetsTabViewList.tsx @@ -10,6 +10,7 @@ import { IconButton, SearchBar, SizableText, + TABULAR_NUMS, Tabs, XStack, YStack, @@ -324,7 +325,7 @@ export function AvailableAssetsTabViewList({ parseFormattedLiquidityValue(a.liquidity) - parseFormattedLiquidityValue(b.liquidity), render: (asset) => ( - + {asset.liquidity || '-'} ), diff --git a/packages/kit/src/views/Earn/components/PortfolioTabContent.tsx b/packages/kit/src/views/Earn/components/PortfolioTabContent.tsx index 3957d50894e7..dc07cef7d517 100644 --- a/packages/kit/src/views/Earn/components/PortfolioTabContent.tsx +++ b/packages/kit/src/views/Earn/components/PortfolioTabContent.tsx @@ -18,6 +18,7 @@ import { SizableText, Skeleton, Stack, + TABULAR_NUMS, XStack, YStack, useMedia, @@ -338,11 +339,16 @@ const DepositField = ({ /> - + {asset.metadata.protocol.vaultName ? ( @@ -373,11 +379,13 @@ const EarningsField = ({ size="$bodySm" color="$textSubdued" text={asset.totalReward.title} + fontVariant={TABULAR_NUMS} /> ); @@ -389,8 +397,12 @@ const EarningsField = ({ return ( - - + + ); @@ -399,7 +411,11 @@ const EarningsField = ({ return ( - + {secondLine} @@ -414,8 +430,12 @@ const MobilePnlSection = memo( if (netPnl) { return ( - - + + ); } @@ -426,7 +446,9 @@ const MobilePnlSection = memo( size="$bodySm" color="$textSubdued" text={asset.totalReward.description} + fontVariant={TABULAR_NUMS} /> + {/* Localized "Total earned" label — prose, stays proportional. */} { size="$bodyMdMedium" formatter="value" formatterOptions={{ currency: currencyInfo.symbol }} + fontVariant={TABULAR_NUMS} > {totalFiatValue} diff --git a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolAssetBalanceText.tsx b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolAssetBalanceText.tsx index 61703d941cdc..705837fdc4ad 100644 --- a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolAssetBalanceText.tsx +++ b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolAssetBalanceText.tsx @@ -1,4 +1,4 @@ -import { SizableText, XStack } from '@onekeyhq/components'; +import { SizableText, TABULAR_NUMS, XStack } from '@onekeyhq/components'; import { ProtocolValueCell } from '@onekeyhq/kit/src/components/DeFi/ProtocolValueCell'; import { isProtocolAssetValueUnavailable } from '@onekeyhq/kit/src/components/DeFi/protocolValueUtils'; import NumberSizeableTextWrapper from '@onekeyhq/kit/src/components/NumberSizeableTextWrapper'; @@ -25,6 +25,7 @@ function ProtocolAssetBalanceText({ formatter="balance" formatterOptions={{ tokenSymbol: asset.symbol }} numberOfLines={1} + fontVariant={TABULAR_NUMS} > {asset.amount} diff --git a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolHeaderRow.tsx b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolHeaderRow.tsx index eb9b88338aea..eb30bd2cf438 100644 --- a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolHeaderRow.tsx +++ b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolHeaderRow.tsx @@ -4,6 +4,7 @@ import { Icon, SizableText, Stack, + TABULAR_NUMS, View, XStack, YStack, @@ -19,8 +20,6 @@ import { import { formatPortfolioTotal } from './formatPortfolioTotal'; -const TABULAR_NUMS: ['tabular-nums'] = ['tabular-nums']; - // Mirrors the DeFi detail page: open the protocol's site in the in-app // discovery browser on desktop/native, or a new tab on web. function openProtocolUrl(url: string) { diff --git a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolRewardsCell.tsx b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolRewardsCell.tsx index dc606c9d6148..ba6483b2a0a0 100644 --- a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolRewardsCell.tsx +++ b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolRewardsCell.tsx @@ -1,6 +1,11 @@ import { memo } from 'react'; -import { SizableText, XStack, YStack } from '@onekeyhq/components'; +import { + SizableText, + TABULAR_NUMS, + XStack, + YStack, +} from '@onekeyhq/components'; import { ProtocolValueCell } from '@onekeyhq/kit/src/components/DeFi/ProtocolValueCell'; import { isProtocolAssetValueUnavailable } from '@onekeyhq/kit/src/components/DeFi/protocolValueUtils'; import NumberSizeableTextWrapper from '@onekeyhq/kit/src/components/NumberSizeableTextWrapper'; @@ -37,6 +42,7 @@ const ProtocolRewardsCell = memo( size="$bodyMd" formatter="balance" formatterOptions={{ tokenSymbol: asset.symbol }} + fontVariant={TABULAR_NUMS} > {asset.amount} diff --git a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolSectionedPositionTable.tsx b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolSectionedPositionTable.tsx index 78094f6efa57..91b9a3a02acb 100644 --- a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolSectionedPositionTable.tsx +++ b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolSectionedPositionTable.tsx @@ -34,8 +34,6 @@ import { // The Supplied segment uses "Positions" in the first header cell to align with // the unified table; Borrowed and Rewards keep their semantic labels. -const TABULAR_NUMS: ['tabular-nums'] = ['tabular-nums']; - function getTableSectionActionPlacement( assetType: ILocalizedProtocolPositionItem['sections'][number]['assetType'], ): 'balance' | 'rewards' | 'debt' | undefined { @@ -205,7 +203,6 @@ const ProtocolSectionedPositionTable = memo( size="$bodyMdMedium" textAlign="right" numberOfLines={1} - fontVariant={TABULAR_NUMS} /> diff --git a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolUnifiedTable.tsx b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolUnifiedTable.tsx index 48515aa0d596..ee62cc64681c 100644 --- a/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolUnifiedTable.tsx +++ b/packages/kit/src/views/Home/components/DeFiListBlock/ProtocolUnifiedTable.tsx @@ -67,8 +67,6 @@ export const USD_FLEX_WITHOUT_REWARDS = 1; // settles at four lines of content instead of eight. const MAX_BALANCE_LINES = 3; -const TABULAR_NUMS: ['tabular-nums'] = ['tabular-nums']; - // Stable identity for the inline action-button container styling so the // memo()'d ProtocolPositionActionButton isn't re-created on every parent // render (the tables now mount one per asset row). Shared with the sectioned @@ -400,7 +398,6 @@ const ProtocolUnifiedTable = memo( size="$bodyMdMedium" textAlign="right" numberOfLines={1} - fontVariant={TABULAR_NUMS} /> diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationPanel/InformationPanel.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationPanel/InformationPanel.tsx index 050cac5b205a..3f0b7df65a08 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationPanel/InformationPanel.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationPanel/InformationPanel.tsx @@ -3,6 +3,7 @@ import { useIntl } from 'react-intl'; import { NumberSizeableText, SizableText, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -45,7 +46,9 @@ function StatRow({ label, value }: { label: string; value: string }) { {label} - {value} + + {value} + ); } diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemNormal/HolderItemNormal.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemNormal/HolderItemNormal.tsx index 980d3f83dc2c..3f4db8a23738 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemNormal/HolderItemNormal.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemNormal/HolderItemNormal.tsx @@ -1,6 +1,11 @@ import { memo } from 'react'; -import { NumberSizeableText, SizableText, XStack } from '@onekeyhq/components'; +import { + NumberSizeableText, + SizableText, + TABULAR_NUMS, + XStack, +} from '@onekeyhq/components'; import type { IMarketTokenHolder } from '@onekeyhq/shared/types/marketV2'; import { AddressDisplay } from '../../../AddressDisplay'; @@ -34,7 +39,12 @@ function HolderItemNormalBase({ hoverStyle={{ backgroundColor: '$bgHover' }} > {/* Rank */} - + #{rank} @@ -48,7 +58,12 @@ function HolderItemNormalBase({ /> {/* Market Cap Percentage */} - + {displayPercentage} @@ -58,6 +73,7 @@ function HolderItemNormalBase({ color="$text" {...styles.amount} formatter="marketCap" + fontVariant={TABULAR_NUMS} > {amount} @@ -71,6 +87,7 @@ function HolderItemNormalBase({ formatterOptions={{ currency: '$', }} + fontVariant={TABULAR_NUMS} > {fiatValue} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemSmall/HolderItemSmall.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemSmall/HolderItemSmall.tsx index c2147020bf17..20434bb6afed 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemSmall/HolderItemSmall.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Holders/layout/HolderItemSmall/HolderItemSmall.tsx @@ -1,6 +1,11 @@ import { memo } from 'react'; -import { NumberSizeableText, SizableText, XStack } from '@onekeyhq/components'; +import { + NumberSizeableText, + SizableText, + TABULAR_NUMS, + XStack, +} from '@onekeyhq/components'; import type { IMarketTokenHolder } from '@onekeyhq/shared/types/marketV2'; import { AddressDisplay } from '../../../AddressDisplay'; @@ -27,7 +32,11 @@ function HolderItemSmallBase({ {/* Rank */} - + {rank} @@ -46,7 +55,12 @@ function HolderItemSmallBase({ {/* Percentage */} - + {displayPercentage} @@ -59,6 +73,7 @@ function HolderItemSmallBase({ formatterOptions={{ currency: '$', }} + fontVariant={TABULAR_NUMS} > {fiatValue} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/components/PnlCell.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/components/PnlCell.tsx index 3a182334a08a..4ead36b431cc 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/components/PnlCell.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/components/PnlCell.tsx @@ -2,7 +2,12 @@ import { memo } from 'react'; import BigNumber from 'bignumber.js'; -import { SizableText, XStack, YStack } from '@onekeyhq/components'; +import { + SizableText, + TABULAR_NUMS, + XStack, + YStack, +} from '@onekeyhq/components'; import { Currency } from '@onekeyhq/kit/src/components/Currency'; import { USD_CURRENCY_ID } from '@onekeyhq/shared/src/consts/currencyConsts'; @@ -47,6 +52,7 @@ function PnlCellBase({ autoFormatter="price-marketCap" autoFormatterThreshold={1000} sourceCurrency={USD_CURRENCY_ID} + fontVariant={TABULAR_NUMS} > {valueBN.abs().toFixed()} @@ -56,7 +62,11 @@ function PnlCellBase({ -- )} - + {isValid ? `${percent}%` : '--'} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemNormal.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemNormal.tsx index 912e232c27d2..93a924580ff9 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemNormal.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemNormal.tsx @@ -3,6 +3,7 @@ import { memo } from 'react'; import { NumberSizeableText, SizableText, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -53,6 +54,7 @@ function PortfolioItemNormalBase({ autoFormatter="price-marketCap" autoFormatterThreshold={1000} sourceCurrency={USD_CURRENCY_ID} + fontVariant={TABULAR_NUMS} > {item.totalPrice} @@ -61,6 +63,7 @@ function PortfolioItemNormalBase({ color="$textSubdued" autoFormatter="price-marketCap" autoFormatterThreshold={1000} + fontVariant={TABULAR_NUMS} > {item.amount} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemSmall.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemSmall.tsx index 9e4a65bcc821..f5c1689172ca 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemSmall.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/Portfolio/layout/PortfolioItemSmall.tsx @@ -1,6 +1,11 @@ import { memo } from 'react'; -import { NumberSizeableText, XStack, YStack } from '@onekeyhq/components'; +import { + NumberSizeableText, + TABULAR_NUMS, + XStack, + YStack, +} from '@onekeyhq/components'; import { Currency } from '@onekeyhq/kit/src/components/Currency'; import { USD_CURRENCY_ID } from '@onekeyhq/shared/src/consts/currencyConsts'; import type { IMarketAccountPortfolioItem } from '@onekeyhq/shared/types/marketV2'; @@ -24,6 +29,7 @@ function PortfolioItemSmallBase({ item }: IPortfolioItemSmallProps) { autoFormatter="price-marketCap" autoFormatterThreshold={1000} sourceCurrency={USD_CURRENCY_ID} + fontVariant={TABULAR_NUMS} > {item.totalPrice} @@ -32,6 +38,7 @@ function PortfolioItemSmallBase({ item }: IPortfolioItemSmallProps) { color="$textSubdued" autoFormatter="price-marketCap" autoFormatterThreshold={1000} + fontVariant={TABULAR_NUMS} > {item.amount} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionAmount.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionAmount.tsx index 47ce695f9550..4603438ebd9b 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionAmount.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionAmount.tsx @@ -3,6 +3,7 @@ import { type ComponentProps, memo } from 'react'; import { NumberSizeableText, SizableText, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -42,6 +43,7 @@ function TransactionAmountBase({ size="$bodyMd" autoFormatter="value-marketCap" color={typeColor} + fontVariant={TABULAR_NUMS} > {baseToken.amount} @@ -52,7 +54,11 @@ function TransactionAmountBase({ {quoteSign} - + {quoteToken.amount} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionRelativeTime.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionRelativeTime.tsx index 40fdfc294945..d7a1531aea8b 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionRelativeTime.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/components/TransactionRelativeTime.tsx @@ -8,7 +8,7 @@ import { } from 'react'; import type { PropsWithChildren } from 'react'; -import { SizableText } from '@onekeyhq/components'; +import { SizableText, TABULAR_NUMS } from '@onekeyhq/components'; import type { ISizableTextProps } from '@onekeyhq/components'; import { useInterval } from '@onekeyhq/kit/src/hooks/useInterval'; @@ -62,7 +62,12 @@ function TransactionRelativeTimeBase({ ); return ( - + {formattedTime} ); diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemNormal/TransactionItemNormal.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemNormal/TransactionItemNormal.tsx index b81588504c26..e56e718f2f24 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemNormal/TransactionItemNormal.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemNormal/TransactionItemNormal.tsx @@ -4,6 +4,7 @@ import { Image, NumberSizeableText, SizableText, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -89,6 +90,7 @@ function TransactionItemNormalBase({ capAtMaxT: true, currency: '$', }} + fontVariant={TABULAR_NUMS} > {value} @@ -100,6 +102,7 @@ function TransactionItemNormalBase({ capAtMaxT: true, currency: '$', }} + fontVariant={TABULAR_NUMS} > {price} @@ -115,6 +118,7 @@ function TransactionItemNormalBase({ currency: '$', }} {...styles.price} + fontVariant={TABULAR_NUMS} > {price} @@ -128,6 +132,7 @@ function TransactionItemNormalBase({ currency: '$', }} {...styles.value} + fontVariant={TABULAR_NUMS} > {value} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemSmall/TransactionItemSmall.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemSmall/TransactionItemSmall.tsx index 8dfe609fed1c..2b25793f7fdb 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemSmall/TransactionItemSmall.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/InformationTabs/components/TransactionsHistory/layout/TransactionItemSmall/TransactionItemSmall.tsx @@ -4,6 +4,7 @@ import { Image, NumberSizeableText, SizableText, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -75,6 +76,7 @@ function TransactionItemSmallBase({ item }: ITransactionItemSmallProps) { capAtMaxT: true, currency: '$', }} + fontVariant={TABULAR_NUMS} > {value} @@ -88,6 +90,7 @@ function TransactionItemSmallBase({ item }: ITransactionItemSmallProps) { capAtMaxT: true, currency: '$', }} + fontVariant={TABULAR_NUMS} > {price} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/StockDescriptionRows.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/StockDescriptionRows.tsx index c568f2479a37..2044ff6bc6c9 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/StockDescriptionRows.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/StockDescriptionRows.tsx @@ -1,4 +1,10 @@ -import { DashText, SizableText, XStack, YStack } from '@onekeyhq/components'; +import { + DashText, + SizableText, + TABULAR_NUMS, + XStack, + YStack, +} from '@onekeyhq/components'; import type { IDescriptionRow } from '../hooks/useStockSecurityStats'; @@ -22,7 +28,11 @@ export function StockDescriptionRows({ rows }: { rows: IDescriptionRow[] }) { {item.label} )} - + {item.value} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TimeRangeSelector.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TimeRangeSelector.tsx index 251edb69a4f2..008c936dd066 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TimeRangeSelector.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TimeRangeSelector.tsx @@ -1,4 +1,10 @@ -import { ButtonFrame, SizableText, Stack, YStack } from '@onekeyhq/components'; +import { + ButtonFrame, + SizableText, + Stack, + TABULAR_NUMS, + YStack, +} from '@onekeyhq/components'; import { MarketTestIDs } from '../../../testIDs'; @@ -54,6 +60,7 @@ export function TimeRangeSelector({ {isLoading ? '--' : opt.percentageChange} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TransactionRow.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TransactionRow.tsx index b0839edab302..3fef80bbbfe6 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TransactionRow.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/TransactionRow.tsx @@ -1,6 +1,11 @@ import { useIntl } from 'react-intl'; -import { NumberSizeableText, SizableText, Stack } from '@onekeyhq/components'; +import { + NumberSizeableText, + SizableText, + Stack, + TABULAR_NUMS, +} from '@onekeyhq/components'; import { ETranslations } from '@onekeyhq/shared/src/locale'; import { BuySellRatioBar } from './BuySellRatioBar'; @@ -34,7 +39,11 @@ export function TransactionRow({ {showTotalPlaceholder ? ( '--' ) : ( - + {totalCount} )} @@ -61,6 +70,7 @@ export function TransactionRow({ size="$bodyMd" color="$textSubdued" formatter="marketCap" + fontVariant={TABULAR_NUMS} > {buyCount} @@ -84,6 +94,7 @@ export function TransactionRow({ size="$bodyMd" color="$textSubdued" formatter="marketCap" + fontVariant={TABULAR_NUMS} > {sellCount} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/VolumeRow.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/VolumeRow.tsx index 23df1bba0b83..21b0aa8a7db1 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/VolumeRow.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/TokenActivityOverview/components/VolumeRow.tsx @@ -1,6 +1,11 @@ import { useIntl } from 'react-intl'; -import { NumberSizeableText, SizableText, Stack } from '@onekeyhq/components'; +import { + NumberSizeableText, + SizableText, + Stack, + TABULAR_NUMS, +} from '@onekeyhq/components'; import { ETranslations } from '@onekeyhq/shared/src/locale'; import { BuySellRatioBar } from './BuySellRatioBar'; @@ -40,6 +45,7 @@ export function VolumeRow({ formatterOptions={{ currency: '$', }} + fontVariant={TABULAR_NUMS} > {totalVolume} @@ -64,6 +70,7 @@ export function VolumeRow({ formatterOptions={{ currency: '$', }} + fontVariant={TABULAR_NUMS} > {buyVolume} @@ -82,6 +89,7 @@ export function VolumeRow({ formatterOptions={{ currency: '$', }} + fontVariant={TABULAR_NUMS} > {sellVolume} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/TokenDetailHeader/TokenDetailHeaderRight.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/TokenDetailHeader/TokenDetailHeaderRight.tsx index e6b0b71ce6d7..270c9654c4ea 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/TokenDetailHeader/TokenDetailHeaderRight.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/TokenDetailHeader/TokenDetailHeaderRight.tsx @@ -3,6 +3,7 @@ import { useIntl } from 'react-intl'; import { NumberSizeableText, SizableText, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -266,6 +267,7 @@ export function TokenDetailHeaderRight({ price={currentPrice} tokenName={name} tokenSymbol={symbol} + fontVariant={TABULAR_NUMS} /> ) : ( )} {priceConverted ? ( diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/TokenOverview/components/StatCard.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/TokenOverview/components/StatCard.tsx index 04e32f3bd310..c0f24307de04 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/TokenOverview/components/StatCard.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/TokenOverview/components/StatCard.tsx @@ -3,6 +3,7 @@ import { Popover, SizableText, Stack, + TABULAR_NUMS, XStack, } from '@onekeyhq/components'; import type { ColorTokens, IIconProps } from '@onekeyhq/components'; @@ -62,7 +63,11 @@ export function StatCard({ {icon ? ( ) : null} - + {value} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/TokenSelector/MarketTokenSelectorRow.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/TokenSelector/MarketTokenSelectorRow.tsx index 9e736879d6d7..9891153cce9d 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/TokenSelector/MarketTokenSelectorRow.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/TokenSelector/MarketTokenSelectorRow.tsx @@ -9,6 +9,7 @@ import { NumberSizeableText, SizableText, Stack, + TABULAR_NUMS, XStack, YStack, useClipboard, @@ -205,6 +206,7 @@ const MarketTokenSelectorRow = memo( size="$bodySmMedium" formatter={priceFormatter} formatterOptions={{ currency: '$', capAtMaxT: true }} + fontVariant={TABULAR_NUMS} > {String(item.price)} @@ -217,6 +219,7 @@ const MarketTokenSelectorRow = memo( formatter="priceChange" formatterOptions={{ showPlusMinusSigns }} color={changeColor} + fontVariant={TABULAR_NUMS} > {String(item.change24h)} @@ -229,6 +232,7 @@ const MarketTokenSelectorRow = memo( size="$bodySm" formatter="marketCap" formatterOptions={{ currency: '$', capAtMaxT: true }} + fontVariant={TABULAR_NUMS} > {String(item.marketCap)} @@ -246,6 +250,7 @@ const MarketTokenSelectorRow = memo( size="$bodySm" formatter="marketCap" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {String(item.liquidity)} @@ -263,6 +268,7 @@ const MarketTokenSelectorRow = memo( size="$bodySm" formatter="marketCap" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {String(item.turnover)} diff --git a/packages/kit/src/views/Market/MarketDetailV2/components/TokenSupplementaryInfo/TokenSupplementaryInfo.tsx b/packages/kit/src/views/Market/MarketDetailV2/components/TokenSupplementaryInfo/TokenSupplementaryInfo.tsx index a0fbb1840482..598dcc0a0578 100644 --- a/packages/kit/src/views/Market/MarketDetailV2/components/TokenSupplementaryInfo/TokenSupplementaryInfo.tsx +++ b/packages/kit/src/views/Market/MarketDetailV2/components/TokenSupplementaryInfo/TokenSupplementaryInfo.tsx @@ -5,6 +5,7 @@ import { useIntl } from 'react-intl'; import { DashText, SizableText, + TABULAR_NUMS, Tooltip, XStack, YStack, @@ -164,6 +165,7 @@ export function TokenSupplementaryInfo() { item.onPress ? { textDecorationLine: 'underline' } : undefined } onPress={item.onPress} + fontVariant={TABULAR_NUMS} > {item.value} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/MarketPerpsTokenListItem.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/MarketPerpsTokenListItem.tsx index 512d5166983b..6a584a06ce7c 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/MarketPerpsTokenListItem.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/MarketPerpsTokenListItem.tsx @@ -5,6 +5,7 @@ import { NumberSizeableText, SizableText, SkeletonContainer, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -65,6 +66,7 @@ const BasicMarketPerpsTokenListItem: FC = ({ formatter="marketCap" formatterOptions={{ currency: '$' }} userSelect="none" + fontVariant={TABULAR_NUMS} > {item.volume24h ?? '0'} @@ -83,6 +85,7 @@ const BasicMarketPerpsTokenListItem: FC = ({ size="$bodyLgMedium" formatter="price" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {item.markPrice ?? '0'} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumns.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumns.tsx index a7ed286b572e..d234396eeb70 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumns.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumns.tsx @@ -7,6 +7,7 @@ import { SizableText, Skeleton, Stack, + TABULAR_NUMS, XStack, YStack, useMedia, @@ -106,6 +107,7 @@ export function usePerpsColumnsDesktop(): ITableColumn[] { size="$bodyMd" formatter="price" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {record.markPrice ?? '--'} @@ -146,6 +148,7 @@ export function usePerpsColumnsDesktop(): ITableColumn[] { showPlusMinusSigns: true, currency: '', }} + fontVariant={TABULAR_NUMS} > {absChange} @@ -157,6 +160,7 @@ export function usePerpsColumnsDesktop(): ITableColumn[] { color={color} formatter="priceChange" formatterOptions={{ showPlusMinusSigns: true }} + fontVariant={TABULAR_NUMS} > {record.change24hPercent} @@ -178,6 +182,7 @@ export function usePerpsColumnsDesktop(): ITableColumn[] { size="$bodyMd" formatter="marketCap" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {record.volume24h ?? '--'} @@ -197,6 +202,7 @@ export function usePerpsColumnsDesktop(): ITableColumn[] { size="$bodyMd" formatter="marketCap" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {record.openInterest ?? '--'} @@ -225,6 +231,7 @@ export function usePerpsColumnsDesktop(): ITableColumn[] { = 0 ? '$textSuccess' : '$textCritical'} + fontVariant={TABULAR_NUMS} > {`${rate >= 0 ? '+' : ''}${rate.toFixed(4)}%`} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumnsMobile.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumnsMobile.tsx index 7cd6a94af279..896066642911 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumnsMobile.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketPerpsList/hooks/usePerpsColumnsMobile.tsx @@ -6,6 +6,7 @@ import { NumberSizeableText, SizableText, Skeleton, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -67,6 +68,7 @@ export function usePerpsColumnsMobile(): ITableColumn[] { numberOfLines={1} formatter="marketCap" userSelect="none" + fontVariant={TABULAR_NUMS} > {record.volume24h ?? '0'} @@ -107,6 +109,7 @@ export function usePerpsColumnsMobile(): ITableColumn[] { size="$bodyLgMedium" formatter="price" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {record.markPrice ?? '0'} @@ -115,6 +118,7 @@ export function usePerpsColumnsMobile(): ITableColumn[] { color={changeColor} formatter="priceChange" formatterOptions={{ showPlusMinusSigns: true }} + fontVariant={TABULAR_NUMS} > {record.change24hPercent ?? 0} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenIdentityItem/TokenIdentityItem.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenIdentityItem/TokenIdentityItem.tsx index 174a1333f0bb..79208eeedb77 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenIdentityItem/TokenIdentityItem.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenIdentityItem/TokenIdentityItem.tsx @@ -7,6 +7,7 @@ import { NumberSizeableText, SizableText, Stack, + TABULAR_NUMS, XStack, useClipboard, useMedia, @@ -242,6 +243,7 @@ const BasicTokenIdentityItem: FC = ({ numberOfLines={1} formatter="marketCap" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {volume} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenListItem.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenListItem.tsx index cf1d0bcd3ce0..3438b44966c2 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenListItem.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/TokenListItem.tsx @@ -3,6 +3,7 @@ import { memo, useCallback } from 'react'; import { NumberSizeableText, + TABULAR_NUMS, XStack, useMedia, useThemeName, @@ -136,6 +137,7 @@ const BasicTokenListItem: FC = ({ size="$bodyLgMedium" formatter="price" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {item.price} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/Txns.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/Txns.tsx index e5517f51492d..687fd49747f3 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/Txns.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/components/Txns.tsx @@ -1,6 +1,7 @@ import { NumberSizeableText, SizableText, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -35,7 +36,11 @@ export function Txns({ transactions, walletInfo }: ITxnsProps) { return ( {/* Total transactions */} - + {transactions === 0 ? '--' : transactions} @@ -46,6 +51,7 @@ export function Txns({ transactions, walletInfo }: ITxnsProps) { size="$bodySm" color="$textSuccess" formatter="marketCap" + fontVariant={TABULAR_NUMS} > {walletInfo.buy} @@ -56,6 +62,7 @@ export function Txns({ transactions, walletInfo }: ITxnsProps) { size="$bodySm" color="$textCritical" formatter="marketCap" + fontVariant={TABULAR_NUMS} > {walletInfo.sell} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsDesktop.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsDesktop.tsx index d481cc1feec4..38eeea0c307b 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsDesktop.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsDesktop.tsx @@ -8,6 +8,7 @@ import { SizableText, Skeleton, Stack, + TABULAR_NUMS, XStack, YStack, useMedia, @@ -100,7 +101,12 @@ function formatLightweightMarketValue(value: unknown) { function renderLightweightText(value: unknown) { return ( - + {formatLightweightMarketValue(value)} ); @@ -298,6 +304,7 @@ export const useColumnsDesktop = ( size="$bodyMd" formatter={Number(text) > 1_000_000 ? 'marketCap' : 'price'} formatterOptions={{ currency: '$', capAtMaxT: true }} + fontVariant={TABULAR_NUMS} > {text} @@ -339,6 +346,7 @@ export const useColumnsDesktop = ( formatterOptions={{ showPlusMinusSigns, }} + fontVariant={TABULAR_NUMS} > {text} @@ -366,6 +374,7 @@ export const useColumnsDesktop = ( size="$bodyMd" formatter="marketCap" formatterOptions={{ currency: '$', capAtMaxT: true }} + fontVariant={TABULAR_NUMS} > {value} @@ -397,6 +406,7 @@ export const useColumnsDesktop = ( size="$bodyMd" formatter="marketCap" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {value} @@ -426,6 +436,7 @@ export const useColumnsDesktop = ( formatterOptions={ useStockMetadataColumns ? undefined : { currency: '$' } } + fontVariant={TABULAR_NUMS} > {value} @@ -462,7 +473,11 @@ export const useColumnsDesktop = ( columnProps: { flex: 1 }, render: (text: number, _record: IMarketToken, index?: number) => shouldRenderRichCell(index) ? ( - + {text === 0 ? '--' : text} ) : ( @@ -478,7 +493,11 @@ export const useColumnsDesktop = ( columnProps: { flex: 1 }, render: (text: number, _record: IMarketToken, index?: number) => shouldRenderRichCell(index) ? ( - + {text === 0 ? '--' : text} ) : ( @@ -510,7 +529,11 @@ export const useColumnsDesktop = ( { amount: ageInfo.amount }, ); - return {ageLabel}; + return ( + + {ageLabel} + + ); }, renderSkeleton: () => , } diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsMobile.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsMobile.tsx index dbec14d2bc03..7e4d20cb046e 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsMobile.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/MarketTokenList/hooks/useMarketTokenColumns/useColumnsMobile.tsx @@ -8,6 +8,7 @@ import { SizableText, Skeleton, Stack, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -97,6 +98,7 @@ export const useColumnsMobile = ( numberOfLines={1} formatter="marketCap" formatterOptions={{ currency: '$' }} + fontVariant={TABULAR_NUMS} > {record.turnover} @@ -193,6 +195,7 @@ export const useColumnsMobile = ( formatterOptions={{ currency: '$', }} + fontVariant={TABULAR_NUMS} > {record.price} diff --git a/packages/kit/src/views/Market/MarketHomeV2/components/PriceChangeBadge.tsx b/packages/kit/src/views/Market/MarketHomeV2/components/PriceChangeBadge.tsx index 85fe0712b471..e1dc8a64f2db 100644 --- a/packages/kit/src/views/Market/MarketHomeV2/components/PriceChangeBadge.tsx +++ b/packages/kit/src/views/Market/MarketHomeV2/components/PriceChangeBadge.tsx @@ -1,7 +1,12 @@ import type { FC } from 'react'; import { useMemo } from 'react'; -import { NumberSizeableText, SizableText, XStack } from '@onekeyhq/components'; +import { + NumberSizeableText, + SizableText, + TABULAR_NUMS, + XStack, +} from '@onekeyhq/components'; interface IPriceChangeBadgeProps { change: number | string; @@ -41,6 +46,7 @@ export const PriceChangeBadge: FC = ({ change }) => { formatterOptions={{ showPlusMinusSigns: true, }} + fontVariant={TABULAR_NUMS} > {change} diff --git a/packages/kit/src/views/Market/components/Chart/PriceLabel.tsx b/packages/kit/src/views/Market/components/Chart/PriceLabel.tsx index a5ab3935f54d..a742dfb36c8c 100644 --- a/packages/kit/src/views/Market/components/Chart/PriceLabel.tsx +++ b/packages/kit/src/views/Market/components/Chart/PriceLabel.tsx @@ -2,6 +2,7 @@ import { NumberSizeableText, SizableText, Stack, + TABULAR_NUMS, XStack, } from '@onekeyhq/components'; import type { IStackProps } from '@onekeyhq/components'; @@ -120,6 +121,7 @@ export function PriceLabel({ size="$bodyMd" color="$textSubdued" $md={{ color: '$text' }} + fontVariant={TABULAR_NUMS} > {time} @@ -153,6 +155,7 @@ export function PriceLabel({ size="$bodyMd" formatter="price" formatterOptions={{ currency }} + fontVariant={TABULAR_NUMS} > {String(price)} diff --git a/packages/kit/src/views/Market/components/MarketHomeList.tsx b/packages/kit/src/views/Market/components/MarketHomeList.tsx index e8f9efc4239e..bbefc7f971af 100644 --- a/packages/kit/src/views/Market/components/MarketHomeList.tsx +++ b/packages/kit/src/views/Market/components/MarketHomeList.tsx @@ -19,6 +19,7 @@ import { Skeleton, Spinner, Stack, + TABULAR_NUMS, Table, View, XStack, @@ -342,6 +343,7 @@ function MarketMdColumn({ tokenName={item.name} tokenSymbol={item.symbol} lastUpdated={item.lastUpdated} + fontVariant={TABULAR_NUMS} /> ) : ( ), renderSkeleton: () => , diff --git a/packages/kit/src/views/Market/components/PriceChangePercentage.tsx b/packages/kit/src/views/Market/components/PriceChangePercentage.tsx index 4c2ae85e91e6..80aa8d79fe74 100644 --- a/packages/kit/src/views/Market/components/PriceChangePercentage.tsx +++ b/packages/kit/src/views/Market/components/PriceChangePercentage.tsx @@ -2,6 +2,7 @@ import { type INumberSizeableTextProps, NumberSizeableText, SizableText, + TABULAR_NUMS, } from '@onekeyhq/components'; import platformEnv from '@onekeyhq/shared/src/platformEnv'; @@ -30,6 +31,7 @@ export function PriceChangePercentage({ formatter="priceChange" color={color} formatterOptions={{ showPlusMinusSigns: true }} + fontVariant={TABULAR_NUMS} {...props} > {children} diff --git a/packages/kit/src/views/Perp/components/FavoritesBar/FavoriteTokenItem.tsx b/packages/kit/src/views/Perp/components/FavoritesBar/FavoriteTokenItem.tsx index 454a8ead320f..455fd7f1f0ca 100644 --- a/packages/kit/src/views/Perp/components/FavoritesBar/FavoriteTokenItem.tsx +++ b/packages/kit/src/views/Perp/components/FavoritesBar/FavoriteTokenItem.tsx @@ -4,6 +4,7 @@ import { NumberSizeableText, SizableText, Skeleton, + TABULAR_NUMS, XStack, } from '@onekeyhq/components'; import { Token } from '@onekeyhq/kit/src/components/Token'; @@ -27,14 +28,11 @@ import { MAX_SIGNIFICANT_FIGURES, } from '@onekeyhq/shared/types/hyperliquid/perp.constants'; -export const TABULAR_NUMS_STYLE = { - fontVariantNumeric: 'tabular-nums', -} as const; - /** * Calculate stable minWidth (in ch units) for formatted price strings to * prevent layout jitter caused by trailing-zero stripping in * formatPriceToSignificantDigits. With tabular-nums, 1ch equals one digit width. + * Callers must opt the text into `fontVariant={TABULAR_NUMS}` for this to hold. */ export function getStablePriceMinWidth(priceStr: string): string | undefined { // ch units are CSS-only, not supported on React Native @@ -118,7 +116,7 @@ const CtxPriceDisplay = memo( @@ -132,7 +130,7 @@ const CtxPriceDisplay = memo( @@ -189,7 +187,7 @@ const ActiveAssetPriceDisplay = memo( @@ -203,7 +201,7 @@ const ActiveAssetPriceDisplay = memo( @@ -226,14 +224,14 @@ export const PriceChangeDisplay = memo( {`${sign}${change.toFixed(2)}%`} diff --git a/packages/kit/src/views/Perp/components/MarketDetail/PerpMarketDetailContent.tsx b/packages/kit/src/views/Perp/components/MarketDetail/PerpMarketDetailContent.tsx index 1b1d72b66b49..adca7af5f0c4 100644 --- a/packages/kit/src/views/Perp/components/MarketDetail/PerpMarketDetailContent.tsx +++ b/packages/kit/src/views/Perp/components/MarketDetail/PerpMarketDetailContent.tsx @@ -15,6 +15,7 @@ import { SizableText, Spinner, Stack, + TABULAR_NUMS, Tooltip, XStack, YStack, @@ -225,7 +226,9 @@ function DetailStatItem({ label, value }: { label: string; value: string }) { {label} - {value} + + {value} + ); } @@ -316,6 +319,7 @@ function DetailInfoTable({ size="$bodyMdMedium" textAlign="right" numberOfLines={1} + fontVariant={TABULAR_NUMS} > {item.value} @@ -326,6 +330,7 @@ function DetailInfoTable({ numberOfLines={1} ellipsizeMode="tail" textAlign="right" + fontVariant={TABULAR_NUMS} > {item.secondaryValue} diff --git a/packages/kit/src/views/Perp/components/OrderBook/AnimatedDepthBlock.tsx b/packages/kit/src/views/Perp/components/OrderBook/AnimatedDepthBlock.tsx index d044b5b94bac..f3dd9f0d3ecb 100644 --- a/packages/kit/src/views/Perp/components/OrderBook/AnimatedDepthBlock.tsx +++ b/packages/kit/src/views/Perp/components/OrderBook/AnimatedDepthBlock.tsx @@ -3,6 +3,8 @@ import { useMemo } from 'react'; import { Pressable, StyleSheet, Text, View } from 'react-native'; import { useReducedMotion } from 'react-native-reanimated'; +import { TABULAR_NUMS } from '@onekeyhq/components'; + import { ORDER_BOOK_DEPTH_WIDTH_TRANSITION_MS, ORDER_BOOK_SIDE_RATIO_TRANSITION_MS, @@ -181,6 +183,7 @@ export function DepthBarColumn({ fontSize: priceFontSize, flexShrink: 1, paddingRight: 4, + fontVariant: TABULAR_NUMS, }} > {priceText} @@ -192,6 +195,7 @@ export function DepthBarColumn({ fontSize: sizeFontSize, flexShrink: 1, textAlign: 'right', + fontVariant: TABULAR_NUMS, }} > {sizeText} diff --git a/packages/kit/src/views/Perp/components/OrderBook/DefaultLoadingNode.tsx b/packages/kit/src/views/Perp/components/OrderBook/DefaultLoadingNode.tsx index 846e636035aa..29cb826a1512 100644 --- a/packages/kit/src/views/Perp/components/OrderBook/DefaultLoadingNode.tsx +++ b/packages/kit/src/views/Perp/components/OrderBook/DefaultLoadingNode.tsx @@ -4,6 +4,7 @@ import { SizableText, Spinner, Stack, + TABULAR_NUMS, XStack, YStack, } from '@onekeyhq/components'; @@ -36,7 +37,7 @@ function MobileVerticalEmptyRow({ fontSize={11} lineHeight={14} fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color={priceColor} > -- @@ -45,7 +46,7 @@ function MobileVerticalEmptyRow({ fontSize={11} lineHeight={14} fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color="$textSubdued" > -- @@ -62,7 +63,7 @@ function MobileHorizontalEmptyRow() { fontSize={12} lineHeight={16} fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color="$textSubdued" > -- @@ -71,7 +72,7 @@ function MobileHorizontalEmptyRow() { fontSize={12} lineHeight={16} fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color="$bgAccent" > -- @@ -82,7 +83,7 @@ function MobileHorizontalEmptyRow() { fontSize={12} lineHeight={16} fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color="$bgCriticalStrong" > -- @@ -91,7 +92,7 @@ function MobileHorizontalEmptyRow() { fontSize={12} lineHeight={16} fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color="$textSubdued" > -- @@ -204,7 +205,7 @@ export function DefaultLoadingNode({ lineHeight={24} fontWeight="600" fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color="$text" > {midPriceDisplay} @@ -213,7 +214,7 @@ export function DefaultLoadingNode({ fontSize={10} lineHeight={14} fontFamily="$monoRegular" - fontVariant={['tabular-nums']} + fontVariant={TABULAR_NUMS} color="$textSubdued" > -- diff --git a/packages/kit/src/views/Perp/components/OrderBook/defaultAggregationBtn.tsx b/packages/kit/src/views/Perp/components/OrderBook/defaultAggregationBtn.tsx index 58b723a75f20..883ee78ff547 100644 --- a/packages/kit/src/views/Perp/components/OrderBook/defaultAggregationBtn.tsx +++ b/packages/kit/src/views/Perp/components/OrderBook/defaultAggregationBtn.tsx @@ -1,5 +1,7 @@ import { StyleSheet, Text, TouchableOpacity } from 'react-native'; +import { TABULAR_NUMS } from '@onekeyhq/components'; + import type { IAggregationBtn } from './types'; const styles = StyleSheet.create({ @@ -21,6 +23,7 @@ const styles = StyleSheet.create({ color: 'rgba(255,255,255,0.4)', fontSize: 11, fontWeight: '600', + fontVariant: TABULAR_NUMS, }, btnLabelSelected: { color: 'rgba(255,255,255,0.7)', diff --git a/packages/kit/src/views/Perp/components/OrderBook/index.tsx b/packages/kit/src/views/Perp/components/OrderBook/index.tsx index 72ed6ccffce4..c188922dcc9a 100644 --- a/packages/kit/src/views/Perp/components/OrderBook/index.tsx +++ b/packages/kit/src/views/Perp/components/OrderBook/index.tsx @@ -330,6 +330,13 @@ const styles = StyleSheet.create({ fontSize: 12, lineHeight: 16, }, + // `bodySm` also carries plain labels (the "Spread" caption), which stay + // proportional; numeric spread / tick-size values opt in via this variant. + bodySmTabular: { + fontSize: 12, + lineHeight: 16, + fontVariant: TABULAR_NUMS, + }, bodySmMedium: { fontSize: 12, lineHeight: 16, @@ -944,7 +951,10 @@ export function OrderBook({ {selectedTickOption?.label ? new BigNumber(selectedTickOption.label).toFixed( @@ -1242,7 +1252,10 @@ export function OrderBook({ {selectedTickOption?.label ? new BigNumber(selectedTickOption.label).toFixed( @@ -1259,7 +1272,9 @@ export function OrderBook({ )} /> ) : null} - + {spreadPercentage} @@ -1480,12 +1495,12 @@ export function OrderPairBook({ })} {midPrice} {spreadPercentage} @@ -2118,7 +2133,7 @@ export function OrderBookMobile({ numberOfLines={1} ellipsizeMode="tail" style={[ - styles.bodySm, + styles.bodySmTabular, { color: textColor.text, fontSize: 11, diff --git a/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/AccountRow.tsx b/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/AccountRow.tsx index 1be182723cd6..81176f92b72b 100644 --- a/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/AccountRow.tsx +++ b/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/AccountRow.tsx @@ -14,6 +14,8 @@ import type { IUserNonFundingLedgerUpdate } from '@onekeyhq/shared/types/hyperli import { calcCellAlign, getColumnStyle } from '../utils'; +import { PerpTableCellText } from './PerpTableCellText'; + import type { IColumnConfig } from '../List/CommonTableListView'; import type { IntlShape } from 'react-intl'; @@ -375,18 +377,18 @@ const AccountRow = memo( {typeConfig.text} - + {signPrefix} {numberFormat(totalAmount, balanceFormatter)} - + {statusInfo.text} - + {dateInfo.date} {dateInfo.time} - + @@ -412,17 +414,21 @@ const AccountRow = memo( justifyContent="center" alignItems={calcCellAlign(columnConfigs[0].align)} > - + {dateInfo.date} - - + {dateInfo.time} - + {/* Status */} @@ -458,7 +464,7 @@ const AccountRow = memo( justifyContent={calcCellAlign(columnConfigs[3].align)} alignItems="center" > - {signPrefix} {numberFormat(amount, balanceFormatter)} - + {/* Fee */} @@ -475,7 +481,7 @@ const AccountRow = memo( justifyContent={calcCellAlign(columnConfigs[4].align)} alignItems="center" > - + ); diff --git a/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/BalanceRow.tsx b/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/BalanceRow.tsx index 047ec29cfe60..85c5cbadc1be 100644 --- a/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/BalanceRow.tsx +++ b/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/BalanceRow.tsx @@ -27,6 +27,8 @@ import { getColumnStyle, } from '../utils'; +import { PerpTableCellText } from './PerpTableCellText'; + import type { IColumnConfig } from '../List/CommonTableListView'; import type { IBalanceDisplayItem } from '../List/SpotBalanceList'; @@ -209,9 +211,13 @@ function BalanceRowMobile({ item, onChangeAsset }: IBalanceRowProps) { /> ) : null} - + {balanceText} - + @@ -226,14 +232,14 @@ function BalanceRowMobile({ item, onChangeAsset }: IBalanceRowProps) { {pnlText ? ( - {pnlText} - + {canShare ? ( - + {cell.cellValue} - + {canShare ? ( {cell.cellValue} - + ); }; diff --git a/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/MobileTwapOpenOrdersRow.tsx b/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/MobileTwapOpenOrdersRow.tsx index 0f6a189dd7c9..8411a73ddc30 100644 --- a/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/MobileTwapOpenOrdersRow.tsx +++ b/packages/kit/src/views/Perp/components/OrderInfoPanel/Components/MobileTwapOpenOrdersRow.tsx @@ -22,6 +22,8 @@ import { getValidPriceDecimals } from '@onekeyhq/shared/src/utils/perpsUtils'; import { PerpTestIDs } from '../../../testIDs'; import { getOrderAssetDisplayName } from '../utils'; +import { PerpTableCellText } from './PerpTableCellText'; + const balanceFormatter: INumberFormatProps = { formatter: 'balance', }; @@ -66,7 +68,7 @@ function MobileTwapInfoRow({ label, value }: { label: string; value: string }) { return ( {label} - {value} - + ); } @@ -201,14 +203,14 @@ const MobileTwapOpenOrdersRow = memo( id: ETranslations.perp_twap_order__title, })} / ${sideText}`} - {dateInfo.date} {dateInfo.time} - +