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

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

@@ -0,0 +1,91 @@
+import { useRef, useState } from 'react';
+import {
+  Animated,
+  Pressable,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import type { TabOptionType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export interface TabsProps {
+  onTabChange: (index: number) => void;
+  tabs: TabOptionType[] | string[];
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Tabs({ tabs, onTabChange, style }: TabsProps) {
+  const Theme = useTheme();
+  const [activeTab, setActiveTab] = useState(0);
+  const animatedPosition = useRef(new Animated.Value(0));
+  const [viewWidth, setViewWidth] = useState(1);
+  const tabWidth = Math.trunc(viewWidth / tabs.length) - 2;
+
+  const onTabPress = (index: number) => {
+    setActiveTab(index);
+    onTabChange(index);
+    Animated.timing(animatedPosition.current, {
+      toValue: index,
+      duration: 120,
+      useNativeDriver: false
+    }).start();
+  };
+
+  const markPosition = animatedPosition.current.interpolate({
+    inputRange: [0, tabs.length - 1],
+    outputRange: [0, tabWidth * (tabs.length - 1)]
+  });
+
+  const onLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setViewWidth(width);
+  };
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }, style]}
+      onLayout={onLayout}
+    >
+      <Animated.View
+        style={[
+          styles.activeMark,
+          {
+            backgroundColor: Theme['gray-glass-005'],
+            borderColor: Theme['gray-glass-005'],
+            left: markPosition,
+            width: tabWidth
+          }
+        ]}
+      />
+      {tabs.map((option, index) => {
+        const isActive = index === activeTab;
+        const isString = typeof option === 'string';
+
+        return (
+          <Pressable
+            onPress={() => onTabPress(index)}
+            key={isString ? option : option.label}
+            style={[styles.tabItem, { width: tabWidth }]}
+          >
+            {!isString && option.icon ? (
+              <Icon
+                name={option.icon}
+                size="xs"
+                color={isActive ? 'fg-100' : 'fg-200'}
+                style={styles.tabIcon}
+              />
+            ) : null}
+            <Text variant="small-600" color={isActive ? 'fg-100' : 'fg-200'}>
+              {isString ? option : option.label}
+            </Text>
+          </Pressable>
+        );
+      })}
+    </View>
+  );
+}

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

@@ -0,0 +1,29 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    height: 34,
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: Spacing['3xs'],
+    borderRadius: BorderRadius['3xl']
+  },
+  tabItem: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: Spacing['2xs']
+  },
+  tabIcon: {
+    marginRight: Spacing['3xs']
+  },
+  activeMark: {
+    position: 'absolute',
+    height: 28,
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: BorderRadius['3xl'],
+    margin: Spacing['3xs']
+  }
+});

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

@@ -0,0 +1,30 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, type TextStyle, View, type ViewStyle } from 'react-native';
+
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import styles, { getThemedColors } from './styles';
+import type { ColorType, TagType, ThemeKeys } from '../../utils/TypesUtil';
+
+export interface TagProps {
+  children: ReactNode;
+  variant?: TagType;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export function Tag({ variant = 'main', children, style, disabled, textStyle }: TagProps) {
+  const Theme = useTheme();
+  const colors = getThemedColors(disabled ? undefined : variant);
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: Theme[colors.background as ThemeKeys] }, style]}
+    >
+      <Text style={[styles.text, textStyle]} variant="micro-700" color={colors.text as ColorType}>
+        {children}
+      </Text>
+    </View>
+  );
+}

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

@@ -0,0 +1,37 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import type { TagType } from '../../utils/TypesUtil';
+
+export const getThemedColors = (variant?: TagType) =>
+  ({
+    main: {
+      background: 'accent-glass-015',
+      text: 'accent-100'
+    },
+    shade: {
+      background: 'gray-glass-010',
+      text: 'fg-200'
+    },
+    success: {
+      background: 'icon-box-bg-success-100',
+      text: 'success-100'
+    },
+    error: {
+      background: 'icon-box-bg-error-100',
+      text: 'error-100'
+    },
+    disabled: {
+      background: 'gray-glass-010',
+      text: 'fg-200'
+    }
+  })[variant || 'disabled'];
+
+export default StyleSheet.create({
+  container: {
+    borderRadius: BorderRadius['5xs'],
+    padding: Spacing['2xs']
+  },
+  text: {
+    textTransform: 'uppercase'
+  }
+});

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

@@ -0,0 +1,89 @@
+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 {
+  /** Content to be displayed inside the toggle when expanded */
+  children?: React.ReactNode;
+  /** Title displayed in the toggle header. Can be a string or a custom React component */
+  title?: string | React.ReactNode;
+  /** Custom styles for the toggle container */
+  style?: StyleProp<ViewStyle>;
+  /** Whether the toggle should be open when first rendered */
+  initialOpen?: boolean;
+  /** Whether the toggle can be closed after being opened. If false, toggle will remain open once expanded */
+  canClose?: boolean;
+  /** Custom styles for the content container inside the toggle */
+  contentContainerStyle?: StyleProp<ViewStyle>;
+}
+
+export function Toggle({
+  children,
+  style,
+  title = 'Details',
+  initialOpen = false,
+  canClose = true,
+  contentContainerStyle
+}: 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" />
+        ) : null}
+      </Pressable>
+
+      <Animated.View style={[styles.contentWrapper, { height: animatedHeight }]}>
+        <FlexView style={[styles.content, contentContainerStyle]} 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

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import { Image } from '../../components/wui-image';
+import { Text } from '../../components/wui-text';
+import { Button } from '../wui-button';
+import { Icon } from '../../components/wui-icon';
+import styles from './styles';
+import { useTheme } from '../../context/ThemeContext';
+
+export interface TokenButtonProps {
+  onPress?: () => void;
+  imageUrl?: string;
+  text?: string;
+  inverse?: boolean;
+  style?: StyleProp<ViewStyle>;
+  disabled?: boolean;
+  placeholder?: string;
+  chevron?: boolean;
+  renderClip?: React.ReactNode;
+  testID?: string;
+}
+
+export function TokenButton({
+  imageUrl,
+  text,
+  inverse,
+  onPress,
+  style,
+  disabled = false,
+  placeholder = 'Select Token',
+  chevron,
+  renderClip,
+  testID
+}: TokenButtonProps) {
+  const Theme = useTheme();
+
+  if (!text) {
+    return (
+      <Button
+        variant="accent"
+        style={[styles.selectButton, style]}
+        size="sm"
+        onPress={onPress}
+        disabled={disabled}
+      >
+        <Text variant="small-600" color="accent-100">
+          {placeholder}
+        </Text>
+      </Button>
+    );
+  }
+
+  const content = [
+    imageUrl && (
+      <View key="image-container" style={[styles.imageContainer, inverse && styles.imageInverse]}>
+        <Image
+          key="image"
+          source={imageUrl}
+          style={[styles.image, { backgroundColor: Theme['inverse-100'] }]}
+        />
+        {renderClip ? <View style={styles.clipContainer}>{renderClip}</View> : null}
+      </View>
+    ),
+    <Text key="text">{text}</Text>
+  ];
+
+  return (
+    <Button
+      variant="shade"
+      style={[styles.container, style]}
+      size="sm"
+      onPress={onPress}
+      disabled={disabled}
+      testID={testID}
+    >
+      {inverse ? content.reverse() : content}
+      {chevron ? (
+        <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />
+      ) : null}
+    </Button>
+  );
+}

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

@@ -0,0 +1,35 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  selectButton: {
+    height: 40,
+    paddingHorizontal: Spacing.m
+  },
+  container: {
+    height: 40
+  },
+  imageContainer: {
+    position: 'relative',
+    marginRight: Spacing['2xs']
+  },
+  image: {
+    width: 24,
+    height: 24,
+    borderRadius: BorderRadius.full,
+    marginRight: 0
+  },
+  imageInverse: {
+    marginRight: 0,
+    marginLeft: Spacing['2xs']
+  },
+  clipContainer: {
+    position: 'absolute',
+    right: -4,
+    bottom: -4,
+    zIndex: 1
+  },
+  chevron: {
+    marginLeft: Spacing['2xs']
+  }
+});

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

@@ -0,0 +1,32 @@
+import { View } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, PlacementType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export interface TooltipProps {
+  message: string;
+  placement?: PlacementType;
+}
+
+export function Tooltip({ message, placement = 'top' }: TooltipProps) {
+  const Theme = useTheme();
+
+  return (
+    <>
+      <View style={[styles.container, { backgroundColor: Theme['fg-100'] }]}>
+        <Text color={'bg-100' as ColorType} variant="small-500">
+          {message}
+        </Text>
+        <Icon
+          name="cursor"
+          color="fg-100"
+          style={[styles.base, styles[placement]]}
+          width={12}
+          height={4}
+        />
+      </View>
+    </>
+  );
+}

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

@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    paddingHorizontal: Spacing.s,
+    paddingVertical: Spacing.xs,
+    borderRadius: BorderRadius.xxs,
+    alignItems: 'center',
+    justifyContent: 'center',
+    overflow: 'visible'
+  },
+  base: {
+    position: 'absolute',
+    zIndex: 10
+  },
+  top: {
+    bottom: -3
+  },
+  bottom: {
+    top: -3,
+    transform: [{ rotateZ: '180deg' }]
+  },
+  right: {
+    left: -8,
+    transform: [{ rotateZ: '90deg' }]
+  },
+  left: {
+    right: -8,
+    transform: [{ rotateZ: '90deg' }, { rotateX: '180deg' }]
+  }
+});

package/src/composites/wui-transaction-visual/index.tsx

@@ -0,0 +1,78 @@
+import type { TransactionImage } from '@reown/appkit-common-react-native';
+
+import { FlexView } from '../../layout/wui-flex';
+import { Icon } from '../../components/wui-icon';
+import { Image } from '../../components/wui-image';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+export interface TransactionVisualProps {
+  images?: TransactionImage[];
+  networkSrc?: string;
+  isAllNFT?: boolean;
+}
+
+export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionVisualProps) {
+  const Theme = useTheme();
+  const backgroundColor = Theme['bg-200'];
+  const isFirstNFT = Boolean(images?.[0]?.type === 'NFT');
+  const filteredImages = images?.filter(image => image.url);
+  const [firstImage, secondImage] = filteredImages ?? [];
+  const hasOneImage = filteredImages?.length === 1;
+  const hasTwoImages = filteredImages && filteredImages?.length > 1;
+
+  return (
+    <FlexView>
+      {!filteredImages?.length && (
+        <FlexView
+          alignItems="center"
+          justifyContent="center"
+          style={[styles.image, { backgroundColor }]}
+        >
+          <Icon name={isFirstNFT ? 'nftPlaceholder' : 'coinPlaceholder'} size="sm" color="fg-200" />
+        </FlexView>
+      )}
+      {hasOneImage && firstImage?.url ? (
+        <Image
+          source={firstImage.url}
+          style={[styles.image, firstImage?.type === 'NFT' && styles.imageNft, { backgroundColor }]}
+        />
+      ) : null}
+      {hasTwoImages && firstImage?.url && secondImage?.url ? (
+        <FlexView flexDirection="row" padding={['0', 's', '0', '0']}>
+          <FlexView style={styles.halfContainer}>
+            <Image
+              source={firstImage.url}
+              style={[styles.image, isAllNFT && styles.imageNft, { backgroundColor }]}
+            />
+          </FlexView>
+          <FlexView style={styles.halfContainer}>
+            <Image
+              source={secondImage.url}
+              style={[
+                styles.image,
+                styles.halfRight,
+                isAllNFT && styles.imageNft,
+                { backgroundColor }
+              ]}
+            />
+          </FlexView>
+        </FlexView>
+      ) : null}
+      <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>
+  );
+}

package/src/composites/wui-transaction-visual/styles.ts

@@ -0,0 +1,36 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  image: {
+    height: 40,
+    width: 40,
+    borderRadius: BorderRadius.full,
+    marginRight: Spacing.s
+  },
+  imageNft: {
+    borderRadius: BorderRadius.xxs
+  },
+  halfContainer: {
+    overflow: 'hidden',
+    width: 20,
+    marginRight: 2
+  },
+  halfRight: {
+    left: -20
+  },
+  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-wallet-image/index.tsx

@@ -0,0 +1,85 @@
+import { type StyleProp, View, type ViewStyle, Animated } from 'react-native';
+import { Icon } from '../../components/wui-icon';
+import { Image } from '../../components/wui-image';
+import { useTheme } from '../../hooks/useTheme';
+import type { SizeType } from '../../utils/TypesUtil';
+
+import styles from './styles';
+
+export interface WalletImageProps {
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  size?: Exclude<SizeType, 'xxs'>;
+  style?: StyleProp<ViewStyle>;
+  showAllWallets?: boolean;
+  border?: boolean;
+}
+
+const IconSize = {
+  xs: 10,
+  sm: 24,
+  md: 32,
+  lg: 36,
+  xl: 40
+};
+
+export function WalletImage({
+  imageSrc,
+  imageHeaders,
+  size = 'md',
+  style,
+  showAllWallets,
+  border = true
+}: WalletImageProps) {
+  const Theme = useTheme();
+
+  const templateVisual = () => {
+    if (imageSrc) {
+      return <Image source={imageSrc} headers={imageHeaders} style={styles[`${size}Image`]} />;
+    }
+
+    if (showAllWallets) {
+      return (
+        <View style={[styles.container, styles[`${size}Image`]]}>
+          <Icon
+            height={IconSize[size]}
+            width={IconSize[size]}
+            name="allWallets"
+            color="accent-100"
+          />
+        </View>
+      );
+    }
+
+    return (
+      <View style={[styles.container, styles[`${size}Image`]]}>
+        <Icon
+          height={IconSize[size]}
+          width={IconSize[size]}
+          name="walletPlaceholder"
+          color="fg-200"
+        />
+      </View>
+    );
+  };
+
+  return (
+    <Animated.View style={style}>
+      {templateVisual()}
+      {border ? (
+        <View
+          style={[
+            styles.border,
+            styles[`${size}Image`],
+            { borderColor: Theme['gray-glass-010'] },
+            !imageSrc && { backgroundColor: Theme['gray-glass-002'] },
+            showAllWallets && {
+              backgroundColor: `${Theme['accent-100']}1E`,
+              borderColor: Theme['accent-glass-010']
+            }
+          ]}
+        />
+      ) : null}
+    </Animated.View>
+  );
+}