@reown/appkit-ui-react-native 2.0.0-alpha.4 → 2.0.0-alpha.5

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

@@ -3,9 +3,9 @@ import {
   useWindowDimensions,
   Modal as RNModal,
   type ModalProps as RNModalProps,
-  TouchableOpacity,
   Animated,
-  StatusBar
+  Pressable,
+  View
 } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 import styles from './styles';
@@ -18,10 +18,11 @@ export type ModalProps = Pick<
   onBackdropPress?: () => void;
 };
 
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
 export function Modal({ visible, onBackdropPress, onRequestClose, testID, children }: ModalProps) {
-  const Theme = useTheme();
   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);
@@ -75,8 +76,7 @@ export function Modal({ visible, onBackdropPress, onRequestClose, testID, childr
 
     if (visible && modalVisible) {
       // Calculate the target position (screen height - card height)
-      const targetY =
-        contentHeight > 0 ? height - contentHeight + (StatusBar.currentHeight ?? 0) : height * 0.2; // fallback to 20% from bottom
+      const targetY = contentHeight > 0 ? height - contentHeight : height * 0.2; // fallback to 20% from bottom
 
       modalAnimation = Animated.spring(translateY, {
         toValue: targetY,
@@ -112,31 +112,27 @@ export function Modal({ visible, onBackdropPress, onRequestClose, testID, childr
   }, [modalVisible, translateY, backdropOpacity, height]);
 
   return (
-    <>
+    <RNModal
+      visible={modalVisible}
+      transparent
+      animationType="none"
+      statusBarTranslucent
+      onRequestClose={onRequestClose}
+      testID={testID}
+    >
       {showBackdrop ? (
-        <Animated.View style={[styles.outerBackdrop, { opacity: backdropOpacity }]} />
+        <AnimatedPressable
+          style={[styles.backdrop, { opacity: backdropOpacity }]}
+          onPress={onBackdropPress}
+        />
       ) : null}
-      <RNModal
-        visible={modalVisible}
-        transparent
-        animationType="none"
-        statusBarTranslucent
-        onRequestClose={onRequestClose}
-        testID={testID}
+      <AnimatedPressable
+        onPress={onBackdropPress}
+        style={[styles.modal, { transform: [{ translateY }] }]}
       >
-        {showBackdrop ? (
-          <TouchableOpacity
-            style={styles.innerBackdropTouchable}
-            activeOpacity={1}
-            onPress={onBackdropPress}
-          />
-        ) : null}
-        <Animated.View
-          style={[styles.modal, { backgroundColor: Theme['bg-100'], transform: [{ translateY }] }]}
-        >
-          <Animated.View onLayout={onContentLayout}>{children}</Animated.View>
-        </Animated.View>
-      </RNModal>
-    </>
+        <Animated.View onLayout={onContentLayout}>{children}</Animated.View>
+        <View style={[styles.bottomBackground, { backgroundColor: Theme['bg-100'] }]} />
+      </AnimatedPressable>
+    </RNModal>
   );
 }

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

@@ -2,18 +2,13 @@ import { StyleSheet } from 'react-native';
 import { BorderRadius } from '../../utils/ThemeUtil';
 
 export default StyleSheet.create({
-  outerBackdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
+  backdrop: {
+    flexGrow: 1,
     backgroundColor: 'rgba(0, 0, 0, 0.5)'
   },
-  innerBackdropTouchable: {
-    flexGrow: 1
-  },
   modal: {
+    backgroundColor: 'transparent',
+    borderWidth: 0,
     borderTopLeftRadius: BorderRadius.l,
     borderTopRightRadius: BorderRadius.l,
     position: 'absolute',
@@ -21,5 +16,11 @@ export default StyleSheet.create({
     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

@@ -18,7 +18,7 @@ export interface ShimmerProps {
   style?: StyleProp<ViewStyle>;
 }
 
-function _Shimmer({
+function Shimmer_({
   width = 200,
   height = 200,
   duration = 1000,
@@ -127,6 +127,6 @@ function _Shimmer({
   );
 }
 
-export const Shimmer = memo(_Shimmer, () => {
+export const Shimmer = memo(Shimmer_, () => {
   return true;
 });

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

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import { memo, useMemo } 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';
@@ -9,6 +9,7 @@ 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';
+import { FlexView } from '../../layout/wui-flex';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -28,7 +29,7 @@ export interface CardSelectProps {
   testID?: string;
 }
 
-function _CardSelect({
+function CardSelect_({
   name,
   type = 'wallet',
   imageSrc,
@@ -43,6 +44,7 @@ function _CardSelect({
   const Theme = useTheme();
   const normalbackgroundColor = getBackgroundColor({ selected, disabled, pressed: false });
   const pressedBackgroundColor = getBackgroundColor({ selected, disabled, pressed: true });
+  const Image = useMemo(() => (type === 'wallet' ? WalletImage : NetworkImage), [type]);
 
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
     Theme[normalbackgroundColor],
@@ -51,54 +53,52 @@ function _CardSelect({
 
   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]}
-      testID={testID}
-    >
-      <View>
-        <Image
-          imageSrc={imageSrc}
-          imageHeaders={imageHeaders}
-          size="md"
-          style={disabled ? styles.disabledImage : null}
-          selected={selected}
-          disabled={disabled}
-        />
-        {templateInstalled()}
-      </View>
-      <Text variant="tiny-500" color={textColor} style={styles.text} numberOfLines={1}>
-        {UiUtil.getWalletName(name)}
-      </Text>
-    </AnimatedPressable>
+    <FlexView style={style} alignItems="center" justifyContent="center">
+      <AnimatedPressable
+        onPress={onPress}
+        onPressIn={setEndValue}
+        onPressOut={setStartValue}
+        disabled={disabled}
+        style={[styles.container, { backgroundColor: animatedValue }]}
+        testID={testID}
+      >
+        <View>
+          <Image
+            imageSrc={imageSrc}
+            imageHeaders={imageHeaders}
+            size="md"
+            style={disabled ? styles.disabledImage : null}
+            selected={selected}
+            disabled={disabled}
+          />
+          {installed ? (
+            <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}
+            />
+          ) : null}
+        </View>
+        <Text variant="tiny-500" color={textColor} style={styles.text} numberOfLines={1}>
+          {UiUtil.getWalletName(name)}
+        </Text>
+      </AnimatedPressable>
+    </FlexView>
   );
 }
 
-export const CardSelect = memo(_CardSelect, (prevProps, nextProps) => {
-  return prevProps.name === nextProps.name && prevProps.imageSrc === nextProps.imageSrc;
+export const CardSelect = memo(CardSelect_, (prevProps, nextProps) => {
+  return (
+    prevProps.name === nextProps.name &&
+    prevProps.imageSrc === nextProps.imageSrc &&
+    prevProps.selected === nextProps.selected
+  );
 });

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

@@ -12,7 +12,7 @@ export interface CardSelectLoaderProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export function _CardSelectLoader({ style }: CardSelectLoaderProps) {
+export function CardSelectLoader_({ style }: CardSelectLoaderProps) {
   const Theme = useTheme();
 
   return (
@@ -35,6 +35,6 @@ export function _CardSelectLoader({ style }: CardSelectLoaderProps) {
     </FlexView>
   );
 }
-export const CardSelectLoader = memo(_CardSelectLoader, () => {
+export const CardSelectLoader = memo(CardSelectLoader_, () => {
   return true;
 });

package/src/composites/wui-qr-code/index.tsx

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import { View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg from 'react-native-svg';
 import { Icon } from '../../components/wui-icon';
@@ -19,7 +19,7 @@ export interface QrCodeProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }: QrCodeProps) {
+export function QrCode_({ size, uri, imageSrc, testID, arenaClear, icon, style }: QrCodeProps) {
   const Theme = LightTheme;
   const containerPadding = Spacing.l;
   const qrSize = size - containerPadding * 2;
@@ -76,3 +76,11 @@ export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }:
     <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />
   );
 }
+
+export const QrCode = memo(QrCode_, (prevProps, nextProps) => {
+  return (
+    prevProps.size === nextProps.size &&
+    prevProps.uri === nextProps.uri &&
+    prevProps.style === nextProps.style
+  );
+});

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

@@ -28,7 +28,7 @@ export function TokenButton({
   onPress,
   style,
   disabled = false,
-  placeholder = 'Select token',
+  placeholder = 'Select Token',
   chevron,
   renderClip,
   testID

package/src/context/ThemeContext.tsx

@@ -1,5 +1,5 @@
 import { useColorScheme } from 'react-native';
-import { createContext, useContext, type ReactNode } from 'react';
+import { createContext, useContext, useMemo, type ReactNode } from 'react';
 import type { ThemeMode, ThemeVariables } from '@reown/appkit-common-react-native';
 
 import { DarkTheme, LightTheme, getAccentColors } from '../utils/ThemeUtil';
@@ -18,27 +18,29 @@ interface ThemeProviderProps {
 }
 
 export function ThemeProvider({ children, themeMode, themeVariables }: ThemeProviderProps) {
-  return (
-    <ThemeContext.Provider value={{ themeMode, themeVariables }}>{children}</ThemeContext.Provider>
-  );
+  const contextValue = useMemo(() => ({ themeMode, themeVariables }), [themeMode, themeVariables]);
+
+  return <ThemeContext.Provider value={contextValue}>{children}</ThemeContext.Provider>;
 }
 
 export function useTheme() {
   const context = useContext(ThemeContext);
   const scheme = useColorScheme();
 
-  // If the theme mode is not set, use the system color scheme
-  const themeMode = context?.themeMode ?? scheme;
-  const themeVariables = context?.themeVariables ?? {};
+  return useMemo(() => {
+    // If the theme mode is not set, use the system color scheme
+    const themeMode = context?.themeMode ?? scheme;
+    const themeVariables = context?.themeVariables ?? {};
 
-  let Theme = themeMode === 'dark' ? DarkTheme : LightTheme;
+    let Theme = themeMode === 'dark' ? DarkTheme : LightTheme;
 
-  if (themeVariables.accent) {
-    Theme = {
-      ...Theme,
-      ...getAccentColors(themeVariables.accent)
-    };
-  }
+    if (themeVariables.accent) {
+      Theme = {
+        ...Theme,
+        ...getAccentColors(themeVariables.accent)
+      };
+    }
 
-  return Theme;
+    return Theme;
+  }, [context?.themeMode, context?.themeVariables, scheme]);
 }

package/src/hooks/useCustomDimensions.ts

@@ -1,38 +1,41 @@
 import { useState, useEffect } from 'react';
-import { useWindowDimensions } from 'react-native';
+import { StatusBar, useWindowDimensions } from 'react-native';
 
 /**
  * Hook used to get the width of the screen and the padding needed to accomplish portrait and landscape modes.
- * @returns { width: number, isPortrait: boolean, isLandscape: boolean, padding: number }
+ * @returns { maxHeight: number, isPortrait: boolean, isLandscape: boolean, padding: number }
  */
 
 type CustomDimensionsType = {
-  maxWidth: number;
   maxHeight: number;
   isPortrait: boolean;
   isLandscape: boolean;
   padding: number;
 };
 
-const MAX_HEIGHT_PERCENTAGE = 0.9;
+const MAX_PORTRAIT_PERCENTAGE = 0.9;
+const MAX_LANDSCAPE_PERCENTAGE = 0.85;
+const IOS_STATUS_BAR_HEIGHT = 20;
 
-const getMaxHeight = (width: number, height: number) => {
-  return Math.max(width, height) * MAX_HEIGHT_PERCENTAGE;
+const getMaxHeight = (height: number, isPortrait: boolean) => {
+  const percentage = isPortrait ? MAX_PORTRAIT_PERCENTAGE : MAX_LANDSCAPE_PERCENTAGE;
+
+  return height * percentage - (StatusBar.currentHeight ?? IOS_STATUS_BAR_HEIGHT);
 };
 
 export function useCustomDimensions(): CustomDimensionsType {
   const { width, height } = useWindowDimensions();
-  const [maxWidth, setMaxWidth] = useState<number>(Math.min(width, height));
-  const [maxHeight, setMaxHeight] = useState<number>(getMaxHeight(width, height));
   const [isPortrait, setIsPortrait] = useState<boolean>(height > width);
+  const [maxHeight, setMaxHeight] = useState<number>(getMaxHeight(height, height > width));
   const [padding, setPadding] = useState<number>(0);
 
   useEffect(() => {
-    setMaxWidth(Math.min(width, height));
-    setMaxHeight(getMaxHeight(width, height));
-    setIsPortrait(height > width);
-    setPadding(width < height ? 0 : (width - height) / 2);
+    const _isPortrait = height > width;
+
+    setMaxHeight(getMaxHeight(height, _isPortrait));
+    setIsPortrait(_isPortrait);
+    setPadding(_isPortrait ? 0 : (width - height) / 2);
   }, [width, height]);
 
-  return { maxWidth, maxHeight, isPortrait, isLandscape: !isPortrait, padding };
+  return { maxHeight, isPortrait, isLandscape: !isPortrait, padding };
 }