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

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-item-loader/index.tsx

@@ -0,0 +1,29 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+import { BorderRadius, WalletImageSize } from '../../utils/ThemeUtil';
+import { useTheme } from '../../hooks/useTheme';
+import { Shimmer } from '../../components/wui-shimmer';
+import { FlexView } from '../../layout/wui-flex';
+import styles from './styles';
+
+export interface ListItemLoaderProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ListItemLoader({ style }: ListItemLoaderProps) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      alignItems="center"
+      flexDirection="row"
+      style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }, style]}
+    >
+      <Shimmer
+        height={WalletImageSize.sm}
+        width={WalletImageSize.sm}
+        borderRadius={BorderRadius.xxs}
+      />
+      <Shimmer height={22} width={80} borderRadius={6} style={styles.text} />
+    </FlexView>
+  );
+}

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

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

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, View } from 'react-native';
 import { Text } from '../../components/wui-text';
 import useAnimatedValue from '../../hooks/useAnimatedValue';
 import { useTheme } from '../../hooks/useTheme';
@@ -6,9 +6,9 @@ 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 { IconBox } from '../wui-icon-box';
 
 import styles from './styles';
-import { IconBox } from '../wui-icon-box';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 

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} />

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

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

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

@@ -1,51 +1,57 @@
-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>;
+  testID?: string;
 }
 
 export function NetworkButton({
+  children,
+  onPress,
+  background = true,
+  disabled,
   imageSrc,
   imageHeaders,
-  disabled,
-  onPress,
-  style,
   loading,
-  children
+  style,
+  testID
 }: 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}
       disabled={disabled}
+      testID={testID}
     >
       <LoaderComponent loading={loading} />
       <ImageComponent
@@ -55,9 +61,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: {
@@ -7,11 +7,11 @@ export default StyleSheet.create({
     height: 40,
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 1,
-    borderRadius: 100,
+    borderWidth: StyleSheet.hairlineWidth,
+    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']
   },