@reown/appkit-ui-react-native 0.0.0-canary-20240912195440

package/src/components/wui-icon/index.tsx

@@ -0,0 +1,143 @@
+import type { SvgProps } from 'react-native-svg';
+import type { ColorType, IconType, SizeType, ThemeKeys } from '../../utils/TypesUtil';
+
+// -- Svg's-------------------------------- //
+import AllWalletsSvg from '../../assets/svg/AllWallets';
+import AppleSvg from '../../assets/svg/Apple';
+import ArrowBottomSvg from '../../assets/svg/ArrowBottom';
+import ArrowLeftSvg from '../../assets/svg/ArrowLeft';
+import ArrowRightSvg from '../../assets/svg/ArrowRight';
+import ArrowTopSvg from '../../assets/svg/ArrowTop';
+import BrowserSvg from '../../assets/svg/Browser';
+import CheckmarkSvg from '../../assets/svg/Checkmark';
+import ChevronBottomSvg from '../../assets/svg/ChevronBottom';
+import ChevronLeftSvg from '../../assets/svg/ChevronLeft';
+import ChevronRightSvg from '../../assets/svg/ChevronRight';
+import ChevronRightSmallSvg from '../../assets/svg/ChevronRightSmall';
+import ChevronTopSvg from '../../assets/svg/ChevronTop';
+import ClockSvg from '../../assets/svg/Clock';
+import CloseSvg from '../../assets/svg/Close';
+import CompassSvg from '../../assets/svg/Compass';
+import CoinPlaceholderSvg from '../../assets/svg/CoinPlaceholder';
+import CopySvg from '../../assets/svg/Copy';
+import CopySmallSvg from '../../assets/svg/CopySmall';
+import CursorSvg from '../../assets/svg/Cursor';
+import DesktopSvg from '../../assets/svg/Desktop';
+import DisconnectSvg from '../../assets/svg/Disconnect';
+import DiscordSvg from '../../assets/svg/Discord';
+import EtherscanSvg from '../../assets/svg/Etherscan';
+import ExtensionSvg from '../../assets/svg/Extension';
+import ExternalLinkSvg from '../../assets/svg/ExternalLink';
+import FacebookSvg from '../../assets/svg/Facebook';
+import FiltersSvg from '../../assets/svg/Filters';
+import GithubSvg from '../../assets/svg/Github';
+import GoogleSvg from '../../assets/svg/Google';
+import HelpCircleSvg from '../../assets/svg/HelpCircle';
+import InfoCircleSvg from '../../assets/svg/InfoCircle';
+import MailSvg from '../../assets/svg/Mail';
+import MobileSvg from '../../assets/svg/Mobile';
+import NetworkPlaceholderSvg from '../../assets/svg/NetworkPlaceholder';
+import NftPlaceholderSvg from '../../assets/svg/NftPlaceholder';
+import OffSvg from '../../assets/svg/Off';
+import QrCodeSvg from '../../assets/svg/QrCode';
+import RefreshSvg from '../../assets/svg/Refresh';
+import SearchSvg from '../../assets/svg/Search';
+import SwapHorizontalSvg from '../../assets/svg/SwapHorizontal';
+import SwapVerticalSvg from '../../assets/svg/SwapVertical';
+import TelegramSvg from '../../assets/svg/Telegram';
+import TwitterSvg from '../../assets/svg/Twitter';
+import VerifySvg from '../../assets/svg/Verify';
+import WalletConnectSvg from '../../assets/svg/WalletConnect';
+import WalletSvg from '../../assets/svg/Wallet';
+import WalletSmallSvg from '../../assets/svg/WalletSmall';
+import WarningCircleSvg from '../../assets/svg/WarningCircle';
+import TwitchSvg from '../../assets/svg/Twitch';
+import TwitterIconSvg from '../../assets/svg/TwitterIcon';
+import WalletPlaceholderSvg from '../../assets/svg/WalletPlaceholder';
+import { useTheme } from '../../hooks/useTheme';
+import { IconSize } from '../../utils/ThemeUtil';
+
+const svgOptions: Record<IconType, (props: SvgProps) => JSX.Element> = {
+  allWallets: AllWalletsSvg,
+  apple: AppleSvg,
+  arrowBottom: ArrowBottomSvg,
+  arrowLeft: ArrowLeftSvg,
+  arrowRight: ArrowRightSvg,
+  arrowTop: ArrowTopSvg,
+  browser: BrowserSvg,
+  checkmark: CheckmarkSvg,
+  chevronBottom: ChevronBottomSvg,
+  chevronLeft: ChevronLeftSvg,
+  chevronRight: ChevronRightSvg,
+  chevronRightSmall: ChevronRightSmallSvg,
+  chevronTop: ChevronTopSvg,
+  clock: ClockSvg,
+  close: CloseSvg,
+  compass: CompassSvg,
+  coinPlaceholder: CoinPlaceholderSvg,
+  copy: CopySvg,
+  copySmall: CopySmallSvg,
+  cursor: CursorSvg,
+  desktop: DesktopSvg,
+  disconnect: DisconnectSvg,
+  discord: DiscordSvg,
+  etherscan: EtherscanSvg,
+  extension: ExtensionSvg,
+  externalLink: ExternalLinkSvg,
+  facebook: FacebookSvg,
+  filters: FiltersSvg,
+  github: GithubSvg,
+  google: GoogleSvg,
+  helpCircle: HelpCircleSvg,
+  infoCircle: InfoCircleSvg,
+  mail: MailSvg,
+  mobile: MobileSvg,
+  networkPlaceholder: NetworkPlaceholderSvg,
+  nftPlaceholder: NftPlaceholderSvg,
+  off: OffSvg,
+  qrCode: QrCodeSvg,
+  refresh: RefreshSvg,
+  search: SearchSvg,
+  swapHorizontal: SwapHorizontalSvg,
+  swapVertical: SwapVerticalSvg,
+  telegram: TelegramSvg,
+  twitch: TwitchSvg,
+  twitter: TwitterSvg,
+  twitterIcon: TwitterIconSvg,
+  verify: VerifySvg,
+  wallet: WalletSvg,
+  walletSmall: WalletSmallSvg,
+  warningCircle: WarningCircleSvg,
+  walletConnect: WalletConnectSvg,
+  walletPlaceholder: WalletPlaceholderSvg
+};
+
+export type IconProps = SvgProps & {
+  name: IconType;
+  size?: Exclude<SizeType, 'xl'>;
+  color?: ColorType;
+  style?: SvgProps['style'];
+};
+
+export function Icon({
+  name,
+  width,
+  height,
+  color = 'fg-100',
+  size = 'md',
+  style,
+  ...rest
+}: IconProps) {
+  const Theme = useTheme();
+  const Component = svgOptions[name];
+
+  return (
+    <Component
+      fill={Theme[color as ThemeKeys]}
+      width={width || IconSize[size]}
+      height={height || IconSize[size]}
+      style={style}
+      {...rest}
+    />
+  );
+}

package/src/components/wui-image/index.tsx

@@ -0,0 +1,38 @@
+import { useRef } from 'react';
+import {
+  Animated,
+  Image as NativeImage,
+  type ImageProps as NativeProps,
+  Platform
+} from 'react-native';
+import styles from './styles';
+
+export type ImageProps = Omit<NativeProps, 'source'> & {
+  source: string;
+  headers?: Record<string, string>;
+};
+
+export function Image({ source, headers, style, ...rest }: ImageProps) {
+  const opacity = useRef(new Animated.Value(0));
+  const isIos = Platform.OS === 'ios';
+
+  // Fade in image on load for iOS. Android does this by default.
+  const onLoadEnd = () => {
+    Animated.timing(opacity.current, {
+      toValue: 1,
+      duration: 150,
+      useNativeDriver: true
+    }).start();
+  };
+
+  return isIos ? (
+    <Animated.Image
+      source={{ uri: source, headers }}
+      onLoadEnd={onLoadEnd}
+      style={[styles.image, { opacity: opacity.current }, style]}
+      {...rest}
+    />
+  ) : (
+    <NativeImage source={{ uri: source, headers }} style={[styles.image, style]} {...rest} />
+  );
+}

package/src/components/wui-image/styles.ts

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

package/src/components/wui-loading-hexagon/index.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Path, Use } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+import styles from './styles';
+
+const AnimatedUse = Animated.createAnimatedComponent(Use);
+
+export interface LoadingHexagonProps {
+  children?: ReactNode;
+  paused?: boolean;
+}
+
+export function LoadingHexagon({ children, paused }: LoadingHexagonProps) {
+  const Theme = useTheme();
+  const spinValue = useRef(new Animated.Value(0));
+
+  useEffect(() => {
+    const animation = Animated.timing(spinValue.current, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true,
+      easing: Easing.linear
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, [spinValue]);
+
+  const spin = spinValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -172]
+  });
+
+  return (
+    <View style={styles.container}>
+      <Svg width={120} height={120} viewBox="0 0 54 59" style={styles.loader} fill="none">
+        <Path
+          id="wui-loader-path"
+          d="M17.22 5.295c3.877-2.277 5.737-3.363 7.72-3.726a11.44 11.44 0 0 1 4.12 0c1.983.363 3.844 1.45 7.72 3.726l6.065 3.562c3.876 2.276 5.731 3.372 7.032 4.938a11.896 11.896 0 0 1 2.06 3.63c.683 1.928.688 4.11.688 8.663v7.124c0 4.553-.005 6.735-.688 8.664a11.896 11.896 0 0 1-2.06 3.63c-1.3 1.565-3.156 2.66-7.032 4.937l-6.065 3.563c-3.877 2.276-5.737 3.362-7.72 3.725a11.46 11.46 0 0 1-4.12 0c-1.983-.363-3.844-1.449-7.72-3.726l-6.065-3.562c-3.876-2.276-5.731-3.372-7.032-4.938a11.885 11.885 0 0 1-2.06-3.63c-.682-1.928-.688-4.11-.688-8.663v-7.124c0-4.553.006-6.735.688-8.664a11.885 11.885 0 0 1 2.06-3.63c1.3-1.565 3.156-2.66 7.032-4.937l6.065-3.562Z"
+        />
+        <AnimatedUse
+          stroke={paused ? 'transparent' : Theme['accent-100']}
+          strokeDasharray="54, 118"
+          strokeWidth={2}
+          strokeDashoffset={spin}
+          xlinkHref="#wui-loader-path"
+          strokeLinejoin="round"
+          strokeLinecap="round"
+        />
+      </Svg>
+      {children ?? null}
+    </View>
+  );
+}

package/src/components/wui-loading-hexagon/styles.ts

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    height: 120,
+    width: 120,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loader: {
+    position: 'absolute'
+  }
+});

package/src/components/wui-loading-spinner/index.tsx

@@ -0,0 +1,63 @@
+import { useEffect, useRef } from 'react';
+import { Animated, Easing, View, type StyleProp, type ViewStyle } from 'react-native';
+import Svg, { Circle } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+import { SpinnerSize } from '../../utils/ThemeUtil';
+import type { ColorType, SizeType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+const AnimatedSvg = Animated.createAnimatedComponent(Svg);
+
+export interface LoadingSpinnerProps {
+  size?: Exclude<SizeType, 'xs' | 'xxs'>;
+  color?: Exclude<ColorType, 'error-100' | 'fg-300' | 'success-100'>;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function LoadingSpinner({ color, style, size = 'lg' }: LoadingSpinnerProps) {
+  const Theme = useTheme();
+  const spinValue = useRef(new Animated.Value(0));
+  const stroke = color ? Theme[color] : Theme['accent-100'];
+
+  useEffect(() => {
+    const animation = Animated.timing(spinValue.current, {
+      toValue: 1,
+      duration: 800,
+      useNativeDriver: true,
+      easing: Easing.linear
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, [spinValue]);
+
+  const spin = spinValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+
+  return (
+    <View style={[styles.container, style]}>
+      <AnimatedSvg
+        width={SpinnerSize[size]}
+        height={SpinnerSize[size]}
+        viewBox="25 25 50 50"
+        style={{ transform: [{ rotate: spin }] }}
+      >
+        <Circle
+          r={20}
+          cy={50}
+          cx={50}
+          stroke={stroke}
+          strokeWidth={4}
+          fill="transparent"
+          strokeDasharray={`90 124`}
+        />
+      </AnimatedSvg>
+    </View>
+  );
+}

package/src/components/wui-loading-spinner/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/src/components/wui-loading-thumbnail/index.tsx

@@ -0,0 +1,72 @@
+import { useEffect, useRef, type ReactNode } from 'react';
+import { Animated, Easing, View } from 'react-native';
+import Svg, { Rect } from 'react-native-svg';
+import { useTheme } from '../../hooks/useTheme';
+import { BorderRadius, Spacing, WalletImageSize } from '../../utils/ThemeUtil';
+import styles from './styles';
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+export interface LoadingThumbnailProps {
+  children?: ReactNode;
+  paused?: boolean;
+  borderRadius?: number;
+}
+
+export function LoadingThumbnail({
+  children,
+  paused,
+  borderRadius = BorderRadius.l
+}: LoadingThumbnailProps) {
+  const Theme = useTheme();
+  const spinValue = useRef(new Animated.Value(0));
+  const strokeWidth = 4;
+  const rectangleSize = WalletImageSize.xl + Spacing.l;
+  const outerContainerSize = rectangleSize + strokeWidth;
+
+  useEffect(() => {
+    const animation = Animated.timing(spinValue.current, {
+      toValue: 1,
+      duration: 1000,
+      useNativeDriver: true,
+      easing: Easing.linear
+    });
+
+    const loop = Animated.loop(animation);
+    loop.start();
+
+    return () => {
+      loop.stop();
+    };
+  }, [spinValue]);
+
+  // Calculate one side of the Rectangle with borders
+  const sideLength = rectangleSize - borderRadius * 2 + (Math.PI * borderRadius) / 2;
+
+  const spin = spinValue.current.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -sideLength * 4]
+  });
+
+  return (
+    <View style={[styles.container, { height: outerContainerSize, width: outerContainerSize }]}>
+      <Svg width={outerContainerSize} height={outerContainerSize} style={styles.loader}>
+        <AnimatedRect
+          height={rectangleSize}
+          width={rectangleSize}
+          stroke={paused ? 'transparent' : Theme['accent-100']}
+          strokeWidth={strokeWidth}
+          x={strokeWidth / 2}
+          y={strokeWidth / 2}
+          rx={borderRadius}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          fill="transparent"
+          strokeDasharray={`${sideLength} ${sideLength * 3}`}
+          strokeDashoffset={spin}
+        />
+      </Svg>
+      {children ?? null}
+    </View>
+  );
+}

package/src/components/wui-loading-thumbnail/styles.ts

@@ -0,0 +1,11 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  loader: {
+    position: 'absolute'
+  }
+});

package/src/components/wui-shimmer/index.tsx

@@ -0,0 +1,59 @@
+import { Svg, Rect } from 'react-native-svg';
+import { Animated, type StyleProp, type ViewStyle } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+
+const AnimatedRect = Animated.createAnimatedComponent(Rect);
+
+export interface ShimmerProps {
+  width?: number;
+  height?: number;
+  duration?: number;
+  borderRadius?: number;
+  backgroundColor?: string;
+  foregroundColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+export const Shimmer = ({
+  width = 200,
+  height = 200,
+  duration = 1000,
+  borderRadius = 0,
+  backgroundColor,
+  foregroundColor,
+  style
+}: ShimmerProps) => {
+  const animatedValue = new Animated.Value(0);
+  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']
+      ]
+    }),
+    width,
+    height,
+    x: 0,
+    y: 0,
+    rx: borderRadius,
+    ry: borderRadius
+  };
+
+  Animated.loop(
+    Animated.timing(animatedValue, {
+      toValue: 1,
+      duration,
+      useNativeDriver: false
+    })
+  ).start();
+
+  return (
+    <Svg width={width} height={height} style={style}>
+      <AnimatedRect {...animatedProps} />
+    </Svg>
+  );
+};

package/src/components/wui-text/index.tsx

@@ -0,0 +1,36 @@
+import { Text as NativeText, type TextProps as NativeProps } from 'react-native';
+import { useTheme } from '../../hooks/useTheme';
+import type { ColorType, TextType } from '../../utils/TypesUtil';
+import styles from './styles';
+
+export type TextProps = NativeProps & {
+  color?: ColorType;
+  variant?: TextType;
+  center?: boolean;
+};
+
+export function Text({
+  children,
+  style,
+  center,
+  color = 'fg-100',
+  variant = 'paragraph-500',
+  ...rest
+}: TextProps) {
+  const Theme = useTheme();
+
+  return (
+    <NativeText
+      style={[
+        styles.base,
+        styles[variant],
+        center && styles.center,
+        color && { color: Theme[color as keyof typeof Theme] },
+        style
+      ]}
+      {...rest}
+    >
+      {children}
+    </NativeText>
+  );
+}

package/src/components/wui-text/styles.ts

@@ -0,0 +1,104 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  'base': {
+    letterSpacing: -0.4
+  },
+  'medium-title-400': {
+    fontSize: 24,
+    fontWeight: '400'
+  },
+  'medium-title-500': {
+    fontSize: 24,
+    fontWeight: '500'
+  },
+  'medium-title-600': {
+    fontSize: 24,
+    fontWeight: '600'
+  },
+  'small-title-400': {
+    fontSize: 22,
+    fontWeight: '400'
+  },
+  'small-title-500': {
+    fontSize: 22,
+    fontWeight: '500'
+  },
+  'small-title-600': {
+    fontSize: 22,
+    fontWeight: '600'
+  },
+  'large-400': {
+    fontSize: 20,
+    fontWeight: '400'
+  },
+  'large-500': {
+    fontSize: 20,
+    fontWeight: '500'
+  },
+  'large-600': {
+    fontSize: 20,
+    fontWeight: '600'
+  },
+  'medium-400': {
+    fontSize: 18,
+    fontWeight: '400'
+  },
+  'medium-500': {
+    fontSize: 18,
+    fontWeight: '500'
+  },
+  'medium-600': {
+    fontSize: 18,
+    fontWeight: '600'
+  },
+  'paragraph-400': {
+    fontSize: 16,
+    fontWeight: '400'
+  },
+  'paragraph-500': {
+    fontSize: 16,
+    fontWeight: '500'
+  },
+  'paragraph-600': {
+    fontSize: 16,
+    fontWeight: '600'
+  },
+  'small-400': {
+    fontSize: 14,
+    fontWeight: '400'
+  },
+  'small-500': {
+    fontSize: 14,
+    fontWeight: '500'
+  },
+  'small-600': {
+    fontSize: 14,
+    fontWeight: '600'
+  },
+  'tiny-400': {
+    fontSize: 12,
+    fontWeight: '400'
+  },
+  'tiny-500': {
+    fontSize: 12,
+    fontWeight: '500'
+  },
+  'tiny-600': {
+    fontSize: 12,
+    fontWeight: '600'
+  },
+  'micro-600': {
+    fontSize: 10,
+    fontWeight: '600',
+    letterSpacing: 0.2
+  },
+  'micro-700': {
+    fontSize: 10,
+    fontWeight: '700',
+    letterSpacing: 0.2
+  },
+  'center': {
+    textAlign: 'center'
+  }
+});

package/src/components/wui-visual/index.tsx

@@ -0,0 +1,43 @@
+import type { SvgProps } from 'react-native-svg';
+
+import BrowserSvg from '../../assets/visual/Browser';
+import DaoSvg from '../../assets/visual/Dao';
+import DefiSvg from '../../assets/visual/Defi';
+import DefiAltSvg from '../../assets/visual/DefiAlt';
+import EthSvg from '../../assets/visual/Eth';
+import LayersSvg from '../../assets/visual/Layers';
+import LockSvg from '../../assets/visual/Lock';
+import LoginSvg from '../../assets/visual/Login';
+import NetworkSvg from '../../assets/visual/Network';
+import NftSvg from '../../assets/visual/Nft';
+import NounSvg from '../../assets/visual/Noun';
+import ProfileSvg from '../../assets/visual/Profile';
+import SystemSvg from '../../assets/visual/System';
+import type { VisualType } from '../../utils/TypesUtil';
+
+const svgOptions: Record<VisualType, (props: SvgProps) => JSX.Element> = {
+  browser: BrowserSvg,
+  dao: DaoSvg,
+  defi: DefiSvg,
+  defiAlt: DefiAltSvg,
+  eth: EthSvg,
+  layers: LayersSvg,
+  lock: LockSvg,
+  login: LoginSvg,
+  network: NetworkSvg,
+  nft: NftSvg,
+  noun: NounSvg,
+  profile: ProfileSvg,
+  system: SystemSvg
+};
+
+export interface VisualProps {
+  name: VisualType;
+  style?: SvgProps['style'];
+}
+
+export function Visual({ name, style }: VisualProps) {
+  const Component = svgOptions[name];
+
+  return <Component width={60} height={60} style={style} />;
+}