@reown/appkit-ui-react-native 0.0.0-canary-20240912195440

package/src/composites/wui-input-element/index.tsx

@@ -0,0 +1,40 @@
+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 } from '../../utils/TypesUtil';
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface InputElementProps {
+  icon: IconType;
+  onPress: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function InputElement({ icon, disabled, onPress, style }: InputElementProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-020'],
+    Theme['gray-glass-030']
+  );
+
+  return (
+    <AnimatedPressable
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      hitSlop={10}
+      style={[
+        styles.container,
+        { backgroundColor: disabled ? Theme['gray-glass-010'] : animatedValue },
+        style
+      ]}
+    >
+      <Icon name={icon} size="xxs" color={'bg-200' as ColorType} />
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    height: 18,
+    width: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius['4xs']
+  }
+});

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

@@ -0,0 +1,49 @@
+import { TextInput } from 'react-native';
+import { InputText, type InputTextProps } from '../wui-input-text';
+import styles from './styles';
+
+export interface InputNumericProps extends InputTextProps {
+  disabled?: boolean;
+  onChangeText?: InputTextProps['onChangeText'];
+  onSubmitEditing?: InputTextProps['onSubmitEditing'];
+  style?: InputTextProps['inputStyle'];
+  inputRef?: React.Ref<TextInput>;
+  value?: string;
+  onKeyPress?: InputTextProps['onKeyPress'];
+}
+
+export function InputNumeric({
+  disabled,
+  onChangeText,
+  onSubmitEditing,
+  style,
+  inputRef,
+  value,
+  onKeyPress,
+  ...props
+}: InputNumericProps) {
+  const _onChangeText = (text: string) => {
+    const isNumber = /^\d*$/.test(text);
+    if (isNumber) {
+      onChangeText?.(text);
+    }
+  };
+
+  return (
+    <InputText
+      disabled={disabled}
+      onChangeText={_onChangeText}
+      onSubmitEditing={onSubmitEditing}
+      keyboardType="number-pad"
+      returnKeyType="done"
+      inputMode="numeric"
+      size="xs"
+      textAlign="center"
+      inputStyle={[styles.input, style]}
+      ref={inputRef}
+      value={value}
+      onKeyPress={onKeyPress}
+      {...props}
+    />
+  );
+}

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

@@ -0,0 +1,9 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  input: {
+    fontSize: 20,
+    fontWeight: '500',
+    textAlign: 'center'
+  }
+});

package/src/composites/wui-input-text/index.tsx

@@ -0,0 +1,134 @@
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  TextInput,
+  type NativeSyntheticEvent,
+  type TextInputFocusEventData,
+  type TextInputProps
+} from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { IconType, SizeType } from '../../utils/TypesUtil';
+import styles, { outerBorderRadius } from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+interface InputRef {
+  clear: () => void;
+  focus: () => void;
+  blur: () => void;
+}
+
+export type InputTextProps = TextInputProps & {
+  inputStyle?: TextInputProps['style'];
+  icon?: IconType;
+  disabled?: boolean;
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xxs'>;
+};
+
+export const InputText = forwardRef<InputRef, InputTextProps>(
+  (
+    {
+      children,
+      placeholder,
+      inputStyle,
+      icon,
+      size = 'sm',
+      disabled,
+      returnKeyType,
+      onBlur,
+      onFocus,
+      ...rest
+    }: InputTextProps,
+    ref
+  ) => {
+    const inputRef = useRef<TextInput>(null);
+    const Theme = useTheme();
+    const { animatedValue, valueRef, setStartValue, setEndValue } = useAnimatedValue(
+      Theme['gray-glass-002'],
+      Theme['gray-glass-005'],
+      100
+    );
+    const outerRadius = outerBorderRadius[size];
+
+    useImperativeHandle(ref, () => ({
+      clear: () => {
+        if (inputRef.current) {
+          inputRef.current.clear();
+        }
+      },
+      focus: () => {
+        if (inputRef.current) {
+          inputRef.current.focus();
+        }
+      },
+      blur: () => {
+        if (inputRef.current) {
+          inputRef.current.blur();
+        }
+      }
+    }));
+
+    const handleBlur = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setStartValue();
+      onBlur?.(e);
+    };
+
+    const handleFocus = (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      setEndValue();
+      onFocus?.(e);
+    };
+
+    const innerBorder = valueRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [Theme['gray-glass-005'], Theme['accent-100']]
+    });
+
+    const outerBorder = valueRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['transparent', Theme['accent-glass-015']]
+    });
+
+    return (
+      <>
+        <AnimatedPressable
+          style={[styles.outerBorder, { borderColor: outerBorder, borderRadius: outerRadius }]}
+          disabled={disabled}
+          onPress={() => inputRef.current?.focus()}
+          testID={rest.testID}
+        >
+          <Animated.View
+            style={[
+              styles[`${size}Container`],
+              { backgroundColor: animatedValue, borderColor: innerBorder },
+              disabled && { backgroundColor: Theme['gray-glass-002'] }
+            ]}
+          >
+            {icon && <Icon name={icon} size="md" color="fg-275" style={styles.icon} />}
+            <TextInput
+              ref={inputRef}
+              onFocus={handleFocus}
+              onBlur={handleBlur}
+              placeholder={placeholder}
+              placeholderTextColor={Theme['fg-275']}
+              returnKeyType={returnKeyType}
+              style={[styles.input, { color: Theme['fg-100'] }, inputStyle]}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoComplete="off"
+              spellCheck={false}
+              selectionColor={Theme['accent-100']}
+              underlineColorAndroid="transparent"
+              selectTextOnFocus={false}
+              editable={!disabled}
+              {...rest}
+            />
+            {children}
+          </Animated.View>
+        </AnimatedPressable>
+      </>
+    );
+  }
+);

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

@@ -0,0 +1,51 @@
+import { StyleSheet, type ViewStyle } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+const baseStyle = {
+  flexDirection: 'row',
+  height: 40,
+  borderRadius: BorderRadius.xxs,
+  alignItems: 'center',
+  paddingHorizontal: Spacing.xs,
+  borderWidth: 1
+} as ViewStyle;
+
+export const outerBorderRadius = {
+  xs: BorderRadius.s,
+  sm: BorderRadius.xs,
+  md: BorderRadius.s
+};
+
+export default StyleSheet.create({
+  // Used for numeric input
+  xsContainer: {
+    ...baseStyle,
+    borderRadius: BorderRadius.xs,
+    height: 50,
+    width: 50
+  },
+  smContainer: {
+    ...baseStyle
+  },
+  mdContainer: {
+    ...baseStyle,
+    height: 56,
+    borderRadius: BorderRadius.xs
+  },
+  outerBorder: {
+    flexGrow: 1,
+    borderWidth: 4,
+    borderRadius: BorderRadius.xs,
+    borderColor: 'transparent'
+  },
+  input: {
+    flex: 1,
+    marginHorizontal: Spacing['4xs'],
+    fontSize: 16,
+    fontWeight: '400'
+  },
+  icon: {
+    marginLeft: Spacing['3xs'],
+    marginRight: Spacing.xs
+  }
+});

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

@@ -0,0 +1,69 @@
+import {
+  Animated,
+  Pressable,
+  type PressableProps as NativeProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Text } from '../../components/wui-text';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, IconType, SizeType } from '../../utils/TypesUtil';
+import styles from './styles';
+import { FlexView } from '../../layout/wui-flex';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type LinkProps = NativeProps & {
+  children: string;
+  disabled?: boolean;
+  iconLeft?: IconType;
+  iconRight?: IconType;
+  style?: StyleProp<ViewStyle>;
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
+  color?: ColorType;
+};
+
+export function Link({
+  children,
+  disabled,
+  iconLeft,
+  iconRight,
+  onPress,
+  style,
+  size = 'sm',
+  color,
+  ...rest
+}: LinkProps) {
+  const Theme = useTheme();
+  const _color = (disabled ? 'fg-300' : color ?? 'accent-100') as ColorType;
+  const iconSize = size === 'md' ? 'sm' : 'xs';
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    'transparent',
+    Theme['gray-glass-010']
+  );
+
+  return (
+    <AnimatedPressable
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      style={[styles[`${size}Container`], { backgroundColor: animatedValue }, style]}
+      {...rest}
+    >
+      <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+        {iconLeft && (
+          <Icon color={_color} name={iconLeft} size={iconSize} style={styles.iconLeft} />
+        )}
+        <Text variant={size === 'md' ? 'paragraph-600' : 'small-600'} color={_color}>
+          {children}
+        </Text>
+        {iconRight && (
+          <Icon color={_color} name={iconRight} size={iconSize} style={styles.iconRight} />
+        )}
+      </FlexView>
+    </AnimatedPressable>
+  );
+}

package/src/composites/wui-link/styles.ts

@@ -0,0 +1,21 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  smContainer: {
+    paddingVertical: Spacing['4xs'],
+    paddingHorizontal: Spacing['2xs'],
+    borderRadius: BorderRadius['3xs']
+  },
+  mdContainer: {
+    paddingVertical: Spacing['4xs'],
+    paddingHorizontal: Spacing.xs,
+    borderRadius: BorderRadius['3xs']
+  },
+  iconRight: {
+    marginLeft: Spacing['2xs']
+  },
+  iconLeft: {
+    marginRight: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react';
+import { View, Pressable, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Image } from '../../components/wui-image';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { IconType } from '../../utils/TypesUtil';
+import { IconBox } from '../wui-icon-box';
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ListItemProps {
+  icon?: IconType;
+  iconVariant?: 'blue' | 'overlay';
+  variant?: 'image' | 'icon';
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  chevron?: boolean;
+  disabled?: boolean;
+  loading?: boolean;
+  onPress?: () => void;
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function ListItem({
+  children,
+  icon,
+  variant,
+  imageSrc,
+  imageHeaders,
+  iconVariant = 'blue',
+  chevron,
+  loading,
+  disabled,
+  onPress,
+  style,
+  testID
+}: ListItemProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+
+  function visualTemplate() {
+    if (variant === 'image' && imageSrc) {
+      return (
+        <View style={[styles.imageContainer, { borderColor: Theme['gray-glass-005'] }]}>
+          <Image
+            source={imageSrc}
+            headers={imageHeaders}
+            style={[styles.image, (disabled || loading) && styles.disabledImage]}
+          />
+        </View>
+      );
+    } else if (variant === 'icon' && icon) {
+      const iconColor = iconVariant === 'blue' ? 'accent-100' : 'fg-200';
+      const borderColor = iconVariant === 'blue' ? 'accent-glass-005' : 'gray-glass-005';
+
+      return (
+        <View style={[styles.imageContainer, { borderColor: Theme[borderColor] }]}>
+          <IconBox
+            icon={icon}
+            iconColor={iconColor}
+            size="md"
+            background
+            backgroundColor="gray-glass-010"
+          />
+        </View>
+      );
+    }
+
+    return null;
+  }
+
+  function rightTemplate() {
+    if (loading) {
+      return <LoadingSpinner color="fg-200" size="lg" style={styles.rightIcon} />;
+    } else if (chevron) {
+      return <Icon name="chevronRight" size="md" color="fg-150" style={styles.rightIcon} />;
+    }
+
+    return null;
+  }
+
+  return (
+    <AnimatedPressable
+      disabled={disabled || loading}
+      style={[
+        styles.container,
+        { backgroundColor: disabled || loading ? Theme['gray-glass-010'] : animatedValue },
+        style
+      ]}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      testID={testID}
+    >
+      {visualTemplate()}
+      <View style={styles.content}>{children}</View>
+      {rightTemplate()}
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 56,
+    width: '100%',
+    padding: Spacing.s,
+    alignItems: 'center',
+    borderRadius: BorderRadius.xs
+  },
+  content: {
+    flexDirection: 'row',
+    flexGrow: 1,
+    paddingHorizontal: Spacing.s
+  },
+  imageContainer: {
+    width: 36,
+    height: 36,
+    borderRadius: 100,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  image: {
+    width: 32,
+    height: 32,
+    borderRadius: 100
+  },
+  disabledImage: {
+    opacity: 0.4
+  },
+  rightIcon: {
+    marginRight: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,128 @@
+import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/wui-text';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { IconType, TagType } from '../../utils/TypesUtil';
+import { Tag } from '../wui-tag';
+import { WalletImage } from '../wui-wallet-image';
+import { Icon } from '../../components/wui-icon';
+
+import styles from './styles';
+import { IconBox } from '../wui-icon-box';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ListWalletProps {
+  name: string;
+  onPress?: () => void;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  showAllWallets?: boolean;
+  tagLabel?: string;
+  tagVariant?: TagType;
+  icon?: IconType;
+  disabled?: boolean;
+  installed?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function ListWallet({
+  name,
+  onPress,
+  imageSrc,
+  imageHeaders,
+  showAllWallets,
+  tagLabel,
+  tagVariant,
+  icon,
+  disabled,
+  installed,
+  style,
+  testID
+}: ListWalletProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+
+  const templateInstalled = () => {
+    if (!installed) return null;
+
+    return (
+      <IconBox
+        icon="checkmark"
+        iconSize="xxs"
+        iconColor={'success-100'}
+        border
+        borderColor="bg-150"
+        background
+        backgroundColor="icon-box-bg-success-100"
+        size="sm"
+        style={styles.installedBox}
+      />
+    );
+  };
+
+  function imageTemplate() {
+    return (
+      <View>
+        <WalletImage
+          style={[styles.image, disabled && styles.imageDisabled]}
+          imageSrc={imageSrc}
+          imageHeaders={imageHeaders}
+          showAllWallets={showAllWallets}
+          size="sm"
+        />
+        {templateInstalled()}
+      </View>
+    );
+  }
+
+  function iconTemplate() {
+    if (tagLabel && tagVariant) {
+      return (
+        <Tag variant={tagVariant} disabled={disabled} style={styles.rightIcon}>
+          {tagLabel}
+        </Tag>
+      );
+    }
+
+    if (icon) {
+      return (
+        <Icon
+          name={icon}
+          color={disabled ? 'fg-300' : 'fg-200'}
+          size="sm"
+          style={styles.rightIcon}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <AnimatedPressable
+      style={[
+        styles.container,
+        { backgroundColor: disabled ? Theme['gray-glass-010'] : animatedValue },
+        style
+      ]}
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      testID={testID}
+    >
+      <View style={styles.leftSide}>
+        {imageTemplate()}
+        <Text variant="paragraph-500" style={styles.name} color={disabled ? 'fg-300' : 'fg-100'}>
+          {name}
+        </Text>
+      </View>
+      {iconTemplate()}
+    </AnimatedPressable>
+  );
+}