@reown/appkit-ui-react-native 1.0.2 → 1.1.0

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

@@ -15,7 +15,7 @@ export interface AccountButtonProps {
   imageHeaders?: Record<string, string>;
   avatarSrc?: string;
   address?: string;
-  isProfileName?: boolean;
+  profileName?: string;
   balance?: string;
   onPress?: () => void;
   disabled?: boolean;
@@ -28,7 +28,7 @@ export function AccountButton({
   imageHeaders,
   avatarSrc,
   address,
-  isProfileName,
+  profileName,
   balance,
   onPress,
   disabled,
@@ -73,6 +73,20 @@ export function AccountButton({
     return null;
   }
 
+  const formattedAddress = profileName
+    ? UiUtil.getTruncateString({
+        string: profileName,
+        charsStart: 18,
+        charsEnd: 0,
+        truncate: 'end'
+      })
+    : UiUtil.getTruncateString({
+        string: address || '',
+        charsStart: 4,
+        charsEnd: 6,
+        truncate: 'middle'
+      });
+
   return (
     <AnimatedPressable
       onPress={onPress}
@@ -102,12 +116,7 @@ export function AccountButton({
         />
         {address && (
           <Text variant="paragraph-500" color="fg-200" style={styles.address}>
-            {UiUtil.getTruncateString({
-              string: address,
-              charsStart: isProfileName ? 18 : 4,
-              charsEnd: isProfileName ? 0 : 6,
-              truncate: isProfileName ? 'end' : 'middle'
-            })}
+            {formattedAddress}
           </Text>
         )}
       </View>

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

@@ -1,12 +1,12 @@
 import { StyleSheet } from 'react-native';
-import { Spacing } from '../../utils/ThemeUtil';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
   container: {
     flexDirection: 'row',
     height: 40,
-    borderRadius: 100,
-    borderWidth: 1,
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth,
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: Spacing['3xs']
@@ -14,7 +14,7 @@ export default StyleSheet.create({
   image: {
     height: 24,
     width: 24,
-    borderRadius: 100,
+    borderRadius: BorderRadius.full,
     borderWidth: 2
   },
   avatarPlaceholder: {
@@ -35,8 +35,8 @@ export default StyleSheet.create({
     alignItems: 'center',
     paddingLeft: Spacing['3xs'],
     paddingRight: Spacing.xs,
-    borderRadius: 100,
-    borderWidth: 1
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth
   },
   address: {
     marginLeft: Spacing['3xs']

package/src/composites/wui-account-pill/index.tsx

@@ -0,0 +1,64 @@
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import { Avatar } from '../wui-avatar';
+import { UiUtil } from '../../utils/UiUtil';
+import { Text } from '../../components/wui-text';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+import { Icon } from '../../components/wui-icon';
+
+export interface AccountPillProps {
+  onPress: () => void;
+  address?: string;
+  profileName?: string;
+  profileImage?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function AccountPill({
+  onPress,
+  address,
+  profileName,
+  profileImage,
+  style
+}: AccountPillProps) {
+  const Theme = useTheme();
+
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-005'],
+    Theme['gray-glass-010']
+  );
+
+  const backgroundColor = animatedValue;
+  const borderColor = Theme['gray-glass-005'];
+
+  return (
+    <AnimatedPressable
+      style={[styles.container, { backgroundColor, borderColor }, style]}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      onPress={onPress}
+      hitSlop={10}
+    >
+      <Avatar imageSrc={profileImage} address={address} size={28} borderWidth={0} />
+      <Text variant="large-500" color="fg-100" style={styles.text}>
+        {profileName
+          ? UiUtil.getTruncateString({
+              string: profileName,
+              charsStart: 17,
+              charsEnd: 0,
+              truncate: 'end'
+            })
+          : UiUtil.getTruncateString({
+              string: address ?? '',
+              charsStart: 4,
+              charsEnd: 4,
+              truncate: 'middle'
+            })}
+      </Text>
+      <Icon name="chevronBottom" size="sm" color="fg-200" style={styles.copyButton} />
+    </AnimatedPressable>
+  );
+}

package/src/composites/wui-account-pill/styles.ts

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    height: 44,
+    minWidth: 160,
+    maxWidth: 260,
+    paddingLeft: Spacing.xs,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  text: {
+    marginLeft: Spacing['2xs']
+  },
+  copyButton: {
+    marginLeft: Spacing.xs,
+    marginRight: Spacing.s
+  }
+});

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

@@ -1,7 +1,8 @@
 import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
   image: {
-    borderRadius: 100
+    borderRadius: BorderRadius.full
   }
 });

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

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { Text } from '../../components/wui-text';
+
+export interface BalanceProps {
+  integer?: string;
+  decimal?: string;
+}
+
+export function Balance({ integer = '0', decimal = '00' }: BalanceProps) {
+  return (
+    <Text color="fg-100" style={styles.text}>
+      {`$${integer}`}
+      <Text color="fg-200" style={styles.text}>
+        {`.${decimal}`}
+      </Text>
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 40,
+    fontWeight: '500'
+  }
+});

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

@@ -0,0 +1,28 @@
+import type { IconType } from '../../utils/TypesUtil';
+import { FlexView } from '../../layout/wui-flex';
+import { IconBox } from '../wui-icon-box';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+export interface BannerProps {
+  icon: IconType;
+  text: string;
+}
+
+export function Banner({ icon, text }: BannerProps) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      flexDirection="row"
+      alignItems="center"
+      style={[styles.container, { backgroundColor: Theme['accent-glass-010'] }]}
+    >
+      <IconBox icon={icon} size="sm" iconColor="fg-200" background style={styles.icon} />
+      <Text variant="small-400" color="fg-200" style={styles.text}>
+        {text}
+      </Text>
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    padding: Spacing.s,
+    borderRadius: BorderRadius.s
+  },
+  icon: {
+    marginRight: Spacing.xs
+  },
+  text: {
+    flex: 1
+  }
+});

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

@@ -95,16 +95,18 @@ export function Button({
             style={[styles.iconLeft, iconStyle]}
           />
         )}
-        {loading ? (
-          <LoadingSpinner color={iconColor} />
-        ) : (
-          <Text
-            variant={size === 'md' ? 'paragraph-600' : 'small-600'}
-            style={[styles.text, themedTextStyle]}
-          >
-            {children}
-          </Text>
-        )}
+        {loading && <LoadingSpinner color={iconColor} />}
+        {!loading &&
+          (typeof children === 'string' ? (
+            <Text
+              variant={size === 'md' ? 'paragraph-600' : 'small-600'}
+              style={[styles.text, themedTextStyle]}
+            >
+              {children}
+            </Text>
+          ) : (
+            children
+          ))}
         {iconRight && (
           <Icon
             color={iconColor}

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

@@ -14,7 +14,7 @@ export const getThemedButtonStyle = (
 
   if (disabled) {
     return {
-      backgroundColor: variant === 'fill' ? theme['gray-glass-002'] : theme['gray-glass-010'],
+      backgroundColor: variant === 'fill' ? theme['gray-glass-005'] : theme['gray-glass-010'],
       borderColor: theme['gray-glass-002']
     };
   }
@@ -28,7 +28,7 @@ export const getThemedButtonStyle = (
 
   return {
     ...buttonBaseStyle,
-    backgroundColor: variant === 'fill' ? theme['accent-100'] : 'transparent'
+    backgroundColor: variant === 'fill' ? theme['accent-100'] : theme['gray-glass-002']
   };
 };
 
@@ -62,7 +62,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadius.xs,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   smButton: {
     height: 32,

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

@@ -25,6 +25,7 @@ export interface CardSelectProps {
   type?: CardSelectType;
   onPress?: () => void;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 function _CardSelect({
@@ -36,7 +37,8 @@ function _CardSelect({
   disabled,
   installed,
   selected,
-  style
+  style,
+  testID
 }: CardSelectProps) {
   const Theme = useTheme();
   const normalbackgroundColor = getBackgroundColor({ selected, disabled, pressed: false });
@@ -77,6 +79,7 @@ function _CardSelect({
       onPressOut={setStartValue}
       disabled={disabled}
       style={[styles.container, { backgroundColor: animatedValue }, style]}
+      testID={testID}
     >
       <View>
         <Image

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

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { Animated, Linking, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+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';
@@ -10,20 +10,22 @@ import styles, { getThemedChipStyle, getThemedTextColor } from './styles';
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export interface ChipProps {
-  link: string;
   label?: string;
   imageSrc?: string;
-  icon?: IconType;
+  leftIcon?: IconType;
+  rightIcon?: IconType;
   variant?: ChipType;
   size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
+  onPress?: () => void;
 }
 
 export function Chip({
-  link,
+  onPress,
   imageSrc,
-  icon,
+  leftIcon,
+  rightIcon,
   variant = 'fill',
   size = 'md',
   disabled,
@@ -38,10 +40,8 @@ export function Chip({
   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 handlePress = () => {
+    onPress?.();
   };
 
   const onPressIn = () => {
@@ -78,7 +78,7 @@ export function Chip({
       style={[styles.container, styles[`${size}Chip`], { borderColor, backgroundColor }, style]}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
-      onPress={onPress}
+      onPress={handlePress}
     >
       {imageSrc && (
         <Image
@@ -91,15 +91,16 @@ export function Chip({
           source={imageSrc}
         />
       )}
+      {leftIcon && <Icon name={leftIcon} color={themedTextColor as ColorType} />}
       <Text
         variant={size === 'md' ? 'paragraph-600' : 'small-600'}
         style={[styles.link, { color: Theme[themedTextColor] }]}
       >
-        {label || link}
+        {label}
       </Text>
-      {icon && (
+      {rightIcon && (
         <Icon
-          name={icon}
+          name={rightIcon}
           size={iconSize}
           color={themedTextColor as ColorType}
           style={styles.icon}

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

@@ -65,11 +65,11 @@ export default StyleSheet.create({
     paddingHorizontal: Spacing.xs,
     alignItems: 'center',
     borderRadius: BorderRadius.s,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   image: {
-    borderRadius: 100,
-    borderWidth: 1
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth
   },
   smImage: {
     width: 16,

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
+  }
+});

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

@@ -51,7 +51,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadius.s,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   smButton: {
     height: 32

package/src/composites/wui-icon-box/index.tsx

@@ -7,7 +7,7 @@ import styles from './styles';
 
 export interface IconBoxProps {
   icon: IconType;
-  size?: Exclude<SizeType, 'xl' | 'xs' | 'xxs'>;
+  size?: Exclude<SizeType, 'xs' | 'xxs'>;
   iconColor?: ColorType;
   iconSize?: Exclude<SizeType, 'xl'>;
   background?: boolean;
@@ -33,6 +33,9 @@ export function IconBox({
   const Theme = useTheme();
   let _iconSize: SizeType;
   switch (size) {
+    case 'xl':
+      _iconSize = 'xl';
+      break;
     case 'lg':
       _iconSize = 'lg';
       break;
@@ -48,6 +51,9 @@ export function IconBox({
 
   let boxSize: number;
   switch (size) {
+    case 'xl':
+      boxSize = 56;
+      break;
     case 'lg':
       boxSize = 40;
       break;
@@ -58,7 +64,17 @@ export function IconBox({
       boxSize = 24;
   }
 
-  const borderRadius = size === 'lg' ? 'xxs' : '3xl';
+  let borderRadius: keyof typeof BorderRadius;
+  switch (size) {
+    case 'xl':
+      borderRadius = 's';
+      break;
+    case 'lg':
+      borderRadius = 'xxs';
+      break;
+    default:
+      borderRadius = '3xl';
+  }
 
   const backgroundStyle = {
     backgroundColor:

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

@@ -97,7 +97,6 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
           style={[styles.outerBorder, { borderColor: outerBorder, borderRadius: outerRadius }]}
           disabled={disabled}
           onPress={() => inputRef.current?.focus()}
-          testID={rest.testID}
         >
           <Animated.View
             style={[
@@ -123,6 +122,7 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
               underlineColorAndroid="transparent"
               selectTextOnFocus={false}
               editable={!disabled}
+              testID="wui-input-text"
               {...rest}
             />
             {children}

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

@@ -7,7 +7,7 @@ const baseStyle = {
   borderRadius: BorderRadius.xxs,
   alignItems: 'center',
   paddingHorizontal: Spacing.xs,
-  borderWidth: 1
+  borderWidth: StyleSheet.hairlineWidth
 } as ViewStyle;
 
 export const outerBorderRadius = {

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

@@ -5,7 +5,7 @@ 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 type { ColorType, IconType } from '../../utils/TypesUtil';
 import { IconBox } from '../wui-icon-box';
 import styles from './styles';
 
@@ -13,8 +13,9 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export interface ListItemProps {
   icon?: IconType;
-  iconVariant?: 'blue' | 'overlay';
-  variant?: 'image' | 'icon';
+  iconColor?: ColorType;
+  iconBackgroundColor?: ColorType;
+  iconBorderColor?: ColorType;
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
   chevron?: boolean;
@@ -23,21 +24,24 @@ export interface ListItemProps {
   onPress?: () => void;
   children?: ReactNode;
   style?: StyleProp<ViewStyle>;
+  contentStyle?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
 export function ListItem({
   children,
   icon,
-  variant,
   imageSrc,
   imageHeaders,
-  iconVariant = 'blue',
+  iconColor = 'fg-200',
+  iconBackgroundColor,
+  iconBorderColor = 'gray-glass-005',
   chevron,
   loading,
   disabled,
   onPress,
   style,
+  contentStyle,
   testID
 }: ListItemProps) {
   const Theme = useTheme();
@@ -47,7 +51,7 @@ export function ListItem({
   );
 
   function visualTemplate() {
-    if (variant === 'image' && imageSrc) {
+    if (imageSrc) {
       return (
         <View style={[styles.imageContainer, { borderColor: Theme['gray-glass-005'] }]}>
           <Image
@@ -57,18 +61,15 @@ export function ListItem({
           />
         </View>
       );
-    } else if (variant === 'icon' && icon) {
-      const iconColor = iconVariant === 'blue' ? 'accent-100' : 'fg-200';
-      const borderColor = iconVariant === 'blue' ? 'accent-glass-005' : 'gray-glass-005';
-
+    } else if (icon) {
       return (
-        <View style={[styles.imageContainer, { borderColor: Theme[borderColor] }]}>
+        <View style={[styles.imageContainer, { borderColor: Theme[iconBorderColor] }]}>
           <IconBox
             icon={icon}
             iconColor={iconColor}
             size="md"
             background
-            backgroundColor="gray-glass-010"
+            backgroundColor={iconBackgroundColor}
           />
         </View>
       );
@@ -81,7 +82,7 @@ export function ListItem({
     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 <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />;
     }
 
     return null;
@@ -101,7 +102,7 @@ export function ListItem({
       testID={testID}
     >
       {visualTemplate()}
-      <View style={styles.content}>{children}</View>
+      <View style={[styles.content, contentStyle]}>{children}</View>
       {rightTemplate()}
     </AnimatedPressable>
   );