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

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

@@ -0,0 +1,124 @@
+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 { Icon } from '../../components/wui-icon';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+import { useTheme } from '../../hooks/useTheme';
+import type { ButtonType, IconType, SizeType } from '../../utils/TypesUtil';
+
+import styles, { getThemedButtonStyle, getThemedTextStyle, getIconColor } from './styles';
+import type { SvgProps } from 'react-native-svg';
+import { FlexView } from '../../layout/wui-flex';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type ButtonProps = NativeProps & {
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
+  variant?: ButtonType;
+  disabled?: boolean;
+  iconLeft?: IconType;
+  iconRight?: IconType;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  iconStyle?: SvgProps['style'];
+  loading?: boolean;
+  testID?: string;
+};
+
+export function Button({
+  children,
+  size = 'md',
+  variant = 'fill',
+  disabled,
+  onPress,
+  style,
+  iconLeft,
+  iconRight,
+  iconStyle,
+  loading,
+  testID,
+  ...rest
+}: ButtonProps) {
+  const Theme = useTheme();
+  const themedTextStyle = getThemedTextStyle(Theme, variant, disabled);
+  const colorAnimation = useRef(new Animated.Value(0));
+  const iconSize = size === 'md' ? 'sm' : 'xs';
+  const iconColor = getIconColor(variant, disabled);
+  const themedNormalStyle = getThemedButtonStyle(Theme, variant, disabled, false);
+  const themedPressedStyle = getThemedButtonStyle(Theme, variant, disabled, 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]
+  });
+
+  return (
+    <AnimatedPressable
+      disabled={disabled || loading}
+      style={[styles.button, styles[`${size}Button`], { backgroundColor, borderColor }, style]}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={onPress}
+      testID={testID}
+      {...rest}
+    >
+      <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+        {iconLeft ? (
+          <Icon
+            color={iconColor}
+            name={iconLeft}
+            size={iconSize}
+            style={[styles.iconLeft, iconStyle]}
+          />
+        ) : null}
+        {loading ? <LoadingSpinner color={iconColor} size="md" /> : null}
+        {!loading &&
+          (typeof children === 'string' ? (
+            <Text
+              variant={size === 'md' ? 'paragraph-600' : 'small-600'}
+              style={[styles.text, themedTextStyle]}
+            >
+              {children}
+            </Text>
+          ) : (
+            children
+          ))}
+        {iconRight ? (
+          <Icon
+            color={iconColor}
+            name={iconRight}
+            size={iconSize}
+            style={[styles.iconRight, iconStyle]}
+          />
+        ) : null}
+      </FlexView>
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { type StyleProp, StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import type { ButtonType, ThemeKeys } from '../../utils/TypesUtil';
+
+export const getThemedButtonStyle = (
+  theme: { [key in ThemeKeys]: string },
+  variant: ButtonType,
+  disabled?: boolean,
+  pressed?: boolean
+): StyleProp<any> => {
+  const buttonBaseStyle = {
+    borderColor: theme['accent-glass-020']
+  };
+
+  if (disabled) {
+    return {
+      ...buttonBaseStyle,
+      backgroundColor: variant === 'fill' ? theme['gray-glass-005'] : theme['gray-glass-010']
+    };
+  }
+
+  if (pressed) {
+    return {
+      ...buttonBaseStyle,
+      backgroundColor: variant === 'fill' ? theme['accent-020'] : theme['gray-glass-010']
+    };
+  }
+
+  return {
+    ...buttonBaseStyle,
+    backgroundColor: variant === 'fill' ? theme['accent-100'] : theme['gray-glass-005']
+  };
+};
+
+export const getThemedTextStyle = (
+  theme: { [key in ThemeKeys]: string },
+  variant: ButtonType,
+  disabled?: boolean
+): StyleProp<any> => {
+  if (disabled) {
+    return { color: theme['gray-glass-020'] };
+  }
+
+  return variant === 'fill'
+    ? { color: theme['inverse-100'] }
+    : variant === 'accent'
+    ? { color: theme['accent-100'] }
+    : { color: theme['fg-100'] };
+};
+
+export const getIconColor = (variant: ButtonType, disabled?: boolean) => {
+  if (disabled) {
+    return 'gray-glass-020';
+  }
+
+  return variant === 'fill' ? 'inverse-100' : variant === 'accent' ? 'accent-100' : 'fg-100';
+};
+
+export default StyleSheet.create({
+  button: {
+    paddingVertical: Spacing['3xs'],
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius.xs,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  smButton: {
+    height: 32,
+    paddingHorizontal: Spacing.xs,
+    borderRadius: BorderRadius['3xl']
+  },
+  mdButton: {
+    height: 48,
+    paddingHorizontal: Spacing.xs,
+    borderRadius: BorderRadius.s
+  },
+  text: {
+    marginHorizontal: Spacing['3xs']
+  },
+  iconRight: {
+    marginRight: Spacing['3xs']
+  },
+  iconLeft: {
+    marginLeft: Spacing['3xs']
+  }
+});

package/src/composites/wui-card-select/index.tsx

@@ -0,0 +1,104 @@
+import { memo, useMemo } from 'react';
+import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/wui-text';
+import { IconBox } from '../wui-icon-box';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { CardSelectType } from '../../utils/TypesUtil';
+import { NetworkImage } from '../wui-network-image';
+import { WalletImage } from '../wui-wallet-image';
+import styles, { getBackgroundColor, ITEM_HEIGHT, ITEM_WIDTH } from './styles';
+import { UiUtil } from '../../utils/UiUtil';
+import { FlexView } from '../../layout/wui-flex';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const CardSelectHeight = ITEM_HEIGHT;
+export const CardSelectWidth = ITEM_WIDTH;
+
+export interface CardSelectProps {
+  name: string;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  disabled?: boolean;
+  installed?: boolean;
+  selected?: boolean;
+  type?: CardSelectType;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+function CardSelect_({
+  name,
+  type = 'wallet',
+  imageSrc,
+  imageHeaders,
+  onPress,
+  disabled,
+  installed,
+  selected,
+  style,
+  testID
+}: CardSelectProps) {
+  const Theme = useTheme();
+  const normalbackgroundColor = getBackgroundColor({ selected, disabled, pressed: false });
+  const pressedBackgroundColor = getBackgroundColor({ selected, disabled, pressed: true });
+  const Image = useMemo(() => (type === 'wallet' ? WalletImage : NetworkImage), [type]);
+
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme[normalbackgroundColor],
+    Theme[pressedBackgroundColor]
+  );
+
+  const textColor = disabled ? 'fg-300' : selected ? 'accent-100' : 'fg-100';
+
+  return (
+    <FlexView style={style} alignItems="center" justifyContent="center">
+      <AnimatedPressable
+        onPress={onPress}
+        onPressIn={setEndValue}
+        onPressOut={setStartValue}
+        disabled={disabled}
+        style={[styles.container, { backgroundColor: animatedValue }]}
+        testID={testID}
+      >
+        <View>
+          <Image
+            imageSrc={imageSrc}
+            imageHeaders={imageHeaders}
+            size="md"
+            style={disabled ? styles.disabledImage : null}
+            selected={selected}
+            disabled={disabled}
+          />
+          {installed ? (
+            <IconBox
+              icon="checkmark"
+              iconSize="xs"
+              iconColor={'success-100'}
+              border
+              borderSize={6}
+              borderColor="bg-150"
+              background
+              backgroundColor="icon-box-bg-success-100"
+              size="sm"
+              style={styles.installedBox}
+            />
+          ) : null}
+        </View>
+        <Text variant="tiny-500" color={textColor} style={styles.text} numberOfLines={1}>
+          {UiUtil.getWalletName(name)}
+        </Text>
+      </AnimatedPressable>
+    </FlexView>
+  );
+}
+
+export const CardSelect = memo(CardSelect_, (prevProps, nextProps) => {
+  return (
+    prevProps.name === nextProps.name &&
+    prevProps.imageSrc === nextProps.imageSrc &&
+    prevProps.selected === nextProps.selected
+  );
+});

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

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import type { ThemeKeys } from '../../utils/TypesUtil';
+
+export const ITEM_HEIGHT = 96;
+export const ITEM_WIDTH = 76;
+
+export const getBackgroundColor = ({
+  selected,
+  disabled,
+  pressed
+}: {
+  selected?: boolean;
+  disabled?: boolean;
+  pressed?: boolean;
+}): ThemeKeys => {
+  if (disabled) return 'gray-glass-005';
+  if (selected) return 'accent-glass-020';
+
+  return pressed ? 'gray-glass-010' : 'gray-glass-002';
+};
+
+export default StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: ITEM_HEIGHT,
+    width: ITEM_WIDTH,
+    borderRadius: BorderRadius.xs
+  },
+  text: {
+    marginTop: Spacing.xs,
+    marginHorizontal: Spacing['2xs']
+  },
+  disabledImage: {
+    opacity: 0.4
+  },
+  installedBox: {
+    position: 'absolute',
+    bottom: -5,
+    right: -5,
+    height: 24,
+    width: 24,
+    zIndex: 2
+  }
+});

package/src/composites/wui-card-select-loader/index.tsx

@@ -0,0 +1,40 @@
+import { memo } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { BorderRadius, Spacing, WalletImageSize } from '../../utils/ThemeUtil';
+import { useTheme } from '../../hooks/useTheme';
+import { Shimmer } from '../../components/wui-shimmer';
+import { FlexView } from '../../layout/wui-flex';
+import styles, { ITEM_HEIGHT } from './styles';
+
+export const CardSelectLoaderHeight = ITEM_HEIGHT;
+
+export interface CardSelectLoaderProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CardSelectLoader_({ style }: CardSelectLoaderProps) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      alignItems="center"
+      justifyContent="center"
+      style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }, style]}
+    >
+      <Shimmer
+        height={WalletImageSize.md}
+        width={WalletImageSize.md}
+        borderRadius={BorderRadius.xs}
+      />
+      <Shimmer
+        height={14}
+        width={WalletImageSize.md - Spacing.xs}
+        borderRadius={6}
+        style={styles.text}
+      />
+    </FlexView>
+  );
+}
+export const CardSelectLoader = memo(CardSelectLoader_, () => {
+  return true;
+});

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,111 @@
+import { useRef, useState } from 'react';
+import { Animated, 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 {
+  label?: string;
+  imageSrc?: string;
+  leftIcon?: IconType;
+  rightIcon?: IconType;
+  variant?: ChipType;
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
+}
+
+export function Chip({
+  onPress,
+  imageSrc,
+  leftIcon,
+  rightIcon,
+  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 handlePress = () => {
+    onPress?.();
+  };
+
+  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={handlePress}
+    >
+      {imageSrc ? (
+        <Image
+          style={[
+            styles.image,
+            styles[`${size}Image`],
+            { borderColor: themedNormalStyle.borderColor },
+            disabled && styles.disabledImage
+          ]}
+          source={imageSrc}
+        />
+      ) : null}
+      {leftIcon ? <Icon name={leftIcon} color={themedTextColor as ColorType} /> : null}
+      <Text
+        variant={size === 'md' ? 'paragraph-600' : 'small-600'}
+        style={[styles.link, { color: Theme[themedTextColor] }]}
+      >
+        {label}
+      </Text>
+      {rightIcon ? (
+        <Icon
+          name={rightIcon}
+          size={iconSize}
+          color={themedTextColor as ColorType}
+          style={styles.icon}
+        />
+      ) : null}
+    </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: StyleSheet.hairlineWidth
+  },
+  image: {
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  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-compatible-network/index.tsx

@@ -0,0 +1,64 @@
+import { Text } from '../../components/wui-text';
+import { NetworkImage } from '../wui-network-image';
+import { FlexView } from '../../layout/wui-flex';
+import { ListItem } from '../wui-list-item';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+
+export interface CompatibleNetworkProps {
+  text: string;
+  onPress: () => void;
+  networkImages: string[];
+  imageHeaders: Record<string, string>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CompatibleNetwork({
+  text,
+  onPress,
+  networkImages,
+  imageHeaders,
+  style
+}: CompatibleNetworkProps) {
+  const Theme = useTheme();
+
+  return (
+    <ListItem
+      onPress={onPress}
+      style={[styles.container, style]}
+      contentStyle={styles.contentContainer}
+      chevron
+    >
+      <Text color="fg-200" variant="small-400">
+        {text}
+      </Text>
+      <FlexView flexDirection="row" justifyContent="center" alignItems="center">
+        {networkImages?.map((image, index) => (
+          <NetworkImage
+            size="xs"
+            key={image}
+            imageSrc={image}
+            imageHeaders={imageHeaders}
+            borderColor={Theme['bg-200']}
+            borderWidth={2}
+            style={[styles.item, { zIndex: networkImages.length - index }]}
+          />
+        ))}
+      </FlexView>
+    </ListItem>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 48
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingRight: 0
+  },
+  item: {
+    marginLeft: -5
+  }
+});