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

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>
   );

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

@@ -86,7 +86,7 @@ function _CardSelect({
           imageSrc={imageSrc}
           imageHeaders={imageHeaders}
           size="md"
-          style={disabled && styles.disabledImage}
+          style={disabled ? styles.disabledImage : null}
           selected={selected}
           disabled={disabled}
         />
@@ -100,5 +100,5 @@ function _CardSelect({
 }
 
 export const CardSelect = memo(_CardSelect, (prevProps, nextProps) => {
-  return prevProps.name === nextProps.name;
+  return prevProps.name === nextProps.name && prevProps.imageSrc === nextProps.imageSrc;
 });

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

@@ -84,7 +84,7 @@ export function EmailInput({
     return (
       <RightIcon
         loading={loading}
-        showChevron={submitEnabled && !errorMessage}
+        showChevron={submitEnabled ? !errorMessage : false}
         onPress={handleChevronPress}
       />
     );
@@ -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-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-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

@@ -4,8 +4,6 @@ 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,8 +19,6 @@ export interface QrCodeProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const LABEL_HEIGHT = 18;
-
 export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }: QrCodeProps) {
   const Theme = LightTheme;
   const containerPadding = Spacing.l;
@@ -66,25 +62,17 @@ 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} />
   );
 }

package/src/composites/wui-qr-code/styles.ts

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

package/src/composites/wui-search-bar/index.tsx

@@ -41,7 +41,7 @@ export function SearchBar({
         returnKeyType="search"
         disableFullscreenUI
       >
-        {showClear && (
+        {showClear ? (
           <InputElement
             icon="close"
             style={{ marginRight: Spacing['4xs'] }}
@@ -51,7 +51,7 @@ export function SearchBar({
               handleChangeText('');
             }}
           />
-        )}
+        ) : null}
       </InputText>
     </FlexView>
   );

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

@@ -72,14 +72,14 @@ export function Tabs({ tabs, onTabChange, style }: TabsProps) {
             key={isString ? option : option.label}
             style={[styles.tabItem, { width: tabWidth }]}
           >
-            {!isString && option.icon && (
+            {!isString && option.icon ? (
               <Icon
                 name={option.icon}
                 size="xs"
                 color={isActive ? 'fg-100' : 'fg-200'}
                 style={styles.tabIcon}
               />
-            )}
+            ) : null}
             <Text variant="small-600" color={isActive ? 'fg-100' : 'fg-200'}>
               {isString ? option : option.label}
             </Text>

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

@@ -74,9 +74,9 @@ export function Toggle({
         ) : (
           title
         )}
-        {canClose && (
+        {canClose ? (
           <IconBox icon={isOpen ? 'chevronTop' : 'chevronBottom'} size="sm" iconColor="fg-200" />
-        )}
+        ) : null}
       </Pressable>
 
       <Animated.View style={[styles.contentWrapper, { height: animatedHeight }]}>

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

@@ -59,7 +59,7 @@ export function TokenButton({
           source={imageUrl}
           style={[styles.image, { backgroundColor: Theme['inverse-100'] }]}
         />
-        {renderClip && <View style={styles.clipContainer}>{renderClip}</View>}
+        {renderClip ? <View style={styles.clipContainer}>{renderClip}</View> : null}
       </View>
     ),
     <Text key="text">{text}</Text>
@@ -75,7 +75,9 @@ export function TokenButton({
       testID={testID}
     >
       {inverse ? content.reverse() : content}
-      {chevron && <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />}
+      {chevron ? (
+        <Icon name="chevronBottom" size="xxs" color="fg-150" style={styles.chevron} />
+      ) : null}
     </Button>
   );
 }

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

@@ -32,13 +32,13 @@ export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionV
           <Icon name={isFirstNFT ? 'nftPlaceholder' : 'coinPlaceholder'} size="sm" color="fg-200" />
         </FlexView>
       )}
-      {hasOneImage && firstImage?.url && (
+      {hasOneImage && firstImage?.url ? (
         <Image
           source={firstImage.url}
           style={[styles.image, firstImage?.type === 'NFT' && styles.imageNft, { backgroundColor }]}
         />
-      )}
-      {hasTwoImages && firstImage?.url && secondImage?.url && (
+      ) : null}
+      {hasTwoImages && firstImage?.url && secondImage?.url ? (
         <FlexView flexDirection="row" padding={['0', 's', '0', '0']}>
           <FlexView style={styles.halfContainer}>
             <Image
@@ -58,7 +58,7 @@ export function TransactionVisual({ images, networkSrc, isAllNFT }: TransactionV
             />
           </FlexView>
         </FlexView>
-      )}
+      ) : null}
       <FlexView
         alignItems="center"
         justifyContent="center"

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

@@ -66,7 +66,7 @@ export function WalletImage({
   return (
     <Animated.View style={style}>
       {templateVisual()}
-      {border && (
+      {border ? (
         <View
           style={[
             styles.border,
@@ -79,7 +79,7 @@ export function WalletImage({
             }
           ]}
         />
-      )}
+      ) : null}
     </Animated.View>
   );
 }

package/src/hooks/useCustomDimensions.ts

@@ -0,0 +1,38 @@
+import { useState, useEffect } from 'react';
+import { 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 }
+ */
+
+type CustomDimensionsType = {
+  maxWidth: number;
+  maxHeight: number;
+  isPortrait: boolean;
+  isLandscape: boolean;
+  padding: number;
+};
+
+const MAX_HEIGHT_PERCENTAGE = 0.9;
+
+const getMaxHeight = (width: number, height: number) => {
+  return Math.max(width, height) * MAX_HEIGHT_PERCENTAGE;
+};
+
+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 [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);
+  }, [width, height]);
+
+  return { maxWidth, maxHeight, isPortrait, isLandscape: !isPortrait, padding };
+}

package/src/index.ts

@@ -1,3 +1,4 @@
+/********** Components **********/
 export { Card, type CardProps } from './components/wui-card';
 export { Icon, type IconProps } from './components/wui-icon';
 export { Image, type ImageProps } from './components/wui-image';
@@ -8,6 +9,7 @@ export { Text, type TextProps } from './components/wui-text';
 export { Visual, type VisualProps } from './components/wui-visual';
 export { Shimmer, type ShimmerProps } from './components/wui-shimmer';
 
+/********** Composites **********/
 export { AccountButton, type AccountButtonProps } from './composites/wui-account-button';
 export { AccountPill, type AccountPillProps } from './composites/wui-account-pill';
 export { ActionEntry, type ActionEntryProps } from './composites/wui-action-entry';
@@ -48,6 +50,7 @@ export { ListTransaction, type ListTransactionProps } from './composites/wui-lis
 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 { Modal, type ModalProps } from './components/wui-modal';
 export { NetworkButton, type NetworkButtonProps } from './composites/wui-network-button';
 export { NetworkImage, type NetworkImageProps } from './composites/wui-network-image';
 export { NumericKeyboard, type NumericKeyboardProps } from './composites/wui-numeric-keyboard';
@@ -67,6 +70,7 @@ export { Overlay, type OverlayProps } from './layout/wui-overlay';
 export { FlexView, type FlexViewProps } from './layout/wui-flex';
 export { Separator } from './layout/wui-separator';
 
+/********** Types **********/
 export type {
   ButtonType,
   CardSelectType,
@@ -82,10 +86,14 @@ export type {
   VisualType,
   TransactionType
 } from './utils/TypesUtil';
+
+/********** Utils **********/
 export { UiUtil } from './utils/UiUtil';
 export { TransactionUtil } from './utils/TransactionUtil';
 export { Spacing, BorderRadius } from './utils/ThemeUtil';
 
+/********** Hooks **********/
 export { useTheme } from './hooks/useTheme';
 export { ThemeProvider } from './context/ThemeContext';
 export { useAnimatedValue } from './hooks/useAnimatedValue';
+export { useCustomDimensions } from './hooks/useCustomDimensions';