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

package/src/AppKit.ts

@@ -1,5 +1,4 @@
 import {
-  type Features,
   EventsController,
   ModalController,
   ConnectionsController,
@@ -7,9 +6,8 @@ import {
   RouterController,
   TransactionsController,
   StorageUtil,
-  type OptionsControllerState,
   ThemeController,
-  ConnectionController,
+  WcController,
   SwapController,
   OnRampController,
   CoreHelperUtil,
@@ -23,18 +21,12 @@ import {
   type ProposalNamespaces,
   type ConnectorType,
   type Namespaces,
-  type Metadata,
   type CaipNetworkId,
   type AppKitNetwork,
   type Provider,
-  type ThemeVariables,
-  type ThemeMode,
   type WalletInfo,
-  type Network,
   type ChainNamespace,
-  type Storage,
   type AppKitConnectOptions,
-  type AppKitSIWEClient,
   type ConnectionProperties,
   type AccountType,
   type AppKitOpenOptions,
@@ -46,29 +38,8 @@ import { SIWEController } from '@reown/appkit-siwe-react-native';
 import { WalletConnectConnector } from './connectors/WalletConnectConnector';
 import { WcHelpersUtil } from './utils/HelpersUtil';
 import { NetworkUtil } from './utils/NetworkUtil';
-
-interface AppKitConfig {
-  projectId: string;
-  metadata: Metadata;
-  adapters: BlockchainAdapter[];
-  networks: Network[];
-  storage: Storage;
-  extraConnectors?: WalletConnector[];
-  clipboardClient?: OptionsControllerState['clipboardClient'];
-  includeWalletIds?: OptionsControllerState['includeWalletIds'];
-  excludeWalletIds?: OptionsControllerState['excludeWalletIds'];
-  featuredWalletIds?: OptionsControllerState['featuredWalletIds'];
-  customWallets?: OptionsControllerState['customWallets'];
-  tokens?: OptionsControllerState['tokens']; //TODO: check if needed in OptionsController
-  enableAnalytics?: OptionsControllerState['enableAnalytics'];
-  debug?: OptionsControllerState['debug'];
-  themeMode?: ThemeMode;
-  themeVariables?: ThemeVariables;
-  siweConfig?: AppKitSIWEClient;
-  defaultNetwork?: Network;
-  features?: Features;
-  // chainImages?: Record<number, string>; //TODO: rename to networkImages
-}
+import { RouterUtil } from './utils/RouterUtil';
+import { type AppKitConfig } from './types';
 
 export class AppKit {
   private projectId: string;
@@ -114,7 +85,10 @@ export class AppKit {
     });
 
     this.networks = networksWithAdapters;
-    this.namespaces = WcHelpersUtil.createNamespaces(this.networks) as ProposalNamespaces;
+    this.namespaces = WcHelpersUtil.createNamespaces(
+      this.networks,
+      config.universalProviderConfigOverride
+    ) as ProposalNamespaces;
     this.config = config;
     this.extraConnectors = config.extraConnectors || [];
 
@@ -143,47 +117,59 @@ export class AppKit {
         siweConfig: this.config?.siweConfig
       });
 
-      const walletInfo = connector.getWalletInfo();
-      const properties = connector.getProperties();
+      this.processConnection(connector, approvedNamespaces);
 
-      if (!approvedNamespaces || Object.keys(approvedNamespaces).length === 0) {
-        throw new Error('Connection cancelled or failed: No approved namespaces returned.');
+      // Save connector type and namespaces in storage
+      if (approvedNamespaces && Object.keys(approvedNamespaces).length > 0) {
+        await StorageUtil.setConnectedConnectors({
+          type: connector.type,
+          namespaces: Object.keys(approvedNamespaces)
+        });
       }
+    } catch (error) {
+      console.warn('Connection failed:', error);
+      throw error;
+    }
+  }
 
-      // Setup adapters and subscribe to adapter events
-      const approvedAdapters = this.setupAdaptersAndSubscribe(
-        connector,
-        Object.keys(approvedNamespaces)
-      );
+  private processConnection(
+    connector: WalletConnector,
+    namespaces?: Namespaces,
+    shouldCloseModal: boolean = true
+  ) {
+    if (!namespaces || Object.keys(namespaces).length === 0) {
+      throw new Error('No namespaces provided');
+    }
 
-      // Check if any compatible adapters were found for the *approved* namespaces
-      if (approvedAdapters.length === 0) {
-        //TODO: handle case where devs want to connect to a namespace that has no adapters. Could use the provider directly.
-        throw new Error('No compatible adapters found for the approved namespaces');
-      }
+    const walletInfo = connector.getWalletInfo();
+    const properties = connector.getProperties();
 
-      // Store the connection details for the successfully connected adapters
-      this.setConnection(approvedAdapters, approvedNamespaces, walletInfo, properties);
+    const initializedAdapters = this.setupAdaptersAndSubscribe(connector, Object.keys(namespaces));
 
-      // Store connector type and namespaces in storage
-      await StorageUtil.setConnectedConnectors({
-        type: connector.type,
-        namespaces: Object.keys(approvedNamespaces)
-      });
+    if (initializedAdapters.length === 0) {
+      console.warn('No compatible adapters found for namespaces:', Object.keys(namespaces));
 
-      this.syncAccounts(approvedAdapters);
+      return;
+    }
 
-      if (
-        OptionsController.state.isSiweEnabled &&
-        ConnectionsController.state.activeNamespace === 'eip155'
-      ) {
-        this.handleSiweChange({ isConnection: true });
-      } else {
-        ModalController.close();
-      }
-    } catch (error) {
-      console.warn('Connection failed:', error);
-      throw error;
+    // Store the connection details
+    this.setConnection(initializedAdapters, namespaces, walletInfo, properties);
+
+    // Sync accounts
+    this.syncAccounts(initializedAdapters);
+
+    // Handle SIWE if enabled
+    this.handleSiweConnectionIfEnabled(shouldCloseModal);
+  }
+
+  private handleSiweConnectionIfEnabled(shouldCloseModal: boolean = true): void {
+    if (
+      OptionsController.state.isSiweEnabled &&
+      ConnectionsController.state.activeNamespace === 'eip155'
+    ) {
+      this.handleSiweChange({ isConnection: true });
+    } else if (shouldCloseModal) {
+      ModalController.close();
     }
   }
 
@@ -218,7 +204,7 @@ export class AppKit {
       SwapController.resetState();
       SendController.resetState();
       OnRampController.resetState();
-      ConnectionController.disconnect();
+      WcController.resetState();
 
       if (ConnectionsController.state.activeNamespace === undefined) {
         ConnectionsController.setActiveNamespace(
@@ -296,8 +282,33 @@ export class AppKit {
     ModalController.open(options);
   }
 
-  close() {
+  async close() {
     ModalController.close();
+
+    if (OptionsController.state.isSiweEnabled && ConnectionsController.state.isConnected) {
+      const session = await SIWEController.getSession();
+      if (
+        !session &&
+        SIWEController.state.status !== 'success' &&
+        ConnectionsController.state.activeNamespace === 'eip155' &&
+        !!ConnectionsController.state.activeAddress
+      ) {
+        await this.disconnect();
+      }
+    }
+
+    RouterUtil.checkOnRampBack();
+    RouterUtil.checkSocialLoginBack();
+  }
+
+  back() {
+    if (RouterController.state.history.length > 1) {
+      RouterUtil.checkBack();
+
+      return RouterController.goBack();
+    }
+
+    return this.close();
   }
 
   async switchAccountType(namespace: ChainNamespace, type: AccountType, network: AppKitNetwork) {
@@ -357,13 +368,12 @@ export class AppKit {
     return this.walletConnectConnector;
   }
 
-  //TODO: reuse logic with connect method
   /**
    * Initializes connectors based on stored connection data.
    * This attempts to restore previous sessions.
    */
   private async initConnectors() {
-    const connectedConnectors = await StorageUtil.getConnectedConnectors(); // Fetch stored connectors
+    const connectedConnectors = await StorageUtil.getConnectedConnectors();
     if (connectedConnectors.length > 0) {
       ModalController.setLoading(true);
 
@@ -372,31 +382,8 @@ export class AppKit {
           const connector = await this.createConnector(connected.type);
 
           const namespaces = connector.getNamespaces();
-          const walletInfo = connector.getWalletInfo();
-          const properties = connector.getProperties();
-
-          if (namespaces && Object.keys(namespaces).length > 0) {
-            // Ensure namespaces is not empty
-            // Setup adapters and subscribe to events
-            const initializedAdapters = this.setupAdaptersAndSubscribe(
-              connector,
-              Object.keys(namespaces)
-            );
-
-            // If adapters were successfully initialized, store the connection details
-            if (initializedAdapters.length > 0) {
-              this.setConnection(initializedAdapters, namespaces, walletInfo, properties);
-            }
-
-            this.syncAccounts(initializedAdapters);
-
-            if (
-              OptionsController.state.isSiweEnabled &&
-              ConnectionsController.state.activeNamespace === 'eip155'
-            ) {
-              this.handleSiweChange({ isConnection: true });
-            }
-          }
+
+          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);
@@ -423,7 +410,7 @@ export class AppKit {
     }
 
     adapters.forEach(adapter => {
-      adapter.setConnector(connector);
+      adapter.init({ connector });
       this.subscribeToAdapterEvents(adapter);
     });
 
@@ -543,9 +530,7 @@ export class AppKit {
   private subscribeToAdapterEvents(adapter: BlockchainAdapter): void {
     adapter.on('accountsChanged', ({ accounts }) => {
       const namespace = adapter.getSupportedNamespace();
-      //eslint-disable-next-line no-console
-      console.log('accountsChanged', accounts, namespace);
-      //TODO: check this
+      ConnectionsController.updateAccounts(namespace, accounts);
 
       if (namespace === 'eip155') {
         this.handleSiweChange({ isAccountChange: true });
@@ -579,7 +564,6 @@ export class AppKit {
       this.disconnect(namespace, false);
     });
 
-    //TODO: Add types to this events
     adapter.on('balanceChanged', ({ address, balance }) => {
       //eslint-disable-next-line no-console
       console.log('balanceChanged', address, balance);
@@ -597,7 +581,6 @@ export class AppKit {
     this.setExcludedWallets(options);
     this.setCustomWallets(options);
     OptionsController.setFeaturedWalletIds(options.featuredWalletIds);
-    OptionsController.setTokens(options.tokens);
     OptionsController.setEnableAnalytics(options.enableAnalytics);
     OptionsController.setDebug(options.debug);
     OptionsController.setFeatures(options.features);
@@ -645,8 +628,6 @@ export class AppKit {
 
   private async initRecentWallets(options: AppKitConfig) {
     const wallets = await StorageUtil.getRecentWallets();
-    const connectedWalletImage = await StorageUtil.getConnectedWalletImageUrl();
-
     const filteredWallets = wallets.filter(wallet => {
       const { includeWalletIds, excludeWalletIds } = options;
       if (includeWalletIds) {
@@ -659,11 +640,7 @@ export class AppKit {
       return true;
     });
 
-    ConnectionController.setRecentWallets(filteredWallets);
-
-    if (connectedWalletImage) {
-      ConnectionController.setConnectedWalletImageUrl(connectedWalletImage);
-    }
+    WcController.setRecentWallets(filteredWallets);
   }
 
   private setExcludedWallets(options: AppKitConfig) {
@@ -673,7 +650,7 @@ export class AppKit {
     const excludeCoinbase = !this.extraConnectors.some(connector => connector.type === 'coinbase');
 
     if (excludeCoinbase) {
-      excludedWallets.push(ConstantsUtil.COINBASE_EXPLORER_ID);
+      excludedWallets.push(ConstantsUtil.COINBASE_CUSTOM_WALLET.id);
     }
 
     OptionsController.setExcludeWalletIds(excludedWallets);
@@ -743,7 +720,7 @@ export class AppKit {
         // If it's connected but there's no session, show sign view
         return this.onSiweNavigation();
       } else if (isConnection) {
-        //Connected with 1CA
+        // Connected with 1CA
         ModalController.close();
       }
     }

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,6 +31,7 @@ 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),
     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,
@@ -11,7 +11,8 @@ import {
   type ConnectOptions,
   type ConnectorInitOptions,
   type Metadata,
-  type ConnectionProperties
+  type ConnectionProperties,
+  type RequestArguments
 } from '@reown/appkit-common-react-native';
 import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
 
@@ -95,7 +96,7 @@ export class WalletConnectConnector extends WalletConnector {
   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;
@@ -201,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;
   }
 
@@ -238,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/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

@@ -17,6 +17,7 @@ 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 { AppKitConfig } from './types';
 
 /****** Hooks *******/
 export { useAppKit } from './hooks/useAppKit';

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

@@ -5,7 +5,8 @@ import {
   ModalController,
   ThemeController,
   ConnectionsController,
-  AssetController
+  AssetController,
+  AssetUtil
 } from '@reown/appkit-core-react-native';
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
 
@@ -26,7 +27,7 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
     identity
   } = useSnapshot(ConnectionsController.state);
 
-  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const networkImage = AssetUtil.getNetworkImage(activeNetwork, networkImages);
   const showBalance = balance === 'show';
 
   return (