@reown/appkit-react-native 0.0.0-feat-multichain-20250513175016

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,15 @@
+import { useSnapshot } from 'valtio';
+import { ConnectionsController } from '@reown/appkit-core-react-native';
+import type { Provider } from '@reown/appkit-common-react-native';
+
+export function useProvider(namespace?: string): Provider | undefined {
+  const { connections, activeNamespace } = useSnapshot(ConnectionsController.state);
+
+  if (!namespace || !activeNamespace) return undefined;
+
+  const connection = connections[namespace ?? activeNamespace];
+
+  if (!connection) return undefined;
+
+  return connection.adapter.connector?.getProvider();
+}

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 { useSnapshot } from 'valtio';
+import { ConnectionsController, OptionsController } from '@reown/appkit-core-react-native';
+
+export function useWalletInfo() {
+  const { projectId } = useSnapshot(OptionsController.state);
+  const { walletInfo } = useSnapshot(ConnectionsController.state);
+
+  if (!projectId) {
+    throw new Error('Please call "createAppKit" before using "useWalletInfo" hook');
+  }
+
+  return { walletInfo };
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+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';
+export { AppKitRouter } from './modal/w3m-router';
+
+export { AppKitScaffold } from './client';
+export type { LibraryOptions, ScaffoldOptions } from './client';
+
+export type * from '@reown/appkit-core-react-native';
+export { CoreHelperUtil } from '@reown/appkit-core-react-native';
+
+export * from './AppKit';
+export * from './networks';
+export { AppKitProvider } from './AppKitContext';
+export { WalletConnectConnector } from './connectors/WalletConnectConnector';
+
+/****** 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';

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

@@ -0,0 +1,54 @@
+import { useSnapshot } from 'valtio';
+import {
+  AccountController,
+  CoreHelperUtil,
+  ModalController,
+  AssetUtil,
+  ThemeController,
+  ConnectionsController
+} from '@reown/appkit-core-react-native';
+
+import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
+import { ApiController } from '@reown/appkit-core-react-native';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+export interface AccountButtonProps {
+  balance?: 'show' | 'hide';
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
+  const { profileImage, profileName } = useSnapshot(AccountController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const {
+    activeAddress: address,
+    activeBalance,
+    activeNetwork
+  } = useSnapshot(ConnectionsController.state);
+
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const showBalance = balance === 'show';
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <AccountButtonUI
+        onPress={() => ModalController.open()}
+        address={address?.split(':')[2] ?? ''}
+        profileName={profileName}
+        networkSrc={networkImage}
+        imageHeaders={ApiController._getApiHeaders()}
+        avatarSrc={profileImage}
+        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 { AccountController, 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(AccountController.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,157 @@
+import { useSnapshot } from 'valtio';
+import { useCallback, useEffect } from 'react';
+import { useWindowDimensions, StatusBar } from 'react-native';
+import Modal from 'react-native-modal';
+import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
+import {
+  AccountController,
+  ApiController,
+  ConnectionController,
+  ConnectorController,
+  CoreHelperUtil,
+  EventsController,
+  ModalController,
+  OptionsController,
+  RouterController,
+  TransactionsController,
+  type AppKitFrameProvider,
+  WebviewController,
+  ThemeController
+} from '@reown/appkit-core-react-native';
+import type { CaipAddress } from '@reown/appkit-common-react-native';
+import { SIWEController } from '@reown/appkit-siwe-react-native';
+
+import { AppKitRouter } from '../w3m-router';
+import { Header } from '../../partials/w3m-header';
+import { Snackbar } from '../../partials/w3m-snackbar';
+import { useCustomDimensions } from '../../hooks/useCustomDimensions';
+import styles from './styles';
+
+export function AppKit() {
+  const { open, loading } = useSnapshot(ModalController.state);
+  const { connectors, connectedConnector } = useSnapshot(ConnectorController.state);
+  const { caipAddress, isConnected } = useSnapshot(AccountController.state);
+  const { frameViewVisible, webviewVisible } = useSnapshot(WebviewController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { height } = useWindowDimensions();
+  const { isLandscape } = useCustomDimensions();
+  const portraitHeight = height - 80;
+  const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
+  const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;
+  const AuthView = authProvider?.AuthView;
+  const SocialView = authProvider?.Webview;
+  const showAuth = !connectedConnector || connectedConnector === 'AUTH';
+
+  const onBackButtonPress = () => {
+    if (RouterController.state.history.length > 1) {
+      return RouterController.goBack();
+    }
+
+    return handleClose();
+  };
+
+  const prefetch = async () => {
+    await ApiController.prefetch();
+    EventsController.sendEvent({ type: 'track', event: 'MODAL_LOADED' });
+  };
+
+  const handleClose = async () => {
+    if (OptionsController.state.isSiweEnabled) {
+      if (SIWEController.state.status !== 'success' && AccountController.state.isConnected) {
+        await ConnectionController.disconnect();
+      }
+    }
+
+    if (
+      RouterController.state.view === 'OnRampLoading' &&
+      EventsController.state.data.event === 'BUY_SUBMITTED'
+    ) {
+      // Send event only if the onramp url was already created
+      EventsController.sendEvent({ type: 'track', event: 'BUY_CANCEL' });
+    }
+  };
+
+  const onNewAddress = useCallback(
+    async (address?: CaipAddress) => {
+      if (!isConnected || loading) {
+        return;
+      }
+
+      const newAddress = CoreHelperUtil.getPlainAddress(address);
+      TransactionsController.resetTransactions();
+
+      if (OptionsController.state.isSiweEnabled) {
+        const newNetworkId = CoreHelperUtil.getNetworkId(address);
+
+        const { signOutOnAccountChange, signOutOnNetworkChange } =
+          SIWEController.state._client?.options ?? {};
+        const session = await SIWEController.getSession();
+
+        if (session && newAddress && signOutOnAccountChange) {
+          // If the address has changed and signOnAccountChange is enabled, sign out
+          await SIWEController.signOut();
+          onSiweNavigation();
+        } else if (
+          newNetworkId &&
+          session?.chainId.toString() !== newNetworkId &&
+          signOutOnNetworkChange
+        ) {
+          // If the network has changed and signOnNetworkChange is enabled, sign out
+          await SIWEController.signOut();
+          onSiweNavigation();
+        } else if (!session) {
+          // If it's connected but there's no session, show sign view
+          onSiweNavigation();
+        }
+      }
+    },
+    [isConnected, loading]
+  );
+
+  const onSiweNavigation = () => {
+    if (ModalController.state.open) {
+      RouterController.push('ConnectingSiwe');
+    } else {
+      ModalController.open({ view: 'ConnectingSiwe' });
+    }
+  };
+
+  useEffect(() => {
+    prefetch();
+  }, []);
+
+  useEffect(() => {
+    onNewAddress(caipAddress);
+  }, [caipAddress, onNewAddress]);
+
+  return (
+    <>
+      <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+        <Modal
+          style={styles.modal}
+          coverScreen={!frameViewVisible && !webviewVisible}
+          isVisible={open}
+          useNativeDriver
+          useNativeDriverForBackdrop
+          statusBarTranslucent
+          hideModalContentWhileAnimating
+          propagateSwipe
+          onModalHide={handleClose}
+          onBackdropPress={ModalController.close}
+          onBackButtonPress={onBackButtonPress}
+          testID="w3m-modal"
+        >
+          <Card
+            style={[styles.card, { maxHeight: isLandscape ? landScapeHeight : portraitHeight }]}
+          >
+            <Header />
+            <AppKitRouter />
+            <Snackbar />
+          </Card>
+        </Modal>
+        {!!showAuth && AuthView && <AuthView />}
+        {!!showAuth && SocialView && <SocialView />}
+      </ThemeProvider>
+    </>
+  );
+}

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

@@ -0,0 +1,13 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  modal: {
+    margin: 0,
+    justifyContent: 'flex-end'
+  },
+  card: {
+    borderBottomLeftRadius: 0,
+    borderBottomRightRadius: 0,
+    maxHeight: '80%'
+  }
+});

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

@@ -0,0 +1,48 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  AccountController,
+  ApiController,
+  AssetUtil,
+  ConnectionsController,
+  EventsController,
+  ModalController,
+  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 { isConnected } = useSnapshot(AccountController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { loading } = useSnapshot(ModalController.state);
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+
+  const onNetworkPress = () => {
+    ModalController.open({ view: 'Networks' });
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_NETWORKS'
+    });
+  };
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <NetworkButtonUI
+        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageHeaders={ApiController._getApiHeaders()}
+        disabled={disabled || loading}
+        style={style}
+        onPress={onNetworkPress}
+        loading={loading}
+        testID="network-button"
+      >
+        {activeNetwork?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
+      </NetworkButtonUI>
+    </ThemeProvider>
+  );
+}

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

@@ -0,0 +1,136 @@
+import { useLayoutEffect, useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { RouterController } from '@reown/appkit-core-react-native';
+
+import { AccountDefaultView } from '../../views/w3m-account-default-view';
+import { AccountView } from '../../views/w3m-account-view';
+import { AllWalletsView } from '../../views/w3m-all-wallets-view';
+import { ConnectView } from '../../views/w3m-connect-view';
+import { ConnectSocialsView } from '../../views/w3m-connect-socials-view';
+import { ConnectingView } from '../../views/w3m-connecting-view';
+import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
+import { ConnectingFarcasterView } from '../../views/w3m-connecting-farcaster-view';
+import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
+import { CreateView } from '../../views/w3m-create-view';
+import { ConnectingSiweView } from '@reown/appkit-siwe-react-native';
+import { EmailVerifyOtpView } from '../../views/w3m-email-verify-otp-view';
+import { EmailVerifyDeviceView } from '../../views/w3m-email-verify-device-view';
+import { GetWalletView } from '../../views/w3m-get-wallet-view';
+import { NetworksView } from '../../views/w3m-networks-view';
+import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
+import { OnRampLoadingView } from '../../views/w3m-onramp-loading-view';
+import { OnRampView } from '../../views/w3m-onramp-view';
+import { OnRampCheckoutView } from '../../views/w3m-onramp-checkout-view';
+import { OnRampSettingsView } from '../../views/w3m-onramp-settings-view';
+import { OnRampTransactionView } from '../../views/w3m-onramp-transaction-view';
+import { SwapView } from '../../views/w3m-swap-view';
+import { SwapPreviewView } from '../../views/w3m-swap-preview-view';
+import { SwapSelectTokenView } from '../../views/w3m-swap-select-token-view';
+import { TransactionsView } from '../../views/w3m-transactions-view';
+import { UnsupportedChainView } from '../../views/w3m-unsupported-chain-view';
+import { UpdateEmailWalletView } from '../../views/w3m-update-email-wallet-view';
+import { UpdateEmailPrimaryOtpView } from '../../views/w3m-update-email-primary-otp-view';
+import { UpdateEmailSecondaryOtpView } from '../../views/w3m-update-email-secondary-otp-view';
+import { UpgradeEmailWalletView } from '../../views/w3m-upgrade-email-wallet-view';
+import { UpgradeToSmartAccountView } from '../../views/w3m-upgrade-to-smart-account-view';
+import { WalletCompatibleNetworks } from '../../views/w3m-wallet-compatible-networks-view';
+import { WalletReceiveView } from '../../views/w3m-wallet-receive-view';
+import { WalletSendView } from '../../views/w3m-wallet-send-view';
+import { WalletSendPreviewView } from '../../views/w3m-wallet-send-preview-view';
+import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-token-view';
+import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
+import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
+import { UiUtil } from '../../utils/UiUtil';
+
+export function AppKitRouter() {
+  const { view } = useSnapshot(RouterController.state);
+
+  useLayoutEffect(() => {
+    UiUtil.createViewTransition();
+  }, [view]);
+
+  const ViewComponent = useMemo(() => {
+    switch (view) {
+      case 'Account':
+        return AccountView;
+      case 'AccountDefault':
+        return AccountDefaultView;
+      case 'AllWallets':
+        return AllWalletsView;
+      case 'Connect':
+        return ConnectView;
+      case 'ConnectSocials':
+        return ConnectSocialsView;
+      case 'ConnectingExternal':
+        return ConnectingExternalView;
+      case 'ConnectingSiwe':
+        return ConnectingSiweView;
+      case 'ConnectingSocial':
+        return ConnectingSocialView;
+      case 'ConnectingFarcaster':
+        return ConnectingFarcasterView;
+      case 'ConnectingWalletConnect':
+        return ConnectingView;
+      case 'Create':
+        return CreateView;
+      case 'EmailVerifyDevice':
+        return EmailVerifyDeviceView;
+      case 'EmailVerifyOtp':
+        return EmailVerifyOtpView;
+      case 'GetWallet':
+        return GetWalletView;
+      case 'Networks':
+        return NetworksView;
+      case 'OnRamp':
+        return OnRampView;
+      case 'OnRampCheckout':
+        return OnRampCheckoutView;
+      case 'OnRampSettings':
+        return OnRampSettingsView;
+      case 'OnRampLoading':
+        return OnRampLoadingView;
+      case 'SwitchNetwork':
+        return NetworkSwitchView;
+      case 'OnRampTransaction':
+        return OnRampTransactionView;
+      case 'Swap':
+        return SwapView;
+      case 'SwapPreview':
+        return SwapPreviewView;
+      case 'SwapSelectToken':
+        return SwapSelectTokenView;
+      case 'Transactions':
+        return TransactionsView;
+      case 'UnsupportedChain':
+        return UnsupportedChainView;
+      case 'UpdateEmailPrimaryOtp':
+        return UpdateEmailPrimaryOtpView;
+      case 'UpdateEmailSecondaryOtp':
+        return UpdateEmailSecondaryOtpView;
+      case 'UpdateEmailWallet':
+        return UpdateEmailWalletView;
+      case 'UpgradeEmailWallet':
+        return UpgradeEmailWalletView;
+      case 'UpgradeToSmartAccount':
+        return UpgradeToSmartAccountView;
+      case 'WalletCompatibleNetworks':
+        return WalletCompatibleNetworks;
+      case 'WalletReceive':
+        return WalletReceiveView;
+      case 'WalletSend':
+        return WalletSendView;
+      case 'WalletSendPreview':
+        return WalletSendPreviewView;
+      case 'WalletSendSelectToken':
+        return WalletSendSelectTokenView;
+      case 'WhatIsANetwork':
+        return WhatIsANetworkView;
+      case 'WhatIsAWallet':
+        return WhatIsAWalletView;
+      default:
+        return ConnectView;
+    }
+  }, [view]);
+
+  return <ViewComponent />;
+}