@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/AppKitContext.tsx

@@ -16,8 +16,7 @@ export const AppKitProvider: React.FC<AppKitProviderProps> = ({ children, instan
   return <AppKitContext.Provider value={{ appKit: instance }}>{children}</AppKitContext.Provider>;
 };
 
-//TODO: rename this so it doesn't conflict with the useAppKit hook in the hooks folder
-export const useAppKit = () => {
+export const useInternalAppKit = () => {
   const context = useContext(AppKitContext);
   if (context === undefined) {
     throw new Error('useAppKit must be used within an AppKitProvider');
@@ -32,7 +31,9 @@ export const useAppKit = () => {
     disconnect: context.appKit.disconnect.bind(context.appKit),
     open: context.appKit.open.bind(context.appKit),
     close: context.appKit.close.bind(context.appKit),
+    back: context.appKit.back.bind(context.appKit),
     switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
-    getProvider: context.appKit.getProvider.bind(context.appKit)
+    getProvider: context.appKit.getProvider.bind(context.appKit),
+    switchAccountType: context.appKit.switchAccountType.bind(context.appKit)
   };
 };

package/src/connectors/WalletConnectConnector.ts

@@ -1,4 +1,4 @@
-import { ConnectionController } from '@reown/appkit-core-react-native';
+import { WcController } from '@reown/appkit-core-react-native';
 import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
 import {
   WalletConnector,
@@ -10,8 +10,11 @@ import {
   type CaipNetworkId,
   type ConnectOptions,
   type ConnectorInitOptions,
-  type Metadata
+  type Metadata,
+  type ConnectionProperties,
+  type RequestArguments
 } from '@reown/appkit-common-react-native';
+import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
 
 interface WalletConnectConnectorConfig {
   projectId: string;
@@ -38,7 +41,7 @@ export class WalletConnectConnector extends WalletConnector {
     await this.restoreSession();
   }
 
-  private async restoreSession(): Promise<boolean> {
+  override async restoreSession(): Promise<boolean> {
     const provider = this.getProvider() as IUniversalProvider;
     if (!provider) {
       return false;
@@ -48,6 +51,16 @@ export class WalletConnectConnector extends WalletConnector {
       this.namespaces = provider.session.namespaces as Namespaces;
     }
 
+    if (provider.session?.sessionProperties) {
+      this.properties = {
+        ...provider.session.sessionProperties,
+        smartAccounts: provider.session.sessionProperties['smartAccounts']
+          ? JSON.parse(provider.session.sessionProperties['smartAccounts'])
+          : [],
+        sessionTopic: provider.session.topic
+      };
+    }
+
     if (provider.session?.peer?.metadata) {
       const metadata = provider.session?.peer.metadata;
       if (metadata) {
@@ -80,13 +93,10 @@ export class WalletConnectConnector extends WalletConnector {
     return this.provider as IUniversalProvider;
   }
 
-  override disconnect(): Promise<void> {
-    return this.getProvider().disconnect();
-  }
-
   override async connect(opts: ConnectOptions) {
+    const { siweConfig, namespaces, defaultChain, universalLink } = opts;
     function onUri(uri: string) {
-      ConnectionController.setWcUri(uri);
+      WcController.setWcUri(uri);
     }
 
     const provider = this.getProvider() as IUniversalProvider;
@@ -94,13 +104,95 @@ export class WalletConnectConnector extends WalletConnector {
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    const session = await (this.provider as IUniversalProvider).connect({
-      namespaces: {},
-      optionalNamespaces: opts.namespaces
-    });
+    let session: IUniversalProvider['session'];
+
+    // SIWE
+    const isEVMOnly = Object.keys(namespaces ?? {}).length === 1 && namespaces?.['eip155'];
+    const params = await siweConfig?.getMessageParams?.();
+    if (siweConfig?.options?.enabled && params && Object.keys(params).length > 0 && isEVMOnly) {
+      // 1CA is only supported on EVM
+
+      // @ts-ignore
+      const result = await provider.authenticate(
+        {
+          ...params,
+          nonce: await siweConfig.getNonce(),
+          methods: namespaces?.['eip155']?.methods,
+          chains: params.chains
+        },
+        universalLink
+      );
+
+      // Auths is an array of signed CACAO objects https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-74.md
+      const signedCacao = result?.auths?.[0];
+      if (signedCacao) {
+        const { p, s } = signedCacao;
+        const chainId = getDidChainId(p.iss);
+        const address = getDidAddress(p.iss);
+
+        try {
+          // Kicks off verifyMessage and populates external states
+          const message = provider?.client?.formatAuthMessage({
+            request: p,
+            iss: p.iss
+          })!;
+
+          await SIWEController.verifyMessage({
+            message,
+            signature: s.s,
+            cacao: signedCacao
+          });
+
+          if (address && chainId) {
+            const siweSession = {
+              address,
+              chainId: parseInt(chainId, 10)
+            };
+
+            SIWEController.setSession(siweSession);
+            SIWEController.onSignIn?.(siweSession);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Error verifying message', error);
+          // eslint-disable-next-line no-console
+          await provider.disconnect().catch(console.error);
+          // eslint-disable-next-line no-console
+          await SIWEController.signOut().catch(console.error);
+          throw error;
+        }
+      }
+      session = result?.session;
+    } else {
+      session = await (this.provider as IUniversalProvider).connect({
+        namespaces: {},
+        optionalNamespaces: namespaces
+      });
+    }
+
+    const metadata = session?.peer?.metadata;
+    if (metadata) {
+      this.wallet = {
+        ...metadata,
+        name: metadata?.name,
+        icon: metadata?.icons?.[0]
+      };
+    } else {
+      this.wallet = undefined;
+    }
 
-    if (opts.defaultChain) {
-      (this.provider as IUniversalProvider).setDefaultChain(opts.defaultChain);
+    if (defaultChain) {
+      (this.provider as IUniversalProvider).setDefaultChain(defaultChain);
+    }
+
+    if (session?.sessionProperties) {
+      this.properties = {
+        ...session.sessionProperties,
+        smartAccounts: session.sessionProperties['smartAccounts']
+          ? JSON.parse(session.sessionProperties['smartAccounts'])
+          : [],
+        sessionTopic: session.topic
+      };
     }
 
     this.namespaces = session?.namespaces as Namespaces;
@@ -110,11 +202,25 @@ export class WalletConnectConnector extends WalletConnector {
     return this.namespaces;
   }
 
-  override getProvider(): Provider {
+  override getProvider(namespace?: ChainNamespace): Provider {
     if (!this.provider) {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
+    const provider = this.provider as IUniversalProvider;
+
+    if (namespace) {
+      const _chainId = this.getChainId(namespace);
+
+      // @ts-ignore
+      return {
+        ...provider,
+        request: (args: RequestArguments, chainId?: CaipNetworkId) => {
+          return provider.request(args, chainId || _chainId);
+        }
+      };
+    }
+
     return this.provider;
   }
 
@@ -122,6 +228,10 @@ export class WalletConnectConnector extends WalletConnector {
     return this.namespaces ?? {};
   }
 
+  override getProperties(): ConnectionProperties | undefined {
+    return this.properties;
+  }
+
   override switchNetwork(network: AppKitNetwork): Promise<void> {
     if (!network) throw new Error('No network provided');
 
@@ -143,7 +253,7 @@ export class WalletConnectConnector extends WalletConnector {
 
     const chainId = (this.provider as IUniversalProvider).rpcProviders[
       namespace
-    ]?.getDefaultChain();
+    ]?.getDefaultChain?.();
 
     if (!chainId) {
       return undefined;

package/src/hooks/useAccount.ts

@@ -16,6 +16,7 @@ export function useAccount() {
   return {
     address: address?.split(':')[2],
     isConnected: !!address,
-    chainId: connection?.caipNetwork
+    chainId: connection?.caipNetwork,
+    namespace: activeNamespace
   };
 }

package/src/hooks/useAppKitEvents.ts

@@ -1,10 +1,7 @@
 import { useEffect } from 'react';
 import { useSnapshot } from 'valtio';
-import {
-  EventsController,
-  type EventName,
-  type EventsControllerState
-} from '@reown/appkit-core-react-native';
+import { EventsController, type EventsControllerState } from '@reown/appkit-core-react-native';
+import { type EventName } from '@reown/appkit-common-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {

package/src/hooks/useProvider.ts

@@ -2,24 +2,45 @@ import { useSnapshot } from 'valtio';
 import { ConnectionsController } 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;
 }
 
-export function useProvider(namespace?: ChainNamespace): ProviderResult {
-  const { connections, activeNamespace } = useSnapshot(ConnectionsController.state);
-
-  const targetNamespace = namespace ?? activeNamespace;
-
-  if (!targetNamespace) return { provider: undefined, providerType: undefined };
-
-  const connection = connections.get(targetNamespace);
+/**
+ * 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);
 
   if (!connection) return { provider: undefined, providerType: undefined };
 
   return {
-    provider: connection.adapter.connector?.getProvider(),
+    provider: connection.adapter.getProvider(),
     providerType: connection.adapter.getSupportedNamespace()
   };
 }

package/src/hooks/useRouteTransition.ts

@@ -0,0 +1,95 @@
+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 }) => {
+          if (finished) {
+            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/index.ts

@@ -1,3 +1,4 @@
+/********** Components **********/
 export {
   AccountButton as AccountButton,
   type AccountButtonProps
@@ -12,20 +13,11 @@ export {
   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';
 
+/********** Types **********/
 export type * from '@reown/appkit-core-react-native';
-export { CoreHelperUtil } from '@reown/appkit-core-react-native';
-
-export * from './AppKit';
-export { AppKitProvider } from './AppKitContext';
-
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
-
-export { WalletConnectConnector } from './connectors/WalletConnectConnector';
+export type { AppKitConfig } from './types';
 
 /****** Hooks *******/
 export { useAppKit } from './hooks/useAppKit';
@@ -37,3 +29,7 @@ export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEv
 /********** Networks **********/
 export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';
 export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';
+
+/********** Main **********/
+export { createAppKit } from './AppKit';
+export { AppKitProvider } from './AppKitContext';

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

@@ -1,16 +1,14 @@
 import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  AccountController,
   CoreHelperUtil,
   ModalController,
-  AssetUtil,
   ThemeController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController,
+  AssetUtil
 } 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';
@@ -20,15 +18,16 @@ export interface AccountButtonProps {
 }
 
 export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
-  const { profileImage, profileName } = useSnapshot(AccountController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const {
     activeAddress: address,
     activeBalance,
-    activeNetwork
+    activeNetwork,
+    identity
   } = useSnapshot(ConnectionsController.state);
 
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showBalance = balance === 'show';
 
   return (
@@ -36,10 +35,9 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
       <AccountButtonUI
         onPress={() => ModalController.open()}
         address={address?.split(':')[2] ?? ''}
-        profileName={profileName}
+        profileName={identity?.name}
         networkSrc={networkImage}
-        imageHeaders={ApiController._getApiHeaders()}
-        avatarSrc={profileImage}
+        avatarSrc={identity?.avatar}
         disabled={disabled}
         style={style}
         balance={

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

@@ -1,7 +1,7 @@
 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';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
 
 export interface AppKitButtonProps {
   balance?: AccountButtonProps['balance'];
@@ -22,7 +22,7 @@ export function AppKitButton({
   accountStyle,
   connectStyle
 }: AppKitButtonProps) {
-  const { isConnected } = useSnapshot(AccountController.state);
+  const { isConnected } = useSnapshot(ConnectionsController.state);
   const { loading } = useSnapshot(ModalController.state);
 
   return !loading && isConnected ? (

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

@@ -1,54 +1,39 @@
 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 { Card, Modal, 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 { useInternalAppKit } from '../../AppKitContext';
 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 { close } = useInternalAppKit();
+  const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.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 = () => {
+  const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
       return RouterController.goBack();
     }
 
-    return handleClose();
+    return handleModalClose();
   };
 
   const prefetch = useCallback(async () => {
@@ -56,65 +41,8 @@ export function AppKit() {
     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' });
-    }
+  const handleModalClose = async () => {
+    await close();
   };
 
   useEffect(() => {
@@ -123,25 +51,13 @@ export function AppKit() {
     }
   }, [projectId, 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}
+          visible={open}
+          onRequestClose={handleBackPress}
+          onBackdropPress={handleModalClose}
           testID="w3m-modal"
         >
           <Card
@@ -152,8 +68,6 @@ export function AppKit() {
             <Snackbar />
           </Card>
         </Modal>
-        {!!showAuth && AuthView && <AuthView />}
-        {!!showAuth && SocialView && <SocialView />}
       </ThemeProvider>
     </>
   );

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

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