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

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 Svg, { Circle, Line, Rect } 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';
@@ -19,19 +17,32 @@ export interface QrCodeProps {
   testID?: string;
   arenaClear?: boolean;
   style?: StyleProp<ViewStyle>;
+  logoSize?: number;
+  logoBorderRadius?: number;
 }
 
-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,
+  logoSize,
+  logoBorderRadius
+}: QrCodeProps) {
   const Theme = LightTheme;
   const containerPadding = Spacing.l;
   const qrSize = size - containerPadding * 2;
-  const logoSize = arenaClear ? 0 : qrSize / 4;
+  const _logoSize = arenaClear ? 0 : logoSize ?? qrSize / 4;
+
+  const dotColor = Theme['inverse-000'];
+  const edgeColor = Theme['inverse-100'];
 
-  const dots = useMemo(
-    () => (uri ? QRCodeUtil.generate(uri, qrSize, logoSize) : []),
-    [uri, qrSize, logoSize]
+  const qrData = useMemo(
+    () => (uri ? QRCodeUtil.generate(uri, qrSize, _logoSize, logoBorderRadius) : null),
+    [uri, qrSize, _logoSize, logoBorderRadius]
   );
 
   const logoTemplate = () => {
@@ -44,8 +55,12 @@ export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }:
         <Image
           source={imageSrc}
           style={[
-            styles.icon,
-            { height: qrSize / 4, width: qrSize / 4, borderRadius: qrSize / 16 }
+            {
+              position: 'absolute' as const,
+              height: _logoSize,
+              width: _logoSize,
+              borderRadius: logoBorderRadius
+            }
           ]}
         />
       );
@@ -55,36 +70,76 @@ export function QrCode({ size, uri, imageSrc, testID, arenaClear, icon, style }:
       <Icon
         name={icon ?? 'walletConnect'}
         color="accent-100"
-        height={qrSize / 3.5}
-        width={qrSize / 3.5}
-        style={styles.icon}
+        height={_logoSize}
+        width={_logoSize}
+        style={{ position: 'absolute' as const }}
       />
     );
   };
 
-  return uri ? (
+  if (!uri || !qrData) {
+    return <Shimmer width={size} height={size} borderRadius={BorderRadius.l} />;
+  }
+
+  return (
     <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}>
+        {/* Render rectangles */}
+        {qrData.rects.map(rect => (
+          <Rect
+            key={`rect_${rect.x}_${rect.y}`}
+            fill={rect.fillType === 'dot' ? dotColor : edgeColor}
+            height={rect.size}
+            rx={rect.size * 0.32}
+            ry={rect.size * 0.32}
+            width={rect.size}
+            x={rect.x}
+            y={rect.y}
+          />
+        ))}
+
+        {/* Render circles */}
+        {qrData.circles.map(circle => (
+          <Circle
+            key={`circle_${circle.cx}_${circle.cy}`}
+            cx={circle.cx}
+            cy={circle.cy}
+            fill={dotColor}
+            r={circle.r}
+          />
+        ))}
+
+        {/* Render lines */}
+        {qrData.lines.map(line => (
+          <Line
+            key={`line_${line.x1}_${line.y1}_${line.y2}`}
+            x1={line.x1}
+            x2={line.x2}
+            y1={line.y1}
+            y2={line.y2}
+            stroke={dotColor}
+            strokeWidth={line.strokeWidth}
+            strokeLinecap="round"
+          />
+        ))}
+      </Svg>
+      {logoTemplate()}
     </View>
-  ) : (
-    <Shimmer width={size} height={size + LABEL_HEIGHT} borderRadius={BorderRadius.l} />
   );
 }
+
+export const QrCode = memo(QrCode_, (prevProps, nextProps) => {
+  return (
+    prevProps.size === nextProps.size &&
+    prevProps.uri === nextProps.uri &&
+    prevProps.style === nextProps.style &&
+    prevProps.logoBorderRadius === nextProps.logoBorderRadius
+  );
+});

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

@@ -8,11 +8,5 @@ export default StyleSheet.create({
     borderRadius: BorderRadius.l,
     padding: Spacing.l,
     alignSelf: 'center'
-  },
-  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

@@ -1,12 +1,12 @@
-import type { StyleProp, ViewStyle } from 'react-native';
+import React from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+
 import { Image } from '../../components/wui-image';
 import { Text } from '../../components/wui-text';
 import { Button } from '../wui-button';
 import { Icon } from '../../components/wui-icon';
 import styles from './styles';
 import { useTheme } from '../../context/ThemeContext';
-import { View } from 'react-native';
-import React from 'react';
 
 export interface TokenButtonProps {
   onPress?: () => void;
@@ -28,7 +28,7 @@ export function TokenButton({
   onPress,
   style,
   disabled = false,
-  placeholder = 'Select token',
+  placeholder = 'Select Token',
   chevron,
   renderClip,
   testID
@@ -57,9 +57,9 @@ export function TokenButton({
         <Image
           key="image"
           source={imageUrl}
-          style={[styles.image, { backgroundColor: Theme['fg-100'] }]}
+          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/context/ThemeContext.tsx

@@ -1,11 +1,10 @@
-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';
 
 type ThemeContextType = {
-  themeMode?: ThemeMode;
+  themeMode: ThemeMode;
   themeVariables?: ThemeVariables;
 };
 
@@ -13,32 +12,32 @@ export const ThemeContext = createContext<ThemeContextType | undefined>(undefine
 
 interface ThemeProviderProps {
   children: ReactNode;
-  themeMode?: ThemeMode;
+  themeMode: ThemeMode;
   themeVariables?: ThemeVariables;
 }
 
 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(() => {
+    const themeMode = context?.themeMode ?? 'light';
+    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]);
 }

package/src/hooks/useCustomDimensions.ts

@@ -0,0 +1,41 @@
+import { useState, useEffect } from 'react';
+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 { maxHeight: number, isPortrait: boolean, isLandscape: boolean, padding: number }
+ */
+
+type CustomDimensionsType = {
+  maxHeight: number;
+  isPortrait: boolean;
+  isLandscape: boolean;
+  padding: number;
+};
+
+const MAX_PORTRAIT_PERCENTAGE = 0.9;
+const MAX_LANDSCAPE_PERCENTAGE = 0.85;
+const IOS_STATUS_BAR_HEIGHT = 20;
+
+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 [isPortrait, setIsPortrait] = useState<boolean>(height > width);
+  const [maxHeight, setMaxHeight] = useState<number>(getMaxHeight(height, height > width));
+  const [padding, setPadding] = useState<number>(0);
+
+  useEffect(() => {
+    const _isPortrait = height > width;
+
+    setMaxHeight(getMaxHeight(height, _isPortrait));
+    setIsPortrait(_isPortrait);
+    setPadding(_isPortrait ? 0 : (width - height) / 2);
+  }, [width, height]);
+
+  return { 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,12 +50,12 @@ 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';
 export { Otp, type OtpProps } from './composites/wui-otp';
 export { Pressable, type PressableProps } from './components/wui-pressable';
-export { Promo, type PromoProps } from './composites/wui-promo';
 export { QrCode, type QrCodeProps } from './composites/wui-qr-code';
 export { SearchBar, type SearchBarProps } from './composites/wui-search-bar';
 export { Snackbar, type SnackbarProps } from './composites/wui-snackbar';
@@ -68,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,
@@ -83,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';

package/src/layout/wui-flex/index.tsx

@@ -20,6 +20,9 @@ export interface FlexViewProps {
   flexShrink?: FlexShrinkType;
   alignItems?: FlexAlignType;
   alignSelf?: FlexAlignType;
+  rowGap?: SpacingType;
+  gap?: SpacingType;
+  columnGap?: SpacingType;
   justifyContent?: FlexJustifyContentType;
   padding?: SpacingType | SpacingType[];
   margin?: SpacingType | SpacingType[];
@@ -36,6 +39,9 @@ export function FlexView(props: FlexViewProps) {
     alignItems: props.alignItems,
     alignSelf: props.alignSelf,
     justifyContent: props.justifyContent,
+    rowGap: props.rowGap && UiUtil.getSpacingStyles(props.rowGap),
+    gap: props.gap && UiUtil.getSpacingStyles(props.gap),
+    columnGap: props.columnGap && UiUtil.getSpacingStyles(props.columnGap),
     paddingTop: props.padding && UiUtil.getSpacingStyles(props.padding, 0),
     paddingRight: props.padding && UiUtil.getSpacingStyles(props.padding, 1),
     paddingBottom: props.padding && UiUtil.getSpacingStyles(props.padding, 2),