fix: render name labels with proportional figures, not tabular (OK-57876)

packages/components/src/content/Badge/index.tsx

@@ -98,19 +98,23 @@ 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<typeof BadgeTextStyled>) {
+// Badge.Text is styled from raw tamagui text, which BOTH bypasses the
+// SizableText wrapper's app-wide tabular default AND silently drops the
+// `fontVariant` prop. Translate it into a real style here so badge digits stay
+// equal-width by default (countdowns, rates, counts) while a caller can still
+// opt out — e.g. `fontVariant={PROPORTIONAL_NUMS}` on a badge holding a NAME.
+// On web the web-fonts.css body rule already supplies the default, so
+// getFontVariantStyle returns undefined there and the default is a passthrough.
+function BadgeText({
+  style,
+  fontVariant = TABULAR_NUMS,
+  ...props
+}: GetProps<typeof BadgeTextStyled>) {
   // 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 <BadgeTextStyled {...props} style={mergedStyle} />;
 }
 

packages/kit/src/components/AccountSelector/AccountSelectorTrigger/AccountSelectorTriggerBase.tsx

@@ -6,6 +6,7 @@ import {
   Button,
   DebugRenderTracker,
   Icon,
+  PROPORTIONAL_NUMS,
   SizableText,
   Stack,
   XStack,
@@ -156,6 +157,7 @@ export function AccountSelectorTriggerBase({
               numberOfLines={1}
               flexShrink={1}
               maxWidth="$40"
+              fontVariant={PROPORTIONAL_NUMS}
             >
               {showWalletName
                 ? `${walletName} / ${displayLabel}`
@@ -168,6 +170,7 @@ export function AccountSelectorTriggerBase({
                 color="$text"
                 numberOfLines={horizontalLayout ? undefined : 1}
                 flexShrink={1}
+                fontVariant={PROPORTIONAL_NUMS}
               >
                 {walletName}
               </SizableText>
@@ -176,6 +179,7 @@ export function AccountSelectorTriggerBase({
                 numberOfLines={horizontalLayout ? undefined : 1}
                 flexShrink={1}
                 testID="account-name"
+                fontVariant={PROPORTIONAL_NUMS}
               >
                 {displayLabel}
               </SizableText>

packages/kit/src/components/AccountSelector/AccountSelectorTrigger/AccountSelectorTriggerDApp.tsx

@@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
 import type { IXStackProps } from '@onekeyhq/components';
 import {
   Icon,
+  PROPORTIONAL_NUMS,
   SizableText,
   Skeleton,
   View,
@@ -75,15 +76,25 @@ const InterWalletAndAccountName = ({
   return (
     <XStack>
       <XStack maxWidth="$40">
-        <SizableText size="$bodyMd" color="$textSubdued" numberOfLines={1}>
+        <SizableText
+          size="$bodyMd"
+          color="$textSubdued"
+          numberOfLines={1}
+          fontVariant={PROPORTIONAL_NUMS}
+        >
           {walletName}
         </SizableText>
       </XStack>
       <SizableText size="$bodyMd" color="$textSubdued">
         /
       </SizableText>
       <XStack maxWidth="$40">
-        <SizableText size="$bodyMd" color="$textSubdued" numberOfLines={1}>
+        <SizableText
+          size="$bodyMd"
+          color="$textSubdued"
+          numberOfLines={1}
+          fontVariant={PROPORTIONAL_NUMS}
+        >
           {accountName}
         </SizableText>
       </XStack>
@@ -356,10 +367,19 @@ export function AccountSelectorTriggerBrowserSingle({ num }: { num: number }) {
       {media.gtMd ? (
         <>
           <View pl="$2" pr="$1" minWidth={0} maxWidth="$24">
-            <SizableText size="$bodySm" color="$textSubdued" numberOfLines={1}>
+            <SizableText
+              size="$bodySm"
+              color="$textSubdued"
+              numberOfLines={1}
+              fontVariant={PROPORTIONAL_NUMS}
+            >
               {wallet?.name}
             </SizableText>
-            <SizableText size="$bodyMdMedium" numberOfLines={1}>
+            <SizableText
+              size="$bodyMdMedium"
+              numberOfLines={1}
+              fontVariant={PROPORTIONAL_NUMS}
+            >
               {accountName}
             </SizableText>
           </View>

packages/kit/src/components/AddressInfo/index.tsx

@@ -1,6 +1,12 @@
 import { useIntl } from 'react-intl';
 
-import { Badge, Dialog, Stack, XStack } from '@onekeyhq/components';
+import {
+  Badge,
+  Dialog,
+  PROPORTIONAL_NUMS,
+  Stack,
+  XStack,
+} from '@onekeyhq/components';
 import type { IDBIndexedAccount } from '@onekeyhq/kit-bg/src/dbs/local/types';
 import { ETranslations } from '@onekeyhq/shared/src/locale/enum/translations';
 import { ERootRoutes, ETabRoutes } from '@onekeyhq/shared/src/routes';
@@ -162,7 +168,9 @@ function AddressInfo(props: IProps) {
 
     const badge = (
       <Badge badgeType="success" badgeSize="sm">
-        {addressQueryResult.walletAccountName}
+        <Badge.Text userSelect="none" fontVariant={PROPORTIONAL_NUMS}>
+          {addressQueryResult.walletAccountName}
+        </Badge.Text>
       </Badge>
     );
 

packages/kit/src/components/AddressInput/index.tsx

@@ -12,6 +12,7 @@ import {
   Form,
   Icon,
   IconButton,
+  PROPORTIONAL_NUMS,
   Select,
   SizableText,
   Spinner,
@@ -238,7 +239,7 @@ function AddressInputBadgeGroup(props: IAddressInputBadgeGroupProps) {
               {result.walletId ? (
                 <WalletAvatarById walletId={result.walletId} size="$4" />
               ) : null}
-              <Badge.Text numberOfLines={1}>
+              <Badge.Text numberOfLines={1} fontVariant={PROPORTIONAL_NUMS}>
                 {result.walletAccountName}
               </Badge.Text>
             </XStack>
@@ -248,7 +249,7 @@ function AddressInputBadgeGroup(props: IAddressInputBadgeGroupProps) {
           <Badge badgeType="success" badgeSize="sm" maxWidth="100%">
             <XStack gap="$1.5" alignItems="center" maxWidth="100%">
               <Icon name="BookOpenOutline" size="$4" color="$textSuccess" />
-              <Badge.Text numberOfLines={1}>
+              <Badge.Text numberOfLines={1} fontVariant={PROPORTIONAL_NUMS}>
                 {result.addressBookName}
               </Badge.Text>
             </XStack>

packages/kit/src/components/AddressList/AddressListItem.tsx

@@ -1,6 +1,13 @@
 import { useIntl } from 'react-intl';
 
-import { Badge, Icon, SizableText, XStack, YStack } from '@onekeyhq/components';
+import {
+  Badge,
+  Icon,
+  PROPORTIONAL_NUMS,
+  SizableText,
+  XStack,
+  YStack,
+} from '@onekeyhq/components';
 import { ETranslations } from '@onekeyhq/shared/src/locale';
 import { listItemPressStyle } from '@onekeyhq/shared/src/style';
 
@@ -55,7 +62,12 @@ function AddressListItem(props: IAddressListItemProps) {
         })}
     >
       {shouldDisplayAccount ? (
-        <SizableText size="$bodyMd" color="$textPrimary" numberOfLines={1}>
+        <SizableText
+          size="$bodyMd"
+          color="$textPrimary"
+          numberOfLines={1}
+          fontVariant={PROPORTIONAL_NUMS}
+        >
           {accountName}
         </SizableText>
       ) : null}

packages/kit/src/components/Hardware/DeviceInfoCard.tsx

@@ -1,5 +1,10 @@
 import type { IXStackProps } from '@onekeyhq/components';
-import { SizableText, XStack, YStack } from '@onekeyhq/components';
+import {
+  PROPORTIONAL_NUMS,
+  SizableText,
+  XStack,
+  YStack,
+} from '@onekeyhq/components';
 
 import { DeviceAvatar } from '../DeviceAvatar/DeviceAvatar';
 
@@ -36,7 +41,12 @@ export function DeviceInfoCard({
       <DeviceAvatar deviceType={deviceType} size="$7" />
       <YStack maxWidth="$28">
         {walletName ? (
-          <SizableText size="$bodySmMedium" color="$text" numberOfLines={1}>
+          <SizableText
+            size="$bodySmMedium"
+            color="$text"
+            numberOfLines={1}
+            fontVariant={PROPORTIONAL_NUMS}
+          >
             {walletName}
           </SizableText>
         ) : null}

packages/kit/src/components/ListItem/index.tsx

@@ -15,6 +15,7 @@ import {
   IconButton,
   Image,
   MatchSizeableText,
+  PROPORTIONAL_NUMS,
   SizableText,
   Spinner,
   Stack,
@@ -167,11 +168,17 @@ const ListItemText = (props: IListItemTextProps) => {
     if (isValidElement(primary)) {
       return primary;
     }
+    // A list item's primary text is a NAME (wallet, account, token, setting),
+    // not numeric data — so it opts out of the app-wide tabular default: the
+    // tabular `1` is much wider and gains a foot serif, which reads wrong in a
+    // name like "A1787". Numeric data lives in `secondary`, which stays
+    // tabular. Callers can still override via `primaryTextProps`.
     if (primaryMatch) {
       return (
         <MatchSizeableText
           textAlign={align}
           size="$bodyLgMedium"
+          fontVariant={PROPORTIONAL_NUMS}
           match={primaryMatch}
           {...primaryTextProps}
         >
@@ -180,7 +187,12 @@ const ListItemText = (props: IListItemTextProps) => {
       );
     }
     return (
-      <SizableText textAlign={align} size="$bodyLgMedium" {...primaryTextProps}>
+      <SizableText
+        textAlign={align}
+        size="$bodyLgMedium"
+        fontVariant={PROPORTIONAL_NUMS}
+        {...primaryTextProps}
+      >
         {primary}
       </SizableText>
     );

packages/kit/src/views/AccountManagerStacks/components/AccountEdit/AccountRenameButton.tsx

@@ -2,7 +2,13 @@ import { useCallback } from 'react';
 
 import { useIntl } from 'react-intl';
 
-import { ActionList, Icon, SizableText, XStack } from '@onekeyhq/components';
+import {
+  ActionList,
+  Icon,
+  PROPORTIONAL_NUMS,
+  SizableText,
+  XStack,
+} from '@onekeyhq/components';
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
 import { showRenameDialog } from '@onekeyhq/kit/src/components/RenameDialog';
 import type {
@@ -197,7 +203,11 @@ export function AccountRenameInlineButton({
       }}
       onPress={showAccountRenameDialog}
     >
-      <SizableText size="$bodyLgMedium" numberOfLines={1}>
+      <SizableText
+        size="$bodyLgMedium"
+        numberOfLines={1}
+        fontVariant={PROPORTIONAL_NUMS}
+      >
         {name}
       </SizableText>
       <Icon flexShrink={0} name="PencilSolid" size="$4" color="$iconSubdued" />

packages/kit/src/views/AccountManagerStacks/components/WalletRename/WalletRenameButton.tsx

@@ -2,7 +2,13 @@ import { type ComponentProps, useMemo } from 'react';
 
 import { useIntl } from 'react-intl';
 
-import { Badge, Icon, SizableText, XStack } from '@onekeyhq/components';
+import {
+  Badge,
+  Icon,
+  PROPORTIONAL_NUMS,
+  SizableText,
+  XStack,
+} from '@onekeyhq/components';
 import backgroundApiProxy from '@onekeyhq/kit/src/background/instance/backgroundApiProxy';
 import { showRenameDialog } from '@onekeyhq/kit/src/components/RenameDialog';
 import type { IDBWallet } from '@onekeyhq/kit-bg/src/dbs/local/types';
@@ -139,7 +145,12 @@ export function WalletRenameButton({
         })}
         {...rest}
       >
-        <SizableText size={textSize} pr="$1.5" numberOfLines={1}>
+        <SizableText
+          size={textSize}
+          pr="$1.5"
+          numberOfLines={1}
+          fontVariant={PROPORTIONAL_NUMS}
+        >
           {wallet?.name}
         </SizableText>
         {canRename ? (

packages/kit/src/views/AccountManagerStacks/pages/AccountSelectorStack/WalletDetails/AccountSelectorAccountListItem.tsx

@@ -3,6 +3,7 @@ import { useCallback, useMemo } from 'react';
 import type { IButtonProps } from '@onekeyhq/components';
 import {
   IconButton,
+  PROPORTIONAL_NUMS,
   SizableText,
   Stack,
   XStack,
@@ -389,7 +390,11 @@ export function AccountSelectorAccountListItem({
             overflow="hidden"
             pr="$8"
             primary={
-              <SizableText size="$bodyLg" numberOfLines={1}>
+              <SizableText
+                size="$bodyLg"
+                numberOfLines={1}
+                fontVariant={PROPORTIONAL_NUMS}
+              >
                 {item.name}
               </SizableText>
             }

packages/kit/src/views/AccountManagerStacks/pages/AccountSelectorStack/WalletList/WalletListItem.tsx

@@ -7,6 +7,7 @@ import { Pressable } from 'react-native';
 import type { IStackProps } from '@onekeyhq/components';
 import {
   Icon,
+  PROPORTIONAL_NUMS,
   SizableText,
   Stack,
   Tooltip,
@@ -110,6 +111,7 @@ function WalletListItemBaseView({
         size="$bodySm"
         color={selected ? '$text' : '$textSubdued'}
         textAlign="center"
+        fontVariant={PROPORTIONAL_NUMS}
       >
         {name}
       </SizableText>

packages/kit/src/views/DeviceManagement/pages/DeviceManagementListModal/index.tsx

@@ -9,6 +9,7 @@ import {
   Divider,
   Icon,
   ListView,
+  PROPORTIONAL_NUMS,
   Page,
   SizableText,
   Spinner,
@@ -249,6 +250,7 @@ function DeviceListItem({
               color="$text"
               numberOfLines={1}
               flexShrink={1}
+              fontVariant={PROPORTIONAL_NUMS}
             >
               {item.wallet.name}
             </SizableText>

packages/kit/src/views/Market/MarketHomeV2/components/CategoryFilterItem.tsx

@@ -3,6 +3,7 @@ import { memo, useMemo } from 'react';
 import {
   Icon,
   Image,
+  PROPORTIONAL_NUMS,
   SizableText,
   Stack,
   XStack,
@@ -79,6 +80,7 @@ export const CategoryFilterItem = memo(
             numberOfLines={1}
             color={isSelected ? '$text' : '$textSubdued'}
             size="$bodyMdMedium"
+            fontVariant={PROPORTIONAL_NUMS}
           >
             {name}
           </SizableText>