@reown/appkit-react-native 2.0.0-alpha.4 → 2.0.0-alpha.5

package/src/AppKit.ts

@@ -14,7 +14,8 @@ import {
   CoreHelperUtil,
   SendController,
   BlockchainApiController,
-  WalletUtil
+  WalletUtil,
+  type RouterControllerState
 } from '@reown/appkit-core-react-native';
 
 import {
@@ -149,7 +150,7 @@ export class AppKit {
     }
   }
 
-  private processConnection(
+  private async processConnection(
     connector: WalletConnector,
     namespaces?: Namespaces,
     shouldCloseModal: boolean = true
@@ -173,7 +174,7 @@ export class AppKit {
     this.setConnection(initializedAdapters, namespaces, walletInfo, properties);
 
     // Sync accounts
-    this.syncAccounts(initializedAdapters);
+    await this.syncAccounts(initializedAdapters);
 
     // Handle SIWE if enabled
     this.handleSiweConnectionIfEnabled(shouldCloseModal);
@@ -289,10 +290,6 @@ export class AppKit {
     });
 
     ConnectionsController.setActiveNetwork(network.chainNamespace, network.caipNetworkId);
-
-    if (ConnectionsController.state.activeNamespace !== network.chainNamespace) {
-      ConnectionsController.setActiveNamespace(network.chainNamespace);
-    }
   }
 
   open(options?: AppKitOpenOptions) {
@@ -310,10 +307,14 @@ export class AppKit {
         ConnectionsController.state.activeNamespace === 'eip155' &&
         !!ConnectionsController.state.activeAddress
       ) {
-        await this.disconnect();
+        return await this.disconnect();
       }
     }
 
+    if (RouterController.state.view === 'UnsupportedChain') {
+      return await this.disconnect();
+    }
+
     RouterUtil.checkOnRampBack();
     RouterUtil.checkSocialLoginBack();
   }
@@ -332,11 +333,16 @@ export class AppKit {
     const adapter = this.getAdapterByNamespace(namespace);
     if (!adapter) throw new Error('No active adapter');
 
-    ConnectionsController.setAccountType(namespace, type);
+    const address = ConnectionsController.setAccountType(namespace, type);
 
     // Get balances from API
     ConnectionsController.fetchBalance();
 
+    // Fetch transactions for the new account
+    if (address) {
+      TransactionsController.fetchTransactions(address, true);
+    }
+
     // Sync balances from adapter
     this.syncNativeBalance(adapter, network);
 
@@ -400,7 +406,7 @@ export class AppKit {
 
           const namespaces = connector.getNamespaces();
 
-          this.processConnection(connector, namespaces, false);
+          await this.processConnection(connector, namespaces, false);
         } catch (error) {
           // Use console.warn for non-critical initialization failures
           console.warn(`Failed to initialize connector type ${connected.type}:`, error);
@@ -505,7 +511,7 @@ export class AppKit {
     }
   }
 
-  private async refreshBalance(fetchAllBalances: boolean = false) {
+  private refreshBalance(fetchAllBalances: boolean = false) {
     try {
       if (fetchAllBalances) {
         ConnectionsController.fetchBalance();
@@ -542,7 +548,6 @@ export class AppKit {
     const recomputePolling = () => {
       const open = ModalController.state.open;
       const view = RouterController.state.view;
-
       if (open && (view === 'Account' || view === 'AccountDefault')) {
         // fetch all balances when user is using embedded wallet
         this.startBalancePolling(view === 'Account');
@@ -550,9 +555,7 @@ export class AppKit {
         this.stopBalancePolling();
       }
     };
-
     recomputePolling();
-
     subscribeKey(RouterController.state, 'view', () => recomputePolling());
     subscribeKey(ModalController.state, 'open', () => recomputePolling());
   }
@@ -573,7 +576,8 @@ export class AppKit {
       const caipNetwork = adapter?.connector?.getChainId(namespace);
       const namespaceProperties = {
         ...properties,
-        smartAccounts: properties?.smartAccounts?.filter(account => account.startsWith(namespace))
+        smartAccounts: properties?.smartAccounts?.filter(account => account.startsWith(namespace)),
+        canAddEvmChain: wallet?.name === 'MetaMask Wallet' // MetaMask allows adding EVM chains after connecting
       };
 
       ConnectionsController.setConnection({
@@ -599,22 +603,26 @@ export class AppKit {
   private subscribeToAdapterEvents(adapter: BlockchainAdapter): void {
     adapter.on('accountsChanged', ({ accounts }) => {
       const namespace = adapter.getSupportedNamespace();
-      ConnectionsController.updateAccounts(namespace, accounts);
+      const hasChanged = ConnectionsController.updateAccounts(namespace, accounts);
 
-      if (namespace === 'eip155') {
+      if (hasChanged && namespace === 'eip155') {
         this.handleSiweChange({ isAccountChange: true });
       }
     });
 
-    adapter.on('chainChanged', ({ chainId }) => {
+    adapter.on('chainChanged', async ({ chainId }) => {
+      const isSupported = this.networks.some(network => network.id?.toString() === chainId);
+      if (!isSupported) {
+        return this.navigate('UnsupportedChain');
+      }
+
       const namespace = adapter.getSupportedNamespace();
       const chain = `${namespace}:${chainId}` as CaipNetworkId;
       ConnectionsController.setActiveNetwork(namespace, chain);
+
       const connection = ConnectionsController.state.connections.get(namespace);
       const isAuth = !!connection?.properties?.provider;
 
-      const activeNamespace = ConnectionsController.state.activeNamespace;
-
       const network = this.networks.find(n => n.id?.toString() === chainId);
       this.syncNativeBalance(adapter, network);
       SendController.resetState();
@@ -624,14 +632,11 @@ export class AppKit {
         ConnectionsController.fetchBalance();
       }
 
-      // Refresh transactions only when the active network changes
-      if (namespace === activeNamespace) {
-        const address = connection?.accounts?.find(account =>
-          account.startsWith(`${namespace}:${chainId}`)
-        );
-        if (address) {
-          TransactionsController.fetchTransactions(address, true);
-        }
+      const address = connection?.accounts?.find(account =>
+        account.startsWith(`${namespace}:${chainId}`)
+      );
+      if (address) {
+        TransactionsController.fetchTransactions(address, true);
       }
 
       // Check if user needs to sign in again
@@ -670,7 +675,7 @@ export class AppKit {
       OptionsController.setDefaultNetwork(network);
     }
 
-    ThemeController.setThemeMode(options.themeMode);
+    ThemeController.setDefaultThemeMode(options.themeMode);
     ThemeController.setThemeVariables(options.themeVariables);
 
     OptionsController.setSdkVersion(
@@ -685,6 +690,7 @@ export class AppKit {
 
     if (options.siweConfig) {
       SIWEController.setSIWEClient(options.siweConfig);
+      OptionsController.setIsSiweEnabled(options.siweConfig.options.enabled);
     }
 
     if (
@@ -779,11 +785,15 @@ export class AppKit {
     await this.initRecentWallets(options);
   }
 
-  private onSiweNavigation = () => {
+  private navigate = (routeName: RouterControllerState['view']) => {
+    if (RouterController.state.view === routeName) {
+      return;
+    }
+
     if (ModalController.state.open) {
-      RouterController.push('ConnectingSiwe');
+      RouterController.push(routeName);
     } else {
-      ModalController.open({ view: 'ConnectingSiwe' });
+      ModalController.open({ view: routeName });
     }
   };
 
@@ -796,29 +806,33 @@ export class AppKit {
     const { enabled, signOutOnAccountChange, signOutOnNetworkChange } =
       SIWEController.state._client?.options ?? {};
 
-    if (enabled) {
-      const session = await SIWEController.getSession();
-      if (session && isAccountChange) {
-        if (signOutOnAccountChange) {
-          // If the address has changed and signOnAccountChange is enabled, sign out
-          await SIWEController.signOut();
+    if (!enabled || RouterController.state.view === 'ConnectingSiwe') {
+      // Do nothing if view is connecting siwe or siwe is not enabled
+      return;
+    }
 
-          return this.onSiweNavigation();
-        }
-      } else if (isNetworkChange) {
-        if (signOutOnNetworkChange) {
-          // If the network has changed and signOnNetworkChange is enabled, sign out
-          await SIWEController.signOut();
+    const session = await SIWEController.getSession();
+    if (session && isAccountChange) {
+      if (signOutOnAccountChange) {
+        // If the address has changed and signOnAccountChange is enabled, sign out
+        await SIWEController.signOut();
 
-          return this.onSiweNavigation();
-        }
-      } else if (!session) {
-        // If it's connected but there's no session, show sign view
-        return this.onSiweNavigation();
-      } else if (isConnection) {
-        // Connected with 1CA
-        ModalController.close();
+        return this.navigate('ConnectingSiwe');
       }
+    } else if (session && isNetworkChange) {
+      if (signOutOnNetworkChange) {
+        // If the network has changed and signOnNetworkChange is enabled, sign out
+        await SIWEController.signOut();
+
+        return this.navigate('ConnectingSiwe');
+      }
+    } else if (!session) {
+      // If it's connected but there's no session, show sign view
+
+      return this.navigate('ConnectingSiwe');
+    } else if (isConnection) {
+      // Already connected with 1CA
+      ModalController.close();
     }
   }
 }

package/src/AppKitContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, type ReactNode } from 'react';
+import React, { createContext, useContext, useMemo, type ReactNode } from 'react';
 import { AppKit } from './AppKit';
 
 interface AppKitContextType {
@@ -26,14 +26,22 @@ export const useInternalAppKit = () => {
     throw new Error('AppKit instance is not yet available in context.');
   }
 
-  return {
-    connect: context.appKit.connect.bind(context.appKit),
-    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),
-    switchAccountType: context.appKit.switchAccountType.bind(context.appKit)
-  };
+  const stableFunctions = useMemo(() => {
+    if (!context.appKit) {
+      throw new Error('AppKit instance is not available');
+    }
+
+    return {
+      connect: context.appKit.connect.bind(context.appKit),
+      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),
+      switchAccountType: context.appKit.switchAccountType.bind(context.appKit)
+    };
+  }, [context.appKit]);
+
+  return stableFunctions;
 };

package/src/connectors/WalletConnectConnector.ts

@@ -199,7 +199,7 @@ export class WalletConnectConnector extends WalletConnector {
 
     provider.off('display_uri', onUri);
 
-    return this.namespaces;
+    return (session?.namespaces as Namespaces) ?? {};
   }
 
   override getProvider(namespace?: ChainNamespace): Provider {
@@ -207,13 +207,16 @@ export class WalletConnectConnector extends WalletConnector {
       throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
     }
 
-    const provider = this.provider as IUniversalProvider;
+    const provider = this.provider;
 
     if (namespace) {
-      // @ts-ignore
       return {
-        ...provider,
-        request: (args: RequestArguments, chainId?: CaipNetworkId) => {
+        ...this.provider,
+        connect: async (params?: any) => provider.connect(params) as Promise<any>,
+        disconnect: provider.disconnect.bind(provider),
+        on: provider.on.bind(provider),
+        off: provider.off.bind(provider),
+        request: async (args: RequestArguments, chainId?: CaipNetworkId) => {
           const _chainId = this.getChainId(namespace);
 
           return provider.request(args, chainId || _chainId);
@@ -225,7 +228,11 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override getNamespaces(): Namespaces {
-    return this.namespaces ?? {};
+    const namespaces =
+      ((this.provider as IUniversalProvider)?.session?.namespaces as Namespaces) ?? {};
+    this.namespaces = namespaces;
+
+    return namespaces;
   }
 
   override getProperties(): ConnectionProperties | undefined {
@@ -247,7 +254,8 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override getChainId(namespace: ChainNamespace): CaipNetworkId | undefined {
-    if (!this.namespaces || !this.namespaces[namespace]) {
+    const namespaces = this.getNamespaces();
+    if (!namespaces || !namespaces[namespace]) {
       return undefined;
     }
 

package/src/hooks/useAccount.ts

@@ -1,5 +1,7 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
-import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { ConnectionsController, CoreHelperUtil } from '@reown/appkit-core-react-native';
 import { useAppKit } from './useAppKit';
 
 export function useAccount() {
@@ -8,15 +10,23 @@ export function useAccount() {
   const {
     activeAddress: address,
     activeNamespace,
-    connections
+    connection,
+    networks
   } = useSnapshot(ConnectionsController.state);
 
-  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
 
   return {
-    address: address?.split(':')[2],
+    address: CoreHelperUtil.getPlainAddress(address),
     isConnected: !!address,
-    chainId: connection?.caipNetwork,
+    chainId: activeChain?.id,
+    chain: activeChain,
     namespace: activeNamespace
   };
 }

package/src/hooks/useAppKit.ts

@@ -1,6 +1,4 @@
-import { useContext } from 'react';
-import { useSnapshot } from 'valtio';
-import { ModalController } from '@reown/appkit-core-react-native';
+import { useContext, useMemo } from 'react';
 
 import type { AppKit } from '../AppKit';
 import { AppKitContext } from '../AppKitContext';
@@ -10,26 +8,33 @@ interface UseAppKitReturn {
   close: AppKit['close'];
   disconnect: (namespace?: string) => void;
   switchNetwork: AppKit['switchNetwork'];
-  isOpen: boolean;
 }
 
 export const useAppKit = (): UseAppKitReturn => {
   const context = useContext(AppKitContext);
-  const { open } = useSnapshot(ModalController.state);
 
   if (context === undefined) {
     throw new Error('useAppKit must be used within an AppKitProvider');
   }
+
   if (!context.appKit) {
     // This might happen if the provider is rendered before AppKit is initialized
     throw new Error('AppKit instance is not yet available in context.');
   }
 
-  return {
-    open: context.appKit.open.bind(context.appKit),
-    close: context.appKit.close.bind(context.appKit),
-    disconnect: (namespace?: string) => context.appKit?.disconnect.bind(context.appKit)(namespace),
-    switchNetwork: context.appKit.switchNetwork.bind(context.appKit),
-    isOpen: open
-  };
+  const stableFunctions = useMemo(() => {
+    if (!context.appKit) {
+      throw new Error('AppKit instance is not available');
+    }
+
+    return {
+      open: context.appKit.open.bind(context.appKit),
+      close: context.appKit.close.bind(context.appKit),
+      disconnect: (namespace?: string) =>
+        context.appKit!.disconnect.bind(context.appKit!)(namespace),
+      switchNetwork: context.appKit.switchNetwork.bind(context.appKit)
+    };
+  }, [context.appKit]);
+
+  return stableFunctions;
 };

package/src/hooks/useAppKitState.ts

@@ -0,0 +1,26 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
+import { useSnapshot } from 'valtio';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useAppKitState() {
+  useAppKit(); // Use the hook for checks
+  const { activeAddress: address, connection, networks } = useSnapshot(ConnectionsController.state);
+  const { open, loading } = useSnapshot(ModalController.state);
+
+  const activeChain = useMemo(
+    () =>
+      connection?.caipNetwork
+        ? networks.find(network => network.caipNetworkId === connection?.caipNetwork)
+        : undefined,
+    [connection?.caipNetwork, networks]
+  );
+
+  return {
+    isOpen: open,
+    isLoading: loading,
+    isConnected: !!address,
+    chain: activeChain
+  };
+}

package/src/hooks/useProvider.ts

@@ -1,3 +1,5 @@
+/* eslint-disable valtio/state-snapshot-rule */
+import { useMemo } from 'react';
 import { useSnapshot } from 'valtio';
 import { ConnectionsController } from '@reown/appkit-core-react-native';
 import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
@@ -37,10 +39,14 @@ interface ProviderResult {
 export function useProvider(): ProviderResult {
   const { connection } = useSnapshot(ConnectionsController.state);
 
-  if (!connection) return { provider: undefined, providerType: undefined };
+  const returnValue = useMemo(() => {
+    if (!connection) return { provider: undefined, providerType: undefined };
 
-  return {
-    provider: connection.adapter.getProvider(),
-    providerType: connection.adapter.getSupportedNamespace()
-  };
+    return {
+      provider: connection.adapter.getProvider(),
+      providerType: connection.adapter.getSupportedNamespace()
+    };
+  }, [connection]);
+
+  return returnValue;
 }

package/src/hooks/useWalletInfo.ts

@@ -1,10 +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 } = useSnapshot(ConnectionsController.state);
+  const { walletInfo: walletInfoSnapshot } = useSnapshot(ConnectionsController.state);
 
-  return { walletInfo };
+  const walletInfo = useMemo(() => ({ walletInfo: walletInfoSnapshot }), [walletInfoSnapshot]);
+
+  return walletInfo;
 }

package/src/index.ts

@@ -25,6 +25,7 @@ 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';
 
 /********** Networks **********/
 export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';

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

@@ -1,6 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect } from 'react';
-import { Card, Modal, ThemeProvider, useCustomDimensions } from '@reown/appkit-ui-react-native';
+import { useColorScheme } from 'react-native';
+import { Card, Modal, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
   ApiController,
   EventsController,
@@ -9,6 +10,7 @@ import {
   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';
@@ -17,11 +19,12 @@ 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 } = useSnapshot(ThemeController.state);
+  const { themeMode, themeVariables, defaultThemeMode } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
-  const { maxHeight } = useCustomDimensions();
 
   const handleBackPress = () => {
     if (RouterController.state.history.length > 1) {
@@ -31,6 +34,12 @@ export function AppKit() {
     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' });
@@ -54,7 +63,7 @@ export function AppKit() {
         onBackdropPress={handleModalClose}
         testID="w3m-modal"
       >
-        <Card style={[styles.card, { maxHeight }]}>
+        <Card style={[styles.card, { paddingBottom: bottom, marginTop: top }]}>
           <Header />
           <AppKitRouter />
           <Snackbar />

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useLayoutEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -35,9 +35,11 @@ import { UiUtil } from '../../utils/UiUtil';
 import { useRouteTransition } from '../../hooks/useRouteTransition';
 
 import { Animated } from 'react-native';
+import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
+  const { maxHeight } = useCustomDimensions();
   const { animateTransition, getAnimatedStyle } = useRouteTransition({
     duration: 300,
     useNativeDriver: true
@@ -47,7 +49,7 @@ export function AppKitRouter() {
     UiUtil.setRouteTransition(animateTransition);
   }, [animateTransition]);
 
-  useLayoutEffect(() => {
+  useEffect(() => {
     UiUtil.createViewTransition();
   }, [view]);
 
@@ -69,7 +71,7 @@ export function AppKitRouter() {
         return ConnectingSiweView;
       case 'ConnectingSocial':
         return ConnectingSocialView;
-      case 'ConnectingWalletConnect':
+      case 'WalletConnect':
         return ConnectingView;
       case 'GetWallet':
         return GetWalletView;
@@ -83,14 +85,14 @@ export function AppKitRouter() {
         return OnRampSettingsView;
       case 'OnRampLoading':
         return OnRampLoadingView;
-      case 'SwitchNetwork':
-        return NetworkSwitchView;
       case 'OnRampTransaction':
         return OnRampTransactionView;
       case 'Swap':
         return SwapView;
       case 'SwapPreview':
         return SwapPreviewView;
+      case 'SwitchNetwork':
+        return NetworkSwitchView;
       case 'Transactions':
         return TransactionsView;
       case 'UnsupportedChain':
@@ -117,7 +119,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle()]}>
+    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
       <ViewComponent />
     </Animated.View>
   );

package/src/partials/w3m-account-activity/index.tsx

@@ -123,7 +123,7 @@ export function AccountActivity({ style }: Props) {
     <ScrollView
       style={[styles.container, style]}
       fadingEdgeLength={20}
-      contentContainerStyle={[styles.contentContainer]}
+      contentContainerStyle={styles.contentContainer}
       refreshControl={
         <RefreshControl
           refreshing={refreshing}