@reown/appkit-ui-react-native 0.0.0-accounts-canary.1-20251023174733

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

@@ -0,0 +1,89 @@
+import { useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  type PressableProps as NativeProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import type { SizeType } from '../../utils/TypesUtil';
+
+import styles, { getThemedButtonStyle, getThemedTextStyle } from './styles';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type ConnectButtonProps = NativeProps & {
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  loading?: boolean;
+  disabled?: boolean;
+};
+
+export function ConnectButton({
+  children,
+  size = 'md',
+  onPress,
+  style,
+  loading,
+  disabled,
+  ...rest
+}: ConnectButtonProps) {
+  const Theme = useTheme();
+  const themedTextStyle = getThemedTextStyle(Theme, loading);
+  const colorAnimation = useRef(new Animated.Value(0));
+
+  const themedNormalStyle = getThemedButtonStyle(Theme, loading, false);
+  const themedPressedStyle = getThemedButtonStyle(Theme, loading, true);
+
+  const onPressIn = () => {
+    Animated.timing(colorAnimation.current, {
+      toValue: 1,
+      useNativeDriver: false,
+      duration: 200
+    }).start();
+  };
+
+  const onPressOut = () => {
+    Animated.timing(colorAnimation.current, {
+      toValue: 0,
+      useNativeDriver: false,
+      duration: 200
+    }).start();
+  };
+
+  const backgroundColor = colorAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [themedNormalStyle.backgroundColor, themedPressedStyle.backgroundColor]
+  });
+
+  const borderColor = colorAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [themedNormalStyle.borderColor, themedPressedStyle.borderColor]
+  });
+
+  const loadingTemplate = () => {
+    if (!loading) return null;
+
+    return <LoadingSpinner size={size} style={styles.loader} color="inverse-100" />;
+  };
+
+  return (
+    <AnimatedPressable
+      disabled={loading || disabled}
+      style={[styles.button, styles[`${size}Button`], { backgroundColor, borderColor }, style]}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={onPress}
+      {...rest}
+    >
+      {loadingTemplate()}
+      <Text variant={size === 'md' ? 'paragraph-500' : 'small-600'} style={themedTextStyle}>
+        {children}
+      </Text>
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,65 @@
+import { type StyleProp, StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import type { ThemeKeys } from '../../utils/TypesUtil';
+
+export const getThemedButtonStyle = (
+  theme: { [key in ThemeKeys]: string },
+  loading?: boolean,
+  pressed?: boolean
+): StyleProp<any> => {
+  const buttonBaseStyle = {
+    borderColor: theme['gray-glass-010']
+  };
+
+  if (loading) {
+    return {
+      ...buttonBaseStyle,
+      backgroundColor: theme['accent-080']
+    };
+  }
+
+  if (pressed) {
+    return {
+      ...buttonBaseStyle,
+      backgroundColor: theme['accent-080']
+    };
+  }
+
+  return {
+    ...buttonBaseStyle,
+    backgroundColor: theme['accent-100']
+  };
+};
+
+export const getThemedTextStyle = (
+  theme: { [key in ThemeKeys]: string },
+  loading?: boolean
+): StyleProp<any> => {
+  if (loading) {
+    return { color: theme['inverse-100'] };
+  }
+
+  return { color: theme['inverse-100'] };
+};
+
+export default StyleSheet.create({
+  button: {
+    flexDirection: 'row',
+    height: 40,
+    paddingVertical: Spacing['3xs'],
+    paddingHorizontal: Spacing.l,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius.s,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  smButton: {
+    height: 32
+  },
+  mdButton: {
+    height: 40
+  },
+  loader: {
+    marginRight: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,120 @@
+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);
+
+  useEffect(() => {
+    const leftAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(leftPosition, {
+          toValue: -5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(leftPosition, {
+          toValue: 10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    );
+
+    const rightAnimation = Animated.loop(
+      Animated.sequence([
+        Animated.timing(rightPosition, {
+          toValue: 5,
+          duration: 1500,
+          useNativeDriver: true
+        }),
+        Animated.timing(rightPosition, {
+          toValue: -10,
+          duration: 1500,
+          useNativeDriver: true
+        })
+      ])
+    );
+
+    leftAnimation.start();
+    rightAnimation.start();
+
+    return () => {
+      leftAnimation.stop();
+      rightAnimation.stop();
+    };
+    // 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-email-input/index.tsx

@@ -0,0 +1,117 @@
+import { useState } from 'react';
+import { Text } from '../../components/wui-text';
+import { InputText, type InputTextProps } from '../wui-input-text';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+import { IconLink } from '../wui-icon-link';
+import styles from './styles';
+import { View } from 'react-native';
+import { InputElement } from '../wui-input-element';
+
+export type EmailInputProps = InputTextProps & {
+  errorMessage?: string;
+  loading?: boolean;
+  onSubmit?: (value: string) => any;
+  initialValue?: string;
+  showClear?: boolean;
+  submitEnabled?: boolean;
+};
+
+function RightIcon({
+  loading,
+  showChevron,
+  onPress
+}: {
+  loading?: boolean;
+  showChevron: boolean;
+  onPress?: () => void;
+}) {
+  if (loading) {
+    return <LoadingSpinner size="md" color="accent-100" style={styles.spinner} />;
+  }
+
+  if (showChevron) {
+    return <IconLink icon="chevronRight" onPress={onPress} size="sm" iconColor="accent-100" />;
+  }
+
+  return null;
+}
+
+export function EmailInput({
+  errorMessage,
+  onSubmit,
+  onChangeText,
+  loading,
+  disabled,
+  style,
+  initialValue,
+  submitEnabled = true,
+  ...rest
+}: EmailInputProps) {
+  const [email, setEmail] = useState(initialValue ?? '');
+
+  const handleSubmit = (value: string) => {
+    if (submitEnabled) {
+      onSubmit?.(value);
+    }
+  };
+
+  const handleChevronPress = () => {
+    handleSubmit(email);
+  };
+
+  const handleSubmitEditing = ({ nativeEvent: { text } }: { nativeEvent: { text: string } }) => {
+    handleSubmit(text);
+  };
+
+  const handleChangeText = (text: string) => {
+    setEmail(text);
+    onChangeText?.(text);
+  };
+
+  const rightIconTemplate = () => {
+    if (email === initialValue) {
+      return (
+        <InputElement
+          icon="close"
+          style={styles.clearButton}
+          onPress={() => {
+            handleChangeText('');
+          }}
+        />
+      );
+    }
+
+    return (
+      <RightIcon
+        loading={loading}
+        showChevron={submitEnabled ? !errorMessage : false}
+        onPress={handleChevronPress}
+      />
+    );
+  };
+
+  return (
+    <View style={style}>
+      <InputText
+        icon="email"
+        placeholder="Email"
+        size="md"
+        onSubmitEditing={handleSubmitEditing}
+        onChangeText={handleChangeText}
+        keyboardType="email-address"
+        returnKeyType="go"
+        enablesReturnKeyAutomatically
+        disabled={disabled || loading}
+        value={email}
+        {...rest}
+      >
+        {rightIconTemplate()}
+      </InputText>
+      {errorMessage ? (
+        <Text color="error-100" variant="tiny-500" style={styles.text}>
+          {errorMessage}
+        </Text>
+      ) : null}
+    </View>
+  );
+}

package/src/composites/wui-email-input/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  text: {
+    marginTop: Spacing['4xs'],
+    marginLeft: Spacing.l
+  },
+  spinner: {
+    marginRight: Spacing.xs
+  },
+  clearButton: {
+    marginRight: Spacing['4xs']
+  }
+});

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

@@ -0,0 +1,107 @@
+import { type StyleProp, View, type ViewStyle } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { useTheme } from '../../hooks/useTheme';
+import { BorderRadius } from '../../utils/ThemeUtil';
+import type { ColorType, IconType, SizeType, ThemeKeys } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export interface IconBoxProps {
+  icon: IconType;
+  size?: Exclude<SizeType, 'xs' | 'xxs'>;
+  iconColor?: ColorType;
+  iconSize?: Exclude<SizeType, 'xl'>;
+  background?: boolean;
+  backgroundColor?: ThemeKeys;
+  border?: boolean;
+  borderColor?: ThemeKeys;
+  borderSize?: number;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function IconBox({
+  size,
+  iconColor = 'fg-100',
+  icon,
+  iconSize,
+  background,
+  backgroundColor,
+  border,
+  borderColor,
+  borderSize = 4,
+  style,
+  testID
+}: IconBoxProps) {
+  const Theme = useTheme();
+  let _iconSize: SizeType;
+  switch (size) {
+    case 'xl':
+      _iconSize = 'xl';
+      break;
+    case 'lg':
+      _iconSize = 'lg';
+      break;
+    case 'md':
+      _iconSize = 'sm';
+      break;
+    case 'sm':
+      _iconSize = 'xs';
+      break;
+    default:
+      _iconSize = 'xxs';
+  }
+
+  let boxSize: number;
+  switch (size) {
+    case 'xl':
+      boxSize = 56;
+      break;
+    case 'lg':
+      boxSize = 40;
+      break;
+    case 'md':
+      boxSize = 32;
+      break;
+    default:
+      boxSize = 24;
+  }
+
+  let borderRadius: keyof typeof BorderRadius;
+  switch (size) {
+    case 'xl':
+      borderRadius = 's';
+      break;
+    case 'lg':
+      borderRadius = 'xxs';
+      break;
+    default:
+      borderRadius = '3xl';
+  }
+
+  const backgroundStyle = {
+    backgroundColor:
+      background && backgroundColor
+        ? Theme[backgroundColor]
+        : background
+        ? `${Theme[iconColor as ThemeKeys]}1E`
+        : 'transparent',
+    borderRadius: BorderRadius[borderRadius]
+  };
+
+  const containerSize = boxSize + (border ? borderSize : 0);
+
+  return (
+    <View
+      style={[
+        styles.box,
+        backgroundStyle,
+        { height: containerSize, width: containerSize },
+        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-icon-box/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  box: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  border: {
+    borderWidth: 2
+  }
+});

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

@@ -0,0 +1,62 @@
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, IconType, SizeType, ThemeKeys } from '../../utils/TypesUtil';
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface IconLinkProps {
+  icon: IconType;
+  onPress?: () => void;
+  size?: Exclude<SizeType, 'xl' | 'xs' | 'xxs'>;
+  iconColor?: ColorType;
+  disabled?: boolean;
+  background?: boolean;
+  style?: StyleProp<ViewStyle>;
+  backgroundColor?: ThemeKeys;
+  pressedColor?: ThemeKeys;
+  testID?: string;
+}
+
+export function IconLink({
+  icon,
+  onPress,
+  size = 'md',
+  iconColor = 'fg-100',
+  backgroundColor,
+  pressedColor = 'gray-glass-010',
+  disabled,
+  style,
+  testID
+}: IconLinkProps) {
+  const Theme = useTheme();
+  const bgColor = backgroundColor ? Theme[backgroundColor] : 'transparent';
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    bgColor,
+    Theme[pressedColor]
+  );
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      disabled={disabled}
+      testID={testID}
+      style={[
+        styles.container,
+        styles[`container-${size}`],
+        { backgroundColor: animatedValue },
+        style
+      ]}
+    >
+      <Icon
+        name={icon}
+        size={size}
+        color={disabled ? ('gray-glass-020' as ColorType) : iconColor}
+      />
+    </AnimatedPressable>
+  );
+}