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

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}
-          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;
+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

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { type StyleProp, type ViewStyle } from 'react-native';
 import { BorderRadius, Spacing, WalletImageSize } from '../../utils/ThemeUtil';
 import { useTheme } from '../../hooks/useTheme';
@@ -11,7 +12,7 @@ export interface CardSelectLoaderProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export function CardSelectLoader({ style }: CardSelectLoaderProps) {
+export function CardSelectLoader_({ style }: CardSelectLoaderProps) {
   const Theme = useTheme();
 
   return (
@@ -34,3 +35,6 @@ export function CardSelectLoader({ style }: CardSelectLoaderProps) {
     </FlexView>
   );
 }
+export const CardSelectLoader = memo(CardSelectLoader_, () => {
+  return true;
+});

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

@@ -80,7 +80,7 @@ export function Chip({
       onPressOut={onPressOut}
       onPress={handlePress}
     >
-      {imageSrc && (
+      {imageSrc ? (
         <Image
           style={[
             styles.image,
@@ -90,22 +90,22 @@ export function Chip({
           ]}
           source={imageSrc}
         />
-      )}
-      {leftIcon && <Icon name={leftIcon} color={themedTextColor as ColorType} />}
+      ) : null}
+      {leftIcon ? <Icon name={leftIcon} color={themedTextColor as ColorType} /> : null}
       <Text
         variant={size === 'md' ? 'paragraph-600' : 'small-600'}
         style={[styles.link, { color: Theme[themedTextColor] }]}
       >
         {label}
       </Text>
-      {rightIcon && (
+      {rightIcon ? (
         <Icon
           name={rightIcon}
           size={iconSize}
           color={themedTextColor as ColorType}
           style={styles.icon}
         />
-      )}
+      ) : null}
     </AnimatedPressable>
   );
 }

package/src/composites/wui-double-image-loader/index.native.tsx

@@ -33,8 +33,8 @@ export function DoubleImageLoader({
   const leftPosition = useAnimatedValue(10);
   const rightPosition = useAnimatedValue(-10);
 
-  const animateLeft = () => {
-    Animated.loop(
+  useEffect(() => {
+    const leftAnimation = Animated.loop(
       Animated.sequence([
         Animated.timing(leftPosition, {
           toValue: -5,
@@ -47,11 +47,9 @@ export function DoubleImageLoader({
           useNativeDriver: true
         })
       ])
-    ).start();
-  };
+    );
 
-  const animateRight = () => {
-    Animated.loop(
+    const rightAnimation = Animated.loop(
       Animated.sequence([
         Animated.timing(rightPosition, {
           toValue: 5,
@@ -64,12 +62,15 @@ export function DoubleImageLoader({
           useNativeDriver: true
         })
       ])
-    ).start();
-  };
+    );
 
-  useEffect(() => {
-    animateLeft();
-    animateRight();
+    leftAnimation.start();
+    rightAnimation.start();
+
+    return () => {
+      leftAnimation.stop();
+      rightAnimation.stop();
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 

package/src/composites/wui-email-input/index.tsx

@@ -84,7 +84,7 @@ export function EmailInput({
     return (
       <RightIcon
         loading={loading}
-        showChevron={submitEnabled && !errorMessage}
+        showChevron={submitEnabled ? !errorMessage : false}
         onPress={handleChevronPress}
       />
     );
@@ -93,7 +93,7 @@ export function EmailInput({
   return (
     <View style={style}>
       <InputText
-        icon="mail"
+        icon="email"
         placeholder="Email"
         size="md"
         onSubmitEditing={handleSubmitEditing}
@@ -107,11 +107,11 @@ export function EmailInput({
       >
         {rightIconTemplate()}
       </InputText>
-      {errorMessage && (
+      {errorMessage ? (
         <Text color="error-100" variant="tiny-500" style={styles.text}>
           {errorMessage}
         </Text>
-      )}
+      ) : null}
     </View>
   );
 }

package/src/composites/wui-input-text/index.tsx

@@ -113,7 +113,7 @@ export const InputText = forwardRef<InputRef, InputTextProps>(
               disabled && { backgroundColor: Theme['gray-glass-002'] }
             ]}
           >
-            {icon && <Icon name={icon} size="md" color="fg-275" style={styles.icon} />}
+            {icon ? <Icon name={icon} size="md" color="fg-275" style={styles.icon} /> : null}
             <TextInput
               ref={inputRef}
               onFocus={handleFocus}

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

@@ -54,15 +54,15 @@ export function Link({
       {...rest}
     >
       <FlexView flexDirection="row" alignItems="center" justifyContent="center">
-        {iconLeft && (
+        {iconLeft ? (
           <Icon color={_color} name={iconLeft} size={iconSize} style={styles.iconLeft} />
-        )}
+        ) : null}
         <Text variant={size === 'md' ? 'paragraph-600' : 'small-600'} color={_color}>
           {children}
         </Text>
-        {iconRight && (
+        {iconRight ? (
           <Icon color={_color} name={iconRight} size={iconSize} style={styles.iconRight} />
-        )}
+        ) : null}
       </FlexView>
     </AnimatedPressable>
   );

package/src/composites/wui-list-item/index.tsx

@@ -5,7 +5,8 @@ import {
   Animated,
   type StyleProp,
   type ViewStyle,
-  type ImageStyle
+  type ImageStyle,
+  type ImageProps
 } from 'react-native';
 import { Icon } from '../../components/wui-icon';
 import { Image } from '../../components/wui-image';
@@ -27,6 +28,7 @@ export interface ListItemProps {
   imageSrc?: string;
   imageHeaders?: Record<string, string>;
   imageStyle?: StyleProp<ImageStyle>;
+  imageProps?: ImageProps;
   imageContainerStyle?: StyleProp<ViewStyle>;
   chevron?: boolean;
   disabled?: boolean;
@@ -42,6 +44,7 @@ export function ListItem({
   children,
   icon,
   imageSrc,
+  imageProps,
   imageHeaders,
   imageStyle,
   imageContainerStyle,
@@ -74,8 +77,9 @@ export function ListItem({
           ]}
         >
           <Image
-            source={imageSrc}
+            {...imageProps}
             headers={imageHeaders}
+            source={imageSrc}
             style={[styles.image, (disabled || loading) && styles.disabledImage, imageStyle]}
           />
         </View>

package/src/composites/wui-list-social/index.tsx

@@ -6,6 +6,7 @@ import type { LogoType } from '../../utils/TypesUtil';
 import styles from './styles';
 import { Logo } from '../wui-logo';
 import type { ReactNode } from 'react';
+import { Icon } from '../../components/wui-icon';
 
 const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
 
@@ -18,6 +19,8 @@ export interface ListSocialProps {
   testID?: string;
   logoWidth?: number;
   logoHeight?: number;
+  logoStyle?: StyleProp<ViewStyle>;
+  chevron?: boolean;
 }
 
 export function ListSocial({
@@ -28,7 +31,9 @@ export function ListSocial({
   style,
   testID,
   logoHeight = 40,
-  logoWidth = 40
+  logoWidth = 40,
+  logoStyle,
+  chevron
 }: ListSocialProps) {
   const Theme = useTheme();
   const { animatedValue, setStartValue, setEndValue } = useAnimatedValue(
@@ -48,18 +53,23 @@ export function ListSocial({
       <View
         style={[
           styles.border,
-          { height: logoHeight + 1, width: logoWidth + 1, borderColor: Theme['gray-glass-005'] }
+          { height: logoHeight + 1, width: logoWidth + 1, borderColor: Theme['gray-glass-005'] },
+          logoStyle
         ]}
       >
         <Logo
           logo={logo}
-          style={disabled && styles.disabledLogo}
+          style={[disabled && styles.disabledLogo]}
           width={logoWidth}
           height={logoHeight}
         />
       </View>
       {children}
-      <View style={styles.rightPlaceholder} />
+      {chevron ? (
+        <Icon name="chevronRight" size="md" color="fg-200" style={styles.rightIcon} />
+      ) : (
+        <View style={styles.rightPlaceholder} />
+      )}
     </AnimatedPressable>
   );
 }

package/src/composites/wui-list-social/styles.ts

@@ -24,5 +24,8 @@ export default StyleSheet.create({
     borderWidth: 2,
     alignItems: 'center',
     justifyContent: 'center'
+  },
+  rightIcon: {
+    marginRight: Spacing['2xs']
   }
 });

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

@@ -10,7 +10,7 @@ import styles from './styles';
 export const ListTokenTotalHeight = 64;
 
 export interface ListTokenProps {
-  imageSrc: string;
+  imageSrc?: string;
   networkSrc?: string;
   name: string;
   value?: number;
@@ -50,10 +50,7 @@ export function ListToken({
       >
         <FlexView flexDirection="row" alignItems="center">
           {imageSrc ? (
-            <Image
-              source={imageSrc}
-              style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}
-            />
+            <Image source={imageSrc} style={styles.image} />
           ) : (
             <FlexView
               style={[styles.image, { backgroundColor: Theme['gray-glass-005'] }]}

package/src/composites/wui-list-transaction/index.tsx

@@ -38,7 +38,7 @@ export function ListTransaction({
       <FlexView flexDirection="row" alignItems="center" style={styles.middleContainer}>
         <FlexView justifyContent="center" alignItems="flex-start">
           <FlexView flexDirection="row" alignItems="center">
-            {type && (
+            {type ? (
               <IconBox
                 icon={getIcon(type)}
                 size="sm"
@@ -47,7 +47,7 @@ export function ListTransaction({
                 border
                 borderColor="bg-100"
               />
-            )}
+            ) : null}
             <Text variant="paragraph-500" color="fg-100">
               {getTypeLabel(type)}
             </Text>

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

@@ -29,7 +29,7 @@ export function LogoSelect({ logo, disabled, style, onPress }: LogoSelectProps)
       style={[styles.box, { backgroundColor: animatedValue }, style]}
       disabled={disabled}
     >
-      <Logo logo={logo} style={disabled && styles.disabled} />
+      <Logo logo={logo} style={disabled ? styles.disabled : null} />
     </AnimatedPressable>
   );
 }

package/src/composites/wui-network-image/index.tsx

@@ -1,9 +1,8 @@
-import { Path, Svg, Image, Defs, Pattern } from 'react-native-svg';
+import { Path, Svg, Image, Defs, Pattern, G } from 'react-native-svg';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { useTheme } from '../../hooks/useTheme';
 import type { SizeType } from '../../utils/TypesUtil';
-import { Icon } from '../../components/wui-icon';
-import { FlexView } from '../../layout/wui-flex';
+import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
 import { PathLg, PathNormal, PathSmall, PathXS } from './styles';
 
 export interface NetworkImageProps {
@@ -31,6 +30,13 @@ const sizeToHeight = {
   xs: 20
 };
 
+const sizeToIconSize = {
+  lg: 24,
+  md: 16,
+  sm: 14,
+  xs: 12
+};
+
 export function NetworkImage({
   imageSrc,
   imageHeaders,
@@ -44,42 +50,52 @@ export function NetworkImage({
   const Theme = useTheme();
   const svgStroke = selected ? Theme['accent-100'] : Theme['gray-glass-010'];
   const opacity = disabled ? 0.5 : 1;
+  const containerSize = sizeToHeight[size];
+  const iconSize = sizeToIconSize[size];
 
   return (
     <Svg
-      width={sizeToHeight[size]}
-      height={sizeToHeight[size]}
+      width={containerSize}
+      height={containerSize}
       stroke={borderColor ?? svgStroke}
       strokeWidth={borderWidth}
       style={style}
     >
-      <Defs>
-        <Pattern id="image-pattern">
-          {imageSrc ? (
-            <Image
-              height={sizeToHeight[size]}
-              width={sizeToHeight[size]}
-              opacity={opacity}
-              href={{ uri: imageSrc, headers: imageHeaders }}
-            />
-          ) : (
-            <FlexView
-              alignItems="center"
-              justifyContent="center"
-              // eslint-disable-next-line react-native/no-inline-styles
-              style={{
-                height: sizeToHeight[size],
-                width: sizeToHeight[size],
-                backgroundColor: 'transparent'
-              }}
+      {imageSrc ? (
+        <>
+          <Defs>
+            <Pattern
+              id="image-pattern"
+              width={containerSize}
+              height={containerSize}
+              patternUnits="userSpaceOnUse"
             >
-              <Icon name="networkPlaceholder" size={size} color="fg-200" />
-            </FlexView>
-          )}
-        </Pattern>
-      </Defs>
-      {!imageSrc && <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />}
-      <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+              <Image
+                height={containerSize}
+                width={containerSize}
+                opacity={opacity}
+                href={{ uri: imageSrc, headers: imageHeaders }}
+              />
+            </Pattern>
+          </Defs>
+          <Path d={sizeToPath[size]} opacity={opacity} fill="url(#image-pattern)" />
+        </>
+      ) : (
+        <>
+          <Path d={sizeToPath[size]} opacity={opacity} fill={Theme['gray-glass-005']} />
+          <G
+            transform={`translate(${(containerSize - iconSize) / 2}, ${
+              (containerSize - iconSize) / 2
+            })`}
+          >
+            <NetworkPlaceholderSvg
+              fill={selected ? Theme['accent-100'] : Theme['fg-200']}
+              width={iconSize}
+              height={iconSize}
+            />
+          </G>
+        </>
+      )}
     </Svg>
   );
 }

package/src/composites/wui-numeric-keyboard/index.tsx

@@ -1,3 +1,4 @@
+import { memo } from 'react';
 import { TouchableOpacity, StyleSheet } from 'react-native';
 import { Text } from '../../components/wui-text';
 import { FlexView } from '../../layout/wui-flex';
@@ -7,7 +8,7 @@ export interface NumericKeyboardProps {
   onKeyPress: (value: string) => void;
 }
 
-export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
+function _NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   const Theme = useTheme();
   const keys = [
     ['1', '2', '3'],
@@ -48,6 +49,8 @@ export function NumericKeyboard({ onKeyPress }: NumericKeyboardProps) {
   );
 }
 
+export const NumericKeyboard = memo(_NumericKeyboard);
+
 const styles = StyleSheet.create({
   row: {
     marginBottom: 10

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

@@ -82,7 +82,7 @@ export function Otp({ length, style, onChangeText, autoFocus }: OtpProps) {
     <View style={styles.container}>
       {Array.from({ length }).map((_, index) => (
         <InputNumeric
-          autoFocus={autoFocus && index === 0}
+          autoFocus={autoFocus ? index === 0 : undefined}
           key={index}
           style={style}
           value={value[index] || ''}

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

@@ -1,11 +1,9 @@
-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';
 import { Image } from '../../components/wui-image';
 import { Shimmer } from '../../components/wui-shimmer';
-import { Text } from '../../components/wui-text';
-import { FlexView } from '../../layout/wui-flex';
 import { QRCodeUtil } from '../../utils/QRCodeUtil';
 import { BorderRadius, LightTheme, Spacing } from '../../utils/ThemeUtil';
 import type { IconType } from '../../utils/TypesUtil';
@@ -21,9 +19,7 @@ export interface QrCodeProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const LABEL_HEIGHT = 18;
-
-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;
@@ -66,25 +62,25 @@ export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }:
     <View
       style={[
         styles.container,
-        { width: size, backgroundColor: Theme['bg-100'], padding: containerPadding },
+        { width: size, backgroundColor: Theme['inverse-100'], padding: containerPadding },
         style
       ]}
       testID={testID}
     >
-      <FlexView alignItems="center" justifyContent="center">
-        <Svg height={qrSize} width={qrSize}>
-          {dots}
-        </Svg>
-        {logoTemplate()}
-      </FlexView>
-      <Text variant="small-500" color="fg-150" style={[styles.label, { height: LABEL_HEIGHT }]}>
-        UX by{' '}
-        <Text variant="small-500" color="inverse-000">
-          Reown
-        </Text>
-      </Text>
+      <Svg height={qrSize} width={qrSize}>
+        {dots}
+      </Svg>
+      {logoTemplate()}
     </View>
   ) : (
-    <Shimmer width={size} height={size + LABEL_HEIGHT} borderRadius={BorderRadius.l} />
+    <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-qr-code/styles.ts

@@ -11,8 +11,5 @@ export default StyleSheet.create({
   },
   icon: {
     position: 'absolute'
-  },
-  label: {
-    marginTop: Spacing.s
   }
 });