@reown/appkit-ui-react-native 0.0.0-canary-20240912195440 → 0.0.0-develop-20240925193922

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

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

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>;
+}
+
+const offset = [20, 15, 10, 5, 0];
+const zIndex = [5, 4, 3, 2, 1];
+
+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={{ left: offset[index], zIndex: zIndex[index] }}
+          />
+        ))}
+      </FlexView>
+    </ListItem>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    height: 48
+  },
+  contentContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingRight: 0
+  }
+});

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-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-network-button/index.tsx

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

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

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

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

@@ -1,49 +1,85 @@
 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 { PathLg, PathNormal } from './styles';
+import { Icon } from '../../components/wui-icon';
+import { FlexView } from '../../layout/wui-flex';
+import { PathLg, PathNormal, PathSmall, PathXS } from './styles';
 
 export interface NetworkImageProps {
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
   selected?: boolean;
-  size?: Exclude<SizeType, 'xl' | 'sm' | 'xs' | 'xxs'>;
+  size?: Exclude<SizeType, 'xl' | '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'
+  size = 'md',
+  style,
+  borderColor,
+  borderWidth = 1
 }: 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}>
+    <Svg
+      width={sizeToHeight[size]}
+      height={sizeToHeight[size]}
+      stroke={borderColor ?? svgStroke}
+      strokeWidth={borderWidth}
+      style={style}
+    >
       <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 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>
       </Defs>
-      <Path
-        d={`${isLg ? PathLg : PathNormal}`}
-        opacity={opacity}
-        fill={imageSrc ? 'url(#image-pattern)' : Theme['gray-glass-005']}
-      />
+      {!imageSrc && <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />}
+      <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
     </Svg>
   );
 }