@reown/appkit-ui-react-native 2.0.0 → 2.0.1

package/src/assets/svg/WarningCircle.tsx

@@ -2,11 +2,11 @@ import Svg, { Path, type SvgProps } from 'react-native-svg';
 const SvgWarningCircle = (props: SvgProps) => (
   <Svg viewBox="0 0 20 20" fill="none" {...props}>
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       d="M11 6.67a1 1 0 1 0-2 0v2.66a1 1 0 0 0 2 0V6.67ZM10 14.5a1.25 1.25 0 1 0 0-2.5 1.25 1.25 0 0 0 0 2.5Z"
     />
     <Path
-      fill={props.fill || '#fff'}
+      fill={props.fill ?? '#fff'}
       fillRule="evenodd"
       d="M10 1a9 9 0 1 0 0 18 9 9 0 0 0 0-18Zm-7 9a7 7 0 1 1 14 0 7 7 0 0 1-14 0Z"
       clipRule="evenodd"

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

@@ -1,5 +1,5 @@
 import type { ReactNode } from 'react';
-import { type StyleProp, type ViewStyle, KeyboardAvoidingView, Platform } from 'react-native';
+import { type StyleProp, type ViewStyle, View } from 'react-native';
 
 import { useTheme } from '../../hooks/useTheme';
 import styles from './styles';
@@ -13,9 +13,7 @@ export function Card({ children, style }: CardProps) {
   const Theme = useTheme();
 
   return (
-    <KeyboardAvoidingView
-      behavior="padding"
-      enabled={Platform.OS === 'ios'}
+    <View
       style={[
         styles.container,
         { backgroundColor: Theme['bg-100'], borderColor: Theme['gray-glass-015'] },
@@ -23,6 +21,6 @@ export function Card({ children, style }: CardProps) {
       ]}
     >
       {children}
-    </KeyboardAvoidingView>
+    </View>
   );
 }

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

@@ -4,7 +4,8 @@ import { BorderRadius } from '../../utils/ThemeUtil';
 export default StyleSheet.create({
   container: {
     borderRadius: BorderRadius.l,
-    borderWidth: StyleSheet.hairlineWidth,
+    borderWidth: 0.5,
+    borderBottomWidth: 0,
     overflow: 'hidden'
   }
 });

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

@@ -49,6 +49,7 @@ import PaperplaneSvg from '../../assets/svg/Paperplane';
 import QrCodeSvg from '../../assets/svg/QrCode';
 import RecycleHorizontalSvg from '../../assets/svg/RecycleHorizontal';
 import RefreshSvg from '../../assets/svg/Refresh';
+import ReownSvg from '../../assets/svg/Reown';
 import SearchSvg from '../../assets/svg/Search';
 import SettingsSvg from '../../assets/svg/Settings';
 import SwapHorizontalSvg from '../../assets/svg/SwapHorizontal';
@@ -92,6 +93,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   desktop: DesktopSvg,
   disconnect: DisconnectSvg,
   discord: DiscordSvg,
+  email: MailSvg,
   etherscan: EtherscanSvg,
   extension: ExtensionSvg,
   externalLink: ExternalLinkSvg,
@@ -103,7 +105,6 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   google: GoogleSvg,
   helpCircle: HelpCircleSvg,
   infoCircle: InfoCircleSvg,
-  mail: MailSvg,
   mobile: MobileSvg,
   more: MoreSvg,
   networkPlaceholder: NetworkPlaceholderSvg,
@@ -113,6 +114,7 @@ const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
   qrCode: QrCodeSvg,
   recycleHorizontal: RecycleHorizontalSvg,
   refresh: RefreshSvg,
+  reown: ReownSvg,
   search: SearchSvg,
   settings: SettingsSvg,
   swapHorizontal: SwapHorizontalSvg,

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode } from 'react';
+import { useEffect, useMemo, useRef, type ReactNode } from 'react';
 import { Animated, Easing, View } from 'react-native';
 import Svg, { Path, Use } from 'react-native-svg';
 import { useTheme } from '../../hooks/useTheme';
@@ -6,6 +6,9 @@ import styles from './styles';
 
 const AnimatedUse = Animated.createAnimatedComponent(Use);
 
+const HEXAGON_PATH =
+  'M17.22 5.295c3.877-2.277 5.737-3.363 7.72-3.726a11.44 11.44 0 0 1 4.12 0c1.983.363 3.844 1.45 7.72 3.726l6.065 3.562c3.876 2.276 5.731 3.372 7.032 4.938a11.896 11.896 0 0 1 2.06 3.63c.683 1.928.688 4.11.688 8.663v7.124c0 4.553-.005 6.735-.688 8.664a11.896 11.896 0 0 1-2.06 3.63c-1.3 1.565-3.156 2.66-7.032 4.937l-6.065 3.563c-3.877 2.276-5.737 3.362-7.72 3.725a11.46 11.46 0 0 1-4.12 0c-1.983-.363-3.844-1.449-7.72-3.726l-6.065-3.562c-3.876-2.276-5.731-3.372-7.032-4.938a11.885 11.885 0 0 1-2.06-3.63c-.682-1.928-.688-4.11-.688-8.663v-7.124c0-4.553.006-6.735.688-8.664a11.885 11.885 0 0 1 2.06-3.63c1.3-1.565 3.156-2.66 7.032-4.937l6.065-3.562Z';
+
 export interface LoadingHexagonProps {
   children?: ReactNode;
   paused?: boolean;
@@ -29,20 +32,19 @@ export function LoadingHexagon({ children, paused }: LoadingHexagonProps) {
     return () => {
       loop.stop();
     };
-  }, [spinValue]);
+  }, []);
 
-  const spin = spinValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, -172]
-  });
+  const spin = useMemo(() => {
+    return spinValue.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: [0, -172]
+    });
+  }, []);
 
   return (
     <View style={styles.container}>
       <Svg width={120} height={120} viewBox="0 0 54 59" style={styles.loader} fill="none">
-        <Path
-          id="wui-loader-path"
-          d="M17.22 5.295c3.877-2.277 5.737-3.363 7.72-3.726a11.44 11.44 0 0 1 4.12 0c1.983.363 3.844 1.45 7.72 3.726l6.065 3.562c3.876 2.276 5.731 3.372 7.032 4.938a11.896 11.896 0 0 1 2.06 3.63c.683 1.928.688 4.11.688 8.663v7.124c0 4.553-.005 6.735-.688 8.664a11.896 11.896 0 0 1-2.06 3.63c-1.3 1.565-3.156 2.66-7.032 4.937l-6.065 3.563c-3.877 2.276-5.737 3.362-7.72 3.725a11.46 11.46 0 0 1-4.12 0c-1.983-.363-3.844-1.449-7.72-3.726l-6.065-3.562c-3.876-2.276-5.731-3.372-7.032-4.938a11.885 11.885 0 0 1-2.06-3.63c-.682-1.928-.688-4.11-.688-8.663v-7.124c0-4.553.006-6.735.688-8.664a11.885 11.885 0 0 1 2.06-3.63c1.3-1.565 3.156-2.66 7.032-4.937l6.065-3.562Z"
-        />
+        <Path id="wui-loader-path" d={HEXAGON_PATH} />
         <AnimatedUse
           stroke={paused ? 'transparent' : Theme['accent-100']}
           strokeDasharray="54, 118"

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+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';
@@ -39,12 +39,14 @@ export function LoadingSpinner({
     return () => {
       loop.stop();
     };
-  }, [spinValue]);
+  }, []);
 
-  const spin = spinValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['0deg', '360deg']
-  });
+  const spin = useMemo(() => {
+    return spinValue.current.interpolate({
+      inputRange: [0, 1],
+      outputRange: ['0deg', '360deg']
+    });
+  }, []);
 
   return (
     <View style={[styles.container, style]} testID={testID}>

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

@@ -1,4 +1,4 @@
-import { useEffect, useRef, type ReactNode } from 'react';
+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';
@@ -38,23 +38,30 @@ export function LoadingThumbnail({
     return () => {
       loop.stop();
     };
-  }, [spinValue]);
+  }, []);
 
-  // Calculate one side of the Rectangle with borders
-  const sideLength = rectangleSize - borderRadius * 2 + (Math.PI * borderRadius) / 2;
+  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 };
 
-  const spin = spinValue.current.interpolate({
-    inputRange: [0, 1],
-    outputRange: [0, -sideLength * 4]
-  });
+    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, { height: outerContainerSize, width: outerContainerSize }]}>
+    <View style={[styles.container, containerStyle]}>
       <Svg width={outerContainerSize} height={outerContainerSize} style={styles.loader}>
         <AnimatedRect
           height={rectangleSize}
           width={rectangleSize}
-          stroke={paused ? 'transparent' : Theme['accent-100']}
+          stroke={strokeColor}
           strokeWidth={strokeWidth}
           x={strokeWidth / 2}
           y={strokeWidth / 2}

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-shimmer/index.tsx

@@ -1,66 +1,132 @@
-import { Svg, Rect } from 'react-native-svg';
-import { Animated, StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
+import { Animated, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { memo, useEffect, useRef, useState } from 'react';
 import { useTheme } from '../../hooks/useTheme';
 
-const AnimatedRect = Animated.createAnimatedComponent(Rect);
+type PercentString = `${number}%`;
+type ShimmerDimension = number | PercentString;
 
 export interface ShimmerProps {
-  width?: number | string;
-  height?: number | string;
+  width?: ShimmerDimension;
+  height?: ShimmerDimension;
   duration?: number;
   borderRadius?: number;
   backgroundColor?: string;
   foregroundColor?: string;
+  highlightWidthRatio?: number;
+  highlightOpacity?: number;
+  angle?: number; // in degrees
   style?: StyleProp<ViewStyle>;
 }
 
-export const Shimmer = ({
+function Shimmer_({
   width = 200,
   height = 200,
   duration = 1000,
   borderRadius = 0,
   backgroundColor,
   foregroundColor,
+  highlightWidthRatio = 0.3,
+  highlightOpacity = 0.5,
+  angle = 20,
   style
-}: ShimmerProps) => {
-  const animatedValue = new Animated.Value(0);
+}: ShimmerProps) {
   const Theme = useTheme();
 
-  const animatedProps = {
-    fill: animatedValue.interpolate({
-      inputRange: [0, 0.5, 1],
-      outputRange: [
-        backgroundColor ?? Theme['bg-200'],
-        foregroundColor ?? Theme['bg-300'],
-        backgroundColor ?? Theme['bg-200']
-      ]
-    }),
+  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,
-    x: 0,
-    y: 0,
-    rx: borderRadius,
-    ry: borderRadius
+    borderRadius,
+    overflow: 'hidden',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderColor: Theme['bg-300'],
+    backgroundColor: baseColor
   };
 
-  Animated.loop(
-    Animated.timing(animatedValue, {
-      toValue: 1,
-      duration,
-      useNativeDriver: false
-    })
-  ).start();
+  const bandStyle: ViewStyle = {
+    position: 'absolute',
+    top: measuredHeight ? -measuredHeight * 0.25 : 0,
+    bottom: measuredHeight ? -measuredHeight * 0.25 : 0,
+    width: bandWidth,
+    backgroundColor: highlightColor,
+    opacity: highlightOpacity
+  };
 
   return (
-    <Svg
-      width={width}
-      height={height}
-      style={[
-        { borderWidth: StyleSheet.hairlineWidth, borderColor: Theme['bg-300'], borderRadius },
-        style
-      ]}
-    >
-      <AnimatedRect {...animatedProps} />
-    </Svg>
+    <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/composites/wui-account-button/index.tsx

@@ -114,11 +114,11 @@ export function AccountButton({
           borderWidth={2}
           style={[styles.image, !avatarSrc && styles.avatarPlaceholder]}
         />
-        {address && (
+        {address ? (
           <Text variant="paragraph-500" color="fg-200" style={styles.address}>
             {formattedAddress}
           </Text>
-        )}
+        ) : null}
       </View>
     </AnimatedPressable>
   );

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

@@ -90,15 +90,15 @@ export function Button({
       {...rest}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-        {iconLeft && (
+        {iconLeft ? (
           <Icon
             color={iconColor}
             name={iconLeft}
             size={iconSize}
             style={[styles.iconLeft, iconStyle]}
           />
-        )}
-        {loading && <LoadingSpinner color={iconColor} size="md" />}
+        ) : null}
+        {loading ? <LoadingSpinner color={iconColor} size="md" /> : null}
         {!loading &&
           (typeof children === 'string' ? (
             <Text
@@ -110,14 +110,14 @@ export function Button({
           ) : (
             children
           ))}
-        {iconRight && (
+        {iconRight ? (
           <Icon
             color={iconColor}
             name={iconRight}
             size={iconSize}
             style={[styles.iconRight, iconStyle]}
           />
-        )}
+        ) : null}
       </FlexView>
     </AnimatedPressable>
   );