@reown/appkit-ui-react-native 0.0.0-accounts-canary.1-20251023174733

package/src/composites/wui-wallet-image/styles.ts

@@ -0,0 +1,38 @@
+import { StyleSheet } from 'react-native';
+import { BorderRadius, WalletImageSize } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  xsImage: {
+    height: WalletImageSize.xs,
+    width: WalletImageSize.xs,
+    borderRadius: BorderRadius['4xs']
+  },
+  smImage: {
+    height: WalletImageSize.sm,
+    width: WalletImageSize.sm,
+    borderRadius: BorderRadius.xxs
+  },
+  mdImage: {
+    height: WalletImageSize.md,
+    width: WalletImageSize.md,
+    borderRadius: BorderRadius.xs
+  },
+  lgImage: {
+    height: WalletImageSize.lg,
+    width: WalletImageSize.lg,
+    borderRadius: BorderRadius.s
+  },
+  xlImage: {
+    height: WalletImageSize.xl,
+    width: WalletImageSize.xl,
+    borderRadius: BorderRadius.m
+  },
+  border: {
+    borderWidth: StyleSheet.hairlineWidth,
+    position: 'absolute'
+  }
+});

package/src/context/ThemeContext.tsx

@@ -0,0 +1,46 @@
+import { useColorScheme } from 'react-native';
+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;
+  themeVariables?: ThemeVariables;
+};
+
+export const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+interface ThemeProviderProps {
+  children: ReactNode;
+  themeMode?: ThemeMode;
+  themeVariables?: ThemeVariables;
+}
+
+export function ThemeProvider({ children, themeMode, themeVariables }: ThemeProviderProps) {
+  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();
+
+  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;
+
+    if (themeVariables.accent) {
+      Theme = {
+        ...Theme,
+        ...getAccentColors(themeVariables.accent)
+      };
+    }
+
+    return Theme;
+  }, [context?.themeMode, context?.themeVariables, scheme]);
+}

package/src/hooks/useAnimatedValue.ts

@@ -0,0 +1,35 @@
+import { useCallback, useRef } from 'react';
+import { Animated } from 'react-native';
+
+export function useAnimatedValue<T extends string | number>(
+  startValue: T,
+  endValue: T,
+  duration?: number
+) {
+  const valueRef = useRef(new Animated.Value(0));
+
+  const setStartValue = useCallback(() => {
+    Animated.timing(valueRef.current, {
+      toValue: 0,
+      useNativeDriver: false,
+      duration: duration || 200
+    }).start();
+  }, [valueRef, duration]);
+
+  const setEndValue = useCallback(() => {
+    Animated.timing(valueRef.current, {
+      toValue: 1,
+      useNativeDriver: false,
+      duration: duration || 200
+    }).start();
+  }, [valueRef, duration]);
+
+  const animatedValue = valueRef.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [startValue, endValue] as number[] | string[]
+  });
+
+  return { animatedValue, valueRef, setStartValue, setEndValue };
+}
+
+export default useAnimatedValue;

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/hooks/useTheme.ts

@@ -0,0 +1,5 @@
+import { useTheme as useThemeContext } from '../context/ThemeContext';
+
+export const useTheme = () => {
+  return useThemeContext();
+};

package/src/index.ts

@@ -0,0 +1,99 @@
+/********** 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';
+export { LoadingHexagon, type LoadingHexagonProps } from './components/wui-loading-hexagon';
+export { LoadingSpinner } from './components/wui-loading-spinner';
+export { LoadingThumbnail, type LoadingThumbnailProps } from './components/wui-loading-thumbnail';
+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';
+export { Avatar, type AvatarProps } from './composites/wui-avatar';
+export { Balance, type BalanceProps } from './composites/wui-balance';
+export { Banner, type BannerProps } from './composites/wui-banner';
+export { Button, type ButtonProps } from './composites/wui-button';
+export {
+  CardSelectLoader,
+  CardSelectLoaderHeight,
+  type CardSelectLoaderProps
+} from './composites/wui-card-select-loader';
+export {
+  CardSelect,
+  CardSelectHeight,
+  CardSelectWidth,
+  type CardSelectProps
+} from './composites/wui-card-select';
+export { Chip, type ChipProps } from './composites/wui-chip';
+export {
+  CompatibleNetwork,
+  type CompatibleNetworkProps
+} from './composites/wui-compatible-network';
+export { ConnectButton, type ConnectButtonProps } from './composites/wui-connect-button';
+export { DoubleImageLoader } from './composites/wui-double-image-loader';
+export { EmailInput, type EmailInputProps } from './composites/wui-email-input';
+export { IconBox, type IconBoxProps } from './composites/wui-icon-box';
+export { IconLink, type IconLinkProps } from './composites/wui-icon-link';
+export { InputElement, type InputElementProps } from './composites/wui-input-element';
+export { InputNumeric, type InputNumericProps } from './composites/wui-input-numeric';
+export { InputText, type InputTextProps } from './composites/wui-input-text';
+export { Link, type LinkProps } from './composites/wui-link';
+export { ListItem, type ListItemProps } from './composites/wui-list-item';
+export { ListItemLoader, type ListItemLoaderProps } from './composites/wui-list-item-loader';
+export { ListSocial, type ListSocialProps } from './composites/wui-list-social';
+export { ListToken, ListTokenTotalHeight, type ListTokenProps } from './composites/wui-list-token';
+export { ListTransaction, type ListTransactionProps } from './composites/wui-list-transaction';
+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 { 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';
+export { Tabs, type TabsProps } from './composites/wui-tabs';
+export { Tag, type TagProps } from './composites/wui-tag';
+export { Toggle, type ToggleProps } from './composites/wui-toggle';
+export { TokenButton, type TokenButtonProps } from './composites/wui-token-button';
+export { Tooltip, type TooltipProps } from './composites/wui-tooltip';
+export { WalletImage, type WalletImageProps } from './composites/wui-wallet-image';
+
+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,
+  ChipType,
+  ColorType,
+  ThemeKeys as ThemeColorType,
+  IconType,
+  LogoType,
+  PlacementType,
+  SizeType,
+  TagType,
+  TextType,
+  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

@@ -0,0 +1,60 @@
+import { type LayoutChangeEvent, type StyleProp, type ViewStyle, View } from 'react-native';
+
+import type {
+  FlexAlignType,
+  FlexDirectionType,
+  FlexGrowType,
+  FlexJustifyContentType,
+  FlexShrinkType,
+  FlexWrapType,
+  SpacingType
+} from '../../utils/TypesUtil';
+import { UiUtil } from '../../utils/UiUtil';
+
+export interface FlexViewProps {
+  children?: React.ReactNode;
+  onLayout?: (event: LayoutChangeEvent) => void;
+  flexDirection?: FlexDirectionType;
+  flexWrap?: FlexWrapType;
+  flexGrow?: FlexGrowType;
+  flexShrink?: FlexShrinkType;
+  alignItems?: FlexAlignType;
+  alignSelf?: FlexAlignType;
+  rowGap?: SpacingType;
+  gap?: SpacingType;
+  columnGap?: SpacingType;
+  justifyContent?: FlexJustifyContentType;
+  padding?: SpacingType | SpacingType[];
+  margin?: SpacingType | SpacingType[];
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function FlexView(props: FlexViewProps) {
+  const styles: ViewStyle = {
+    flexDirection: props.flexDirection,
+    flexWrap: props.flexWrap,
+    flexGrow: props.flexGrow,
+    flexShrink: props.flexShrink,
+    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),
+    paddingLeft: props.padding && UiUtil.getSpacingStyles(props.padding, 3),
+    marginTop: props.margin && UiUtil.getSpacingStyles(props.margin, 0),
+    marginRight: props.margin && UiUtil.getSpacingStyles(props.margin, 1),
+    marginBottom: props.margin && UiUtil.getSpacingStyles(props.margin, 2),
+    marginLeft: props.margin && UiUtil.getSpacingStyles(props.margin, 3)
+  };
+
+  return (
+    <View onLayout={props.onLayout} style={[styles, props.style]} testID={props.testID}>
+      {props.children}
+    </View>
+  );
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import { View, type StyleProp, type ViewStyle } from 'react-native';
+import styles from './styles';
+import { useTheme } from '../../hooks/useTheme';
+
+export interface OverlayProps {
+  children?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Overlay({ children, style }: OverlayProps) {
+  const Theme = useTheme();
+
+  return (
+    <View style={[styles.container, { backgroundColor: Theme['gray-glass-030'] }, style]}>
+      {children}
+    </View>
+  );
+}

package/src/layout/wui-overlay/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    width: '100%',
+    height: '100%'
+  }
+});

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

@@ -0,0 +1,30 @@
+import { type StyleProp, type ViewStyle, View } from 'react-native';
+import { Text } from '../../components/wui-text';
+import { FlexView } from '../../layout/wui-flex';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export interface SeparatorProps {
+  text?: string;
+  color?: ColorType;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function Separator({ text, style, color = 'gray-glass-005' }: SeparatorProps) {
+  const Theme = useTheme();
+
+  if (!text) {
+    return <View style={[styles.single, { backgroundColor: Theme[color] }, style]} />;
+  }
+
+  return (
+    <FlexView flexDirection="row" alignItems="center" style={style}>
+      <View style={[styles.divider, styles.marginRight, { backgroundColor: Theme[color] }]} />
+      <Text variant="small-500" color="fg-300">
+        {text}
+      </Text>
+      <View style={[styles.divider, styles.marginLeft, { backgroundColor: Theme[color] }]} />
+    </FlexView>
+  );
+}

package/src/layout/wui-separator/styles.ts

@@ -0,0 +1,19 @@
+import { StyleSheet } from 'react-native';
+import { Spacing } from '../../utils/ThemeUtil';
+
+export default StyleSheet.create({
+  single: {
+    width: '100%',
+    height: 1
+  },
+  divider: {
+    height: 1,
+    flex: 1
+  },
+  marginLeft: {
+    marginLeft: Spacing.xs
+  },
+  marginRight: {
+    marginRight: Spacing.xs
+  }
+});

package/src/utils/QRCodeUtil.tsx

@@ -0,0 +1,185 @@
+import type { ReactNode } from 'react';
+import { Line, Rect, Circle } from 'react-native-svg';
+import QRCode from 'qrcode';
+import { LightTheme } from '../utils/ThemeUtil';
+
+type CoordinateMapping = [number, number[]];
+
+const CONNECTING_ERROR_MARGIN = 0.1;
+const CIRCLE_SIZE_MODIFIER = 2.5;
+const QRCODE_MATRIX_MARGIN = 7;
+
+function isAdjecentDots(cy: number, otherCy: number, cellSize: number) {
+  if (cy === otherCy) {
+    return false;
+  }
+  const diff = cy - otherCy < 0 ? otherCy - cy : cy - otherCy;
+
+  return diff <= cellSize + CONNECTING_ERROR_MARGIN;
+}
+
+function getMatrix(value: string, errorCorrectionLevel: QRCode.QRCodeErrorCorrectionLevel) {
+  const arr = Array.prototype.slice.call(
+    QRCode.create(value, { errorCorrectionLevel }).modules.data,
+    0
+  );
+  const sqrt = Math.sqrt(arr.length);
+
+  return arr.reduce(
+    (rows, key, index) =>
+      (index % sqrt === 0 ? rows.push([key]) : rows[rows.length - 1].push(key)) && rows,
+    []
+  );
+}
+
+export const QRCodeUtil = {
+  generate(uri: string, size: number, logoSize: number) {
+    const dotColor = LightTheme['inverse-000'];
+    const edgeColor = LightTheme['inverse-100'];
+    const dots: ReactNode[] = [];
+    const matrix = getMatrix(uri, 'Q');
+    const cellSize = size / matrix.length;
+    const qrList = [
+      { x: 0, y: 0 },
+      { x: 1, y: 0 },
+      { x: 0, y: 1 }
+    ];
+
+    qrList.forEach(({ x, y }) => {
+      const x1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * x;
+      const y1 = (matrix.length - QRCODE_MATRIX_MARGIN) * cellSize * y;
+      const borderRadius = 0.32;
+      for (let i = 0; i < qrList.length; i += 1) {
+        const dotSize = cellSize * (QRCODE_MATRIX_MARGIN - i * 2);
+        dots.push(
+          <Rect
+            key={`rect_${x1 + cellSize * i}_${y1 + cellSize * i}`}
+            fill={i % 2 === 0 ? dotColor : edgeColor}
+            height={dotSize}
+            rx={dotSize * borderRadius}
+            ry={dotSize * borderRadius}
+            width={dotSize}
+            x={x1 + cellSize * i}
+            y={y1 + cellSize * i}
+          />
+        );
+      }
+    });
+
+    const clearArenaSize = Math.floor((logoSize + 25) / cellSize);
+    const matrixMiddleStart = matrix.length / 2 - clearArenaSize / 2;
+    const matrixMiddleEnd = matrix.length / 2 + clearArenaSize / 2 - 1;
+    const circles: [number, number][] = [];
+
+    // Getting coordinates for each of the QR code dots
+    matrix.forEach((row: QRCode.QRCode[], i: number) => {
+      row.forEach((_, j: number) => {
+        if (matrix[i][j]) {
+          if (
+            !(
+              (i < QRCODE_MATRIX_MARGIN && j < QRCODE_MATRIX_MARGIN) ||
+              (i > matrix.length - (QRCODE_MATRIX_MARGIN + 1) && j < QRCODE_MATRIX_MARGIN) ||
+              (i < QRCODE_MATRIX_MARGIN && j > matrix.length - (QRCODE_MATRIX_MARGIN + 1))
+            )
+          ) {
+            if (
+              !(
+                i > matrixMiddleStart &&
+                i < matrixMiddleEnd &&
+                j > matrixMiddleStart &&
+                j < matrixMiddleEnd
+              )
+            ) {
+              const cx = i * cellSize + cellSize / 2;
+              const cy = j * cellSize + cellSize / 2;
+              circles.push([cx, cy]);
+            }
+          }
+        }
+      });
+    });
+
+    // Cx to multiple cys
+    const circlesToConnect: Record<number, number[]> = {};
+
+    // Mapping all dots cicles on the same x axis
+    circles.forEach(([cx, cy]) => {
+      if (circlesToConnect[cx]) {
+        circlesToConnect[cx]?.push(cy);
+      } else {
+        circlesToConnect[cx] = [cy];
+      }
+    });
+
+    // Drawing lonely dots
+    Object.entries(circlesToConnect)
+      // Only get dots that have neighbors
+      .map(([cx, cys]) => {
+        const newCys = cys.filter(cy =>
+          cys.every(otherCy => !isAdjecentDots(cy, otherCy, cellSize))
+        );
+
+        return [Number(cx), newCys] as CoordinateMapping;
+      })
+      .forEach(([cx, cys]) => {
+        cys.forEach(cy => {
+          dots.push(
+            <Circle
+              key={`circle_${cx}_${cy}`}
+              cx={cx}
+              cy={cy}
+              fill={dotColor}
+              r={cellSize / CIRCLE_SIZE_MODIFIER}
+            />
+          );
+        });
+      });
+
+    // Drawing lines for dots that are close to each other
+    Object.entries(circlesToConnect)
+      // Only get dots that have more than one dot on the x axis
+      .filter(([_, cys]) => cys.length > 1)
+      // Removing dots with no neighbors
+      .map(([cx, cys]) => {
+        const newCys = cys.filter(cy => cys.some(otherCy => isAdjecentDots(cy, otherCy, cellSize)));
+
+        return [Number(cx), newCys] as CoordinateMapping;
+      })
+      // Get the coordinates of the first and last dot of a line
+      .map(([cx, cys]) => {
+        cys.sort((a, b) => (a < b ? -1 : 1));
+        const groups: number[][] = [];
+
+        for (const cy of cys) {
+          const group = groups.find(item =>
+            item.some(otherCy => isAdjecentDots(cy, otherCy, cellSize))
+          );
+          if (group) {
+            group.push(cy);
+          } else {
+            groups.push([cy]);
+          }
+        }
+
+        return [cx, groups.map(item => [item[0], item[item.length - 1]])] as [number, number[][]];
+      })
+      .forEach(([cx, groups]) => {
+        groups.forEach(([y1, y2]) => {
+          dots.push(
+            <Line
+              key={`line_${cx}_${y1}_${y2}`}
+              x1={cx}
+              x2={cx}
+              y1={y1}
+              y2={y2}
+              stroke={dotColor}
+              strokeWidth={cellSize / (CIRCLE_SIZE_MODIFIER / 2)}
+              strokeLinecap="round"
+            />
+          );
+        });
+      });
+
+    return dots;
+  }
+};