@reown/appkit-ui-react-native 0.0.0-canary-20241218144134 → 0.0.0-chore-builder-20250117182343

package/src/components/wui-pressable/index.tsx

@@ -0,0 +1,92 @@
+import { useRef } from 'react';
+import {
+  Animated,
+  Pressable as RNPressable,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType } from '../../utils/TypesUtil';
+
+const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
+
+export interface PressableProps extends RNPressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  backgroundColor?: ColorType | 'transparent';
+  pressedBackgroundColor?: ColorType;
+  bounceScale?: number;
+  animationDuration?: number;
+  disabled?: boolean;
+  pressable?: boolean;
+}
+
+export function Pressable({
+  children,
+  style,
+  disabled = false,
+  pressable = true,
+  onPress,
+  backgroundColor = 'gray-glass-002',
+  pressedBackgroundColor = 'gray-glass-010',
+  bounceScale = 0.99, // Scale to 99% of original size
+  animationDuration = 200, // 200ms animation
+  ...rest
+}: PressableProps) {
+  const Theme = useTheme();
+  const pressAnimation = useRef(new Animated.Value(0));
+  const scaleAnimation = useRef(new Animated.Value(1));
+
+  const onPressIn = () => {
+    Animated.parallel([
+      Animated.timing(pressAnimation.current, {
+        toValue: 1,
+        useNativeDriver: false,
+        duration: animationDuration
+      }),
+
+      Animated.timing(scaleAnimation.current, {
+        toValue: bounceScale,
+        useNativeDriver: false,
+        duration: animationDuration
+      })
+    ]).start();
+  };
+
+  const onPressOut = () => {
+    Animated.parallel([
+      Animated.timing(pressAnimation.current, {
+        toValue: 0,
+        useNativeDriver: false,
+        duration: animationDuration
+      }),
+      Animated.timing(scaleAnimation.current, {
+        toValue: 1,
+        useNativeDriver: false,
+        duration: animationDuration
+      })
+    ]).start();
+  };
+
+  const bgColor = pressAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [
+      Theme[backgroundColor as ColorType] ?? 'transparent',
+      Theme[pressedBackgroundColor as ColorType] ?? 'transparent'
+    ]
+  });
+
+  return (
+    <AnimatedPressable
+      disabled={disabled || !pressable}
+      style={[{ backgroundColor: bgColor, transform: [{ scale: scaleAnimation.current }] }, style]}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={onPress}
+      {...rest}
+    >
+      {children}
+    </AnimatedPressable>
+  );
+}

package/src/components/wui-shimmer/index.tsx

@@ -1,5 +1,5 @@
 import { Svg, Rect } from 'react-native-svg';
-import { Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
@@ -52,7 +52,14 @@ export const Shimmer = ({
   ).start();
 
   return (
-    <Svg width={width} height={height} style={style}>
+    <Svg
+      width={width}
+      height={height}
+      style={[
+        { borderWidth: StyleSheet.hairlineWidth, borderColor: Theme['bg-300'], borderRadius },
+        style
+      ]}
+    >
       <AnimatedRect {...animatedProps} />
     </Svg>
   );

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,13 @@ export const getThemedButtonStyle = (
   pressed?: boolean
 ): StyleProp<any> => {
   const buttonBaseStyle = {
-    borderColor: theme['gray-glass-010']
+    borderColor: theme['accent-glass-020']
   };
 
   if (disabled) {
     return {
-      backgroundColor: variant === 'fill' ? theme['gray-glass-005'] : theme['gray-glass-010'],
-      borderColor: theme['gray-glass-002']
+      ...buttonBaseStyle,
+      backgroundColor: variant === 'fill' ? theme['gray-glass-005'] : theme['gray-glass-010']
     };
   }
 

package/src/composites/wui-input-text/index.tsx

@@ -4,8 +4,10 @@ import {
   Pressable,
   TextInput,
   type NativeSyntheticEvent,
+  type StyleProp,
   type TextInputFocusEventData,
-  type TextInputProps
+  type TextInputProps,
+  type ViewStyle
 } from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import useAnimatedValue from '../../hooks/useAnimatedValue';
@@ -26,6 +28,7 @@ export type InputTextProps = TextInputProps & {
   icon?: IconType;
   disabled?: boolean;
   size?: Exclude<SizeType, 'xl' | 'lg' | 'xxs'>;
+  style?: StyleProp<ViewStyle>;
 };
 
 export const InputText = forwardRef<InputRef, InputTextProps>(
@@ -40,6 +43,7 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
       returnKeyType,
       onBlur,
       onFocus,
+      style,
       ...rest
     }: InputTextProps,
     ref
@@ -94,7 +98,11 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
     return (
       <>
         <AnimatedPressable
-          style={[styles.outerBorder, { borderColor: outerBorder, borderRadius: outerRadius }]}
+          style={[
+            styles.outerBorder,
+            { borderColor: outerBorder, borderRadius: outerRadius },
+            style
+          ]}
           disabled={disabled}
           onPress={() => inputRef.current?.focus()}
         >

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-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"

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/context/ThemeContext.tsx

@@ -0,0 +1,44 @@
+import { useColorScheme } from 'react-native';
+import { createContext, useContext, type ReactNode } from 'react';
+import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
+
+import { DarkTheme, LightTheme, getAccentColors } from '../utils/ThemeUtil';
+
+type ThemeContextType = {
+  themeMode?: ThemeMode;
+  themeVariables?: ThemeVariables;
+};
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  themeMode?: ThemeMode;
+  themeVariables?: ThemeVariables;
+}
+
+export function ThemeProvider({ children, themeMode, themeVariables }: ThemeProviderProps) {
+  return (
+    <ThemeContext.Provider value={{ themeMode, themeVariables }}>{children}</ThemeContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeContext);
+  const scheme = useColorScheme();
+
+  // If the theme mode is not set, use the system color scheme
+  const themeMode = context?.themeMode ?? scheme;
+  const themeVariables = context?.themeVariables ?? {};
+
+  let Theme = themeMode === 'dark' ? DarkTheme : LightTheme;
+
+  if (themeVariables.accent) {
+    Theme = {
+      ...Theme,
+      ...getAccentColors(themeVariables.accent)
+    };
+  }
+
+  return Theme;
+}

package/src/hooks/useTheme.ts

@@ -1,9 +1,5 @@
-import { useColorScheme } from 'react-native';
-import { DarkTheme, LightTheme } from '../utils/ThemeUtil';
+import { useTheme as useThemeContext } from '../context/ThemeContext';
 
-export function useTheme() {
-  const scheme = useColorScheme();
-  const Theme = scheme === 'dark' ? DarkTheme : LightTheme;
-
-  return Theme;
-}
+export const useTheme = () => {
+  return useThemeContext();
+};

package/src/index.ts

@@ -42,7 +42,7 @@ 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';
@@ -50,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';
@@ -83,4 +85,5 @@ export { TransactionUtil } from './utils/TransactionUtil';
 export { Spacing, BorderRadius } from './utils/ThemeUtil';
 
 export { useTheme } from './hooks/useTheme';
+export { ThemeProvider } from './context/ThemeContext';
 export { useAnimatedValue } from './hooks/useAnimatedValue';

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

@@ -1,4 +1,4 @@
-import { type StyleProp, type ViewStyle, View } from 'react-native';
+import { type LayoutChangeEvent, type StyleProp, type ViewStyle, View } from 'react-native';
 
 import type {
   FlexAlignType,
@@ -13,6 +13,7 @@ import { UiUtil } from '../../utils/UiUtil';
 
 export interface FlexViewProps {
   children?: React.ReactNode;
+  onLayout?: (event: LayoutChangeEvent) => void;
   flexDirection?: FlexDirectionType;
   flexWrap?: FlexWrapType;
   flexGrow?: FlexGrowType;
@@ -44,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/utils/ThemeUtil.ts

@@ -1,5 +1,23 @@
+import { transparentize, darken, lighten } from 'polished';
+
 import type { SpacingType, ThemeKeys } from './TypesUtil';
 
+export const getAccentColors = (baseAccentColor: string) => {
+  return {
+    'accent-100': baseAccentColor,
+    'accent-090': lighten(0.05, baseAccentColor),
+    'accent-080': lighten(0.1, baseAccentColor),
+    'accent-020': darken(0.1, baseAccentColor),
+    'accent-glass-090': transparentize(0.1, baseAccentColor),
+    'accent-glass-080': transparentize(0.2, baseAccentColor),
+    'accent-glass-020': transparentize(0.8, baseAccentColor),
+    'accent-glass-015': transparentize(0.85, baseAccentColor),
+    'accent-glass-010': transparentize(0.9, baseAccentColor),
+    'accent-glass-005': transparentize(0.95, baseAccentColor),
+    'accent-glass-002': transparentize(0.98, baseAccentColor)
+  };
+};
+
 export const DarkTheme: { [key in ThemeKeys]: string } = {
   'accent-100': '#667DFF',
   'accent-090': '#7388FD',