@reown/appkit-ui-react-native 0.0.0-canary-20240912195440

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

@@ -0,0 +1,116 @@
+import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Image } from '../../components/wui-image';
+import { Text } from '../../components/wui-text';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import { UiUtil } from '../../utils/UiUtil';
+import { Avatar } from '../wui-avatar';
+import { IconBox } from '../wui-icon-box';
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface AccountButtonProps {
+  networkSrc?: string;
+  imageHeaders?: Record<string, string>;
+  avatarSrc?: string;
+  address?: string;
+  isProfileName?: boolean;
+  balance?: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function AccountButton({
+  networkSrc,
+  imageHeaders,
+  avatarSrc,
+  address,
+  isProfileName,
+  balance,
+  onPress,
+  disabled,
+  style,
+  testID
+}: AccountButtonProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+
+  function balanceTemplate() {
+    if (balance) {
+      const network = networkSrc ? (
+        <Image
+          source={networkSrc}
+          headers={imageHeaders}
+          style={[styles.image, { borderColor: Theme['gray-glass-005'] }]}
+        />
+      ) : (
+        <IconBox
+          icon="networkPlaceholder"
+          size="sm"
+          iconColor="fg-200"
+          background
+          border
+          style={{ borderColor: Theme['gray-glass-005'] }}
+        />
+      );
+
+      return (
+        <View style={styles.networkContainer}>
+          {network}
+          <Text variant="paragraph-600" color="fg-100" style={styles.balance}>
+            {balance}
+          </Text>
+        </View>
+      );
+    }
+
+    return null;
+  }
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      disabled={disabled}
+      testID={testID}
+      style={[
+        styles.container,
+        { backgroundColor: animatedValue, borderColor: Theme['gray-glass-005'] },
+        style
+      ]}
+    >
+      {balanceTemplate()}
+      <View
+        style={[
+          styles.addressContainer,
+          { backgroundColor: Theme['gray-glass-005'], borderColor: Theme['gray-glass-005'] }
+        ]}
+      >
+        <Avatar
+          imageSrc={avatarSrc}
+          address={address}
+          size={20}
+          borderWidth={2}
+          style={[styles.image, !avatarSrc && styles.avatarPlaceholder]}
+        />
+        {address && (
+          <Text variant="paragraph-500" color="fg-200" style={styles.address}>
+            {UiUtil.getTruncateString({
+              string: address,
+              charsStart: isProfileName ? 18 : 4,
+              charsEnd: isProfileName ? 0 : 6,
+              truncate: isProfileName ? 'end' : 'middle'
+            })}
+          </Text>
+        )}
+      </View>
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 40,
+    borderRadius: 100,
+    borderWidth: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: Spacing['3xs']
+  },
+  image: {
+    height: 24,
+    width: 24,
+    borderRadius: 100,
+    borderWidth: 2
+  },
+  avatarPlaceholder: {
+    borderWidth: 0
+  },
+  networkContainer: {
+    flexDirection: 'row',
+    height: 32,
+    paddingLeft: Spacing['3xs'],
+    paddingRight: Spacing.xs,
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  addressContainer: {
+    flexDirection: 'row',
+    height: 32,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingLeft: Spacing['3xs'],
+    paddingRight: Spacing.xs,
+    borderRadius: 100,
+    borderWidth: 1
+  },
+  address: {
+    marginLeft: Spacing['3xs']
+  },
+  balance: {
+    marginLeft: Spacing['3xs']
+  }
+});

package/src/composites/wui-action-entry/index.tsx

@@ -0,0 +1,40 @@
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+
+import styles from './styles';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export interface ActionEntryProps {
+  onPress?: () => void;
+  disabled?: boolean;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function ActionEntry({ children, onPress, disabled, style }: ActionEntryProps) {
+  const Theme = useTheme();
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-002'],
+    Theme['gray-glass-010']
+  );
+  const isPressable = !!onPress;
+
+  return (
+    <AnimatedPressable
+      style={[
+        styles.container,
+        { backgroundColor: disabled ? Theme['gray-glass-010'] : animatedValue },
+        style
+      ]}
+      disabled={disabled}
+      onPress={onPress}
+      onPressIn={isPressable ? setEndValue : undefined}
+      onPressOut={isPressable ? setStartValue : undefined}
+    >
+      {children}
+    </AnimatedPressable>
+  );
+}

package/src/composites/wui-action-entry/styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 56,
+    borderRadius: BorderRadius.xs,
+    paddingHorizontal: Spacing.xs
+  },
+  label: {
+    marginHorizontal: Spacing['4xs']
+  },
+  icon: {
+    marginRight: Spacing.xs
+  }
+});

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

@@ -0,0 +1,78 @@
+import { View, type ImageStyle, type StyleProp } from 'react-native';
+import Svg, { Circle, Defs, RadialGradient, Stop } from 'react-native-svg';
+import { Image } from '../../components/wui-image';
+import { useTheme } from '../../hooks/useTheme';
+import { UiUtil } from '../../utils/UiUtil';
+import styles from './styles';
+
+export interface AvatarProps {
+  imageSrc?: string;
+  address?: string;
+  style?: StyleProp<ImageStyle>;
+  size?: number;
+  borderWidth?: number;
+}
+
+export function Avatar({ imageSrc, address, style, size = 64, borderWidth = 8 }: AvatarProps) {
+  const Theme = useTheme();
+  const colors = UiUtil.generateAvatarColors(address);
+  const containerSize = size + borderWidth * 2;
+
+  if (imageSrc) {
+    return (
+      <View
+        style={[
+          styles.image,
+          {
+            height: containerSize,
+            width: containerSize,
+            borderColor: Theme['gray-glass-005'],
+            borderWidth
+          },
+          style
+        ]}
+      >
+        <Image
+          source={imageSrc}
+          style={[
+            styles.image,
+            {
+              height: size,
+              width: size
+            }
+          ]}
+        />
+      </View>
+    );
+  }
+
+  return (
+    <Svg width={containerSize} height={containerSize} fill="none" style={style}>
+      <Defs>
+        <RadialGradient
+          id="radial"
+          cx="0"
+          cy="0"
+          r="1"
+          gradientUnits="userSpaceOnUse"
+          gradientTransform={`translate(${size * 0.75} ${size * 0.35}) scale(${size * 0.75})`}
+        >
+          <Stop offset="0.52%" stopColor="#FFFFFF" />
+          <Stop offset="31.25%" stopColor={colors[0]} />
+          <Stop offset="51.56%" stopColor={colors[1]} />
+          <Stop offset="65.63%" stopColor={colors[2]} />
+          <Stop offset="82.29%" stopColor={colors[3]} />
+          <Stop offset="100%" stopColor={colors[4]} />
+        </RadialGradient>
+      </Defs>
+      <Circle cx="50%" cy="50%" r={size / 2} fill="url(#radial)" />
+      <Circle
+        cx="50%"
+        cy="50%"
+        r={(size + borderWidth) / 2}
+        stroke={Theme['gray-glass-005']}
+        strokeWidth={borderWidth}
+      />
+    </Svg>
+  );
+}

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

@@ -0,0 +1,7 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  image: {
+    borderRadius: 100
+  }
+});

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

@@ -0,0 +1,119 @@
+import { useRef } from 'react';
+import {
+  Animated,
+  Pressable,
+  type PressableProps as NativeProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { Text } from '../../components/wui-text';
+import { Icon } from '../../components/wui-icon';
+import { LoadingSpinner } from '../../components/wui-loading-spinner';
+import { useTheme } from '../../hooks/useTheme';
+import type { ButtonType, IconType, SizeType } from '../../utils/TypesUtil';
+
+import styles, { getThemedButtonStyle, getThemedTextStyle, getIconColor } from './styles';
+import type { SvgProps } from 'react-native-svg';
+import { FlexView } from '../../layout/wui-flex';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export type ButtonProps = NativeProps & {
+  size?: Exclude<SizeType, 'xl' | 'lg' | 'xs' | 'xxs'>;
+  variant?: ButtonType;
+  disabled?: boolean;
+  iconLeft?: IconType;
+  iconRight?: IconType;
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  iconStyle?: SvgProps['style'];
+  loading?: boolean;
+};
+
+export function Button({
+  children,
+  size = 'md',
+  variant = 'fill',
+  disabled,
+  onPress,
+  style,
+  iconLeft,
+  iconRight,
+  iconStyle,
+  loading,
+  ...rest
+}: ButtonProps) {
+  const Theme = useTheme();
+  const themedTextStyle = getThemedTextStyle(Theme, variant, disabled);
+  const colorAnimation = useRef(new Animated.Value(0));
+  const iconSize = size === 'md' ? 'sm' : 'xs';
+  const iconColor = getIconColor(variant, disabled);
+  const themedNormalStyle = getThemedButtonStyle(Theme, variant, disabled, false);
+  const themedPressedStyle = getThemedButtonStyle(Theme, variant, disabled, true);
+
+  const onPressIn = () => {
+    Animated.timing(colorAnimation.current, {
+      toValue: 1,
+      useNativeDriver: false,
+      duration: 200
+    }).start();
+  };
+
+  const onPressOut = () => {
+    Animated.timing(colorAnimation.current, {
+      toValue: 0,
+      useNativeDriver: false,
+      duration: 200
+    }).start();
+  };
+
+  const backgroundColor = colorAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [themedNormalStyle.backgroundColor, themedPressedStyle.backgroundColor]
+  });
+
+  const borderColor = colorAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [themedNormalStyle.borderColor, themedPressedStyle.borderColor]
+  });
+
+  return (
+    <AnimatedPressable
+      disabled={disabled || loading}
+      style={[styles.button, styles[`${size}Button`], { backgroundColor, borderColor }, style]}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={onPress}
+      {...rest}
+    >
+      <FlexView flexDirection="row" alignItems="center" justifyContent="center">
+        {iconLeft && (
+          <Icon
+            color={iconColor}
+            name={iconLeft}
+            size={iconSize}
+            style={[styles.iconLeft, iconStyle]}
+          />
+        )}
+        {loading ? (
+          <LoadingSpinner color={iconColor} />
+        ) : (
+          <Text
+            variant={size === 'md' ? 'paragraph-600' : 'small-600'}
+            style={[styles.text, themedTextStyle]}
+          >
+            {children}
+          </Text>
+        )}
+        {iconRight && (
+          <Icon
+            color={iconColor}
+            name={iconRight}
+            size={iconSize}
+            style={[styles.iconRight, iconStyle]}
+          />
+        )}
+      </FlexView>
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,86 @@
+import { type StyleProp, StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import type { ButtonType, ThemeKeys } from '../../utils/TypesUtil';
+
+export const getThemedButtonStyle = (
+  theme: { [key in ThemeKeys]: string },
+  variant: ButtonType,
+  disabled?: boolean,
+  pressed?: boolean
+): StyleProp<any> => {
+  const buttonBaseStyle = {
+    borderColor: theme['gray-glass-010']
+  };
+
+  if (disabled) {
+    return {
+      backgroundColor: variant === 'fill' ? theme['gray-glass-002'] : theme['gray-glass-010'],
+      borderColor: theme['gray-glass-002']
+    };
+  }
+
+  if (pressed) {
+    return {
+      ...buttonBaseStyle,
+      backgroundColor: variant === 'fill' ? theme['accent-020'] : theme['gray-glass-010']
+    };
+  }
+
+  return {
+    ...buttonBaseStyle,
+    backgroundColor: variant === 'fill' ? theme['accent-100'] : 'transparent'
+  };
+};
+
+export const getThemedTextStyle = (
+  theme: { [key in ThemeKeys]: string },
+  variant: ButtonType,
+  disabled?: boolean
+): StyleProp<any> => {
+  if (disabled) {
+    return { color: theme['gray-glass-020'] };
+  }
+
+  return variant === 'fill'
+    ? { color: theme['inverse-100'] }
+    : variant === 'accent'
+    ? { color: theme['accent-100'] }
+    : { color: theme['fg-100'] };
+};
+
+export const getIconColor = (variant: ButtonType, disabled?: boolean) => {
+  if (disabled) {
+    return 'gray-glass-020';
+  }
+
+  return variant === 'fill' ? 'inverse-100' : variant === 'accent' ? 'accent-100' : 'fg-100';
+};
+
+export default StyleSheet.create({
+  button: {
+    paddingVertical: Spacing['3xs'],
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius.xs,
+    borderWidth: 1
+  },
+  smButton: {
+    height: 32,
+    paddingHorizontal: Spacing.xs,
+    borderRadius: BorderRadius['3xl']
+  },
+  mdButton: {
+    height: 48,
+    paddingHorizontal: Spacing.xs,
+    borderRadius: BorderRadius.s
+  },
+  text: {
+    marginHorizontal: Spacing['3xs']
+  },
+  iconRight: {
+    marginRight: Spacing['3xs']
+  },
+  iconLeft: {
+    marginLeft: Spacing['3xs']
+  }
+});

package/src/composites/wui-card-select/index.tsx

@@ -0,0 +1,101 @@
+import { memo } from 'react';
+import { Animated, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
+import { Text } from '../../components/wui-text';
+import { IconBox } from '../wui-icon-box';
+import useAnimatedValue from '../../hooks/useAnimatedValue';
+import { useTheme } from '../../hooks/useTheme';
+import type { CardSelectType } from '../../utils/TypesUtil';
+import { NetworkImage } from '../wui-network-image';
+import { WalletImage } from '../wui-wallet-image';
+import styles, { getBackgroundColor, ITEM_HEIGHT, ITEM_WIDTH } from './styles';
+import { UiUtil } from '../../utils/UiUtil';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export const CardSelectHeight = ITEM_HEIGHT;
+export const CardSelectWidth = ITEM_WIDTH;
+
+export interface CardSelectProps {
+  name: string;
+  imageSrc?: string;
+  imageHeaders?: Record<string, string>;
+  disabled?: boolean;
+  installed?: boolean;
+  selected?: boolean;
+  type?: CardSelectType;
+  onPress?: () => void;
+  style?: StyleProp<ViewStyle>;
+}
+
+function _CardSelect({
+  name,
+  type = 'wallet',
+  imageSrc,
+  imageHeaders,
+  onPress,
+  disabled,
+  installed,
+  selected,
+  style
+}: CardSelectProps) {
+  const Theme = useTheme();
+  const normalbackgroundColor = getBackgroundColor({ selected, disabled, pressed: false });
+  const pressedBackgroundColor = getBackgroundColor({ selected, disabled, pressed: true });
+
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme[normalbackgroundColor],
+    Theme[pressedBackgroundColor]
+  );
+
+  const textColor = disabled ? 'fg-300' : selected ? 'accent-100' : 'fg-100';
+
+  const Image = type === 'wallet' ? WalletImage : NetworkImage;
+
+  const templateInstalled = () => {
+    if (!installed) return null;
+
+    return (
+      <IconBox
+        icon="checkmark"
+        iconSize="xs"
+        iconColor={'success-100'}
+        border
+        borderSize={6}
+        borderColor="bg-150"
+        background
+        backgroundColor="icon-box-bg-success-100"
+        size="sm"
+        style={styles.installedBox}
+      />
+    );
+  };
+
+  return (
+    <AnimatedPressable
+      onPress={onPress}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      disabled={disabled}
+      style={[styles.container, { backgroundColor: animatedValue }, style]}
+    >
+      <View>
+        <Image
+          imageSrc={imageSrc}
+          imageHeaders={imageHeaders}
+          size="md"
+          style={disabled && styles.disabledImage}
+          selected={selected}
+          disabled={disabled}
+        />
+        {templateInstalled()}
+      </View>
+      <Text variant="tiny-500" color={textColor} style={styles.text} numberOfLines={1}>
+        {UiUtil.getWalletName(name)}
+      </Text>
+    </AnimatedPressable>
+  );
+}
+
+export const CardSelect = memo(_CardSelect, (prevProps, nextProps) => {
+  return prevProps.name === nextProps.name;
+});

package/src/composites/wui-card-select/styles.ts

@@ -0,0 +1,46 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+import type { ThemeKeys } from '../../utils/TypesUtil';
+
+export const ITEM_HEIGHT = 96;
+export const ITEM_WIDTH = 76;
+
+export const getBackgroundColor = ({
+  selected,
+  disabled,
+  pressed
+}: {
+  selected?: boolean;
+  disabled?: boolean;
+  pressed?: boolean;
+}): ThemeKeys => {
+  if (disabled) return 'gray-glass-005';
+  if (selected) return 'accent-glass-020';
+
+  return pressed ? 'gray-glass-010' : 'gray-glass-002';
+};
+
+export default StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: ITEM_HEIGHT,
+    width: ITEM_WIDTH,
+    borderRadius: BorderRadius.xs
+  },
+  text: {
+    marginTop: Spacing.xs,
+    marginHorizontal: Spacing['2xs']
+  },
+  disabledImage: {
+    opacity: 0.4
+  },
+  installedBox: {
+    position: 'absolute',
+    bottom: -5,
+    right: -5,
+    height: 24,
+    width: 24,
+    zIndex: 2
+  }
+});

package/src/composites/wui-card-select-loader/index.tsx

@@ -0,0 +1,36 @@
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { BorderRadius, Spacing, WalletImageSize } from '../../utils/ThemeUtil';
+import { useTheme } from '../../hooks/useTheme';
+import { Shimmer } from '../../components/wui-shimmer';
+import { FlexView } from '../../layout/wui-flex';
+import styles, { ITEM_HEIGHT } from './styles';
+
+export const CardSelectLoaderHeight = ITEM_HEIGHT;
+
+export interface CardSelectLoaderProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export function CardSelectLoader({ style }: CardSelectLoaderProps) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      alignItems="center"
+      justifyContent="center"
+      style={[styles.container, { backgroundColor: Theme['gray-glass-002'] }, style]}
+    >
+      <Shimmer
+        height={WalletImageSize.md}
+        width={WalletImageSize.md}
+        borderRadius={BorderRadius.xs}
+      />
+      <Shimmer
+        height={14}
+        width={WalletImageSize.md - Spacing.xs}
+        borderRadius={6}
+        style={styles.text}
+      />
+    </FlexView>
+  );
+}