@reown/appkit-ui-react-native 0.0.0-feat-smart-account-20241017180406 → 0.0.0-feat-swaps-20241203153101

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

@@ -1,12 +1,14 @@
-import { Pressable } from 'react-native';
 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;
@@ -15,6 +17,8 @@ export interface ListTokenProps {
   amount?: string;
   currency: string;
   onPress?: () => void;
+  disabled?: boolean;
+  pressable?: boolean;
 }
 
 export function ListToken({
@@ -24,17 +28,25 @@ export function ListToken({
   value,
   amount,
   currency,
-  onPress
+  onPress,
+  disabled,
+  pressable = true
 }: ListTokenProps) {
   const Theme = useTheme();
 
   return (
-    <Pressable onPress={onPress}>
+    <Pressable
+      onPress={onPress}
+      disabled={disabled || !pressable}
+      style={styles.pressable}
+      backgroundColor="transparent"
+    >
       <FlexView
         flexDirection="row"
         justifyContent="space-between"
         alignItems="center"
-        padding={['2xs', 'm', '2xs', 'xs']}
+        padding={['0', 'm', '0', 'xs']}
+        style={{ height: ListTokenTotalHeight }}
       >
         <FlexView flexDirection="row" alignItems="center">
           {imageSrc ? (
@@ -66,15 +78,26 @@ export function ListToken({
             )}
           </FlexView>
           <FlexView padding={['0', 's', '0', 's']}>
-            <Text color="fg-100" variant="paragraph-500">
-              {name}
+            <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)} {currency}
+              {UiUtil.formatNumberToLocalString(amount, 4)}{' '}
+              {UiUtil.getTruncateString({
+                string: currency,
+                charsStart: 8,
+                charsEnd: 0,
+                truncate: 'end'
+              })}
             </Text>
           </FlexView>
         </FlexView>
-        <Text color="fg-100" variant="paragraph-500">
+        <Text color={disabled ? 'fg-200' : 'fg-100'} variant="paragraph-500">
           ${value?.toFixed(2) ?? '0.00'}
         </Text>
       </FlexView>

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

@@ -2,6 +2,9 @@ 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,

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-network-button/styles.ts

@@ -7,7 +7,7 @@ export default StyleSheet.create({
     height: 40,
     alignItems: 'center',
     justifyContent: 'center',
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     borderRadius: BorderRadius.full,
     paddingHorizontal: Spacing['2xs']
   },

package/src/composites/wui-qr-code/index.tsx

@@ -21,6 +21,8 @@ export interface QrCodeProps {
   style?: StyleProp<ViewStyle>;
 }
 
+const LABEL_HEIGHT = 18;
+
 export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }: QrCodeProps) {
   const Theme = LightTheme;
   const containerPadding = Spacing.l;
@@ -75,7 +77,7 @@ export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }:
         </Svg>
         {logoTemplate()}
       </FlexView>
-      <Text variant="small-500" color="fg-150" style={styles.label}>
+      <Text variant="small-500" color="fg-150" style={[styles.label, { height: LABEL_HEIGHT }]}>
         UX by{' '}
         <Text variant="small-500" color="inverse-000">
           Reown
@@ -83,6 +85,6 @@ export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }:
       </Text>
     </View>
   ) : (
-    <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />
+    <Shimmer width={size} height={size + LABEL_HEIGHT} borderRadius={BorderRadius.l} />
   );
 }

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

@@ -4,11 +4,12 @@ import { useTheme } from '../../hooks/useTheme';
 import type { ColorType, IconType } from '../../utils/TypesUtil';
 import { IconBox } from '../wui-icon-box';
 import styles from './styles';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
 
 export interface SnackbarProps {
   message: string;
   iconColor: ColorType;
-  icon: IconType;
+  icon: IconType | 'loading';
   style?: StyleProp<ViewStyle>;
 }
 
@@ -24,7 +25,11 @@ export function Snackbar({ message, iconColor, icon, style }: SnackbarProps) {
         style
       ]}
     >
-      <IconBox icon={icon} iconColor={iconColor} size="sm" background />
+      {icon === 'loading' ? (
+        <LoadingSpinner size="md" />
+      ) : (
+        <IconBox icon={icon} iconColor={iconColor} size="sm" background />
+      )}
       <Text variant="paragraph-500" color="fg-100" style={styles.text}>
         {message}
       </Text>

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

@@ -7,7 +7,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     paddingHorizontal: 8,
     borderRadius: BorderRadius.full,
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     alignItems: 'center'
   },
   text: {

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

@@ -22,7 +22,7 @@ export default StyleSheet.create({
   activeMark: {
     position: 'absolute',
     height: 28,
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     borderRadius: BorderRadius['3xl'],
     margin: Spacing['3xs']
   }

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

@@ -0,0 +1,81 @@
+import { useState, useRef } from 'react';
+import {
+  Animated,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+  Pressable
+} from 'react-native';
+
+import { IconBox } from '../wui-icon-box';
+import { FlexView } from '../../layout/wui-flex';
+import { Text } from '../../components/wui-text';
+import styles from './styles';
+
+export interface ToggleProps {
+  children?: React.ReactNode;
+  title?: string | React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  initialOpen?: boolean;
+  canClose?: boolean;
+}
+
+export function Toggle({
+  children,
+  style,
+  title = 'Details',
+  initialOpen = false,
+  canClose = true
+}: ToggleProps) {
+  const [isOpen, setIsOpen] = useState(initialOpen);
+  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const contentHeight = useRef(0);
+  const hasInitialized = useRef(false);
+
+  const toggleDetails = () => {
+    if (canClose) {
+      const toValue = isOpen ? 0 : contentHeight.current;
+
+      Animated.spring(animatedHeight, {
+        toValue,
+        useNativeDriver: false,
+        bounciness: 0
+      }).start();
+
+      setIsOpen(!isOpen);
+    }
+  };
+
+  const measureContent = (event: LayoutChangeEvent) => {
+    const height = event.nativeEvent.layout.height;
+    contentHeight.current = height;
+
+    if (!hasInitialized.current && initialOpen) {
+      hasInitialized.current = true;
+      animatedHeight.setValue(height);
+    }
+  };
+
+  return (
+    <FlexView style={[styles.container, style]}>
+      <Pressable onPress={toggleDetails} style={styles.header}>
+        {typeof title === 'string' ? (
+          <Text variant="small-400" color="fg-100">
+            {title}
+          </Text>
+        ) : (
+          title
+        )}
+        {canClose && (
+          <IconBox icon={isOpen ? 'chevronTop' : 'chevronBottom'} size="sm" iconColor="fg-200" />
+        )}
+      </Pressable>
+
+      <Animated.View style={[styles.contentWrapper, { height: animatedHeight }]}>
+        <FlexView style={styles.content} onLayout={measureContent}>
+          {children}
+        </FlexView>
+      </Animated.View>
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,24 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    overflow: 'hidden'
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: Spacing.s,
+    paddingHorizontal: Spacing.l
+  },
+  content: {
+    paddingHorizontal: Spacing.l,
+    paddingBottom: Spacing.l,
+    position: 'absolute',
+    width: '100%'
+  },
+  contentWrapper: {
+    overflow: 'hidden'
+  }
+});

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

@@ -1,4 +1,4 @@
-import type { Balance } from '@reown/appkit-common-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
 import { Image } from '../../components/wui-image';
 import { Text } from '../../components/wui-text';
 import { Button } from '../wui-button';
@@ -6,13 +6,30 @@ import styles from './styles';
 
 export interface TokenButtonProps {
   onPress?: () => void;
-  token?: Balance;
+  imageUrl?: string;
+  text?: string;
+  inverse?: boolean;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
 }
 
-export function TokenButton({ token, onPress }: TokenButtonProps) {
-  if (!token) {
+export function TokenButton({
+  imageUrl,
+  text,
+  inverse,
+  onPress,
+  style,
+  disabled = false
+}: TokenButtonProps) {
+  if (!text) {
     return (
-      <Button variant="accent" style={styles.selectButton} size="sm" onPress={onPress}>
+      <Button
+        variant="accent"
+        style={[styles.selectButton, style]}
+        size="sm"
+        onPress={onPress}
+        disabled={disabled}
+      >
         <Text variant="small-600" color="accent-100">
           Select token
         </Text>
@@ -20,10 +37,22 @@ export function TokenButton({ token, onPress }: TokenButtonProps) {
     );
   }
 
+  const content = [
+    imageUrl && (
+      <Image key="image" source={imageUrl} style={[styles.image, inverse && styles.imageInverse]} />
+    ),
+    <Text key="text">{text}</Text>
+  ];
+
   return (
-    <Button variant="shade" style={styles.container} size="sm" onPress={onPress}>
-      {token?.iconUrl && <Image source={token?.iconUrl} style={styles.image} />}
-      {token?.symbol && <Text>{token.symbol}</Text>}
+    <Button
+      variant="shade"
+      style={[styles.container, style]}
+      size="sm"
+      onPress={onPress}
+      disabled={disabled}
+    >
+      {inverse ? content.reverse() : content}
     </Button>
   );
 }

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

@@ -14,5 +14,9 @@ export default StyleSheet.create({
     height: 24,
     borderRadius: BorderRadius.full,
     marginRight: Spacing['2xs']
+  },
+  imageInverse: {
+    marginRight: 0,
+    marginLeft: Spacing['2xs']
   }
 });

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

@@ -32,7 +32,7 @@ export default StyleSheet.create({
     borderRadius: BorderRadius.m
   },
   border: {
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     position: 'absolute'
   }
 });

package/src/index.ts

@@ -40,8 +40,9 @@ export { InputNumeric, type InputNumericProps } from './composites/wui-input-num
 export { InputText, type InputTextProps } from './composites/wui-input-text';
 export { Link, type LinkProps } from './composites/wui-link';
 export { ListItem, type ListItemProps } from './composites/wui-list-item';
+export { ListItemLoader, type ListItemLoaderProps } from './composites/wui-list-item-loader';
 export { ListSocial, type ListSocialProps } from './composites/wui-list-social';
-export { ListToken, type ListTokenProps } from './composites/wui-list-token';
+export { ListToken, ListTokenTotalHeight, type ListTokenProps } from './composites/wui-list-token';
 export { ListTransaction, type ListTransactionProps } from './composites/wui-list-transaction';
 export { ListWallet, type ListWalletProps } from './composites/wui-list-wallet';
 export { Logo, type LogoProps } from './composites/wui-logo';
@@ -49,12 +50,14 @@ export { LogoSelect, type LogoSelectProps } from './composites/wui-logo-select';
 export { NetworkButton, type NetworkButtonProps } from './composites/wui-network-button';
 export { NetworkImage, type NetworkImageProps } from './composites/wui-network-image';
 export { Otp, type OtpProps } from './composites/wui-otp';
+export { Pressable, type PressableProps } from './components/wui-pressable';
 export { Promo, type PromoProps } from './composites/wui-promo';
 export { QrCode, type QrCodeProps } from './composites/wui-qr-code';
 export { SearchBar, type SearchBarProps } from './composites/wui-search-bar';
 export { Snackbar, type SnackbarProps } from './composites/wui-snackbar';
 export { Tabs, type TabsProps } from './composites/wui-tabs';
 export { Tag, type TagProps } from './composites/wui-tag';
+export { Toggle, type ToggleProps } from './composites/wui-toggle';
 export { TokenButton, type TokenButtonProps } from './composites/wui-token-button';
 export { Tooltip, type TooltipProps } from './composites/wui-tooltip';
 export { WalletImage, type WalletImageProps } from './composites/wui-wallet-image';

package/src/layout/wui-flex/index.tsx

@@ -1,4 +1,4 @@
-import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { type LayoutChangeEvent, type StyleProp, type ViewStyle, View } from 'react-native';
 
 import type {
   FlexAlignType,
@@ -9,11 +9,11 @@ import type {
   FlexWrapType,
   SpacingType
 } from '../../utils/TypesUtil';
-
 import { UiUtil } from '../../utils/UiUtil';
 
 export interface FlexViewProps {
   children?: React.ReactNode;
+  onLayout?: (event: LayoutChangeEvent) => void;
   flexDirection?: FlexDirectionType;
   flexWrap?: FlexWrapType;
   flexGrow?: FlexGrowType;
@@ -45,5 +45,9 @@ export function FlexView(props: FlexViewProps) {
     marginLeft: props.margin && UiUtil.getSpacingStyles(props.margin, 3)
   };
 
-  return <View style={[styles, props.style]}>{props.children}</View>;
+  return (
+    <View onLayout={props.onLayout} style={[styles, props.style]}>
+      {props.children}
+    </View>
+  );
 }

package/src/layout/wui-separator/index.tsx

@@ -1,4 +1,4 @@
-import { View, type StyleProp, type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle, View } from 'react-native';
 import { Text } from '../../components/wui-text';
 import { FlexView } from '../../layout/wui-flex';
 import { useTheme } from '../../hooks/useTheme';

package/src/utils/ThemeUtil.ts

@@ -164,7 +164,8 @@ export const IconSize = {
   xs: 12,
   sm: 14,
   md: 16,
-  lg: 20
+  lg: 20,
+  xl: 24
 };
 
 export const SpinnerSize = {

package/src/utils/TypesUtil.ts

@@ -112,6 +112,7 @@ export type ColorType =
   | 'gray-glass-020'
   | 'gray-glass-010'
   | 'gray-glass-005'
+  | 'gray-glass-002'
   | 'inverse-000'
   | 'inverse-100'
   | 'success-100'
@@ -174,6 +175,7 @@ export type IconType =
   | 'off'
   | 'paperplane'
   | 'qrCode'
+  | 'recycleHorizontal'
   | 'refresh'
   | 'search'
   | 'swapHorizontal'