@reown/appkit-ui-react-native 1.2.4 → 2.0.0-alpha.1

package/src/composites/wui-double-image-loader/index.native.tsx

@@ -0,0 +1,119 @@
+import { Animated, useAnimatedValue, type StyleProp, type ViewStyle } from 'react-native';
+
+import { useEffect } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { Image } from '../../components/wui-image';
+import { Icon } from '../../components/wui-icon';
+import { type IconType } from '../../utils/TypesUtil';
+import { WalletImage } from '../wui-wallet-image';
+import styles from './styles';
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  leftImage?: string;
+  rightImage?: string;
+  renderRightPlaceholder?: () => React.ReactElement;
+  leftPlaceholderIcon?: IconType;
+  rightPlaceholderIcon?: IconType;
+  leftItemStyle?: StyleProp<ViewStyle>;
+  rightItemStyle?: StyleProp<ViewStyle>;
+}
+
+export function DoubleImageLoader({
+  style,
+  leftImage,
+  rightImage,
+  renderRightPlaceholder,
+  leftPlaceholderIcon = 'mobile',
+  rightPlaceholderIcon = 'browser',
+  leftItemStyle,
+  rightItemStyle
+}: Props) {
+  const Theme = useTheme();
+  const leftPosition = useAnimatedValue(10);
+  const rightPosition = useAnimatedValue(-10);
+
+  const animateLeft = () => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(leftPosition, {
+          toValue: -5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(leftPosition, {
+          toValue: 10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    ).start();
+  };
+
+  const animateRight = () => {
+    Animated.loop(
+      Animated.sequence([
+        Animated.timing(rightPosition, {
+          toValue: 5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(rightPosition, {
+          toValue: -10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    ).start();
+  };
+
+  useEffect(() => {
+    animateLeft();
+    animateRight();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" justifyContent="center" style={style}>
+      <Animated.View
+        style={[
+          styles.itemBorder,
+          styles.leftItemBorder,
+          {
+            transform: [{ translateX: leftPosition }],
+            backgroundColor: Theme['bg-200']
+          },
+          leftItemStyle
+        ]}
+      >
+        {leftImage ? (
+          <Image
+            source={leftImage}
+            style={[styles.rightImage, { backgroundColor: Theme['bg-200'] }]}
+          />
+        ) : (
+          <Icon name={leftPlaceholderIcon} size="lg" color="fg-200" />
+        )}
+      </Animated.View>
+      <Animated.View
+        style={[
+          styles.itemBorder,
+          styles.rightItemBorder,
+          {
+            transform: [{ translateX: rightPosition }],
+            backgroundColor: Theme['bg-200']
+          },
+          rightItemStyle
+        ]}
+      >
+        {rightImage ? (
+          <WalletImage imageSrc={rightImage} size="lg" border={false} />
+        ) : (
+          renderRightPlaceholder?.() ?? (
+            <Icon name={rightPlaceholderIcon} size="lg" color="fg-200" />
+          )
+        )}
+      </Animated.View>
+    </FlexView>
+  );
+}

package/src/composites/wui-double-image-loader/index.tsx

@@ -0,0 +1,74 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { Image } from '../../components/wui-image';
+import { Icon } from '../../components/wui-icon';
+import { type IconType } from '../../utils/TypesUtil';
+import { WalletImage } from '../wui-wallet-image';
+import styles from './styles';
+interface Props {
+  style?: StyleProp<ViewStyle>;
+  leftImage?: string;
+  rightImage?: string;
+  renderRightPlaceholder?: () => React.ReactElement;
+  leftPlaceholderIcon?: IconType;
+  rightPlaceholderIcon?: IconType;
+  leftItemStyle?: StyleProp<ViewStyle>;
+  rightItemStyle?: StyleProp<ViewStyle>;
+}
+
+export function DoubleImageLoader({
+  style,
+  leftImage,
+  rightImage,
+  renderRightPlaceholder,
+  leftPlaceholderIcon = 'mobile',
+  rightPlaceholderIcon = 'browser',
+  leftItemStyle,
+  rightItemStyle
+}: Props) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" justifyContent="center" style={style}>
+      <FlexView
+        style={[
+          styles.itemBorder,
+          styles.leftItemBorder,
+          {
+            backgroundColor: Theme['bg-200']
+          },
+          leftItemStyle
+        ]}
+      >
+        {leftImage ? (
+          <Image
+            source={leftImage}
+            style={[styles.rightImage, { backgroundColor: Theme['bg-200'] }]}
+          />
+        ) : (
+          <Icon name={leftPlaceholderIcon} size="lg" color="fg-200" />
+        )}
+      </FlexView>
+      <FlexView
+        style={[
+          styles.itemBorder,
+          styles.rightItemBorder,
+          {
+            backgroundColor: Theme['bg-200']
+          },
+          rightItemStyle
+        ]}
+      >
+        {rightImage ? (
+          <WalletImage imageSrc={rightImage} size="lg" border={false} />
+        ) : (
+          renderRightPlaceholder?.() ?? (
+            <Icon name={rightPlaceholderIcon} size="lg" color="fg-200" />
+          )
+        )}
+      </FlexView>
+    </FlexView>
+  );
+}

package/src/composites/wui-double-image-loader/styles.ts

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  rightImage: {
+    height: 64,
+    width: 64,
+    borderRadius: BorderRadius.full
+  },
+  itemBorder: {
+    width: 74,
+    height: 74,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  leftItemBorder: {
+    borderRadius: BorderRadius.full,
+    zIndex: 2
+  },
+  rightItemBorder: {
+    borderRadius: 22,
+    width: 72,
+    height: 72
+  }
+});

package/src/composites/wui-icon-box/index.tsx

@@ -16,6 +16,7 @@ export interface IconBoxProps {
   borderColor?: ThemeKeys;
   borderSize?: number;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export function IconBox({
@@ -28,7 +29,8 @@ export function IconBox({
   border,
   borderColor,
   borderSize = 4,
-  style
+  style,
+  testID
 }: IconBoxProps) {
   const Theme = useTheme();
   let _iconSize: SizeType;
@@ -97,6 +99,7 @@ export function IconBox({
         border && { borderColor: Theme[borderColor || 'bg-125'], borderWidth: borderSize / 2 },
         style
       ]}
+      testID={testID}
     >
       <Icon size={iconSize || _iconSize} color={iconColor} name={icon} />
     </View>

package/src/composites/wui-list-item/index.tsx

@@ -1,5 +1,12 @@
 import type { ReactNode } from 'react';
-import { View, Pressable, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import {
+  View,
+  Pressable,
+  Animated,
+  type StyleProp,
+  type ViewStyle,
+  type ImageStyle
+} from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import { Image } from '../../components/wui-image';
 import { LoadingSpinner } from '../../components/wui-loading-spinner';
@@ -16,8 +23,11 @@ export interface ListItemProps {
   iconColor?: ColorType;
   iconBackgroundColor?: ColorType;
   iconBorderColor?: ColorType;
+  backgroundColor?: ColorType;
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
+  imageStyle?: StyleProp<ImageStyle>;
+  imageContainerStyle?: StyleProp<ViewStyle>;
   chevron?: boolean;
   disabled?: boolean;
   loading?: boolean;
@@ -33,6 +43,8 @@ export function ListItem({
   icon,
   imageSrc,
   imageHeaders,
+  imageStyle,
+  imageContainerStyle,
   iconColor = 'fg-200',
   iconBackgroundColor,
   iconBorderColor = 'gray-glass-005',
@@ -42,28 +54,41 @@ export function ListItem({
   onPress,
   style,
   contentStyle,
-  testID
+  testID,
+  backgroundColor = 'gray-glass-002'
 }: ListItemProps) {
   const Theme = useTheme();
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
-    Theme['gray-glass-002'],
+    Theme[backgroundColor],
     Theme['gray-glass-010']
   );
 
   function visualTemplate() {
     if (imageSrc) {
       return (
-        <View style={[styles.imageContainer, { borderColor: Theme['gray-glass-005'] }]}>
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme['gray-glass-005'] },
+            imageContainerStyle
+          ]}
+        >
           <Image
             source={imageSrc}
             headers={imageHeaders}
-            style={[styles.image, (disabled || loading) && styles.disabledImage]}
+            style={[styles.image, (disabled || loading) && styles.disabledImage, imageStyle]}
           />
         </View>
       );
     } else if (icon) {
       return (
-        <View style={[styles.imageContainer, { borderColor: Theme[iconBorderColor] }]}>
+        <View
+          style={[
+            styles.imageContainer,
+            { borderColor: Theme[iconBorderColor] },
+            imageContainerStyle
+          ]}
+        >
           <IconBox
             icon={icon}
             iconColor={iconColor}

package/src/composites/wui-list-social/styles.ts

@@ -14,7 +14,7 @@ export default StyleSheet.create({
   rightPlaceholder: {
     width: 40,
     height: 40,
-    borderRadius: 100
+    borderRadius: BorderRadius.full
   },
   disabledLogo: {
     opacity: 0.4

package/src/composites/wui-network-button/styles.ts

@@ -21,8 +21,7 @@ export default StyleSheet.create({
     height: 24,
     width: 24,
     borderRadius: BorderRadius.full,
-    borderWidth: 2,
-    paddingLeft: Spacing['4xs']
+    borderWidth: 2
   },
   imageDisabled: {
     opacity: 0.4

package/src/composites/wui-numeric-keyboard/index.tsx

@@ -0,0 +1,64 @@
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { Text } from '../../components/wui-text';
+import { FlexView } from '../../layout/wui-flex';
+import { useTheme } from '../../hooks/useTheme';
+
+export interface NumericKeyboardProps {
+  onKeyPress: (value: string) => void;
+}
+
+export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
+  const Theme = useTheme();
+  const keys = [
+    ['1', '2', '3'],
+    ['4', '5', '6'],
+    ['7', '8', '9'],
+    [',', '0', 'erase']
+  ];
+
+  const handlePress = (key: string) => {
+    onKeyPress(key);
+  };
+
+  return (
+    <FlexView>
+      {keys.map((row, rowIndex) => (
+        <FlexView
+          key={`row-${rowIndex}`}
+          flexDirection="row"
+          justifyContent="space-around"
+          style={styles.row}
+        >
+          {row.map(key => (
+            <TouchableOpacity key={key} style={styles.key} onPress={() => handlePress(key)}>
+              {key === 'erase' ? (
+                <Text testID="key-erase" style={[styles.keyText, { color: Theme['fg-100'] }]}>
+                  ←
+                </Text>
+              ) : (
+                <Text testID={`key-${key}`} style={[styles.keyText, { color: Theme['fg-100'] }]}>
+                  {key}
+                </Text>
+              )}
+            </TouchableOpacity>
+          ))}
+        </FlexView>
+      ))}
+    </FlexView>
+  );
+}
+
+const styles = StyleSheet.create({
+  row: {
+    marginBottom: 10
+  },
+  key: {
+    width: 70,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  keyText: {
+    fontSize: 26
+  }
+});

package/src/composites/wui-search-bar/index.tsx

@@ -1,22 +1,25 @@
 import { useRef, useState } from 'react';
-import { TextInput, type TextInputProps } from 'react-native';
+import { TextInput, type StyleProp, type TextInputProps, type ViewStyle } from 'react-native';
 
 import { InputElement } from '../wui-input-element';
 import { InputText } from '../wui-input-text';
 import { Spacing } from '../../utils/ThemeUtil';
+import { FlexView } from '../../layout/wui-flex';
 
 export interface SearchBarProps {
   placeholder?: string;
   onSubmitEditing?: TextInputProps['onSubmitEditing'];
   onChangeText?: TextInputProps['onChangeText'];
   inputStyle?: TextInputProps['style'];
+  style?: StyleProp<ViewStyle>;
 }
 
 export function SearchBar({
-  placeholder = 'Search wallet',
+  placeholder = 'Search',
   onSubmitEditing,
   onChangeText,
-  inputStyle
+  inputStyle,
+  style
 }: SearchBarProps) {
   const [showClear, setShowClear] = useState(false);
   const inputRef = useRef<TextInput>(null);
@@ -27,27 +30,29 @@ export function SearchBar({
   };
 
   return (
-    <InputText
-      ref={inputRef}
-      placeholder={placeholder}
-      onChangeText={handleChangeText}
-      onSubmitEditing={onSubmitEditing}
-      icon="search"
-      inputStyle={inputStyle}
-      returnKeyType="search"
-      disableFullscreenUI
-    >
-      {showClear && (
-        <InputElement
-          icon="close"
-          style={{ marginRight: Spacing['4xs'] }}
-          onPress={() => {
-            inputRef.current?.clear();
-            inputRef.current?.focus();
-            handleChangeText('');
-          }}
-        />
-      )}
-    </InputText>
+    <FlexView style={style}>
+      <InputText
+        ref={inputRef}
+        placeholder={placeholder}
+        onChangeText={handleChangeText}
+        onSubmitEditing={onSubmitEditing}
+        icon="search"
+        inputStyle={inputStyle}
+        returnKeyType="search"
+        disableFullscreenUI
+      >
+        {showClear && (
+          <InputElement
+            icon="close"
+            style={{ marginRight: Spacing['4xs'] }}
+            onPress={() => {
+              inputRef.current?.clear();
+              inputRef.current?.focus();
+              handleChangeText('');
+            }}
+          />
+        )}
+      </InputText>
+    </FlexView>
   );
 }

package/src/composites/wui-tag/index.tsx

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type StyleProp, View, type ViewStyle } from 'react-native';
+import { type StyleProp, type TextStyle, View, type ViewStyle } from 'react-native';
 
 import { Text } from '../../components/wui-text';
 import { useTheme } from '../../hooks/useTheme';
@@ -11,9 +11,10 @@ export interface TagProps {
   variant?: TagType;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
 }
 
-export function Tag({ variant = 'main', children, style, disabled }: TagProps) {
+export function Tag({ variant = 'main', children, style, disabled, textStyle }: TagProps) {
   const Theme = useTheme();
   const colors = getThemedColors(disabled ? undefined : variant);
 
@@ -21,7 +22,7 @@ export function Tag({ variant = 'main', children, style, disabled }: TagProps) {
     <View
       style={[styles.container, { backgroundColor: Theme[colors.background as ThemeKeys] }, style]}
     >
-      <Text style={styles.text} variant="micro-700" color={colors.text as ColorType}>
+      <Text style={[styles.text, textStyle]} variant="micro-700" color={colors.text as ColorType}>
         {children}
       </Text>
     </View>

package/src/composites/wui-toggle/index.tsx

@@ -13,11 +13,18 @@ import { Text } from '../../components/wui-text';
 import styles from './styles';
 
 export interface ToggleProps {
+  /** Content to be displayed inside the toggle when expanded */
   children?: React.ReactNode;
+  /** Title displayed in the toggle header. Can be a string or a custom React component */
   title?: string | React.ReactNode;
+  /** Custom styles for the toggle container */
   style?: StyleProp<ViewStyle>;
+  /** Whether the toggle should be open when first rendered */
   initialOpen?: boolean;
+  /** Whether the toggle can be closed after being opened. If false, toggle will remain open once expanded */
   canClose?: boolean;
+  /** Custom styles for the content container inside the toggle */
+  contentContainerStyle?: StyleProp<ViewStyle>;
 }
 
 export function Toggle({
@@ -25,7 +32,8 @@ export function Toggle({
   style,
   title = 'Details',
   initialOpen = false,
-  canClose = true
+  canClose = true,
+  contentContainerStyle
 }: ToggleProps) {
   const [isOpen, setIsOpen] = useState(initialOpen);
   const animatedHeight = useRef(new Animated.Value(0)).current;
@@ -72,7 +80,7 @@ export function Toggle({
       </Pressable>
 
       <Animated.View style={[styles.contentWrapper, { height: animatedHeight }]}>
-        <FlexView style={styles.content} onLayout={measureContent}>
+        <FlexView style={[styles.content, contentContainerStyle]} onLayout={measureContent}>
           {children}
         </FlexView>
       </Animated.View>

package/src/composites/wui-token-button/index.tsx

@@ -2,7 +2,11 @@ import type { StyleProp, ViewStyle } from 'react-native';
 import { Image } from '../../components/wui-image';
 import { Text } from '../../components/wui-text';
 import { Button } from '../wui-button';
+import { Icon } from '../../components/wui-icon';
 import styles from './styles';
+import { useTheme } from '../../context/ThemeContext';
+import { View } from 'react-native';
+import React from 'react';
 
 export interface TokenButtonProps {
   onPress?: () => void;
@@ -11,6 +15,10 @@ export interface TokenButtonProps {
   inverse?: boolean;
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
+  placeholder?: string;
+  chevron?: boolean;
+  renderClip?: React.ReactNode;
+  testID?: string;
 }
 
 export function TokenButton({
@@ -19,8 +27,14 @@ export function TokenButton({
   inverse,
   onPress,
   style,
-  disabled = false
+  disabled = false,
+  placeholder = 'Select token',
+  chevron,
+  renderClip,
+  testID
 }: TokenButtonProps) {
+  const Theme = useTheme();
+
   if (!text) {
     return (
       <Button
@@ -31,7 +45,7 @@ export function TokenButton({
         disabled={disabled}
       >
         <Text variant="small-600" color="accent-100">
-          Select token
+          {placeholder}
         </Text>
       </Button>
     );
@@ -39,7 +53,14 @@ export function TokenButton({
 
   const content = [
     imageUrl && (
-      <Image key="image" source={imageUrl} style={[styles.image, inverse && styles.imageInverse]} />
+      <View key="image-container" style={[styles.imageContainer, inverse && styles.imageInverse]}>
+        <Image
+          key="image"
+          source={imageUrl}
+          style={[styles.image, { backgroundColor: Theme['fg-100'] }]}
+        />
+        {renderClip && <View style={styles.clipContainer}>{renderClip}</View>}
+      </View>
     ),
     <Text key="text">{text}</Text>
   ];
@@ -51,8 +72,10 @@ export function TokenButton({
       size="sm"
       onPress={onPress}
       disabled={disabled}
+      testID={testID}
     >
       {inverse ? content.reverse() : content}
+      {chevron && <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />}
     </Button>
   );
 }

package/src/composites/wui-token-button/styles.ts

@@ -9,14 +9,27 @@ export default StyleSheet.create({
   container: {
     height: 40
   },
+  imageContainer: {
+    position: 'relative',
+    marginRight: Spacing['2xs']
+  },
   image: {
     width: 24,
     height: 24,
     borderRadius: BorderRadius.full,
-    marginRight: Spacing['2xs']
+    marginRight: 0
   },
   imageInverse: {
     marginRight: 0,
     marginLeft: Spacing['2xs']
+  },
+  clipContainer: {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    zIndex: 1
+  },
+  chevron: {
+    marginLeft: Spacing['2xs']
   }
 });

package/src/index.ts

@@ -32,6 +32,7 @@ export {
   type CompatibleNetworkProps
 } from './composites/wui-compatible-network';
 export { ConnectButton, type ConnectButtonProps } from './composites/wui-connect-button';
+export { DoubleImageLoader } from './composites/wui-double-image-loader';
 export { EmailInput, type EmailInputProps } from './composites/wui-email-input';
 export { IconBox, type IconBoxProps } from './composites/wui-icon-box';
 export { IconLink, type IconLinkProps } from './composites/wui-icon-link';
@@ -49,6 +50,7 @@ export { Logo, type LogoProps } from './composites/wui-logo';
 export { LogoSelect, type LogoSelectProps } from './composites/wui-logo-select';
 export { NetworkButton, type NetworkButtonProps } from './composites/wui-network-button';
 export { NetworkImage, type NetworkImageProps } from './composites/wui-network-image';
+export { NumericKeyboard, type NumericKeyboardProps } from './composites/wui-numeric-keyboard';
 export { Otp, type OtpProps } from './composites/wui-otp';
 export { Pressable, type PressableProps } from './components/wui-pressable';
 export { Promo, type PromoProps } from './composites/wui-promo';
@@ -78,7 +80,8 @@ export type {
   SizeType,
   TagType,
   TextType,
-  VisualType
+  VisualType,
+  TransactionType
 } from './utils/TypesUtil';
 export { UiUtil } from './utils/UiUtil';
 export { TransactionUtil } from './utils/TransactionUtil';