@reown/appkit-ui-react-native 2.0.0-alpha.3 → 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-card-select/index.tsx

@@ -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-qr-code/index.tsx

@@ -62,7 +62,7 @@ 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}

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';
@@ -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/utils/QRCodeUtil.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import { Line, Rect, Circle } from 'react-native-svg';
 import QRCode from 'qrcode';
-import { DarkTheme, LightTheme } from '../utils/ThemeUtil';
+import { LightTheme } from '../utils/ThemeUtil';
 
 type CoordinateMapping = [number, number[]];
 
@@ -34,8 +34,8 @@ function getMatrix(value: string, errorCorrectionLevel: QRCode.QRCodeErrorCorrec
 
 export const QRCodeUtil = {
   generate(uri: string, size: number, logoSize: number) {
-    const dotColor = DarkTheme['bg-100'];
-    const edgeColor = LightTheme['bg-100'];
+    const dotColor = LightTheme['inverse-000'];
+    const edgeColor = LightTheme['inverse-100'];
     const dots: ReactNode[] = [];
     const matrix = getMatrix(uri, 'Q');
     const cellSize = size / matrix.length;