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

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

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import { type StyleProp, 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>;
+}
+
+export function Tag({ variant = 'main', children, style, disabled }: 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} 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-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-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']
+            }
+          ]}
+        />
+      )}
+    </Animated.View>
+  );
+}

package/src/composites/wui-wallet-image/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, WalletImageSize } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  xsImage: {
+    height: WalletImageSize.xs,
+    width: WalletImageSize.xs,
+    borderRadius: BorderRadius['4xs']
+  },
+  smImage: {
+    height: WalletImageSize.sm,
+    width: WalletImageSize.sm,
+    borderRadius: BorderRadius.xxs
+  },
+  mdImage: {
+    height: WalletImageSize.md,
+    width: WalletImageSize.md,
+    borderRadius: BorderRadius.xs
+  },
+  lgImage: {
+    height: WalletImageSize.lg,
+    width: WalletImageSize.lg,
+    borderRadius: BorderRadius.s
+  },
+  xlImage: {
+    height: WalletImageSize.xl,
+    width: WalletImageSize.xl,
+    borderRadius: BorderRadius.m
+  },
+  border: {
+    borderWidth: 1,
+    position: 'absolute'
+  }
+});

package/src/hooks/useAnimatedValue.ts

@@ -0,0 +1,35 @@
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+export function useAnimatedValue<T extends string | number>(
+  startValue: T,
+  endValue: T,
+  duration?: number
+) {
+  const valueRef = useRef(new Animated.Value(0));
+
+  const setStartValue = useCallback(() => {
+    Animated.timing(valueRef.current, {
+      toValue: 0,
+      useNativeDriver: false,
+      duration: duration || 200
+    }).start();
+  }, [valueRef, duration]);
+
+  const setEndValue = useCallback(() => {
+    Animated.timing(valueRef.current, {
+      toValue: 1,
+      useNativeDriver: false,
+      duration: duration || 200
+    }).start();
+  }, [valueRef, duration]);
+
+  const animatedValue = valueRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [startValue, endValue] as number[] | string[]
+  });
+
+  return { animatedValue, valueRef, setStartValue, setEndValue };
+}
+
+export default useAnimatedValue;

package/src/hooks/useTheme.ts

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

package/src/index.ts

@@ -0,0 +1,72 @@
+export { Card, type CardProps } from './components/wui-card';
+export { Icon, type IconProps } from './components/wui-icon';
+export { Image, type ImageProps } from './components/wui-image';
+export { LoadingHexagon, type LoadingHexagonProps } from './components/wui-loading-hexagon';
+export { LoadingSpinner } from './components/wui-loading-spinner';
+export { LoadingThumbnail, type LoadingThumbnailProps } from './components/wui-loading-thumbnail';
+export { Text, type TextProps } from './components/wui-text';
+export { Visual, type VisualProps } from './components/wui-visual';
+export { Shimmer, type ShimmerProps } from './components/wui-shimmer';
+
+export { AccountButton, type AccountButtonProps } from './composites/wui-account-button';
+export { ActionEntry, type ActionEntryProps } from './composites/wui-action-entry';
+export { Avatar, type AvatarProps } from './composites/wui-avatar';
+export { Button, type ButtonProps } from './composites/wui-button';
+export {
+  CardSelectLoader,
+  CardSelectLoaderHeight,
+  type CardSelectLoaderProps
+} from './composites/wui-card-select-loader';
+export {
+  CardSelect,
+  CardSelectHeight,
+  CardSelectWidth,
+  type CardSelectProps
+} from './composites/wui-card-select';
+export { Chip, type ChipProps } from './composites/wui-chip';
+export { ConnectButton, type ConnectButtonProps } from './composites/wui-connect-button';
+export { EmailInput, type EmailInputProps } from './composites/wui-email-input';
+export { IconBox, type IconBoxProps } from './composites/wui-icon-box';
+export { IconLink, type IconLinkProps } from './composites/wui-icon-link';
+export { InputElement, type InputElementProps } from './composites/wui-input-element';
+export { InputNumeric, type InputNumericProps } from './composites/wui-input-numeric';
+export { InputText, type InputTextProps } from './composites/wui-input-text';
+export { Link, type LinkProps } from './composites/wui-link';
+export { ListItem, type ListItemProps } from './composites/wui-list-item';
+export { ListWallet, type ListWalletProps } from './composites/wui-list-wallet';
+export { Logo, type LogoProps } from './composites/wui-logo';
+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 { 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 { Tooltip, type TooltipProps } from './composites/wui-tooltip';
+export { WalletImage, type WalletImageProps } from './composites/wui-wallet-image';
+
+export { Overlay, type OverlayProps } from './layout/wui-overlay';
+export { FlexView, type FlexViewProps } from './layout/wui-flex';
+export { Separator } from './layout/wui-separator';
+
+export type {
+  ButtonType,
+  CardSelectType,
+  ChipType,
+  ColorType,
+  ThemeKeys as ThemeColorType,
+  IconType,
+  LogoType,
+  PlacementType,
+  SizeType,
+  TagType,
+  TextType,
+  VisualType
+} from './utils/TypesUtil';
+export { UiUtil } from './utils/UiUtil';
+export { Spacing, BorderRadius } from './utils/ThemeUtil';
+
+export { useTheme } from './hooks/useTheme';
+export { useAnimatedValue } from './hooks/useAnimatedValue';

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

@@ -0,0 +1,49 @@
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
+import type {
+  FlexAlignType,
+  FlexDirectionType,
+  FlexGrowType,
+  FlexJustifyContentType,
+  FlexShrinkType,
+  FlexWrapType,
+  SpacingType
+} from '../../utils/TypesUtil';
+
+import { UiUtil } from '../../utils/UiUtil';
+
+export interface FlexViewProps {
+  children?: React.ReactNode;
+  flexDirection?: FlexDirectionType;
+  flexWrap?: FlexWrapType;
+  flexGrow?: FlexGrowType;
+  flexShrink?: FlexShrinkType;
+  alignItems?: FlexAlignType;
+  alignSelf?: FlexAlignType;
+  justifyContent?: FlexJustifyContentType;
+  padding?: SpacingType | SpacingType[];
+  margin?: SpacingType | SpacingType[];
+  style?: StyleProp<ViewStyle>;
+}
+
+export function FlexView(props: FlexViewProps) {
+  const styles: ViewStyle = {
+    flexDirection: props.flexDirection,
+    flexWrap: props.flexWrap,
+    flexGrow: props.flexGrow,
+    flexShrink: props.flexShrink,
+    alignItems: props.alignItems,
+    alignSelf: props.alignSelf,
+    justifyContent: props.justifyContent,
+    paddingTop: props.padding && UiUtil.getSpacingStyles(props.padding, 0),
+    paddingRight: props.padding && UiUtil.getSpacingStyles(props.padding, 1),
+    paddingBottom: props.padding && UiUtil.getSpacingStyles(props.padding, 2),
+    paddingLeft: props.padding && UiUtil.getSpacingStyles(props.padding, 3),
+    marginTop: props.margin && UiUtil.getSpacingStyles(props.margin, 0),
+    marginRight: props.margin && UiUtil.getSpacingStyles(props.margin, 1),
+    marginBottom: props.margin && UiUtil.getSpacingStyles(props.margin, 2),
+    marginLeft: props.margin && UiUtil.getSpacingStyles(props.margin, 3)
+  };
+
+  return <View style={[styles, props.style]}>{props.children}</View>;
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import styles from './styles';
+import { useTheme } from '../../hooks/useTheme';
+
+export interface OverlayProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Overlay({ children, style }: OverlayProps) {
+  const Theme = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: Theme['gray-glass-030'] }, style]}>
+      {children}
+    </View>
+  );
+}

package/src/layout/wui-overlay/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%'
+  }
+});

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

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

package/src/layout/wui-separator/styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  single: {
+    width: '100%',
+    height: 1
+  },
+  divider: {
+    height: 1,
+    flex: 1
+  },
+  marginLeft: {
+    marginLeft: Spacing.xs
+  },
+  marginRight: {
+    marginRight: Spacing.xs
+  }
+});