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

package/src/composites/wui-card-select-loader/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export const ITEM_HEIGHT = 96;
+
+export default StyleSheet.create({
+  container: {
+    height: ITEM_HEIGHT,
+    width: 76,
+    borderRadius: BorderRadius.xs
+  },
+  text: {
+    marginTop: Spacing.xs
+  }
+});

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

@@ -0,0 +1,110 @@
+import { useRef, useState } from 'react';
+import { Animated, Linking, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import type { ChipType, ColorType, IconType, SizeType } from '../../utils/TypesUtil';
+import { useTheme } from '../../hooks/useTheme';
+import { Text } from '../../components/wui-text';
+import { Image } from '../../components/wui-image';
+import { Icon } from '../../components/wui-icon';
+import styles, { getThemedChipStyle, getThemedTextColor } from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ChipProps {
+  link: string;
+  label?: string;
+  imageSrc?: string;
+  icon?: IconType;
+  variant?: ChipType;
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Chip({
+  link,
+  imageSrc,
+  icon,
+  variant = 'fill',
+  size = 'md',
+  disabled,
+  label,
+  style
+}: ChipProps) {
+  const Theme = useTheme();
+  const colorAnimation = useRef(new Animated.Value(0));
+  const [pressed, setPressed] = useState(false);
+  const themedNormalStyle = getThemedChipStyle(Theme, variant, disabled, false);
+  const themedPressedStyle = getThemedChipStyle(Theme, variant, disabled, true);
+  const themedTextColor = getThemedTextColor(variant, disabled, pressed);
+  const iconSize = size === 'md' ? 'sm' : 'xs';
+
+  const onPress = () => {
+    Linking.canOpenURL(link).then(supported => {
+      if (supported) Linking.openURL(link);
+    });
+  };
+
+  const onPressIn = () => {
+    Animated.timing(colorAnimation.current, {
+      toValue: 1,
+      useNativeDriver: false,
+      duration: 200
+    }).start();
+    setPressed(true);
+  };
+
+  const onPressOut = () => {
+    Animated.timing(colorAnimation.current, {
+      toValue: 0,
+      useNativeDriver: false,
+      duration: 200
+    }).start();
+    setPressed(false);
+  };
+
+  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]
+  });
+
+  return (
+    <AnimatedPressable
+      disabled={disabled}
+      style={[styles.container, styles[`${size}Chip`], { borderColor, backgroundColor }, style]}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={onPress}
+    >
+      {imageSrc && (
+        <Image
+          style={[
+            styles.image,
+            styles[`${size}Image`],
+            { borderColor: themedNormalStyle.borderColor },
+            disabled && styles.disabledImage
+          ]}
+          source={imageSrc}
+        />
+      )}
+      <Text
+        variant={size === 'md' ? 'paragraph-600' : 'small-600'}
+        style={[styles.link, { color: Theme[themedTextColor] }]}
+      >
+        {label || link}
+      </Text>
+      {icon && (
+        <Icon
+          name={icon}
+          size={iconSize}
+          color={themedTextColor as ColorType}
+          style={styles.icon}
+        />
+      )}
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,97 @@
+import { type StyleProp, StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import type { ChipType, ThemeKeys } from '../../utils/TypesUtil';
+
+export const getThemedChipStyle = (
+  theme: { [key in ThemeKeys]: string },
+  variant: ChipType,
+  disabled?: boolean,
+  pressed?: boolean
+): StyleProp<any> => {
+  const chipBaseStyle = {
+    borderColor: theme['gray-glass-010']
+  };
+
+  if (disabled) {
+    return {
+      backgroundColor: theme['gray-glass-020'],
+      borderColor: theme['gray-glass-005']
+    };
+  }
+
+  if (pressed) {
+    return {
+      ...chipBaseStyle,
+      backgroundColor:
+        variant === 'fill'
+          ? theme['accent-020']
+          : variant === 'shade'
+          ? theme['gray-glass-020']
+          : theme['gray-glass-010']
+    };
+  }
+
+  return {
+    ...chipBaseStyle,
+    backgroundColor:
+      variant === 'fill'
+        ? theme['accent-100']
+        : variant === 'shade'
+        ? theme['gray-glass-010']
+        : 'transparent'
+  };
+};
+
+export const getThemedTextColor = (
+  variant: ChipType,
+  disabled?: boolean,
+  pressed?: boolean
+): ThemeKeys => {
+  if (disabled) {
+    return 'fg-300';
+  }
+
+  if (pressed) {
+    return variant === 'fill' ? 'inverse-100' : variant === 'shade' ? 'fg-175' : 'fg-150';
+  }
+
+  return variant === 'fill' ? 'inverse-100' : variant === 'shade' ? 'fg-200' : 'fg-150';
+};
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 40,
+    paddingHorizontal: Spacing.xs,
+    alignItems: 'center',
+    borderRadius: BorderRadius.s,
+    borderWidth: 1
+  },
+  image: {
+    borderRadius: 100,
+    borderWidth: 1
+  },
+  smImage: {
+    width: 16,
+    height: 16
+  },
+  mdImage: {
+    width: 24,
+    height: 24
+  },
+  disabledImage: {
+    opacity: 0.2
+  },
+  smChip: {
+    height: 32
+  },
+  mdChip: {
+    height: 40
+  },
+  link: {
+    paddingHorizontal: Spacing['2xs']
+  },
+  icon: {
+    marginRight: Spacing['3xs']
+  }
+});

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: 1
+  },
+  smButton: {
+    height: 32
+  },
+  mdButton: {
+    height: 40
+  },
+  loader: {
+    marginRight: Spacing['2xs']
+  }
+});

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}
+        onPress={handleChevronPress}
+      />
+    );
+  };
+
+  return (
+    <View style={style}>
+      <InputText
+        icon="mail"
+        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>
+      )}
+    </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,88 @@
+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, 'xl' | 'xs' | 'xxs'>;
+  iconColor?: ColorType;
+  iconSize?: Exclude<SizeType, 'xl'>;
+  background?: boolean;
+  backgroundColor?: ThemeKeys;
+  border?: boolean;
+  borderColor?: ThemeKeys;
+  borderSize?: number;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function IconBox({
+  size,
+  iconColor = 'fg-100',
+  icon,
+  iconSize,
+  background,
+  backgroundColor,
+  border,
+  borderColor,
+  borderSize = 4,
+  style
+}: IconBoxProps) {
+  const Theme = useTheme();
+  let _iconSize: SizeType;
+  switch (size) {
+    case 'lg':
+      _iconSize = 'lg';
+      break;
+    case 'md':
+      _iconSize = 'sm';
+      break;
+    case 'sm':
+      _iconSize = 'xs';
+      break;
+    default:
+      _iconSize = 'xxs';
+  }
+
+  let boxSize: number;
+  switch (size) {
+    case 'lg':
+      boxSize = 40;
+      break;
+    case 'md':
+      boxSize = 32;
+      break;
+    default:
+      boxSize = 24;
+  }
+
+  const borderRadius = size === 'lg' ? 'xxs' : '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
+      ]}
+    >
+      <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>
+  );
+}

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

@@ -0,0 +1,20 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  'container': {
+    padding: Spacing.xs,
+    borderRadius: BorderRadius.xxs,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  'container-sm': {},
+  'container-md': {
+    height: 32,
+    width: 32
+  },
+  'container-lg': {
+    height: 40,
+    width: 40
+  }
+});