@ledgerhq/lumen-ui-rnative 0.0.69 → 0.0.71

package/src/lib/Components/AmountDisplay/AmountDisplay.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, Text } from 'react-native';
 import { useStyleSheet } from '../../../styles';
-import { ViewRef } from '../../types';
+import { Pulse } from '../../Animations/Pulse';
+import { Box } from '../Utility';
 import { AmountDisplayProps } from './types';
 
 const useStyles = () => {
@@ -71,39 +71,43 @@ const useStyles = () => {
  * <AmountDisplay value={1234.56} formatter={usdFormatter} hidden={true} />
  * ```
  */
-export const AmountDisplay = React.forwardRef<ViewRef, AmountDisplayProps>(
-  ({ value, formatter, hidden = false, style, ...props }, ref) => {
-    const styles = useStyles();
-    const parts = formatter(value);
+export const AmountDisplay = ({
+  value,
+  formatter,
+  hidden = false,
+  loading = false,
+  ...props
+}: AmountDisplayProps) => {
+  const styles = useStyles();
+  const parts = formatter(value);
 
-    return (
-      <View
-        ref={ref}
-        style={StyleSheet.flatten([styles.container, style])}
-        {...props}
-      >
-        {(parts.currencyPosition === undefined ||
-          parts.currencyPosition === 'start') && (
-          <Text style={[styles.currencyStartText, styles.spacingStart]}>
-            {parts.currencyText}
+  return (
+    <Box {...props}>
+      <Pulse animate={loading}>
+        <View style={styles.container}>
+          {(parts.currencyPosition === undefined ||
+            parts.currencyPosition === 'start') && (
+            <Text style={[styles.currencyStartText, styles.spacingStart]}>
+              {parts.currencyText}
+            </Text>
+          )}
+          <Text style={styles.integerText}>
+            {hidden ? '••••' : parts.integerPart}
           </Text>
-        )}
-        <Text style={styles.integerText}>
-          {hidden ? '••••' : parts.integerPart}
-        </Text>
-        {parts.decimalPart && !hidden && (
-          <Text style={styles.decimalText}>
-            {(parts.decimalSeparator || '.') + parts.decimalPart}
-          </Text>
-        )}
-        {parts.currencyPosition === 'end' && (
-          <Text style={[styles.currencyEndText, styles.spacingEnd]}>
-            {parts.currencyText}
-          </Text>
-        )}
-      </View>
-    );
-  },
-);
+          {parts.decimalPart && !hidden && (
+            <Text style={styles.decimalText}>
+              {(parts.decimalSeparator || '.') + parts.decimalPart}
+            </Text>
+          )}
+          {parts.currencyPosition === 'end' && (
+            <Text style={[styles.currencyEndText, styles.spacingEnd]}>
+              {parts.currencyText}
+            </Text>
+          )}
+        </View>
+      </Pulse>
+    </Box>
+  );
+};
 
 AmountDisplay.displayName = 'AmountDisplay';

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

@@ -1,4 +1,5 @@
 import { ViewProps } from 'react-native';
+import { StyledViewProps } from '../../../styles';
 
 export type FormattedValue = {
   /**
@@ -45,4 +46,9 @@ export type AmountDisplayProps = ViewProps & {
    * @default false
    */
   hidden?: boolean;
-};
+  /**
+   * When true, applies a pulse animation to indicate the amount is being fetched or updated.
+   * @default false
+   */
+  loading?: boolean;
+} & Omit<StyledViewProps, 'children'>;

package/src/lib/Components/CardButton/CardButton.tsx

@@ -67,7 +67,7 @@ const useStyles = ({
           gap: t.spacings.s4,
         },
         title: StyleSheet.flatten([
-          t.typographies.body1SemiBold,
+          t.typographies.body2SemiBold,
           {
             color: disabled ? t.colors.text.disabled : t.colors.text.base,
             minWidth: 0,
@@ -75,9 +75,9 @@ const useStyles = ({
           },
         ]),
         description: StyleSheet.flatten([
-          t.typographies.body2,
+          t.typographies.body3,
           {
-            color: disabled ? t.colors.text.disabled : t.colors.text.base,
+            color: disabled ? t.colors.text.disabled : t.colors.text.muted,
             minWidth: 0,
           },
         ]),

package/src/lib/Components/Spinner/Spinner.tsx

@@ -1,42 +1,10 @@
-import { memo, useEffect, useRef, ReactNode } from 'react';
-import { Animated, Easing } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 import { useCommonTranslation } from '../../../i18n';
 import { LumenTextStyle, useResolveTextStyle, useTheme } from '../../../styles';
-import { RuntimeConstants } from '../../utils';
+import { Spin } from '../../Animations/Spin';
 import { Box } from '../Utility';
 import { SpinnerProps } from './types';
 
-const SpinAnimation = memo(({ children }: { children: ReactNode }) => {
-  const spinValue = useRef(new Animated.Value(0)).current;
-
-  useEffect(() => {
-    const animation = Animated.loop(
-      Animated.timing(spinValue, {
-        toValue: 1,
-        duration: 1000,
-        easing: Easing.linear,
-        useNativeDriver: RuntimeConstants.isNative,
-      }),
-    );
-    animation.start();
-
-    return () => animation.stop();
-  }, [spinValue]);
-
-  const spin = spinValue.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg'],
-  });
-
-  return (
-    <Animated.View style={{ transform: [{ rotate: spin }] }}>
-      {children}
-    </Animated.View>
-  );
-});
-SpinAnimation.displayName = 'SpinAnimation';
-
 /**
  * A basic spinner component for loading states.
  *
@@ -66,7 +34,7 @@ export const Spinner = ({
 
   return (
     <Box ref={ref} lx={{ flexShrink: 0, ...lx }} {...props}>
-      <SpinAnimation>
+      <Spin>
         <Svg
           width={size}
           height={size}
@@ -81,7 +49,7 @@ export const Spinner = ({
             strokeLinecap='round'
           />
         </Svg>
-      </SpinAnimation>
+      </Spin>
     </Box>
   );
 };

package/src/lib/Components/TabBar/TabBar.tsx

@@ -15,6 +15,7 @@ import { Box, Pressable } from '../Utility';
 import { TabBarContextProvider, useTabBarContext } from './TabBarContext';
 import { TabBarItemProps, TabBarProps } from './types';
 
+export const TAB_BAR_HEIGHT = 56;
 const PILL_INSET = 4;
 
 /**
@@ -239,7 +240,7 @@ const useStyles = () =>
   useStyleSheet(
     (t) => ({
       container: {
-        height: t.sizes.s56,
+        height: TAB_BAR_HEIGHT,
         flexDirection: 'row',
         justifyContent: 'center',
         padding: t.spacings.s4,

package/src/lib/Components/TabBar/index.ts

@@ -1,2 +1,2 @@
-export { TabBar, TabBarItem } from './TabBar';
+export { TabBar, TabBarItem, TAB_BAR_HEIGHT } from './TabBar';
 export type { TabBarProps, TabBarItemProps } from './types';

package/src/lib/Components/TileButton/TileButton.tsx

@@ -1,5 +1,5 @@
 import { isTextChildren } from '@ledgerhq/lumen-utils-shared';
-import React, { FC, PropsWithChildren } from 'react';
+import { FC, PropsWithChildren } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useStyleSheet } from '../../../styles';
 import { IconSize } from '../Icon';
@@ -74,50 +74,41 @@ const useStyles = ({
  *   Settings
  * </TileButton>
  */
-export const TileButton = React.forwardRef<
-  React.ElementRef<typeof Pressable>,
-  TileButtonProps
->(
-  (
-    {
-      lx,
-      style,
-      icon: IconProp,
-      children,
-      disabled = false,
-      isFull = false,
-      numberOfLines = 2,
-      ...props
-    },
-    ref,
-  ) => {
-    const rootStyles = useRootStyles({ isFull });
+export const TileButton = ({
+  lx,
+  style,
+  icon: IconProp,
+  children,
+  disabled = false,
+  isFull = false,
+  numberOfLines = 2,
+  ...props
+}: TileButtonProps) => {
+  const rootStyles = useRootStyles({ isFull });
 
-    return (
-      <Pressable
-        ref={ref}
-        lx={lx}
-        style={StyleSheet.flatten([style, rootStyles.root])}
-        disabled={disabled}
-        accessibilityRole='button'
-        accessibilityState={{ disabled }}
-        {...props}
-      >
-        {({ pressed }) => (
-          <TileButtonContent
-            disabled={disabled}
-            pressed={pressed}
-            isFull={isFull}
-            IconProp={IconProp}
-            numberOfLines={numberOfLines}
-          >
-            {children}
-          </TileButtonContent>
-        )}
-      </Pressable>
-    );
-  },
-);
+  return (
+    <Pressable
+      lx={lx}
+      style={StyleSheet.flatten([style, rootStyles.root])}
+      disabled={disabled}
+      accessibilityRole='button'
+      accessibilityState={{ disabled }}
+      {...props}
+    >
+      {({ pressed }) => (
+        <TileButtonContent
+          disabled={disabled}
+          pressed={pressed}
+          isFull={isFull}
+          IconProp={IconProp}
+          numberOfLines={numberOfLines}
+        >
+          {children}
+        </TileButtonContent>
+      )}
+    </Pressable>
+  );
+};
 
 type TileButtonContentProps = PropsWithChildren<{
   disabled: boolean;

package/src/styles/types/factories.types.ts

@@ -1,4 +1,4 @@
-import { ComponentPropsWithRef } from 'react';
+import type { ComponentPropsWithRef } from 'react';
 import {
   PressableProps,
   PressableStateCallbackType,