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

package/src/components/wui-loading-hexagon/styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 120,
+    width: 120,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loader: {
+    position: 'absolute'
+  }
+});

package/src/components/wui-loading-spinner/index.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { Animated, Easing, View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+import { SpinnerSize } from '../../utils/ThemeUtil';
+import type { ColorType, SizeType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+
+export interface LoadingSpinnerProps {
+  size?: Exclude<SizeType, 'xs' | 'xxs'>;
+  color?: Exclude<ColorType, 'error-100' | 'fg-300' | 'success-100'>;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function LoadingSpinner({
+  color,
+  style,
+  size = 'lg',
+  testID = 'loading-spinner'
+}: LoadingSpinnerProps) {
+  const Theme = useTheme();
+  const spinValue = useRef(new Animated.Value(0));
+  const stroke = color ? Theme[color] : Theme['accent-100'];
+
+  useEffect(() => {
+    const animation = Animated.timing(spinValue.current, {
+      toValue: 1,
+      duration: 800,
+      useNativeDriver: true,
+      easing: Easing.linear
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, []);
+
+  const spin = useMemo(() => {
+    return spinValue.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg']
+    });
+  }, []);
+
+  return (
+    <View style={[styles.container, style]} testID={testID}>
+      <AnimatedSvg
+        width={SpinnerSize[size]}
+        height={SpinnerSize[size]}
+        viewBox="25 25 50 50"
+        style={{ transform: [{ rotate: spin }] }}
+      >
+        <Circle
+          r={20}
+          cy={50}
+          cx={50}
+          stroke={stroke}
+          strokeWidth={4}
+          fill="transparent"
+          strokeDasharray={`90 124`}
+        />
+      </AnimatedSvg>
+    </View>
+  );
+}

package/src/components/wui-loading-spinner/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/src/components/wui-loading-thumbnail/index.tsx

@@ -0,0 +1,79 @@
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+import { BorderRadius, Spacing, WalletImageSize } from '../../utils/ThemeUtil';
+import styles from './styles';
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+export interface LoadingThumbnailProps {
+  children?: ReactNode;
+  paused?: boolean;
+  borderRadius?: number;
+}
+
+export function LoadingThumbnail({
+  children,
+  paused,
+  borderRadius = BorderRadius.l
+}: LoadingThumbnailProps) {
+  const Theme = useTheme();
+  const spinValue = useRef(new Animated.Value(0));
+  const strokeWidth = 4;
+  const rectangleSize = WalletImageSize.xl + Spacing.l;
+  const outerContainerSize = rectangleSize + strokeWidth;
+
+  useEffect(() => {
+    const animation = Animated.timing(spinValue.current, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true,
+      easing: Easing.linear
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, []);
+
+  const { sideLength, strokeColor, containerStyle } = useMemo(() => {
+    const _sideLength = rectangleSize - borderRadius * 2 + (Math.PI * borderRadius) / 2;
+    const _strokeColor = paused ? 'transparent' : Theme['accent-100'];
+    const _containerStyle = { height: outerContainerSize, width: outerContainerSize };
+
+    return { sideLength: _sideLength, strokeColor: _strokeColor, containerStyle: _containerStyle };
+  }, [rectangleSize, borderRadius, paused, Theme, outerContainerSize]);
+
+  const spin = useMemo(() => {
+    return spinValue.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -sideLength * 4]
+    });
+  }, [sideLength]);
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <Svg width={outerContainerSize} height={outerContainerSize} style={styles.loader}>
+        <AnimatedRect
+          height={rectangleSize}
+          width={rectangleSize}
+          stroke={strokeColor}
+          strokeWidth={strokeWidth}
+          x={strokeWidth / 2}
+          y={strokeWidth / 2}
+          rx={borderRadius}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          fill="transparent"
+          strokeDasharray={`${sideLength} ${sideLength * 3}`}
+          strokeDashoffset={spin}
+        />
+      </Svg>
+      {children ?? null}
+    </View>
+  );
+}

package/src/components/wui-loading-thumbnail/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loader: {
+    position: 'absolute'
+  }
+});

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

@@ -0,0 +1,135 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+  useWindowDimensions,
+  Modal as RNModal,
+  type ModalProps as RNModalProps,
+  Animated,
+  Pressable,
+  View
+} from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+export type ModalProps = Pick<
+  RNModalProps,
+  'visible' | 'onDismiss' | 'testID' | 'onRequestClose'
+> & {
+  children: React.ReactNode;
+  onBackdropPress?: () => void;
+};
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export function Modal({ visible, onBackdropPress, onRequestClose, testID, children }: ModalProps) {
+  const { height } = useWindowDimensions();
+  const Theme = useTheme();
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+  const translateY = useRef(new Animated.Value(height)).current;
+  const [showBackdrop, setShowBackdrop] = useState(false);
+  const [modalVisible, setModalVisible] = useState(false);
+  const [contentHeight, setContentHeight] = useState(0);
+
+  const onContentLayout = (event: any) => {
+    const { height: measuredHeight } = event.nativeEvent.layout;
+
+    setContentHeight(measuredHeight > height ? height : measuredHeight);
+  };
+
+  // Handle modal visibility
+  useEffect(() => {
+    if (visible) {
+      setModalVisible(true);
+      setShowBackdrop(true);
+    }
+  }, [visible]);
+
+  // Handle backdrop animation
+  useEffect(() => {
+    let backdropAnimation: Animated.CompositeAnimation;
+
+    if (visible) {
+      backdropAnimation = Animated.timing(backdropOpacity, {
+        toValue: 1,
+        duration: 300,
+        useNativeDriver: true
+      });
+      backdropAnimation.start();
+    } else if (modalVisible) {
+      backdropAnimation = Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 250,
+        useNativeDriver: true
+      });
+      backdropAnimation.start(() => {
+        setShowBackdrop(false);
+      });
+    }
+
+    return () => {
+      backdropAnimation?.stop();
+    };
+  }, [visible, modalVisible, backdropOpacity]);
+
+  // Handle modal position animation + visibility
+  useEffect(() => {
+    let modalAnimation: Animated.CompositeAnimation;
+
+    if (visible && modalVisible) {
+      // Calculate the target position (screen height - card height)
+      const targetY = contentHeight > 0 ? height - contentHeight : height * 0.2; // fallback to 20% from bottom
+
+      modalAnimation = Animated.spring(translateY, {
+        toValue: targetY,
+        damping: 25,
+        stiffness: 220,
+        mass: 1,
+        useNativeDriver: true
+      });
+      modalAnimation.start();
+    } else if (!visible && modalVisible) {
+      // Hide modal to the bottom of the screen. Not using spring as it blocks the UI for a bit when closed
+      modalAnimation = Animated.timing(translateY, {
+        toValue: height,
+        duration: 150,
+        useNativeDriver: true
+      });
+      modalAnimation.start(() => {
+        setModalVisible(false);
+      });
+    }
+
+    return () => {
+      modalAnimation?.stop();
+    };
+  }, [visible, modalVisible, translateY, height, contentHeight]);
+
+  // Reset animation values when modal is fully closed
+  useEffect(() => {
+    if (!modalVisible) {
+      translateY.setValue(height);
+      backdropOpacity.setValue(0);
+    }
+  }, [modalVisible, translateY, backdropOpacity, height]);
+
+  return (
+    <RNModal
+      visible={modalVisible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={onRequestClose}
+      testID={testID}
+    >
+      {showBackdrop ? (
+        <AnimatedPressable
+          style={[styles.backdrop, { opacity: backdropOpacity }]}
+          onPress={onBackdropPress}
+        />
+      ) : null}
+      <Animated.View style={[styles.modal, { transform: [{ translateY }] }]}>
+        <Animated.View onLayout={onContentLayout}>{children}</Animated.View>
+        <View style={[styles.bottomBackground, { backgroundColor: Theme['bg-100'] }]} />
+      </Animated.View>
+    </RNModal>
+  );
+}

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

@@ -0,0 +1,26 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  backdrop: {
+    flexGrow: 1,
+    backgroundColor: 'rgba(0, 0, 0, 0.5)'
+  },
+  modal: {
+    backgroundColor: 'transparent',
+    borderWidth: 0,
+    borderTopLeftRadius: BorderRadius.l,
+    borderTopRightRadius: BorderRadius.l,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  bottomBackground: {
+    flexGrow: 1,
+    // workaround to fix the bottom background color
+    top: -2,
+    bottom: -20
+  }
+});

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

@@ -0,0 +1,101 @@
+import { useRef } from 'react';
+import {
+  Animated,
+  Pressable as RNPressable,
+  type PressableProps as RNPressableProps,
+  type StyleProp,
+  type ViewStyle
+} from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType } from '../../utils/TypesUtil';
+
+const AnimatedPressable = Animated.createAnimatedComponent(RNPressable);
+
+export interface PressableProps extends RNPressableProps {
+  children: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+  backgroundColor?: ColorType | 'transparent';
+  pressedBackgroundColor?: ColorType;
+  bounceScale?: number;
+  animationDuration?: number;
+  disabled?: boolean;
+  pressable?: boolean;
+  transparent?: boolean;
+}
+
+export function Pressable({
+  children,
+  style,
+  disabled = false,
+  pressable = true,
+  onPress,
+  transparent = false,
+  backgroundColor = 'gray-glass-002',
+  pressedBackgroundColor = 'gray-glass-010',
+  bounceScale = 0.99, // Scale to 99% of original size
+  animationDuration = 200, // 200ms animation
+  ...rest
+}: PressableProps) {
+  const Theme = useTheme();
+  const pressAnimation = useRef(new Animated.Value(0));
+  const scaleAnimation = useRef(new Animated.Value(1));
+
+  const onPressIn = () => {
+    Animated.parallel([
+      Animated.timing(pressAnimation.current, {
+        toValue: 1,
+        useNativeDriver: false,
+        duration: animationDuration
+      }),
+
+      Animated.timing(scaleAnimation.current, {
+        toValue: bounceScale,
+        useNativeDriver: false,
+        duration: animationDuration
+      })
+    ]).start();
+  };
+
+  const onPressOut = () => {
+    Animated.parallel([
+      Animated.timing(pressAnimation.current, {
+        toValue: 0,
+        useNativeDriver: false,
+        duration: animationDuration
+      }),
+      Animated.timing(scaleAnimation.current, {
+        toValue: 1,
+        useNativeDriver: false,
+        duration: animationDuration
+      })
+    ]).start();
+  };
+
+  const bgColor = pressAnimation.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [
+      Theme[backgroundColor as ColorType] ?? 'transparent',
+      Theme[pressedBackgroundColor as ColorType] ?? 'transparent'
+    ]
+  });
+
+  return (
+    <AnimatedPressable
+      disabled={disabled || !pressable}
+      style={[
+        // eslint-disable-next-line react-native/no-inline-styles
+        {
+          backgroundColor: transparent ? 'transparent' : bgColor,
+          transform: [{ scale: scaleAnimation.current }]
+        },
+        style
+      ]}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      onPress={onPress}
+      {...rest}
+    >
+      {children}
+    </AnimatedPressable>
+  );
+}

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

@@ -0,0 +1,132 @@
+import { Animated, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { memo, useEffect, useRef, useState } from 'react';
+import { useTheme } from '../../hooks/useTheme';
+
+type PercentString = `${number}%`;
+type ShimmerDimension = number | PercentString;
+
+export interface ShimmerProps {
+  width?: ShimmerDimension;
+  height?: ShimmerDimension;
+  duration?: number;
+  borderRadius?: number;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  highlightWidthRatio?: number;
+  highlightOpacity?: number;
+  angle?: number; // in degrees
+  style?: StyleProp<ViewStyle>;
+}
+
+function Shimmer_({
+  width = 200,
+  height = 200,
+  duration = 1000,
+  borderRadius = 0,
+  backgroundColor,
+  foregroundColor,
+  highlightWidthRatio = 0.3,
+  highlightOpacity = 0.5,
+  angle = 20,
+  style
+}: ShimmerProps) {
+  const Theme = useTheme();
+
+  const [measuredWidth, setMeasuredWidth] = useState<number | null>(null);
+  const [measuredHeight, setMeasuredHeight] = useState<number | null>(null);
+
+  const translateRef = useRef(new Animated.Value(0));
+  const loopRef = useRef<Animated.CompositeAnimation | null>(null);
+
+  useEffect(() => {
+    if (!measuredWidth) {
+      return undefined;
+    }
+    const translateX = translateRef.current;
+    translateX.setValue(0);
+    const timing = Animated.timing(translateX, {
+      toValue: 1,
+      duration,
+      useNativeDriver: true
+    });
+    const loop = Animated.loop(timing);
+    loopRef.current = loop;
+
+    loop.start();
+
+    return () => {
+      loop.stop();
+      if (loopRef.current === loop) {
+        loopRef.current = null;
+      }
+      translateX.stopAnimation(() => {
+        translateX.setValue(0);
+      });
+    };
+  }, [duration, measuredWidth]);
+
+  const baseColor = backgroundColor ?? Theme['bg-200'];
+  const highlightColor = foregroundColor ?? Theme['bg-300'];
+
+  const onLayout = (event: any) => {
+    const { width: w, height: h } = event.nativeEvent.layout;
+    // Update measurements whenever they change to adapt to dynamic layout/orientation
+    if (measuredWidth == null || Math.abs(w - measuredWidth) > 0.5) {
+      setMeasuredWidth(w);
+    }
+    if (measuredHeight == null || Math.abs(h - measuredHeight) > 0.5) {
+      setMeasuredHeight(h);
+    }
+  };
+
+  // Compute animated translateX only if we have width
+  let animatedTranslateX: any = 0;
+  let bandWidth = 0;
+  if (measuredWidth) {
+    bandWidth = Math.max(8, measuredWidth * highlightWidthRatio);
+    const travel = measuredWidth + bandWidth * 2;
+    animatedTranslateX = translateRef.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [-bandWidth, travel - bandWidth]
+    });
+  }
+
+  const containerStyle: ViewStyle = {
+    width,
+    height,
+    borderRadius,
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Theme['bg-300'],
+    backgroundColor: baseColor
+  };
+
+  const bandStyle: ViewStyle = {
+    position: 'absolute',
+    top: measuredHeight ? -measuredHeight * 0.25 : 0,
+    bottom: measuredHeight ? -measuredHeight * 0.25 : 0,
+    width: bandWidth,
+    backgroundColor: highlightColor,
+    opacity: highlightOpacity
+  };
+
+  return (
+    <View onLayout={onLayout} style={[containerStyle, style]}>
+      {measuredWidth && measuredHeight ? (
+        <Animated.View
+          pointerEvents="none"
+          style={[
+            bandStyle,
+            {
+              transform: [{ translateX: animatedTranslateX }, { rotate: `${angle}deg` }]
+            }
+          ]}
+        />
+      ) : null}
+    </View>
+  );
+}
+
+export const Shimmer = memo(Shimmer_, () => {
+  return true;
+});

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

@@ -0,0 +1,36 @@
+import { Text as NativeText, type TextProps as NativeProps } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, TextType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export type TextProps = NativeProps & {
+  color?: ColorType;
+  variant?: TextType;
+  center?: boolean;
+};
+
+export function Text({
+  children,
+  style,
+  center,
+  color = 'fg-100',
+  variant = 'paragraph-500',
+  ...rest
+}: TextProps) {
+  const Theme = useTheme();
+
+  return (
+    <NativeText
+      style={[
+        styles.base,
+        styles[variant],
+        center && styles.center,
+        color && { color: Theme[color as keyof typeof Theme] },
+        style
+      ]}
+      {...rest}
+    >
+      {children}
+    </NativeText>
+  );
+}