@reown/appkit-ui-react-native 0.0.0-develop-20241120213732 → 0.0.0-develop-20250117150918

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, 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,7 +6,6 @@ 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';
@@ -68,7 +67,7 @@ export function ListWallet({
 
   function imageTemplate() {
     return (
-      <LeanView>
+      <View>
         <WalletImage
           style={[styles.image, disabled && styles.imageDisabled]}
           imageSrc={imageSrc}
@@ -77,7 +76,7 @@ export function ListWallet({
           size="sm"
         />
         {templateInstalled()}
-      </LeanView>
+      </View>
     );
   }
 
@@ -117,12 +116,12 @@ export function ListWallet({
       onPressOut={setStartValue}
       testID={testID}
     >
-      <LeanView style={styles.leftSide}>
+      <View style={styles.leftSide}>
         {imageTemplate()}
         <Text variant="paragraph-500" style={styles.name} color={disabled ? 'fg-300' : 'fg-100'}>
           {name}
         </Text>
-      </LeanView>
+      </View>
       {iconTemplate()}
     </AnimatedPressable>
   );

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

@@ -19,6 +19,7 @@ export interface NetworkButtonProps {
   imageHeaders?: Record<string, string>;
   loading?: boolean;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
 export function NetworkButton({
@@ -29,7 +30,8 @@ export function NetworkButton({
   imageSrc,
   imageHeaders,
   loading,
-  style
+  style,
+  testID
 }: NetworkButtonProps) {
   const Theme = useTheme();
   const textColor = disabled ? 'fg-300' : 'fg-100';
@@ -49,6 +51,7 @@ export function NetworkButton({
       onPressIn={setEndValue}
       onPressOut={setStartValue}
       disabled={disabled}
+      testID={testID}
     >
       <LoaderComponent loading={loading} />
       <ImageComponent

package/src/composites/wui-search-bar/index.tsx

@@ -10,15 +10,13 @@ export interface SearchBarProps {
   onSubmitEditing?: TextInputProps['onSubmitEditing'];
   onChangeText?: TextInputProps['onChangeText'];
   inputStyle?: TextInputProps['style'];
-  testID?: string;
 }
 
 export function SearchBar({
   placeholder = 'Search wallet',
   onSubmitEditing,
   onChangeText,
-  inputStyle,
-  testID
+  inputStyle
 }: SearchBarProps) {
   const [showClear, setShowClear] = useState(false);
   const inputRef = useRef<TextInput>(null);
@@ -38,7 +36,6 @@ export function SearchBar({
       inputStyle={inputStyle}
       returnKeyType="search"
       disableFullscreenUI
-      testID={testID}
     >
       {showClear && (
         <InputElement

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,8 +25,17 @@ export function Snackbar({ message, iconColor, icon, style }: SnackbarProps) {
         style
       ]}
     >
-      <IconBox icon={icon} iconColor={iconColor} size="sm" background />
-      <Text variant="paragraph-500" color="fg-100" style={styles.text}>
+      {icon === 'loading' ? (
+        <LoadingSpinner size="md" />
+      ) : (
+        <IconBox icon={icon} iconColor={iconColor} size="sm" background />
+      )}
+      <Text
+        variant="paragraph-500"
+        color="fg-100"
+        style={styles.text}
+        testID="wui-snackbar-message"
+      >
         {message}
       </Text>
     </Animated.View>

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 } from 'react-native';
+import { type LayoutChangeEvent, type StyleProp, type ViewStyle, View } from 'react-native';
 
 import type {
   FlexAlignType,
@@ -10,10 +10,10 @@ import type {
   SpacingType
 } from '../../utils/TypesUtil';
 import { UiUtil } from '../../utils/UiUtil';
-import { LeanView } from '../../components/wui-lean-view';
 
 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 <LeanView style={[styles, props.style]}>{props.children}</LeanView>;
+  return (
+    <View onLayout={props.onLayout} style={[styles, props.style]}>
+      {props.children}
+    </View>
+  );
 }

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

@@ -1,6 +1,5 @@
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { type StyleProp, type ViewStyle, View } from 'react-native';
 import { Text } from '../../components/wui-text';
-import { LeanView } from '../../components/wui-lean-view';
 import { FlexView } from '../../layout/wui-flex';
 import { useTheme } from '../../hooks/useTheme';
 import styles from './styles';
@@ -14,20 +13,18 @@ export function Separator({ text, style }: SeparatorProps) {
   const Theme = useTheme();
 
   if (!text) {
-    return (
-      <LeanView style={[styles.single, { backgroundColor: Theme['gray-glass-005'] }, style]} />
-    );
+    return <View style={[styles.single, { backgroundColor: Theme['gray-glass-005'] }, style]} />;
   }
 
   return (
     <FlexView flexDirection="row" alignItems="center" style={style}>
-      <LeanView
+      <View
         style={[styles.divider, styles.marginRight, { backgroundColor: Theme['gray-glass-005'] }]}
       />
       <Text variant="small-500" color="fg-300">
         {text}
       </Text>
-      <LeanView
+      <View
         style={[styles.divider, styles.marginLeft, { backgroundColor: Theme['gray-glass-005'] }]}
       />
     </FlexView>

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',