@reown/appkit-ui-react-native 0.0.0-canary-20241010175718 → 0.0.0-develop-20241106142253

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

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

@@ -0,0 +1,83 @@
+import type { TransactionStatus } from '@reown/appkit-common-react-native';
+import type { IconType, TransactionType } from '../../utils/TypesUtil';
+
+export const getIcon = (type: TransactionType): IconType => {
+  switch (type) {
+    case 'approve':
+    case 'execute':
+      return 'checkmark';
+    case 'repay':
+    case 'send':
+    case 'stake':
+    case 'withdraw':
+      return 'arrowTop';
+    case 'burn':
+    case 'cancel':
+      return 'close';
+    case 'trade':
+      return 'swapHorizontal';
+    case 'deploy':
+      return 'arrowRight';
+    default:
+      return 'arrowBottom';
+  }
+};
+
+//Utils
+export const getIconColor = (status?: TransactionStatus) => {
+  switch (status) {
+    case 'confirmed':
+      return 'success-100';
+    case 'failed':
+      return 'error-100';
+    case 'pending':
+      return 'fg-200';
+    default:
+      return 'fg-200';
+  }
+};
+
+export const getTypeLabel = (type?: TransactionType) => {
+  if (!type) {
+    return 'Unknown';
+  }
+
+  switch (type) {
+    case 'approve':
+      return 'Approved';
+    case 'bought':
+      return 'Bought';
+    case 'borrow':
+      return 'Borrowed';
+    case 'burn':
+      return 'Burnt';
+    case 'cancel':
+      return 'Canceled';
+    case 'claim':
+      return 'Claimed';
+    case 'deploy':
+      return 'Deployed';
+    case 'deposit':
+      return 'Deposited';
+    case 'execute':
+      return 'Executed';
+    case 'mint':
+      return 'Minted';
+    case 'receive':
+      return 'Received';
+    case 'repay':
+      return 'Repaid';
+    case 'send':
+      return 'Sent';
+    case 'stake':
+      return 'Staked';
+    case 'trade':
+      return 'Swapped';
+    case 'unstake':
+      return 'Unstaked';
+    case 'withdraw':
+      return 'Withdrawn';
+    default:
+      return 'Unknown';
+  }
+};

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

@@ -1,4 +1,4 @@
-import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
 import { Text } from '../../components/wui-text';
 import useAnimatedValue from '../../hooks/useAnimatedValue';
 import { useTheme } from '../../hooks/useTheme';
@@ -6,9 +6,10 @@ import type { IconType, TagType } from '../../utils/TypesUtil';
 import { Tag } from '../wui-tag';
 import { WalletImage } from '../wui-wallet-image';
 import { Icon } from '../../components/wui-icon';
+import { LeanView } from '../../components/wui-lean-view';
+import { IconBox } from '../wui-icon-box';
 
 import styles from './styles';
-import { IconBox } from '../wui-icon-box';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -67,7 +68,7 @@ export function ListWallet({
 
   function imageTemplate() {
     return (
-      <View>
+      <LeanView>
         <WalletImage
           style={[styles.image, disabled && styles.imageDisabled]}
           imageSrc={imageSrc}
@@ -76,7 +77,7 @@ export function ListWallet({
           size="sm"
         />
         {templateInstalled()}
-      </View>
+      </LeanView>
     );
   }
 
@@ -116,12 +117,12 @@ export function ListWallet({
       onPressOut={setStartValue}
       testID={testID}
     >
-      <View style={styles.leftSide}>
+      <LeanView style={styles.leftSide}>
         {imageTemplate()}
         <Text variant="paragraph-500" style={styles.name} color={disabled ? 'fg-300' : 'fg-100'}>
           {name}
         </Text>
-      </View>
+      </LeanView>
       {iconTemplate()}
     </AnimatedPressable>
   );

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

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

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

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