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

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

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 56,
+    width: '100%',
+    borderRadius: BorderRadius.xs,
+    paddingHorizontal: Spacing.xs
+  },
+  leftSide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flexGrow: 1
+  },
+  name: {
+    marginHorizontal: Spacing['4xs']
+  },
+  rightIcon: {
+    marginHorizontal: Spacing.xs
+  },
+  image: {
+    marginRight: Spacing.xs
+  },
+  imageDisabled: {
+    opacity: 0.4
+  },
+  installedBox: {
+    position: 'absolute',
+    bottom: -2,
+    right: Spacing['2xs'],
+    height: 18,
+    width: 18,
+    zIndex: 2
+  }
+});

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

@@ -0,0 +1,14 @@
+import type { SvgProps } from 'react-native-svg';
+import { Icon } from '../../components/wui-icon';
+
+import type { LogoType } from '../../utils/TypesUtil';
+
+export interface LogoProps {
+  logo: LogoType;
+  disabled?: boolean;
+  style?: SvgProps['style'];
+}
+
+export function Logo({ logo, style }: LogoProps) {
+  return <Icon width={40} height={40} name={logo} style={style} />;
+}

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

@@ -0,0 +1,32 @@
+import { Animated, Pressable } from 'react-native';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { LogoType } from '../../utils/TypesUtil';
+import { Logo } from '../wui-logo';
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface LogoSelectProps {
+  logo: LogoType;
+  disabled?: boolean;
+}
+
+export function LogoSelect({ logo, disabled }: LogoSelectProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-005'],
+    Theme['gray-glass-010']
+  );
+
+  return (
+    <AnimatedPressable
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      style={[styles.box, { backgroundColor: animatedValue }]}
+      disabled={disabled}
+    >
+      <Logo logo={logo} style={disabled && styles.disabled} />
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  box: {
+    height: 50,
+    width: 50,
+    borderRadius: BorderRadius.xs,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});

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

@@ -0,0 +1,98 @@
+import { Animated, Pressable, 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 styles from './styles';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface NetworkButtonProps {
+  children: string;
+  onPress: () => void;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  loading?: boolean;
+}
+
+export function NetworkButton({
+  imageSrc,
+  imageHeaders,
+  disabled,
+  onPress,
+  style,
+  loading,
+  children
+}: NetworkButtonProps) {
+  const Theme = useTheme();
+  const textColor = disabled ? 'fg-300' : 'fg-100';
+
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-005'],
+    Theme['gray-glass-010']
+  );
+
+  const backgroundColor = disabled ? Theme['gray-glass-015'] : animatedValue;
+
+  return (
+    <AnimatedPressable
+      style={[styles.container, { backgroundColor, borderColor: Theme['gray-glass-005'] }, style]}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      disabled={disabled}
+    >
+      <LoaderComponent loading={loading} />
+      <ImageComponent
+        loading={loading}
+        disabled={disabled}
+        imageSrc={imageSrc}
+        imageHeaders={imageHeaders}
+        borderColor={Theme['gray-glass-005']}
+      />
+      <Text style={styles.text} variant="paragraph-600" color={textColor}>
+        {children}
+      </Text>
+    </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,30 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 40,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderRadius: 100,
+    paddingHorizontal: Spacing['2xs']
+  },
+  text: {
+    paddingHorizontal: Spacing['2xs']
+  },
+  loader: {
+    paddingLeft: Spacing['2xs']
+  },
+  image: {
+    height: 24,
+    width: 24,
+    borderRadius: 100,
+    borderWidth: 2,
+    paddingLeft: Spacing['4xs']
+  },
+  imageDisabled: {
+    opacity: 0.4
+  }
+});

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

@@ -0,0 +1,49 @@
+import { Path, Svg, Image, Defs, Pattern } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+import type { SizeType } from '../../utils/TypesUtil';
+import { PathLg, PathNormal } from './styles';
+
+export interface NetworkImageProps {
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  selected?: boolean;
+  size?: Exclude<SizeType, 'xl' | 'sm' | 'xs' | 'xxs'>;
+  disabled?: boolean;
+}
+
+export function NetworkImage({
+  imageSrc,
+  imageHeaders,
+  disabled,
+  selected,
+  size = 'md'
+}: NetworkImageProps) {
+  const Theme = useTheme();
+  const isLg = size === 'lg';
+  const svgWidth = isLg ? 96 : 56;
+  const svgHeight = isLg ? 96 : 56;
+  const svgStroke = selected ? Theme['accent-100'] : Theme['gray-glass-010'];
+  const opacity = disabled ? 0.5 : 1;
+
+  return (
+    <Svg width={svgWidth} height={svgHeight} stroke={svgStroke} strokeWidth={1}>
+      <Defs>
+        <Pattern id="image-pattern" x="0" y="0" width="1" height="1">
+          <Image
+            height={svgHeight}
+            width={svgWidth}
+            x="0"
+            y="0"
+            opacity={opacity}
+            href={{ uri: imageSrc, headers: imageHeaders }}
+          />
+        </Pattern>
+      </Defs>
+      <Path
+        d={`${isLg ? PathLg : PathNormal}`}
+        opacity={opacity}
+        fill={imageSrc ? 'url(#image-pattern)' : Theme['gray-glass-005']}
+      />
+    </Svg>
+  );
+}

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

@@ -0,0 +1,5 @@
+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';

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

@@ -0,0 +1,99 @@
+import { createRef, useMemo, useState } from 'react';
+import {
+  type NativeSyntheticEvent,
+  TextInput,
+  type TextInputKeyPressEventData,
+  View,
+  Platform
+} 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}
+          key={index}
+          style={style}
+          value={value[index] || ''}
+          inputRef={refArray[index]}
+          onChangeText={text => _onChangeText(text, index)}
+          onKeyPress={(e: any) => onKeyPress(e, index)}
+          textContentType="oneTimeCode"
+          autoComplete={Platform.OS === 'android' ? 'sms-otp' : 'one-time-code'}
+        />
+      ))}
+    </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,71 @@
+import { useMemo } from 'react';
+import { View } 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 styles from './styles';
+
+export interface QrCodeProps {
+  size: number;
+  uri?: string;
+  imageSrc?: string;
+  testID?: string;
+}
+
+export function QrCode({ size, uri, imageSrc, testID }: QrCodeProps) {
+  const Theme = LightTheme;
+  const containerPadding = Spacing.l;
+  const qrSize = size - containerPadding * 2;
+  const dots = useMemo(
+    () => (uri ? QRCodeUtil.generate(uri, qrSize, qrSize / 4) : []),
+    [uri, qrSize]
+  );
+
+  const shimmerTemplate = () => {
+    return <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />;
+  };
+
+  const logoTemplate = () => {
+    if (imageSrc) {
+      return (
+        <Image
+          source={imageSrc}
+          style={[
+            styles.icon,
+            { height: qrSize / 4, width: qrSize / 4, borderRadius: qrSize / 16 }
+          ]}
+        />
+      );
+    }
+
+    return (
+      <Icon
+        name="walletConnect"
+        color="accent-100"
+        height={qrSize / 3.5}
+        width={qrSize / 3.5}
+        style={styles.icon}
+      />
+    );
+  };
+
+  return uri ? (
+    <View
+      style={[
+        styles.container,
+        { height: size, width: size, backgroundColor: Theme['bg-100'], padding: containerPadding }
+      ]}
+      testID={testID}
+    >
+      <Svg height={qrSize} width={qrSize}>
+        {dots}
+      </Svg>
+      {logoTemplate()}
+    </View>
+  ) : (
+    shimmerTemplate()
+  );
+}

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,56 @@
+import { useRef, useState } from 'react';
+import { TextInput, type TextInputProps } from 'react-native';
+
+import { InputElement } from '../wui-input-element';
+import { InputText } from '../wui-input-text';
+import { Spacing } from '../../utils/ThemeUtil';
+
+export interface SearchBarProps {
+  placeholder?: string;
+  onSubmitEditing?: TextInputProps['onSubmitEditing'];
+  onChangeText?: TextInputProps['onChangeText'];
+  inputStyle?: TextInputProps['style'];
+  testID?: string;
+}
+
+export function SearchBar({
+  placeholder = 'Search wallet',
+  onSubmitEditing,
+  onChangeText,
+  inputStyle,
+  testID
+}: SearchBarProps) {
+  const [showClear, setShowClear] = useState(false);
+  const inputRef = useRef<TextInput>(null);
+
+  const handleChangeText = (text: string) => {
+    setShowClear(!!text?.length);
+    onChangeText?.(text);
+  };
+
+  return (
+    <InputText
+      ref={inputRef}
+      placeholder={placeholder}
+      onChangeText={handleChangeText}
+      onSubmitEditing={onSubmitEditing}
+      icon="search"
+      inputStyle={inputStyle}
+      returnKeyType="search"
+      disableFullscreenUI
+      testID={testID}
+    >
+      {showClear && (
+        <InputElement
+          icon="close"
+          style={{ marginRight: Spacing['4xs'] }}
+          onPress={() => {
+            inputRef.current?.clear();
+            inputRef.current?.focus();
+            handleChangeText('');
+          }}
+        />
+      )}
+    </InputText>
+  );
+}

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

@@ -0,0 +1,32 @@
+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';
+
+export interface SnackbarProps {
+  message: string;
+  iconColor: ColorType;
+  icon: IconType;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Snackbar({ message, iconColor, icon, style }: SnackbarProps) {
+  const Theme = useTheme();
+
+  return (
+    <Animated.View
+      style={[
+        styles.container,
+        { backgroundColor: Theme['bg-175'], borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+    >
+      <IconBox icon={icon} iconColor={iconColor} size="sm" background />
+      <Text variant="paragraph-500" color="fg-100" style={styles.text}>
+        {message}
+      </Text>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 40,
+    flexDirection: 'row',
+    paddingHorizontal: 8,
+    borderRadius: 100,
+    borderWidth: 1,
+    alignItems: 'center'
+  },
+  text: {
+    paddingHorizontal: 8
+  }
+});

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

@@ -0,0 +1,67 @@
+import { useRef, useState } from 'react';
+import { Animated, Pressable, View } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import type { TabOptionType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export interface TabsProps {
+  onTabChange: (index: number) => void;
+  tabs: TabOptionType[];
+}
+
+export function Tabs({ tabs, onTabChange }: TabsProps) {
+  const Theme = useTheme();
+  const [activeTab, setActiveTab] = useState(0);
+  const animatedPosition = useRef(new Animated.Value(0));
+
+  const onTabPress = (index: number) => {
+    setActiveTab(index);
+    onTabChange(index);
+    Animated.timing(animatedPosition.current, {
+      toValue: index,
+      duration: 120,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const markPosition = animatedPosition.current.interpolate({
+    inputRange: [0, tabs.length - 1],
+    outputRange: [0, 100 * (tabs.length - 1)]
+  });
+
+  return (
+    <View style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }]}>
+      <Animated.View
+        style={[
+          styles.activeMark,
+          {
+            backgroundColor: Theme['gray-glass-005'],
+            borderColor: Theme['gray-glass-005'],
+            left: markPosition
+          }
+        ]}
+      />
+      {tabs.map((option, index) => {
+        const isActive = index === activeTab;
+
+        return (
+          <Pressable onPress={() => onTabPress(index)} key={option.label} style={styles.tabItem}>
+            {option.icon && (
+              <Icon
+                name={option.icon}
+                size="xs"
+                color={isActive ? 'fg-100' : 'fg-200'}
+                style={styles.tabIcon}
+              />
+            )}
+            <Text variant="small-600" color={isActive ? 'fg-100' : 'fg-200'}>
+              {option.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

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

@@ -0,0 +1,30 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    height: 34,
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: Spacing['3xs'],
+    borderRadius: BorderRadius['3xl']
+  },
+  tabItem: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 100,
+    paddingVertical: Spacing['2xs']
+  },
+  tabIcon: {
+    marginRight: Spacing['3xs']
+  },
+  activeMark: {
+    position: 'absolute',
+    height: 28,
+    width: 100,
+    borderWidth: 1,
+    borderRadius: BorderRadius['3xl'],
+    margin: Spacing['3xs']
+  }
+});