@reown/appkit-ui-react-native 0.0.0-accounts-canary.1-20251023174733

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

@@ -0,0 +1,75 @@
+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';
+import { Icon } from '../../components/wui-icon';
+
+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;
+  logoStyle?: StyleProp<ViewStyle>;
+  chevron?: boolean;
+}
+
+export function ListSocial({
+  logo,
+  children,
+  disabled,
+  onPress,
+  style,
+  testID,
+  logoHeight = 40,
+  logoWidth = 40,
+  logoStyle,
+  chevron
+}: 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'] },
+          logoStyle
+        ]}
+      >
+        <Logo
+          logo={logo}
+          style={[disabled && styles.disabledLogo]}
+          width={logoWidth}
+          height={logoHeight}
+        />
+      </View>
+      {children}
+      {chevron ? (
+        <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />
+      ) : (
+        <View style={styles.rightPlaceholder} />
+      )}
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,31 @@
+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: BorderRadius.full
+  },
+  disabledLogo: {
+    opacity: 0.4
+  },
+  border: {
+    borderRadius: BorderRadius.full,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  rightIcon: {
+    marginRight: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,103 @@
+import { Icon } from '../../components/wui-icon';
+import { Image } from '../../components/wui-image';
+import { Text } from '../../components/wui-text';
+import { Pressable } from '../../components/wui-pressable';
+import { useTheme } from '../../hooks/useTheme';
+import { FlexView } from '../../layout/wui-flex';
+import { UiUtil } from '../../utils/UiUtil';
+import styles from './styles';
+
+export const ListTokenTotalHeight = 64;
+
+export interface ListTokenProps {
+  imageSrc?: string;
+  networkSrc?: string;
+  name: string;
+  value?: number;
+  amount?: string;
+  currency: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  pressable?: boolean;
+}
+
+export function ListToken({
+  imageSrc,
+  networkSrc,
+  name,
+  value,
+  amount,
+  currency,
+  onPress,
+  disabled,
+  pressable = true
+}: ListTokenProps) {
+  const Theme = useTheme();
+
+  return (
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || !pressable}
+      style={styles.pressable}
+      backgroundColor="transparent"
+    >
+      <FlexView
+        flexDirection="row"
+        justifyContent="space-between"
+        alignItems="center"
+        padding={['0', 'm', '0', 'xs']}
+        style={{ height: ListTokenTotalHeight }}
+      >
+        <FlexView flexDirection="row" alignItems="center">
+          {imageSrc ? (
+            <Image source={imageSrc} style={styles.image} />
+          ) : (
+            <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={disabled ? 'fg-200' : 'fg-100'} variant="paragraph-500">
+              {UiUtil.getTruncateString({
+                string: name,
+                charsStart: 15,
+                charsEnd: 0,
+                truncate: 'end'
+              })}
+            </Text>
+            <Text variant="small-400" color="fg-200">
+              {UiUtil.formatNumberToLocalString(amount, 4)}{' '}
+              {UiUtil.getTruncateString({
+                string: currency,
+                charsStart: 8,
+                charsEnd: 0,
+                truncate: 'end'
+              })}
+            </Text>
+          </FlexView>
+        </FlexView>
+        <Text color={disabled ? 'fg-200' : 'fg-100'} variant="paragraph-500">
+          ${value?.toFixed(2) ?? '0.00'}
+        </Text>
+      </FlexView>
+    </Pressable>
+  );
+}

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

@@ -0,0 +1,27 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, WalletImageSize } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  pressable: {
+    borderRadius: BorderRadius.s
+  },
+  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"
+              />
+            ) : null}
+            <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

@@ -0,0 +1,128 @@
+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';
+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';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ListWalletProps {
+  name: string;
+  onPress?: () => void;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  showAllWallets?: boolean;
+  tagLabel?: string;
+  tagVariant?: TagType;
+  icon?: IconType;
+  disabled?: boolean;
+  installed?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function ListWallet({
+  name,
+  onPress,
+  imageSrc,
+  imageHeaders,
+  showAllWallets,
+  tagLabel,
+  tagVariant,
+  icon,
+  disabled,
+  installed,
+  style,
+  testID
+}: ListWalletProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+
+  const templateInstalled = () => {
+    if (!installed) return null;
+
+    return (
+      <IconBox
+        icon="checkmark"
+        iconSize="xxs"
+        iconColor={'success-100'}
+        border
+        borderColor="bg-150"
+        background
+        backgroundColor="icon-box-bg-success-100"
+        size="sm"
+        style={styles.installedBox}
+      />
+    );
+  };
+
+  function imageTemplate() {
+    return (
+      <View>
+        <WalletImage
+          style={[styles.image, disabled && styles.imageDisabled]}
+          imageSrc={imageSrc}
+          imageHeaders={imageHeaders}
+          showAllWallets={showAllWallets}
+          size="sm"
+        />
+        {templateInstalled()}
+      </View>
+    );
+  }
+
+  function iconTemplate() {
+    if (tagLabel && tagVariant) {
+      return (
+        <Tag variant={tagVariant} disabled={disabled} style={styles.rightIcon}>
+          {tagLabel}
+        </Tag>
+      );
+    }
+
+    if (icon) {
+      return (
+        <Icon
+          name={icon}
+          color={disabled ? 'fg-300' : 'fg-200'}
+          size="sm"
+          style={styles.rightIcon}
+        />
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <AnimatedPressable
+      style={[
+        styles.container,
+        { backgroundColor: disabled ? Theme['gray-glass-010'] : animatedValue },
+        style
+      ]}
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      testID={testID}
+    >
+      <View style={styles.leftSide}>
+        {imageTemplate()}
+        <Text variant="paragraph-500" style={styles.name} color={disabled ? 'fg-300' : 'fg-100'}>
+          {name}
+        </Text>
+      </View>
+      {iconTemplate()}
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,40 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: 56,
+    width: '100%',
+    borderRadius: BorderRadius.xs,
+    paddingHorizontal: Spacing.xs
+  },
+  leftSide: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flexGrow: 1
+  },
+  name: {
+    marginHorizontal: Spacing['4xs']
+  },
+  rightIcon: {
+    marginHorizontal: Spacing.xs
+  },
+  image: {
+    marginRight: Spacing.xs
+  },
+  imageDisabled: {
+    opacity: 0.4
+  },
+  installedBox: {
+    position: 'absolute',
+    bottom: -2,
+    right: Spacing['2xs'],
+    height: 18,
+    width: 18,
+    zIndex: 2
+  }
+});

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

@@ -0,0 +1,16 @@
+import type { SvgProps } from 'react-native-svg';
+import { Icon } from '../../components/wui-icon';
+
+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} />;
+}

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

@@ -0,0 +1,35 @@
+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';
+import { Logo } from '../wui-logo';
+import styles from './styles';
+
+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) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      style={[styles.box, { backgroundColor: animatedValue }, style]}
+      disabled={disabled}
+    >
+      <Logo logo={logo} style={disabled ? styles.disabled : null} />
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  box: {
+    height: 56,
+    width: 56,
+    borderRadius: BorderRadius.s,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  disabled: {
+    opacity: 0.4
+  }
+});