react-native: AvatarAccount use explicit size->px mapping to avoid Number(size) NaN after size tokens change

cursoragent · cursoragent · commit f1f129a6fed6 · 2026-03-27T20:01:43.000Z
diff --git a/packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.constants.ts b/packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.constants.ts
@@ -1,3 +1,5 @@
+import { AvatarAccountSize } from '../../types';
+
 // Sample account addresses
 export const SAMPLE_AVATARACCOUNT_ADDRESSES = [
   '0x9Cbf7c41B7787F6c621115010D3B044029FE2Ce8',
@@ -13,3 +15,13 @@ export const SAMPLE_AVATARACCOUNT_ADDRESSES = [
   '0xEC5CE72f2e18B0017C88F7B12d3308119C5Cf129',
   '0xeC56Da21c90Af6b50E4Ba5ec252bD97e735290fc',
 ];
+
+// Map AvatarAccount size token to numeric pixel dimension
+export const MAP_AVATARACCOUNT_SIZE_SIZENUMBER: Record<AvatarAccountSize, number> =
+  {
+    [AvatarAccountSize.Xs]: 16,
+    [AvatarAccountSize.Sm]: 24,
+    [AvatarAccountSize.Md]: 32,
+    [AvatarAccountSize.Lg]: 40,
+    [AvatarAccountSize.Xl]: 48,
+  };
diff --git a/packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.test.tsx b/packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.test.tsx
@@ -4,7 +4,10 @@ import React from 'react';
 import { AvatarAccountSize, AvatarAccountVariant } from '../../types';
 
 import { AvatarAccount } from './AvatarAccount';
-import { SAMPLE_AVATARACCOUNT_ADDRESSES } from './AvatarAccount.constants';
+import {
+  SAMPLE_AVATARACCOUNT_ADDRESSES,
+  MAP_AVATARACCOUNT_SIZE_SIZENUMBER,
+} from './AvatarAccount.constants';
 
 jest.mock('react-native-svg', () => {
   // eslint-disable-next-line @typescript-eslint/no-require-imports
@@ -69,10 +72,10 @@ describe('AvatarAccount', () => {
     const avatarAccount = getByTestId('avatar-account');
     expect(avatarAccount).toBeDefined();
     expect(avatarAccount.props.style[0].width).toStrictEqual(
-      Number(AvatarAccountSize.Md),
+      MAP_AVATARACCOUNT_SIZE_SIZENUMBER[AvatarAccountSize.Md],
     );
     expect(avatarAccount.props.style[0].height).toStrictEqual(
-      Number(AvatarAccountSize.Md),
+      MAP_AVATARACCOUNT_SIZE_SIZENUMBER[AvatarAccountSize.Md],
     );
   });
 
@@ -92,10 +95,10 @@ describe('AvatarAccount', () => {
     const avatarAccount = getByTestId('avatar-account');
     expect(avatarAccount).toBeDefined();
     expect(avatarAccount.props.style[0].width).toStrictEqual(
-      Number(AvatarAccountSize.Xl),
+      MAP_AVATARACCOUNT_SIZE_SIZENUMBER[AvatarAccountSize.Xl],
     );
     expect(avatarAccount.props.style[0].height).toStrictEqual(
-      Number(AvatarAccountSize.Xl),
+      MAP_AVATARACCOUNT_SIZE_SIZENUMBER[AvatarAccountSize.Xl],
     );
   });
 
diff --git a/packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.tsx b/packages/design-system-react-native/src/components/AvatarAccount/AvatarAccount.tsx
@@ -11,6 +11,7 @@ import { Jazzicon } from '../temp-components/Jazzicon';
 import { Maskicon } from '../temp-components/Maskicon';
 
 import type { AvatarAccountProps } from './AvatarAccount.types';
+import { MAP_AVATARACCOUNT_SIZE_SIZENUMBER } from './AvatarAccount.constants';
 
 export const AvatarAccount = ({
   address,
@@ -22,22 +23,23 @@ export const AvatarAccount = ({
   ...props
 }: AvatarAccountProps) => {
   let AvatarArtComponent;
+  const pixelSize = MAP_AVATARACCOUNT_SIZE_SIZENUMBER[size];
 
   switch (variant) {
     case AvatarAccountVariant.Blockies:
       AvatarArtComponent = (
-        <Blockies address={address} size={Number(size)} {...blockiesProps} />
+        <Blockies address={address} size={pixelSize} {...blockiesProps} />
       );
       break;
     case AvatarAccountVariant.Maskicon:
       AvatarArtComponent = (
-        <Maskicon address={address} size={Number(size)} {...maskiconProps} />
+        <Maskicon address={address} size={pixelSize} {...maskiconProps} />
       );
       break;
     case AvatarAccountVariant.Jazzicon:
     default:
       AvatarArtComponent = (
-        <Jazzicon address={address} size={Number(size)} {...jazziconProps} />
+        <Jazzicon address={address} size={pixelSize} {...jazziconProps} />
       );
       break;
   }
