@reown/appkit-ui-react-native 0.0.0-fix-email-login-20241010173711 → 0.0.0-fix-fetch-error-improvements-20241114122508

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-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/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>
   );

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

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

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

@@ -0,0 +1,65 @@
+import { View, Pressable, Animated, type StyleProp, type ViewStyle } from 'react-native';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { LogoType } from '../../utils/TypesUtil';
+
+import styles from './styles';
+import { Logo } from '../wui-logo';
+import type { ReactNode } from 'react';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ListSocialProps {
+  children?: ReactNode;
+  disabled?: boolean;
+  logo: LogoType;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+  logoWidth?: number;
+  logoHeight?: number;
+}
+
+export function ListSocial({
+  logo,
+  children,
+  disabled,
+  onPress,
+  style,
+  testID,
+  logoHeight = 40,
+  logoWidth = 40
+}: ListSocialProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+
+  return (
+    <AnimatedPressable
+      disabled={disabled}
+      style={[styles.container, { backgroundColor: animatedValue }, style]}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      testID={testID}
+    >
+      <View
+        style={[
+          styles.border,
+          { height: logoHeight + 1, width: logoWidth + 1, borderColor: Theme['gray-glass-005'] }
+        ]}
+      >
+        <Logo
+          logo={logo}
+          style={disabled && styles.disabledLogo}
+          width={logoWidth}
+          height={logoHeight}
+        />
+      </View>
+      {children}
+      <View style={styles.rightPlaceholder} />
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,28 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 56,
+    width: '100%',
+    padding: Spacing.s,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderRadius: BorderRadius.s
+  },
+  rightPlaceholder: {
+    width: 40,
+    height: 40,
+    borderRadius: 100
+  },
+  disabledLogo: {
+    opacity: 0.4
+  },
+  border: {
+    borderRadius: BorderRadius.full,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

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

@@ -0,0 +1,83 @@
+import { Pressable } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Image } from '../../components/wui-image';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { UiUtil } from '../../utils/UiUtil';
+import styles from './styles';
+
+export interface ListTokenProps {
+  imageSrc: string;
+  networkSrc?: string;
+  name: string;
+  value?: number;
+  amount?: string;
+  currency: string;
+  onPress?: () => void;
+}
+
+export function ListToken({
+  imageSrc,
+  networkSrc,
+  name,
+  value,
+  amount,
+  currency,
+  onPress
+}: ListTokenProps) {
+  const Theme = useTheme();
+
+  return (
+    <Pressable onPress={onPress}>
+      <FlexView
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        padding={['2xs', 'm', '2xs', 'xs']}
+      >
+        <FlexView flexDirection="row" alignItems="center">
+          {imageSrc ? (
+            <Image
+              source={imageSrc}
+              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
+            />
+          ) : (
+            <FlexView
+              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
+              alignItems="center"
+              justifyContent="center"
+            >
+              <Icon name="coinPlaceholder" size="lg" color="fg-200" />
+            </FlexView>
+          )}
+          <FlexView
+            alignItems="center"
+            justifyContent="center"
+            style={[
+              styles.networkImageContainer,
+              { borderColor: Theme['bg-100'], backgroundColor: Theme['bg-200'] }
+            ]}
+          >
+            {networkSrc ? (
+              <Image source={networkSrc} style={styles.networkImage} />
+            ) : (
+              <Icon name="networkPlaceholder" size="xxs" color="fg-200" />
+            )}
+          </FlexView>
+          <FlexView padding={['0', 's', '0', 's']}>
+            <Text color="fg-100" variant="paragraph-500">
+              {name}
+            </Text>
+            <Text variant="small-400" color="fg-200">
+              {UiUtil.formatNumberToLocalString(amount, 4)} {currency}
+            </Text>
+          </FlexView>
+        </FlexView>
+        <Text color="fg-100" variant="paragraph-500">
+          ${value?.toFixed(2) ?? '0.00'}
+        </Text>
+      </FlexView>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, WalletImageSize } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  image: {
+    height: WalletImageSize.sm,
+    width: WalletImageSize.sm,
+    borderRadius: BorderRadius.full
+  },
+  networkImageContainer: {
+    position: 'absolute',
+    bottom: -2,
+    left: 24,
+    borderWidth: 2,
+    borderRadius: BorderRadius.full,
+    width: 18,
+    height: 18
+  },
+  networkImage: {
+    width: 14,
+    height: 14,
+    borderRadius: BorderRadius.full
+  }
+});

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

@@ -0,0 +1,65 @@
+import { type TransactionImage, type TransactionStatus } from '@reown/appkit-common-react-native';
+
+import type { TransactionType } from '../../utils/TypesUtil';
+import { Text } from '../../components/wui-text';
+import { FlexView } from '../../layout/wui-flex';
+import { IconBox } from '../wui-icon-box';
+import { TransactionVisual } from '../wui-transaction-visual';
+import { getIcon, getTypeLabel, getIconColor } from './utils';
+import styles from './styles';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface ListTransactionProps {
+  date: string;
+  status?: TransactionStatus;
+  type?: TransactionType;
+  descriptions?: string[];
+  images?: TransactionImage[];
+  networkSrc?: string;
+  style?: StyleProp<ViewStyle>;
+  isAllNFT?: boolean;
+}
+
+export function ListTransaction({
+  date,
+  type,
+  descriptions,
+  images,
+  networkSrc,
+  style,
+  isAllNFT,
+  status
+}: ListTransactionProps) {
+  const joinSymbol = type === 'trade' ? ' → ' : ' - ';
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" style={style}>
+      <TransactionVisual images={images} networkSrc={networkSrc} isAllNFT={isAllNFT} />
+      <FlexView flexDirection="row" alignItems="center" style={styles.middleContainer}>
+        <FlexView justifyContent="center" alignItems="flex-start">
+          <FlexView flexDirection="row" alignItems="center">
+            {type && (
+              <IconBox
+                icon={getIcon(type)}
+                size="sm"
+                iconColor={getIconColor(status)}
+                background
+                border
+                borderColor="bg-100"
+              />
+            )}
+            <Text variant="paragraph-500" color="fg-100">
+              {getTypeLabel(type)}
+            </Text>
+          </FlexView>
+          <Text variant="small-400" color="fg-200" numberOfLines={1} ellipsizeMode="tail">
+            {descriptions?.join(joinSymbol)}
+          </Text>
+        </FlexView>
+      </FlexView>
+      <Text variant="micro-700" color="fg-300" style={styles.date}>
+        {date}
+      </Text>
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,10 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  middleContainer: {
+    flex: 1
+  },
+  date: {
+    textTransform: 'uppercase'
+  }
+});