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

package/src/components/wui-text/styles.ts

@@ -0,0 +1,104 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  'base': {
+    letterSpacing: -0.4
+  },
+  'medium-title-400': {
+    fontSize: 24,
+    fontWeight: '400'
+  },
+  'medium-title-500': {
+    fontSize: 24,
+    fontWeight: '500'
+  },
+  'medium-title-600': {
+    fontSize: 24,
+    fontWeight: '600'
+  },
+  'small-title-400': {
+    fontSize: 22,
+    fontWeight: '400'
+  },
+  'small-title-500': {
+    fontSize: 22,
+    fontWeight: '500'
+  },
+  'small-title-600': {
+    fontSize: 22,
+    fontWeight: '600'
+  },
+  'large-400': {
+    fontSize: 20,
+    fontWeight: '400'
+  },
+  'large-500': {
+    fontSize: 20,
+    fontWeight: '500'
+  },
+  'large-600': {
+    fontSize: 20,
+    fontWeight: '600'
+  },
+  'medium-400': {
+    fontSize: 18,
+    fontWeight: '400'
+  },
+  'medium-500': {
+    fontSize: 18,
+    fontWeight: '500'
+  },
+  'medium-600': {
+    fontSize: 18,
+    fontWeight: '600'
+  },
+  'paragraph-400': {
+    fontSize: 16,
+    fontWeight: '400'
+  },
+  'paragraph-500': {
+    fontSize: 16,
+    fontWeight: '500'
+  },
+  'paragraph-600': {
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  'small-400': {
+    fontSize: 14,
+    fontWeight: '400'
+  },
+  'small-500': {
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  'small-600': {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  'tiny-400': {
+    fontSize: 12,
+    fontWeight: '400'
+  },
+  'tiny-500': {
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  'tiny-600': {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  'micro-600': {
+    fontSize: 10,
+    fontWeight: '600',
+    letterSpacing: 0.2
+  },
+  'micro-700': {
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 0.2
+  },
+  'center': {
+    textAlign: 'center'
+  }
+});

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

@@ -0,0 +1,49 @@
+import type { SvgProps } from 'react-native-svg';
+
+import BrowserSvg from '../../assets/visual/Browser';
+import DaoSvg from '../../assets/visual/Dao';
+import DefiSvg from '../../assets/visual/Defi';
+import DefiAltSvg from '../../assets/visual/DefiAlt';
+import EthSvg from '../../assets/visual/Eth';
+import LayersSvg from '../../assets/visual/Layers';
+import LockSvg from '../../assets/visual/Lock';
+import LoginSvg from '../../assets/visual/Login';
+import NetworkSvg from '../../assets/visual/Network';
+import NftSvg from '../../assets/visual/Nft';
+import NounSvg from '../../assets/visual/Noun';
+import ProfileSvg from '../../assets/visual/Profile';
+import SystemSvg from '../../assets/visual/System';
+import type { VisualType } from '../../utils/TypesUtil';
+import GoogleSvg from '../../assets/visual/Google';
+import LightbulbSvg from '../../assets/visual/Lightbulb';
+import PencilSvg from '../../assets/visual/Pencil';
+
+const svgOptions: Record<VisualType, (props: SvgProps) => JSX.Element> = {
+  browser: BrowserSvg,
+  dao: DaoSvg,
+  defi: DefiSvg,
+  defiAlt: DefiAltSvg,
+  eth: EthSvg,
+  google: GoogleSvg,
+  layers: LayersSvg,
+  lightbulb: LightbulbSvg,
+  lock: LockSvg,
+  login: LoginSvg,
+  network: NetworkSvg,
+  nft: NftSvg,
+  noun: NounSvg,
+  pencil: PencilSvg,
+  profile: ProfileSvg,
+  system: SystemSvg
+};
+
+export interface VisualProps {
+  name: VisualType;
+  style?: SvgProps['style'];
+}
+
+export function Visual({ name, style }: VisualProps) {
+  const Component = svgOptions[name];
+
+  return <Component width={60} height={60} style={style} />;
+}

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

@@ -0,0 +1,125 @@
+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;
+  profileName?: string;
+  balance?: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function AccountButton({
+  networkSrc,
+  imageHeaders,
+  avatarSrc,
+  address,
+  profileName,
+  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;
+  }
+
+  const formattedAddress = profileName
+    ? UiUtil.getTruncateString({
+        string: profileName,
+        charsStart: 18,
+        charsEnd: 0,
+        truncate: 'end'
+      })
+    : UiUtil.getTruncateString({
+        string: address || '',
+        charsStart: 4,
+        charsEnd: 6,
+        truncate: 'middle'
+      });
+
+  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}>
+            {formattedAddress}
+          </Text>
+        ) : null}
+      </View>
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    height: 40,
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: Spacing['3xs']
+  },
+  image: {
+    height: 24,
+    width: 24,
+    borderRadius: BorderRadius.full,
+    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: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  address: {
+    marginLeft: Spacing['3xs']
+  },
+  balance: {
+    marginLeft: Spacing['3xs']
+  }
+});

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

@@ -0,0 +1,64 @@
+import { Animated, Pressable, type StyleProp, type ViewStyle } from 'react-native';
+import { Avatar } from '../wui-avatar';
+import { UiUtil } from '../../utils/UiUtil';
+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;
+  address?: string;
+  profileName?: string;
+  profileImage?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function AccountPill({
+  onPress,
+  address,
+  profileName,
+  profileImage,
+  style
+}: AccountPillProps) {
+  const Theme = useTheme();
+
+  const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
+    Theme['gray-glass-005'],
+    Theme['gray-glass-010']
+  );
+
+  const backgroundColor = animatedValue;
+  const borderColor = Theme['gray-glass-005'];
+
+  return (
+    <AnimatedPressable
+      style={[styles.container, { backgroundColor, borderColor }, style]}
+      onPressIn={setEndValue}
+      onPressOut={setStartValue}
+      onPress={onPress}
+      hitSlop={10}
+    >
+      <Avatar imageSrc={profileImage} address={address} size={28} borderWidth={0} />
+      <Text variant="large-500" color="fg-100" style={styles.text}>
+        {profileName
+          ? UiUtil.getTruncateString({
+              string: profileName,
+              charsStart: 17,
+              charsEnd: 0,
+              truncate: 'end'
+            })
+          : UiUtil.getTruncateString({
+              string: address ?? '',
+              charsStart: 4,
+              charsEnd: 4,
+              truncate: 'middle'
+            })}
+      </Text>
+      <Icon name="chevronBottom" size="sm" color="fg-200" style={styles.copyButton} />
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,23 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    height: 44,
+    minWidth: 160,
+    maxWidth: 260,
+    paddingLeft: Spacing.xs,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: BorderRadius.full,
+    borderWidth: StyleSheet.hairlineWidth
+  },
+  text: {
+    marginLeft: Spacing['2xs']
+  },
+  copyButton: {
+    marginLeft: Spacing.xs,
+    marginRight: Spacing.s
+  }
+});

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,8 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  image: {
+    borderRadius: BorderRadius.full
+  }
+});

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

@@ -0,0 +1,25 @@
+import { StyleSheet } from 'react-native';
+import { Text } from '../../components/wui-text';
+
+export interface BalanceProps {
+  integer?: string;
+  decimal?: string;
+}
+
+export function Balance({ integer = '0', decimal = '00' }: BalanceProps) {
+  return (
+    <Text color="fg-100" style={styles.text}>
+      {`$${integer}`}
+      <Text color="fg-200" style={styles.text}>
+        {`.${decimal}`}
+      </Text>
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 40,
+    fontWeight: '500'
+  }
+});

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

@@ -0,0 +1,28 @@
+import type { IconType } from '../../utils/TypesUtil';
+import { FlexView } from '../../layout/wui-flex';
+import { IconBox } from '../wui-icon-box';
+import { Text } from '../../components/wui-text';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+export interface BannerProps {
+  icon: IconType;
+  text: string;
+}
+
+export function Banner({ icon, text }: BannerProps) {
+  const Theme = useTheme();
+
+  return (
+    <FlexView
+      flexDirection="row"
+      alignItems="center"
+      style={[styles.container, { backgroundColor: Theme['accent-glass-010'] }]}
+    >
+      <IconBox icon={icon} size="sm" iconColor="fg-200" background style={styles.icon} />
+      <Text variant="small-400" color="fg-200" style={styles.text}>
+        {text}
+      </Text>
+    </FlexView>
+  );
+}

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

@@ -0,0 +1,15 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    padding: Spacing.s,
+    borderRadius: BorderRadius.s
+  },
+  icon: {
+    marginRight: Spacing.xs
+  },
+  text: {
+    flex: 1
+  }
+});