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

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, type KeyboardEventListener, type KeyboardMetrics } from 'react-native';
+
+const emptyCoordinates = Object.freeze({
+  screenX: 0,
+  screenY: 0,
+  width: 0,
+  height: 0
+});
+const initialValue = {
+  start: emptyCoordinates,
+  end: emptyCoordinates
+};
+
+export function useKeyboard() {
+  const [shown, setShown] = useState(false);
+  const [coordinates, setCoordinates] = useState<{
+    start: undefined | KeyboardMetrics;
+    end: KeyboardMetrics;
+  }>(initialValue);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+
+  const handleKeyboardWillShow: KeyboardEventListener = e => {
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+  };
+  const handleKeyboardDidShow: KeyboardEventListener = e => {
+    setShown(true);
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+    setKeyboardHeight(e.endCoordinates.height);
+  };
+  const handleKeyboardWillHide: KeyboardEventListener = e => {
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+  };
+  const handleKeyboardDidHide: KeyboardEventListener = e => {
+    setShown(false);
+    if (e) {
+      setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+    } else {
+      setCoordinates(initialValue);
+      setKeyboardHeight(0);
+    }
+  };
+
+  useEffect(() => {
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
+      Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
+      Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
+      Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide)
+    ];
+
+    return () => {
+      subscriptions.forEach(subscription => subscription.remove());
+    };
+  }, []);
+
+  return {
+    keyboardShown: shown,
+    coordinates,
+    keyboardHeight
+  };
+}

package/src/hooks/useProvider.ts

@@ -0,0 +1,61 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ConnectionsController, LogController } from '@reown/appkit-core-react-native';
+import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
+
+/**
+ * Interface representing the result of the useProvider hook
+ */
+interface ProviderResult {
+  /** The active connection provider instance */
+  provider?: Provider;
+  /** The chain namespace supported by the provider */
+  providerType?: ChainNamespace;
+}
+
+/**
+ * Hook that returns the active connection provider and its supported chain namespace.
+ *
+ * This hook accesses the current connection and returns the provider instance along with its supported namespace.
+ *
+ * @returns {ProviderResult} An object containing:
+ *   - `provider`: The active connection provider instance, or undefined if no connection exists
+ *   - `providerType`: The chain namespace supported by the provider, or undefined if no connection exists
+ *
+ * @example
+ * ```typescript
+ * const { provider, providerType } = useProvider();
+ *
+ * if (provider) {
+ *   // Use the provider for blockchain operations
+ *   const balance = await provider.request({
+ *     method: 'eth_getBalance',
+ *     params: [address, 'latest']
+ *   });
+ * }
+ * ```
+ */
+export function useProvider(): ProviderResult {
+  const { connection } = useSnapshot(ConnectionsController.state);
+
+  const returnValue = useMemo(() => {
+    if (!connection || !connection.adapter) {
+      return { provider: undefined, providerType: undefined };
+    }
+
+    try {
+      return {
+        provider: connection.adapter.getProvider(),
+        providerType: connection.adapter.getSupportedNamespace()
+      };
+    } catch (error) {
+      LogController.sendError(error, 'useProvider', 'useProvider');
+
+      // Provider not initialized yet during session restoration
+      return { provider: undefined, providerType: undefined };
+    }
+  }, [connection]);
+
+  return returnValue;
+}

package/src/hooks/useRouteTransition.ts

@@ -0,0 +1,102 @@
+import { useCallback, useRef, useEffect } from 'react';
+import { Animated, Dimensions } from 'react-native';
+
+const { width: screenWidth } = Dimensions.get('window');
+
+export interface RouteTransitionConfig {
+  duration?: number;
+  useNativeDriver?: boolean;
+}
+
+export function useRouteTransition(config: RouteTransitionConfig = {}) {
+  const { duration = 300, useNativeDriver = true } = config;
+
+  const fadeAnim = useRef(new Animated.Value(1)).current;
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const isAnimating = useRef(false);
+  const currentAnimation = useRef<Animated.CompositeAnimation | null>(null);
+
+  const animateTransition = useCallback(
+    (direction: 'forward' | 'backward' | 'none') => {
+      if (isAnimating.current || direction === 'none') {
+        return Promise.resolve();
+      }
+
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+      }
+
+      isAnimating.current = true;
+
+      return new Promise<void>(resolve => {
+        const startPosition =
+          direction === 'forward'
+            ? screenWidth * 0.02 // Start from right for forward
+            : -screenWidth * 0.02; // Start from left for backward
+
+        // Immediately set starting position and fade out
+        fadeAnim.setValue(0);
+        slideAnim.setValue(startPosition);
+
+        // Animate to final position with fade in
+        const animation = Animated.parallel([
+          Animated.timing(fadeAnim, {
+            toValue: 1,
+            duration,
+            useNativeDriver
+          }),
+          Animated.timing(slideAnim, {
+            toValue: 0, // Slide to center
+            duration,
+            useNativeDriver
+          })
+        ]);
+
+        currentAnimation.current = animation;
+
+        animation.start(({ finished }) => {
+          // Always clean up and resolve, even if the animation was interrupted
+          // Android often reports finished=false when interrupted, which otherwise
+          // would leave the view stuck at opacity 0 and block future animations.
+          if (!finished) {
+            // Ensure we end in the expected target state
+            fadeAnim.setValue(1);
+            slideAnim.setValue(0);
+          }
+
+          isAnimating.current = false;
+          currentAnimation.current = null;
+          resolve();
+        });
+      });
+    },
+    [fadeAnim, slideAnim, duration, useNativeDriver]
+  );
+
+  const getAnimatedStyle = useCallback(
+    () => ({
+      opacity: fadeAnim,
+      transform: [{ translateX: slideAnim }]
+    }),
+    [fadeAnim, slideAnim]
+  );
+
+  useEffect(() => {
+    fadeAnim.setValue(1);
+    slideAnim.setValue(0);
+
+    return () => {
+      if (currentAnimation.current) {
+        currentAnimation.current.stop();
+        currentAnimation.current = null;
+      }
+      isAnimating.current = false;
+    };
+  }, [fadeAnim, slideAnim]);
+
+  return {
+    animateTransition,
+    getAnimatedStyle,
+    isAnimating: isAnimating.current
+  };
+}

package/src/hooks/useTimeout.ts

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+function useTimeout(delay: number) {
+  const timeLeftRef = useRef(delay);
+  const [timeLeft, setTimeLeft] = useState(delay);
+  const interval = useRef<NodeJS.Timer>();
+
+  const startTimer = useCallback((newDelay: number) => {
+    timeLeftRef.current = newDelay;
+    setTimeLeft(newDelay);
+    interval.current = setInterval(() => {
+      if (timeLeftRef.current > 0) {
+        timeLeftRef.current -= 1;
+        setTimeLeft(timeLeftRef.current);
+      } else {
+        if (typeof interval.current === 'number') {
+          clearInterval(interval.current);
+        }
+      }
+    }, 1000);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (typeof interval.current === 'number') {
+        clearInterval(interval.current);
+      }
+    };
+  }, [interval]);
+
+  return { timeLeft, startTimer };
+}
+
+export default useTimeout;

package/src/hooks/useWalletInfo.ts

@@ -0,0 +1,13 @@
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useWalletInfo() {
+  useAppKit(); // Use the hook for checks
+  const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
+
+  const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);
+
+  return walletInfo;
+}

package/src/index.ts

@@ -0,0 +1,49 @@
+import '@walletconnect/react-native-compat';
+
+/********** Components **********/
+export {
+  AccountButton as AccountButton,
+  type AccountButtonProps
+} from './modal/w3m-account-button';
+export { AppKitButton, type AppKitButtonProps } from './modal/w3m-button';
+export {
+  ConnectButton as ConnectButton,
+  type ConnectButtonProps as ConnectButtonProps
+} from './modal/w3m-connect-button';
+export {
+  NetworkButton as NetworkButton,
+  type NetworkButtonProps as NetworkButtonProps
+} from './modal/w3m-network-button';
+export { AppKit } from './modal/w3m-modal';
+
+/********** Types **********/
+export type * from '@reown/appkit-core-react-native';
+export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
+export type {
+  SIWXConfig,
+  SIWXMessage,
+  SIWXSession,
+  SIWXStorage,
+  SIWXVerifier
+} from '@reown/appkit-common-react-native';
+export type { AppKitConfig } from './types';
+
+/****** Hooks *******/
+export { useAppKit } from './hooks/useAppKit';
+export { useProvider } from './hooks/useProvider';
+export { useAccount } from './hooks/useAccount';
+export { useWalletInfo } from './hooks/useWalletInfo';
+export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
+export { useAppKitState } from './hooks/useAppKitState';
+export { useAppKitLogs, type UseAppKitLogsReturn } from './hooks/useAppKitLogs';
+
+/********** Networks **********/
+export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';
+export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';
+
+/********** SIWX **********/
+export { ReownAuthentication } from '@reown/appkit-core-react-native';
+
+/********** Main **********/
+export { createAppKit } from './AppKit';
+export { AppKitProvider } from './AppKitContext';

package/src/modal/w3m-account-button/index.tsx

@@ -0,0 +1,52 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  CoreHelperUtil,
+  ModalController,
+  ThemeController,
+  ConnectionsController,
+  AssetController,
+  AssetUtil
+} from '@reown/appkit-core-react-native';
+import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
+
+export interface AccountButtonProps {
+  balance?: 'show' | 'hide';
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const {
+    activeAddress: address,
+    activeBalance,
+    activeNetwork,
+    identity
+  } = useSnapshot(ConnectionsController.state);
+
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
+  const showBalance = balance === 'show';
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <AccountButtonUI
+        onPress={() => ModalController.open()}
+        address={address?.split(':')[2] ?? ''}
+        profileName={identity?.name}
+        networkSrc={networkImage}
+        avatarSrc={identity?.avatar}
+        disabled={disabled}
+        style={style}
+        balance={
+          showBalance
+            ? CoreHelperUtil.formatBalance(activeBalance?.amount, activeBalance?.symbol)
+            : ''
+        }
+        testID={testID}
+      />
+    </ThemeProvider>
+  );
+}

package/src/modal/w3m-button/index.tsx

@@ -0,0 +1,45 @@
+import { useSnapshot } from 'valtio';
+import { AccountButton, type AccountButtonProps } from '../w3m-account-button';
+import { ConnectButton, type ConnectButtonProps } from '../w3m-connect-button';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
+
+export interface AppKitButtonProps {
+  balance?: AccountButtonProps['balance'];
+  disabled?: AccountButtonProps['disabled'];
+  size?: ConnectButtonProps['size'];
+  label?: ConnectButtonProps['label'];
+  loadingLabel?: ConnectButtonProps['loadingLabel'];
+  accountStyle?: AccountButtonProps['style'];
+  connectStyle?: ConnectButtonProps['style'];
+}
+
+export function AppKitButton({
+  balance,
+  disabled,
+  size,
+  label = 'Connect',
+  loadingLabel = 'Connecting',
+  accountStyle,
+  connectStyle
+}: AppKitButtonProps) {
+  const { isConnected } = useSnapshot(ConnectionsController.state);
+  const { loading } = useSnapshot(ModalController.state);
+
+  return !loading && isConnected ? (
+    <AccountButton
+      style={accountStyle}
+      balance={balance}
+      disabled={disabled}
+      testID="account-button"
+    />
+  ) : (
+    <ConnectButton
+      style={connectStyle}
+      size={size}
+      label={label}
+      loadingLabel={loadingLabel}
+      disabled={disabled}
+      testID="connect-button"
+    />
+  );
+}

package/src/modal/w3m-connect-button/index.tsx

@@ -0,0 +1,43 @@
+import { useSnapshot } from 'valtio';
+import { ModalController, ThemeController } from '@reown/appkit-core-react-native';
+import {
+  ConnectButton as ConnectButtonUI,
+  ThemeProvider,
+  type ConnectButtonProps as ConnectButtonUIProps
+} from '@reown/appkit-ui-react-native';
+
+export interface ConnectButtonProps {
+  label: string;
+  loadingLabel: string;
+  size?: ConnectButtonUIProps['size'];
+  style?: ConnectButtonUIProps['style'];
+  disabled?: ConnectButtonUIProps['disabled'];
+  testID?: string;
+}
+
+export function ConnectButton({
+  label,
+  loadingLabel,
+  size = 'md',
+  style,
+  disabled,
+  testID
+}: ConnectButtonProps) {
+  const { open, loading } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <ConnectButtonUI
+        onPress={() => ModalController.open()}
+        size={size}
+        loading={loading || open}
+        style={style}
+        testID={testID}
+        disabled={disabled}
+      >
+        {loading || open ? loadingLabel : label}
+      </ConnectButtonUI>
+    </ThemeProvider>
+  );
+}

package/src/modal/w3m-modal/index.tsx

@@ -0,0 +1,74 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect } from 'react';
+import { useColorScheme } from 'react-native';
+import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
+import {
+  ApiController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  ThemeController
+} from '@reown/appkit-core-react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { AppKitRouter } from '../w3m-router';
+import { Header } from '../../partials/w3m-header';
+import { Snackbar } from '../../partials/w3m-snackbar';
+import { useInternalAppKit } from '../../AppKitContext';
+import styles from './styles';
+
+export function AppKit() {
+  const theme = useColorScheme();
+  const { bottom, top } = useSafeAreaInsets();
+  const { close } = useInternalAppKit();
+  const { open } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables, defaultThemeMode } = useSnapshot(ThemeController.state);
+  const { projectId } = useSnapshot(OptionsController.state);
+
+  const handleBackPress = () => {
+    if (RouterController.state.history.length > 1) {
+      return RouterController.goBack();
+    }
+
+    return handleModalClose();
+  };
+
+  useEffect(() => {
+    if (theme && !defaultThemeMode) {
+      ThemeController.setThemeMode(theme);
+    }
+  }, [theme, defaultThemeMode]);
+
+  const prefetch = useCallback(async () => {
+    await ApiController.prefetch();
+    EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
+  }, []);
+
+  const handleModalClose = async () => {
+    await close();
+  };
+
+  useEffect(() => {
+    if (projectId) {
+      prefetch();
+    }
+  }, [projectId, prefetch]);
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <Modal
+        visible={open}
+        onRequestClose={handleBackPress}
+        onBackdropPress={handleModalClose}
+        testID="w3m-modal"
+      >
+        <Card style={[styles.card, { paddingBottom: bottom, marginTop: top }]}>
+          <Header />
+          <AppKitRouter />
+          <Snackbar />
+        </Card>
+      </Modal>
+    </ThemeProvider>
+  );
+}

package/src/modal/w3m-modal/styles.ts

@@ -0,0 +1,8 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  card: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0
+  }
+});

package/src/modal/w3m-network-button/index.tsx

@@ -0,0 +1,53 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  ApiController,
+  AssetController,
+  AssetUtil,
+  ConnectionsController,
+  EventsController,
+  ModalController,
+  OptionsController,
+  ThemeController
+} from '@reown/appkit-core-react-native';
+import { NetworkButton as NetworkButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
+
+export interface NetworkButtonProps {
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+}
+
+export function NetworkButton({ disabled, style }: NetworkButtonProps) {
+  const { activeNetwork, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { defaultNetwork } = useSnapshot(OptionsController.state);
+  const { loading } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  const network = isConnected ? activeNetwork : defaultNetwork;
+  const networkImage = AssetUtil.getNetworkImage(network, networkImages);
+
+  const onNetworkPress = () => {
+    ModalController.open({ view: 'Networks' });
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
+  };
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <NetworkButtonUI
+        imageSrc={networkImage}
+        imageHeaders={ApiController._getApiHeaders()}
+        disabled={disabled || loading}
+        style={style}
+        onPress={onNetworkPress}
+        loading={loading}
+        testID="network-button"
+      >
+        {network?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
+      </NetworkButtonUI>
+    </ThemeProvider>
+  );
+}