@ledgerhq/lumen-ui-rnative 0.1.28 → 0.1.30

package/src/lib/Components/ListItem/ListItem.stories.tsx

@@ -1,4 +1,4 @@
-import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { Settings, ChevronRight, Wallet } from '../../Symbols';
@@ -102,7 +102,7 @@ export const DensityShowcase: Story = {
     <Box lx={{ flexDirection: 'column', maxWidth: 's320', gap: 's8' }}>
       <ListItem density='compact' onPress={() => {}}>
         <ListItemLeading>
-          <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='24px' />
+          <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />
           <ListItemContent>
             <ListItemTitle>Compact with icon</ListItemTitle>
           </ListItemContent>
@@ -126,7 +126,7 @@ export const DensityShowcase: Story = {
 
       <ListItem density='expanded' onPress={() => {}}>
         <ListItemLeading>
-          <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='48px' />
+          <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />
           <ListItemContent>
             <ListItemTitle>Expanded with icon</ListItemTitle>
             <ListItemDescription>Additional information</ListItemDescription>

package/src/lib/Components/MediaButton/MediaButton.stories.tsx

@@ -1,4 +1,4 @@
-import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { Settings, Star } from '../../Symbols';
 import { Box } from '../Utility';
@@ -66,7 +66,7 @@ export const IconTypeShowcase: Story = {
           Flat icon (md)
         </MediaButton>
         <MediaButton
-          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
+          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />}
           iconType='rounded'
           appearance='gray'
         >
@@ -84,7 +84,7 @@ export const IconTypeShowcase: Story = {
           Flat icon (sm)
         </MediaButton>
         <MediaButton
-          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='24px' />}
+          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />}
           iconType='rounded'
           appearance='gray'
           size='sm'
@@ -119,7 +119,7 @@ export const AppearanceShowcase: Story = {
             </MediaButton>
             <MediaButton
               appearance={appearance}
-              icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />}
+              icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />}
               iconType='rounded'
             >
               {appearance}

package/src/lib/Components/MediaCard/MediaCard.stories.tsx

@@ -1,4 +1,4 @@
-import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { Button } from '../Button';
@@ -121,7 +121,7 @@ export const CompositionShowcase: Story = {
       </MediaCard>
 
       <MediaCard {...baseArgs}>
-        <CryptoIcon ledgerId='bitcoin' ticker='BTC' size='32px' />
+        <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={32} />
         <MediaCardTitle>With crypto icon</MediaCardTitle>
       </MediaCard>
     </Box>
@@ -143,7 +143,7 @@ export const CompositionShowcase: Story = {
 
 {/* With crypto icon */}
 <MediaCard imageUrl="/promo.jpg" onPress={() => {}} onClose={() => {}}>
-  <CryptoIcon ledgerId="bitcoin" ticker="BTC" size="32px" />
+  <CryptoIcon ledgerId="bitcoin" ticker="BTC" size={32} />
   <MediaCardTitle>With crypto icon</MediaCardTitle>
 </MediaCard>`,
       },

package/src/lib/Components/MediaImage/MediaImage.mdx

@@ -14,7 +14,7 @@ import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/Com
 
 ## Introduction
 
-MediaImage displays an image with consistent sizing and shape. When the image fails to load or no source is provided, a background placeholder is shown automatically. This React Native implementation ensures consistent behavior across mobile platforms.
+MediaImage displays an image with consistent sizing and shape. When the image fails to load or no source is provided, it falls back to a single-letter initial (via `fallback`) or a muted background placeholder. While data is loading, a `loading` prop triggers a pulsing skeleton overlay. This React Native implementation ensures consistent behavior across mobile platforms.
 
 > View in [Figma](https://www.figma.com/design/zSkvGGiqcnhywp2l3HTHxA/1.-Symbol-Library?node-id=6159-1866).
 
@@ -22,9 +22,11 @@ MediaImage displays an image with consistent sizing and shape. When the image fa
 
 <Canvas of={MediaImageStories.Base} />
 
-- **Container**: Sized wrapper with rounded corners and overflow clipping
+- **Container**: Sized wrapper with rounded corners, overflow clipping, and a subtle 1px inset outline
 - **Image**: Fills the container using React Native's `Image` component
-- **Fallback**: Background placeholder shown on missing or broken source
+- **Fallback letter**: Single uppercased character shown when `fallback` is set and no image is available
+- **Fallback placeholder**: Muted background shown when neither a valid image nor `fallback` is available
+- **Loading skeleton**: Pulsing overlay shown while `loading` is `true`, regardless of `src`
 
 ## Properties
 
@@ -35,7 +37,7 @@ MediaImage displays an image with consistent sizing and shape. When the image fa
 
 ### Sizes
 
-Eight sizes are available (12, 16, 20, 24, 32, 40, 48, 56). Border radius scales with size.
+Nine sizes are available (12, 16, 20, 24, 32, 40, 48, 56, 64). Border radius scales with size.
 
 <Canvas of={MediaImageStories.SizeShowcase} />
 
@@ -46,10 +48,25 @@ Eight sizes are available (12, 16, 20, 24, 32, 40, 48, 56). Border radius scales
 - **square** (default): Rounded corners that scale with size
 - **circle**: Fully rounded
 
+### Fallback
+
+When no `src` is provided or the image fails to load, the component degrades gracefully:
+
+- If `fallback` is set, the first character is displayed uppercased at a size-appropriate font size.
+- If `fallback` is not set, a muted background placeholder is shown.
+
+<Canvas of={MediaImageStories.FallbackShowcase} />
+
+### Loading state
+
+When `loading` is `true`, a pulsing skeleton overlay (using the `Pulse` animation component) covers the entire component regardless of whether a `src` is provided.
+
+<Canvas of={MediaImageStories.LoadingShowcase} />
+
 ## Accessibility
 
 - The root element uses `accessibilityRole="image"` with `accessibilityLabel` derived from `alt`.
-- The inner `Image` is marked `accessible={false}` to avoid duplicate announcements.
+- The inner `Image` and fallback elements are marked `accessible={false}` to avoid duplicate announcements.
 - Always provide a meaningful `alt` prop so screen readers can announce the image.
 
 </Tab>
@@ -75,6 +92,22 @@ function MyComponent() {
 <MediaImage src='https://example.com/icon.png' alt='Ethereum' size={48} shape='circle' />
 ```
 
+### With Fallback Letter
+
+When no `src` is available or the image fails to load, pass a `fallback` string to show its first letter as a placeholder:
+
+```tsx
+<MediaImage fallback='Bitcoin' alt='Bitcoin' size={48} />
+```
+
+### Loading State
+
+Show a pulsing skeleton while image data is being fetched:
+
+```tsx
+<MediaImage loading alt='Loading…' size={48} />
+```
+
 ### Custom Styling
 
 Use the `lx` prop for token-based layout adjustments:

package/src/lib/Components/MediaImage/MediaImage.stories.tsx

@@ -54,3 +54,35 @@ export const ShapeShowcase: Story = {
     </Box>
   ),
 };
+
+export const FallbackShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's16' }}>
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={12} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={16} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={20} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={24} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={32} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={40} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={48} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={56} />
+      <MediaImage fallback='Bitcoin' alt='Bitcoin' size={64} />
+    </Box>
+  ),
+};
+
+export const LoadingShowcase: Story = {
+  render: () => (
+    <Box lx={{ flexDirection: 'row', alignItems: 'flex-end', gap: 's16' }}>
+      <MediaImage loading alt='Loading' size={12} />
+      <MediaImage loading alt='Loading' size={16} />
+      <MediaImage loading alt='Loading' size={20} />
+      <MediaImage loading alt='Loading' size={24} />
+      <MediaImage loading alt='Loading' size={32} />
+      <MediaImage loading alt='Loading' size={40} />
+      <MediaImage loading alt='Loading' size={48} />
+      <MediaImage loading alt='Loading' size={56} />
+      <MediaImage loading alt='Loading' size={64} />
+    </Box>
+  ),
+};

package/src/lib/Components/MediaImage/MediaImage.test.tsx

@@ -46,6 +46,41 @@ describe('MediaImage Component', () => {
     expect(queryByTestId('media-image-img')).toBeNull();
   });
 
+  it('should render single-letter fallback (uppercased) when fallback is provided and src is missing', () => {
+    const { queryByTestId, getByText } = render(
+      <TestWrapper>
+        <MediaImage fallback='bitcoin' alt='BTC' />
+      </TestWrapper>,
+    );
+
+    expect(queryByTestId('media-image-img')).toBeNull();
+    expect(getByText('B')).toBeTruthy();
+  });
+
+  it('should render single-letter fallback when fallback is provided and src is empty string', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <MediaImage src='' fallback='ethereum' alt='ETH' />
+      </TestWrapper>,
+    );
+
+    expect(getByText('E')).toBeTruthy();
+  });
+
+  it('should size the fallback letter according to the size prop', () => {
+    const { getByText } = render(
+      <TestWrapper>
+        <MediaImage fallback='cardano' alt='ADA' size={32} />
+      </TestWrapper>,
+    );
+
+    const fallback = getByText('C');
+    const flatStyle = Array.isArray(fallback.props.style)
+      ? Object.assign({}, ...fallback.props.style)
+      : fallback.props.style;
+    expect(flatStyle.fontSize).toBe(16);
+  });
+
   it('should render fallback when image fails to load', async () => {
     const { getByTestId, queryByTestId, rerender } = render(
       <TestWrapper>
@@ -67,6 +102,36 @@ describe('MediaImage Component', () => {
     });
   });
 
+  it('should render single-letter fallback when image fails to load and fallback is provided', async () => {
+    const { getByTestId, queryByTestId, queryByText, rerender } = render(
+      <TestWrapper>
+        <MediaImage
+          src='https://broken-link.com/404.png'
+          fallback='solana'
+          alt='SOL'
+        />
+      </TestWrapper>,
+    );
+
+    const img = getByTestId('media-image-img');
+    img.props.onError();
+
+    rerender(
+      <TestWrapper>
+        <MediaImage
+          src='https://broken-link.com/404.png'
+          fallback='solana'
+          alt='SOL'
+        />
+      </TestWrapper>,
+    );
+
+    await waitFor(() => {
+      expect(queryByTestId('media-image-img')).toBeNull();
+      expect(queryByText('S')).toBeTruthy();
+    });
+  });
+
   it('should reset error state when src changes', async () => {
     const { getByTestId, rerender } = render(
       <TestWrapper>
@@ -176,4 +241,47 @@ describe('MediaImage Component', () => {
 
     expect(getByTestId('custom-id')).toBeTruthy();
   });
+
+  describe('loading state', () => {
+    it('should render the skeleton overlay when loading is true', () => {
+      const { getByTestId } = render(
+        <TestWrapper>
+          <MediaImage src={validSrc} alt='Test' loading />
+        </TestWrapper>,
+      );
+
+      expect(getByTestId('skeleton')).toBeTruthy();
+    });
+
+    it('should hide the image when loading is true even if src is valid', () => {
+      const { queryByTestId } = render(
+        <TestWrapper>
+          <MediaImage src={validSrc} alt='Test' loading />
+        </TestWrapper>,
+      );
+
+      expect(queryByTestId('media-image-img')).toBeNull();
+    });
+
+    it('should hide the fallback letter when loading is true', () => {
+      const { queryByText, getByTestId } = render(
+        <TestWrapper>
+          <MediaImage fallback='bitcoin' alt='BTC' loading />
+        </TestWrapper>,
+      );
+
+      expect(queryByText('B')).toBeNull();
+      expect(getByTestId('skeleton')).toBeTruthy();
+    });
+
+    it('should not render the skeleton when loading is false (default)', () => {
+      const { queryByTestId } = render(
+        <TestWrapper>
+          <MediaImage src={validSrc} alt='Test' />
+        </TestWrapper>,
+      );
+
+      expect(queryByTestId('skeleton')).toBeNull();
+    });
+  });
 });

package/src/lib/Components/MediaImage/MediaImage.tsx

@@ -2,7 +2,8 @@ import { useEffect, useState } from 'react';
 import { Image, StyleSheet } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import type { LumenStyleSheetTheme } from '../../../styles';
-import { Box } from '../Utility';
+import { Skeleton } from '../Skeleton';
+import { Box, Text } from '../Utility';
 import type { MediaImageProps, MediaImageSize, MediaImageShape } from './types';
 
 type BorderRadiusKey = keyof LumenStyleSheetTheme['borderRadius'];
@@ -19,6 +20,18 @@ const borderRadiusMap: Record<MediaImageSize, BorderRadiusKey> = {
   64: 'lg',
 };
 
+export const fontSizeMap: Record<MediaImageSize, number> = {
+  12: 10,
+  16: 10,
+  20: 12,
+  24: 14,
+  32: 16,
+  40: 18,
+  48: 24,
+  56: 24,
+  64: 24,
+};
+
 const useStyles = ({
   size,
   shape,
@@ -43,6 +56,10 @@ const useStyles = ({
           alignItems: 'center',
           justifyContent: 'center',
           backgroundColor: t.colors.bg.muted,
+          outlineColor: t.colors.border.icon,
+          outlineWidth: 1,
+          outlineOffset: -1,
+          outlineStyle: 'solid',
         },
         image: {
           width: '100%',
@@ -58,18 +75,25 @@ const useStyles = ({
  * A generic media image component that displays an image with optional shape variants.
  * Supports square and circular appearances with consistent sizing.
  *
- * When the image fails to load or no src is provided, displays a background placeholder.
+ * When the image fails to load or no src is provided, displays a fallback letter (if `fallback`
+ * is provided) or a muted background placeholder.
+ *
+ * While `loading` is true, a pulsing skeleton overlay is shown regardless of `src`.
  *
  * @example
  * import { MediaImage } from '@ledgerhq/lumen-ui-rnative';
  *
  * <MediaImage src="https://example.com/icon.png" alt="Bitcoin" size={32} />
+ * <MediaImage fallback="Bitcoin" size={32} />
+ * <MediaImage loading size={32} />
  */
 export const MediaImage = ({
   src,
   alt,
   size = 48,
   shape = 'square',
+  fallback,
+  loading = false,
   lx = {},
   style,
   ref,
@@ -92,7 +116,17 @@ export const MediaImage = ({
       accessibilityLabel={alt}
       {...props}
     >
-      {!shouldFallback && (
+      {loading && <Skeleton style={StyleSheet.absoluteFillObject} />}
+      {!loading && shouldFallback && fallback && (
+        <Text
+          style={{ fontSize: fontSizeMap[size] }}
+          lx={{ color: 'base' }}
+          accessible={false}
+        >
+          {fallback[0]?.toUpperCase()}
+        </Text>
+      )}
+      {!loading && !shouldFallback && (
         <Image
           source={{ uri: src }}
           style={styles.image}

package/src/lib/Components/MediaImage/types.ts

@@ -24,4 +24,16 @@ export type MediaImageProps = {
    * Alternative text for the image, used for accessibility.
    */
   alt?: string;
+  /**
+   * Text used to derive a single-letter fallback when no `src` is provided or the image fails to load.
+   * The first character is displayed, uppercased.
+   * @optional
+   */
+  fallback?: string;
+  /**
+   * When true, displays a pulsing skeleton placeholder instead of the image or fallback.
+   * @optional
+   * @default false
+   */
+  loading?: boolean;
 } & Omit<StyledViewProps, 'children'>;

package/src/lib/Components/NavBar/NavBar.mdx

@@ -1,5 +1,4 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
-import { CryptoIcon } from '@ledgerhq/crypto-icons';
 import { Box } from '../Utility';
 import * as NavBarStories from './NavBar.stories';
 import { NavBar, NavBarBackButton, NavBarContent } from './NavBar';

package/src/lib/Components/NavBar/NavBar.stories.tsx

@@ -1,4 +1,4 @@
-import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { MoreHorizontal, Settings } from '../../Symbols';
 import { IconButton } from '../IconButton';
@@ -111,7 +111,7 @@ export const WithCoinCapsule: Story = {
       <NavBarContent>
         <NavBarCoinCapsule
           ticker='BTC'
-          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size='24px' />}
+          icon={<CryptoIcon ledgerId='bitcoin' ticker='BTC' size={24} />}
         />
       </NavBarContent>
       <NavBarTrailing>

package/src/lib/Components/OptionList/OptionList.stories.tsx

@@ -1,4 +1,4 @@
-import { CryptoIcon } from '@ledgerhq/crypto-icons';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
 import type { Meta, StoryObj } from '@storybook/react-native-web-vite';
 import { useState } from 'react';
 import { Settings } from '../../Symbols';
@@ -132,9 +132,9 @@ export const Base: Story = {
                     <OptionListItem value={item.value}>
                       <OptionListItemLeading>
                         <CryptoIcon
-                          ledgerId={item.meta?.ledgerId ?? ''}
+                          ledgerId={(item.meta?.ledgerId as string) ?? ''}
                           ticker={ticker}
-                          size='32px'
+                          size={32}
                         />
                       </OptionListItemLeading>
                       <OptionListItemContent>
@@ -277,7 +277,7 @@ export const WithContentRow: Story = {
                         <CryptoIcon
                           ledgerId={meta.ledgerId}
                           ticker={meta.ticker}
-                          size='32px'
+                          size={32}
                         />
                       </OptionListItemLeading>
                       <OptionListItemContent>
@@ -453,7 +453,7 @@ export const GroupedWithContentRow: Story = {
                         <CryptoIcon
                           ledgerId={meta.ledgerId}
                           ticker={meta.ticker}
-                          size='32px'
+                          size={32}
                         />
                       </OptionListItemLeading>
                       <OptionListItemContent>
@@ -623,9 +623,9 @@ export const TriggerShowcase: Story = {
           icon={
             selectedCrypto?.meta ? (
               <CryptoIcon
-                ledgerId={selectedCrypto.meta.ledgerId}
-                ticker={selectedCrypto.meta.ticker}
-                size='32px'
+                ledgerId={selectedCrypto.meta.ledgerId as string}
+                ticker={selectedCrypto.meta.ticker as string}
+                size={32}
               />
             ) : undefined
           }
@@ -688,9 +688,9 @@ export const TriggerShowcase: Story = {
                     <OptionListItem value={item.value}>
                       <OptionListItemLeading>
                         <CryptoIcon
-                          ledgerId={item.meta?.ledgerId ?? ''}
+                          ledgerId={(item.meta?.ledgerId as string) ?? ''}
                           ticker={ticker}
-                          size='32px'
+                          size={32}
                         />
                       </OptionListItemLeading>
                       <OptionListItemContent>
@@ -736,7 +736,7 @@ export const WithDefaultValue: Story = {
                   <CryptoIcon
                     ledgerId={meta.ledgerId}
                     ticker={meta.ticker}
-                    size='32px'
+                    size={32}
                   />
                 </OptionListItemLeading>
                 <OptionListItemContent>