@reown/appkit-ui-react-native 0.0.0-refactor-modal-migration-20241004184043 → 1.0.1

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

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

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

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

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

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

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

@@ -95,18 +95,16 @@ export function Button({
             style={[styles.iconLeft, iconStyle]}
           />
         )}
-        {loading && <LoadingSpinner color={iconColor} />}
-        {!loading &&
-          (typeof children === 'string' ? (
-            <Text
-              variant={size === 'md' ? 'paragraph-600' : 'small-600'}
-              style={[styles.text, themedTextStyle]}
-            >
-              {children}
-            </Text>
-          ) : (
-            children
-          ))}
+        {loading ? (
+          <LoadingSpinner color={iconColor} />
+        ) : (
+          <Text
+            variant={size === 'md' ? 'paragraph-600' : 'small-600'}
+            style={[styles.text, themedTextStyle]}
+          >
+            {children}
+          </Text>
+        )}
         {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-005'] : theme['gray-glass-010'],
+      backgroundColor: variant === 'fill' ? theme['gray-glass-002'] : theme['gray-glass-010'],
       borderColor: theme['gray-glass-002']
     };
   }
@@ -28,7 +28,7 @@ export const getThemedButtonStyle = (
 
   return {
     ...buttonBaseStyle,
-    backgroundColor: variant === 'fill' ? theme['accent-100'] : theme['gray-glass-002']
+    backgroundColor: variant === 'fill' ? theme['accent-100'] : 'transparent'
   };
 };
 

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

@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+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';
@@ -10,6 +10,7 @@ import styles, { getThemedChipStyle, getThemedTextColor } from './styles';
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export interface ChipProps {
+  link: string;
   label?: string;
   imageSrc?: string;
   icon?: IconType;
@@ -17,11 +18,10 @@ export interface ChipProps {
   size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
-  onPress?: () => void;
 }
 
 export function Chip({
-  onPress,
+  link,
   imageSrc,
   icon,
   variant = 'fill',
@@ -38,8 +38,10 @@ export function Chip({
   const themedTextColor = getThemedTextColor(variant, disabled, pressed);
   const iconSize = size === 'md' ? 'sm' : 'xs';
 
-  const handlePress = () => {
-    onPress?.();
+  const onPress = () => {
+    Linking.canOpenURL(link).then(supported => {
+      if (supported) Linking.openURL(link);
+    });
   };
 
   const onPressIn = () => {
@@ -76,7 +78,7 @@ export function Chip({
       style={[styles.container, styles[`${size}Chip`], { borderColor, backgroundColor }, style]}
       onPressIn={onPressIn}
       onPressOut={onPressOut}
-      onPress={handlePress}
+      onPress={onPress}
     >
       {imageSrc && (
         <Image
@@ -93,7 +95,7 @@ export function Chip({
         variant={size === 'md' ? 'paragraph-600' : 'small-600'}
         style={[styles.link, { color: Theme[themedTextColor] }]}
       >
-        {label}
+        {label || link}
       </Text>
       {icon && (
         <Icon

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

@@ -68,7 +68,7 @@ export default StyleSheet.create({
     borderWidth: 1
   },
   image: {
-    borderRadius: BorderRadius.full,
+    borderRadius: 100,
     borderWidth: 1
   },
   smImage: {

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

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

@@ -13,13 +13,12 @@ export default StyleSheet.create({
   content: {
     flexDirection: 'row',
     flexGrow: 1,
-    paddingHorizontal: Spacing.s,
-    alignItems: 'center'
+    paddingHorizontal: Spacing.s
   },
   imageContainer: {
     width: 36,
     height: 36,
-    borderRadius: BorderRadius.full,
+    borderRadius: 100,
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center'
@@ -27,7 +26,7 @@ export default StyleSheet.create({
   image: {
     width: 32,
     height: 32,
-    borderRadius: BorderRadius.full
+    borderRadius: 100
   },
   disabledImage: {
     opacity: 0.4

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

@@ -6,11 +6,9 @@ import type { LogoType } from '../../utils/TypesUtil';
 export interface LogoProps {
   logo: LogoType;
   disabled?: boolean;
-  height?: number;
-  width?: number;
   style?: SvgProps['style'];
 }
 
-export function Logo({ width = 40, height = 40, logo, style }: LogoProps) {
-  return <Icon width={width} height={height} name={logo} style={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

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

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

@@ -3,9 +3,9 @@ import { BorderRadius } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
   box: {
-    height: 56,
-    width: 56,
-    borderRadius: BorderRadius.s,
+    height: 50,
+    width: 50,
+    borderRadius: BorderRadius.xs,
     alignItems: 'center',
     justifyContent: 'center'
   },

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

@@ -1,50 +1,47 @@
-import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+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 { LoadingSpinner } from '../../components/wui-loading-spinner';
-import useAnimatedValue from '../../hooks/useAnimatedValue';
 
 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 | React.ReactNode;
+  children: string;
   onPress: () => void;
-  background?: boolean;
-  disabled?: boolean;
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
-  loading?: boolean;
+  disabled?: boolean;
   style?: StyleProp<ViewStyle>;
+  loading?: boolean;
 }
 
 export function NetworkButton({
-  children,
-  onPress,
-  background = true,
-  disabled,
   imageSrc,
   imageHeaders,
+  disabled,
+  onPress,
+  style,
   loading,
-  style
+  children
 }: 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-005'],
     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]}
+      style={[styles.container, { backgroundColor, borderColor: Theme['gray-glass-005'] }, style]}
       onPress={onPress}
       onPressIn={setEndValue}
       onPressOut={setStartValue}
@@ -58,13 +55,9 @@ export function NetworkButton({
         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>
-      )}
+      <Text style={styles.text} variant="paragraph-600" color={textColor}>
+        {children}
+      </Text>
     </AnimatedPressable>
   );
 }

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

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import { Spacing } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
   container: {
@@ -8,10 +8,10 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 1,
-    borderRadius: BorderRadius.full,
+    borderRadius: 100,
     paddingHorizontal: Spacing['2xs']
   },
-  children: {
+  text: {
     paddingHorizontal: Spacing['2xs']
   },
   loader: {
@@ -20,7 +20,7 @@ export default StyleSheet.create({
   image: {
     height: 24,
     width: 24,
-    borderRadius: BorderRadius.full,
+    borderRadius: 100,
     borderWidth: 2,
     paddingLeft: Spacing['4xs']
   },

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

@@ -1,85 +1,49 @@
 import { Path, Svg, Image, Defs, Pattern } from 'react-native-svg';
-import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 import type { SizeType } from '../../utils/TypesUtil';
-import { Icon } from '../../components/wui-icon';
-import { FlexView } from '../../layout/wui-flex';
-import { PathLg, PathNormal, PathSmall, PathXS } from './styles';
+import { PathLg, PathNormal } from './styles';
 
 export interface NetworkImageProps {
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
   selected?: boolean;
-  size?: Exclude<SizeType, 'xl' | 'xxs'>;
+  size?: Exclude<SizeType, 'xl' | 'sm' | 'xs' | '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
-};
-
 export function NetworkImage({
   imageSrc,
   imageHeaders,
   disabled,
   selected,
-  size = 'md',
-  style,
-  borderColor,
-  borderWidth = 1
+  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={sizeToHeight[size]}
-      height={sizeToHeight[size]}
-      stroke={borderColor ?? svgStroke}
-      strokeWidth={borderWidth}
-      style={style}
-    >
+    <Svg width={svgWidth} height={svgHeight} stroke={svgStroke} strokeWidth={1}>
       <Defs>
-        <Pattern id="image-pattern">
-          {imageSrc ? (
-            <Image
-              height={sizeToHeight[size]}
-              width={sizeToHeight[size]}
-              opacity={opacity}
-              href={{ uri: imageSrc, headers: imageHeaders }}
-            />
-          ) : (
-            <FlexView
-              alignItems="center"
-              justifyContent="center"
-              // eslint-disable-next-line react-native/no-inline-styles
-              style={{
-                height: sizeToHeight[size],
-                width: sizeToHeight[size],
-                backgroundColor: 'transparent'
-              }}
-            >
-              <Icon name="networkPlaceholder" size={size} color="fg-200" />
-            </FlexView>
-          )}
+        <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>
-      {!imageSrc && <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />}
-      <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+      <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

@@ -3,9 +3,3 @@ export const PathLg =
 
 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';