@reown/appkit-ui-react-native 0.0.0-feat-smart-account-20241016183051 → 0.0.0-feat-swaps-20241129153709

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

@@ -6,7 +6,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     height: 40,
     borderRadius: BorderRadius.full,
-    borderWidth: 1,
+    borderWidth: StyleSheet.hairlineWidth,
     justifyContent: 'center',
     alignItems: 'center',
     paddingHorizontal: Spacing['3xs']
@@ -36,7 +36,7 @@ export default StyleSheet.create({
     paddingLeft: Spacing['3xs'],
     paddingRight: Spacing.xs,
     borderRadius: BorderRadius.full,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   address: {
     marginLeft: Spacing['3xs']

package/src/composites/wui-account-pill/index.tsx

@@ -1,15 +1,14 @@
 import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
 import { Avatar } from '../wui-avatar';
 import { UiUtil } from '../../utils/UiUtil';
-import { IconLink } from '../wui-icon-link';
 import { Text } from '../../components/wui-text';
 import useAnimatedValue from '../../hooks/useAnimatedValue';
 import { useTheme } from '../../hooks/useTheme';
 import styles from './styles';
+import { Icon } from '../../components/wui-icon';
 
 export interface AccountPillProps {
   onPress: () => void;
-  onCopy: (address: string) => void;
   address?: string;
   profileName?: string;
   profileImage?: string;
@@ -20,7 +19,6 @@ const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
 export function AccountPill({
   onPress,
-  onCopy,
   address,
   profileName,
   profileImage,
@@ -36,12 +34,6 @@ export function AccountPill({
   const backgroundColor = animatedValue;
   const borderColor = Theme['gray-glass-005'];
 
-  const handleCopyAddress = () => {
-    if (address) {
-      onCopy(address);
-    }
-  };
-
   return (
     <AnimatedPressable
       style={[styles.container, { backgroundColor, borderColor }, style]}
@@ -66,7 +58,7 @@ export function AccountPill({
               truncate: 'middle'
             })}
       </Text>
-      <IconLink icon="copy" size="sm" iconColor="fg-200" onPress={handleCopyAddress} />
+      <Icon name="chevronBottom" size="sm" color="fg-200" style={styles.copyButton} />
     </AnimatedPressable>
   );
 }

package/src/composites/wui-account-pill/styles.ts

@@ -11,9 +11,13 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadius.full,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   text: {
     marginLeft: Spacing['2xs']
+  },
+  copyButton: {
+    marginLeft: Spacing.xs,
+    marginRight: Spacing.s
   }
 });

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

@@ -95,7 +95,7 @@ export function Button({
             style={[styles.iconLeft, iconStyle]}
           />
         )}
-        {loading && <LoadingSpinner color={iconColor} />}
+        {loading && <LoadingSpinner color={iconColor} size="md" />}
         {!loading &&
           (typeof children === 'string' ? (
             <Text

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

@@ -9,13 +9,12 @@ export const getThemedButtonStyle = (
   pressed?: boolean
 ): StyleProp<any> => {
   const buttonBaseStyle = {
-    borderColor: theme['gray-glass-010']
+    borderColor: theme['gray-glass-020']
   };
 
   if (disabled) {
     return {
-      backgroundColor: variant === 'fill' ? theme['gray-glass-005'] : theme['gray-glass-010'],
-      borderColor: theme['gray-glass-002']
+      backgroundColor: variant === 'fill' ? theme['gray-glass-005'] : theme['gray-glass-010']
     };
   }
 
@@ -62,7 +61,7 @@ export default StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: BorderRadius.xs,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   smButton: {
     height: 32,

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: BorderRadius.full,
-    borderWidth: 1
+    borderWidth: StyleSheet.hairlineWidth
   },
   smImage: {
     width: 16,

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-icon-box/index.tsx

@@ -7,7 +7,7 @@ import styles from './styles';
 
 export interface IconBoxProps {
   icon: IconType;
-  size?: Exclude<SizeType, 'xl' | 'xs' | 'xxs'>;
+  size?: Exclude<SizeType, 'xs' | 'xxs'>;
   iconColor?: ColorType;
   iconSize?: Exclude<SizeType, 'xl'>;
   background?: boolean;
@@ -33,6 +33,9 @@ export function IconBox({
   const Theme = useTheme();
   let _iconSize: SizeType;
   switch (size) {
+    case 'xl':
+      _iconSize = 'xl';
+      break;
     case 'lg':
       _iconSize = 'lg';
       break;
@@ -48,6 +51,9 @@ export function IconBox({
 
   let boxSize: number;
   switch (size) {
+    case 'xl':
+      boxSize = 56;
+      break;
     case 'lg':
       boxSize = 40;
       break;
@@ -58,7 +64,17 @@ export function IconBox({
       boxSize = 24;
   }
 
-  const borderRadius = size === 'lg' ? 'xxs' : '3xl';
+  let borderRadius: keyof typeof BorderRadius;
+  switch (size) {
+    case 'xl':
+      borderRadius = 's';
+      break;
+    case 'lg':
+      borderRadius = 'xxs';
+      break;
+    default:
+      borderRadius = '3xl';
+  }
 
   const backgroundStyle = {
     backgroundColor:

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