@reown/appkit-ui-react-native 1.2.4 → 2.0.0

package/src/layout/wui-flex/index.tsx

@@ -24,6 +24,7 @@ export interface FlexViewProps {
   padding?: SpacingType | SpacingType[];
   margin?: SpacingType | SpacingType[];
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export function FlexView(props: FlexViewProps) {
@@ -46,7 +47,7 @@ export function FlexView(props: FlexViewProps) {
   };
 
   return (
-    <View onLayout={props.onLayout} style={[styles, props.style]}>
+    <View onLayout={props.onLayout} style={[styles, props.style]} testID={props.testID}>
       {props.children}
     </View>
   );

package/src/layout/wui-separator/index.tsx

@@ -2,31 +2,29 @@ import { type StyleProp, type ViewStyle, View } from 'react-native';
 import { Text } from '../../components/wui-text';
 import { FlexView } from '../../layout/wui-flex';
 import { useTheme } from '../../hooks/useTheme';
+import type { ColorType } from '../../utils/TypesUtil';
 import styles from './styles';
 
 export interface SeparatorProps {
   text?: string;
+  color?: ColorType;
   style?: StyleProp<ViewStyle>;
 }
 
-export function Separator({ text, style }: SeparatorProps) {
+export function Separator({ text, style, color = 'gray-glass-005' }: SeparatorProps) {
   const Theme = useTheme();
 
   if (!text) {
-    return <View style={[styles.single, { backgroundColor: Theme['gray-glass-005'] }, style]} />;
+    return <View style={[styles.single, { backgroundColor: Theme[color] }, style]} />;
   }
 
   return (
     <FlexView flexDirection="row" alignItems="center" style={style}>
-      <View
-        style={[styles.divider, styles.marginRight, { backgroundColor: Theme['gray-glass-005'] }]}
-      />
+      <View style={[styles.divider, styles.marginRight, { backgroundColor: Theme[color] }]} />
       <Text variant="small-500" color="fg-300">
         {text}
       </Text>
-      <View
-        style={[styles.divider, styles.marginLeft, { backgroundColor: Theme['gray-glass-005'] }]}
-      />
+      <View style={[styles.divider, styles.marginLeft, { backgroundColor: Theme[color] }]} />
     </FlexView>
   );
 }

package/src/utils/TypesUtil.ts

@@ -140,6 +140,7 @@ export type IconType =
   | 'arrowRight'
   | 'arrowTop'
   | 'browser'
+  | 'card'
   | 'checkmark'
   | 'chevronBottom'
   | 'chevronLeft'
@@ -153,6 +154,7 @@ export type IconType =
   | 'copy'
   | 'copySmall'
   | 'cursor'
+  | 'currencyDollar'
   | 'desktop'
   | 'disconnect'
   | 'discord'
@@ -178,6 +180,7 @@ export type IconType =
   | 'recycleHorizontal'
   | 'refresh'
   | 'search'
+  | 'settings'
   | 'swapHorizontal'
   | 'swapVertical'
   | 'telegram'

package/src/utils/UiUtil.ts

@@ -71,20 +71,18 @@ export const UiUtil = {
   },
 
   formatNumberToLocalString(value: string | number | undefined, decimals = 2) {
-    if (value === undefined) {
-      return '0.00';
-    }
+    let numericValue: number;
 
-    if (typeof value === 'number') {
-      return value.toLocaleString('en-US', {
-        maximumFractionDigits: decimals,
-        minimumFractionDigits: decimals
-      });
+    if (value === undefined) {
+      numericValue = 0;
+    } else if (typeof value === 'string') {
+      numericValue = parseFloat(value);
+    } else {
+      numericValue = value;
     }
 
-    return parseFloat(value).toLocaleString('en-US', {
-      maximumFractionDigits: decimals,
-      minimumFractionDigits: decimals
+    return numericValue.toLocaleString('en-US', {
+      maximumFractionDigits: decimals
     });
   }
 };