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

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

@@ -0,0 +1,108 @@
+import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Image } from '../../components/wui-image';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import { IconBox } from '../wui-icon-box';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface NetworkButtonProps {
+  children: string | React.ReactNode;
+  onPress: () => void;
+  background?: boolean;
+  disabled?: boolean;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  loading?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function NetworkButton({
+  children,
+  onPress,
+  background = true,
+  disabled,
+  imageSrc,
+  imageHeaders,
+  loading,
+  style,
+  testID
+}: NetworkButtonProps) {
+  const Theme = useTheme();
+  const textColor = disabled ? 'fg-300' : 'fg-100';
+
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    background ? Theme['gray-glass-005'] : 'transparent',
+    Theme['gray-glass-010']
+  );
+
+  const backgroundColor = disabled ? Theme['gray-glass-015'] : animatedValue;
+  const borderColor = background ? Theme['gray-glass-005'] : 'transparent';
+
+  return (
+    <AnimatedPressable
+      style={[styles.container, { backgroundColor, borderColor }, style]}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      disabled={disabled}
+      testID={testID}
+    >
+      <LoaderComponent loading={loading} />
+      <ImageComponent
+        loading={loading}
+        disabled={disabled}
+        imageSrc={imageSrc}
+        imageHeaders={imageHeaders}
+        borderColor={Theme['gray-glass-005']}
+      />
+      {typeof children === 'string' ? (
+        <Text style={styles.children} variant="paragraph-600" color={textColor}>
+          {children}
+        </Text>
+      ) : (
+        <View style={styles.children}>{children}</View>
+      )}
+    </AnimatedPressable>
+  );
+}
+
+function LoaderComponent({ loading }: { loading?: boolean }) {
+  if (!loading) return null;
+
+  return <LoadingSpinner size="md" style={styles.loader} />;
+}
+
+function ImageComponent({
+  loading,
+  disabled,
+  imageSrc,
+  imageHeaders,
+  borderColor
+}: {
+  loading?: boolean;
+  disabled?: boolean;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  borderColor: string;
+}) {
+  if (loading) return null;
+
+  const textColor = disabled ? 'fg-300' : 'fg-100';
+  if (!imageSrc) {
+    return <IconBox icon="networkPlaceholder" background iconColor={textColor} size="sm" />;
+  }
+
+  return (
+    <Image
+      style={[styles.image, { borderColor }, disabled && styles.imageDisabled]}
+      source={imageSrc}
+      headers={imageHeaders}
+    />
+  );
+}

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

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: BorderRadius.full,
+    paddingHorizontal: Spacing['2xs']
+  },
+  children: {
+    paddingHorizontal: Spacing['2xs']
+  },
+  loader: {
+    paddingLeft: Spacing['2xs']
+  },
+  image: {
+    height: 24,
+    width: 24,
+    borderRadius: BorderRadius.full,
+    borderWidth: 2
+  },
+  imageDisabled: {
+    opacity: 0.4
+  }
+});

package/src/composites/wui-network-image/index.tsx

@@ -0,0 +1,101 @@
+import { Path, Svg, Image, Defs, Pattern, G } from 'react-native-svg';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import type { SizeType } from '../../utils/TypesUtil';
+import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
+import { PathLg, PathNormal, PathSmall, PathXS } from './styles';
+
+export interface NetworkImageProps {
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  selected?: boolean;
+  size?: Exclude<SizeType, 'xl' | 'xxs'>;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  borderColor?: string;
+  borderWidth?: number;
+}
+
+const sizeToPath = {
+  lg: PathLg,
+  md: PathNormal,
+  sm: PathSmall,
+  xs: PathXS
+};
+
+const sizeToHeight = {
+  lg: 96,
+  md: 56,
+  sm: 40,
+  xs: 20
+};
+
+const sizeToIconSize = {
+  lg: 24,
+  md: 16,
+  sm: 14,
+  xs: 12
+};
+
+export function NetworkImage({
+  imageSrc,
+  imageHeaders,
+  disabled,
+  selected,
+  size = 'md',
+  style,
+  borderColor,
+  borderWidth = 1
+}: NetworkImageProps) {
+  const Theme = useTheme();
+  const svgStroke = selected ? Theme['accent-100'] : Theme['gray-glass-010'];
+  const opacity = disabled ? 0.5 : 1;
+  const containerSize = sizeToHeight[size];
+  const iconSize = sizeToIconSize[size];
+
+  return (
+    <Svg
+      width={containerSize}
+      height={containerSize}
+      stroke={borderColor ?? svgStroke}
+      strokeWidth={borderWidth}
+      style={style}
+    >
+      {imageSrc ? (
+        <>
+          <Defs>
+            <Pattern
+              id="image-pattern"
+              width={containerSize}
+              height={containerSize}
+              patternUnits="userSpaceOnUse"
+            >
+              <Image
+                height={containerSize}
+                width={containerSize}
+                opacity={opacity}
+                href={{ uri: imageSrc, headers: imageHeaders }}
+              />
+            </Pattern>
+          </Defs>
+          <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+        </>
+      ) : (
+        <>
+          <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />
+          <G
+            transform={`translate(${(containerSize - iconSize) / 2}, ${
+              (containerSize - iconSize) / 2
+            })`}
+          >
+            <NetworkPlaceholderSvg
+              fill={selected ? Theme['accent-100'] : Theme['fg-200']}
+              width={iconSize}
+              height={iconSize}
+            />
+          </G>
+        </>
+      )}
+    </Svg>
+  );
+}

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

@@ -0,0 +1,11 @@
+export const PathLg =
+  'M41.1429 4.01705C45.3861 1.56723 50.6139 1.56723 54.8572 4.01705L82.7121 20.0991C86.9553 22.5489 89.5692 27.0764 89.5692 31.976V64.1401C89.5692 69.0398 86.9553 73.5672 82.7121 76.0171L54.8571 92.0991C50.6139 94.5489 45.3861 94.5489 41.1429 92.0991L13.2879 76.0171C9.04471 73.5672 6.43079 69.0398 6.43079 64.1401V31.976C6.43079 27.0764 9.04471 22.5489 13.2879 20.0991L41.1429 4.01705Z';
+
+export const PathNormal =
+  'M24.0002 2.34328C26.4754 0.914219 29.525 0.914219 32.0002 2.34328L48.2489 11.7245C50.7241 13.1535 52.2489 15.7946 52.2489 18.6527V37.4151C52.2489 40.2732 50.7241 42.9142 48.2489 44.3433L32.0002 53.7245C29.525 55.1535 26.4754 55.1535 24.0002 53.7245L7.75146 44.3433C5.27625 42.9142 3.75146 40.2732 3.75146 37.4151V18.6527C3.75146 15.7946 5.27626 13.1535 7.75146 11.7245L24.0002 2.34328Z';
+
+export const PathSmall =
+  'M17.1428 1.67377C18.9108 0.653013 21.0891 0.653014 22.8571 1.67377L34.4633 8.37463C36.2313 9.39539 37.3205 11.2818 37.3205 13.3233V26.7251C37.3205 28.7666 36.2313 30.653 34.4633 31.6738L22.8571 38.3746C21.0891 39.3954 18.9108 39.3954 17.1428 38.3746L5.53659 31.6738C3.76858 30.653 2.67944 28.7666 2.67944 26.7251V13.3233C2.67944 11.2818 3.76858 9.39539 5.53659 8.37463L17.1428 1.67377Z';
+
+export const PathXS =
+  'M8.57153 0.836886C9.45553 0.326507 10.5447 0.326507 11.4287 0.836886L17.2318 4.18731C18.1158 4.69769 18.6604 5.64091 18.6604 6.66167V13.3625C18.6604 14.3833 18.1158 15.3265 17.2318 15.8369L11.4287 19.1873C10.5447 19.6977 9.45553 19.6977 8.57153 19.1873L2.76841 15.8369C1.88441 15.3265 1.33984 14.3833 1.33984 13.3625V6.66167C1.33984 5.64091 1.88441 4.69769 2.76841 4.18731L8.57153 0.836886Z';

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

@@ -0,0 +1,67 @@
+import { memo } from 'react';
+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;
+}
+
+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>
+  );
+}
+
+export const NumericKeyboard = memo(_NumericKeyboard);
+
+const styles = StyleSheet.create({
+  row: {
+    marginBottom: 10
+  },
+  key: {
+    width: 70,
+    height: 50,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  keyText: {
+    fontSize: 26
+  }
+});

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

@@ -0,0 +1,97 @@
+import { createRef, useMemo, useState } from 'react';
+import {
+  type NativeSyntheticEvent,
+  TextInput,
+  type TextInputKeyPressEventData,
+  View
+} from 'react-native';
+import { InputNumeric, type InputNumericProps } from '../wui-input-numeric';
+import styles from './styles';
+
+export interface OtpProps {
+  length: number;
+  style?: InputNumericProps['style'];
+  onChangeText?: (text: string) => void;
+  autoFocus?: boolean;
+}
+
+export function Otp({ length, style, onChangeText, autoFocus }: OtpProps) {
+  const [value, setValue] = useState<string[]>([]);
+
+  const refArray = useMemo(
+    () => Array.from({ length }).map(() => createRef<TextInput>()),
+    [length]
+  );
+
+  const _onChangeText = (text: string, index: number) => {
+    let newValue;
+
+    if (text.length <= 1) {
+      newValue = [...value.slice(0, index), text, ...value.slice(index + 1)];
+    } else if (text.length === length) {
+      // Paste OTP
+      newValue = text.split('');
+      focusInputField('next', length - 1);
+    } else if (text.length === 2) {
+      // Replace value
+      newValue = [
+        ...value.slice(0, index),
+        (value[index] === text[0] ? text[1] : text[0]) ?? '',
+        ...value.slice(index + 1)
+      ];
+    } else {
+      newValue = [...value.slice(0, index), text[0] ?? '', ...value.slice(index + 1)];
+      focusInputField('next', index);
+    }
+
+    setValue(newValue);
+    onChangeText?.(newValue.join(''));
+  };
+
+  const focusInputField = (dir: 'prev' | 'next', currentIndex: number, clear = false) => {
+    let newIndex;
+    if (dir === 'prev' && currentIndex > 0) {
+      newIndex = currentIndex - 1;
+    } else if (dir === 'next' && currentIndex < length - 1) {
+      newIndex = currentIndex + 1;
+    }
+
+    if (newIndex !== undefined) {
+      refArray[newIndex]?.current?.focus();
+      if (clear) {
+        refArray[newIndex]?.current?.clear();
+        _onChangeText('', newIndex);
+      }
+    }
+  };
+
+  const onKeyPress = (e: NativeSyntheticEvent<TextInputKeyPressEventData>, index: number) => {
+    const currentValue = value[index] || '';
+    const key = e.nativeEvent.key;
+
+    if (key === 'Backspace') {
+      if (!currentValue) {
+        focusInputField('prev', index, true);
+      }
+    } else {
+      focusInputField('next', index);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {Array.from({ length }).map((_, index) => (
+        <InputNumeric
+          autoFocus={autoFocus ? index === 0 : undefined}
+          key={index}
+          style={style}
+          value={value[index] || ''}
+          inputRef={refArray[index]}
+          onChangeText={text => _onChangeText(text, index)}
+          onKeyPress={(e: any) => onKeyPress(e, index)}
+          autoComplete="off"
+        />
+      ))}
+    </View>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row'
+  }
+});

package/src/composites/wui-qr-code/index.tsx

@@ -0,0 +1,86 @@
+import { memo, useMemo } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg from 'react-native-svg';
+import { Icon } from '../../components/wui-icon';
+import { Image } from '../../components/wui-image';
+import { Shimmer } from '../../components/wui-shimmer';
+import { QRCodeUtil } from '../../utils/QRCodeUtil';
+import { BorderRadius, LightTheme, Spacing } from '../../utils/ThemeUtil';
+import type { IconType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export interface QrCodeProps {
+  size: number;
+  uri?: string;
+  imageSrc?: string;
+  icon?: IconType;
+  testID?: string;
+  arenaClear?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function QrCode_({ size, uri, imageSrc, testID, arenaClear, icon, style }: QrCodeProps) {
+  const Theme = LightTheme;
+  const containerPadding = Spacing.l;
+  const qrSize = size - containerPadding * 2;
+  const logoSize = arenaClear ? 0 : qrSize / 4;
+
+  const dots = useMemo(
+    () => (uri ? QRCodeUtil.generate(uri, qrSize, logoSize) : []),
+    [uri, qrSize, logoSize]
+  );
+
+  const logoTemplate = () => {
+    if (arenaClear) {
+      return null;
+    }
+
+    if (imageSrc) {
+      return (
+        <Image
+          source={imageSrc}
+          style={[
+            styles.icon,
+            { height: qrSize / 4, width: qrSize / 4, borderRadius: qrSize / 16 }
+          ]}
+        />
+      );
+    }
+
+    return (
+      <Icon
+        name={icon ?? 'walletConnect'}
+        color="accent-100"
+        height={qrSize / 3.5}
+        width={qrSize / 3.5}
+        style={styles.icon}
+      />
+    );
+  };
+
+  return uri ? (
+    <View
+      style={[
+        styles.container,
+        { width: size, backgroundColor: Theme['inverse-100'], padding: containerPadding },
+        style
+      ]}
+      testID={testID}
+    >
+      <Svg height={qrSize} width={qrSize}>
+        {dots}
+      </Svg>
+      {logoTemplate()}
+    </View>
+  ) : (
+    <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />
+  );
+}
+
+export const QrCode = memo(QrCode_, (prevProps, nextProps) => {
+  return (
+    prevProps.size === nextProps.size &&
+    prevProps.uri === nextProps.uri &&
+    prevProps.style === nextProps.style
+  );
+});

package/src/composites/wui-qr-code/styles.ts

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius.l,
+    padding: Spacing.l,
+    alignSelf: 'center'
+  },
+  icon: {
+    position: 'absolute'
+  }
+});

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

@@ -0,0 +1,58 @@
+import { useRef, useState } from 'react';
+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',
+  onSubmitEditing,
+  onChangeText,
+  inputStyle,
+  style
+}: SearchBarProps) {
+  const [showClear, setShowClear] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const handleChangeText = (text: string) => {
+    setShowClear(!!text?.length);
+    onChangeText?.(text);
+  };
+
+  return (
+    <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('');
+            }}
+          />
+        ) : null}
+      </InputText>
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, IconType } from '../../utils/TypesUtil';
+import { IconBox } from '../wui-icon-box';
+import styles from './styles';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+
+export interface SnackbarProps {
+  message: string;
+  iconColor: ColorType;
+  icon: IconType | 'loading';
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Snackbar({ message, iconColor, icon, style }: SnackbarProps) {
+  const Theme = useTheme();
+
+  return (
+    <Animated.View
+      pointerEvents="none"
+      style={[
+        styles.container,
+        { backgroundColor: Theme['bg-175'], borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+    >
+      {icon === 'loading' ? (
+        <LoadingSpinner size="md" />
+      ) : (
+        <IconBox icon={icon} iconColor={iconColor} size="sm" background />
+      )}
+      <Text
+        variant="paragraph-500"
+        color="fg-100"
+        style={styles.text}
+        testID="wui-snackbar-message"
+      >
+        {message}
+      </Text>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,16 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    height: 40,
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth,
+    alignItems: 'center'
+  },
+  text: {
+    paddingHorizontal: 8
+  }
+});