@reown/appkit-react-native 0.0.0-chore-solflare-20250730210452 → 0.0.0-chore-spring-effect-20250909214820

package/src/AppKit.ts

@@ -1,5 +1,5 @@
+import { subscribeKey } from 'valtio/utils';
 import {
-  type Features,
   EventsController,
   ModalController,
   ConnectionsController,
@@ -7,14 +7,15 @@ import {
   RouterController,
   TransactionsController,
   StorageUtil,
-  type OptionsControllerState,
   ThemeController,
-  ConnectionController,
+  WcController,
   SwapController,
   OnRampController,
   CoreHelperUtil,
   SendController,
-  BlockchainApiController
+  BlockchainApiController,
+  WalletUtil,
+  type RouterControllerState
 } from '@reown/appkit-core-react-native';
 
 import {
@@ -23,23 +24,18 @@ 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,
   ConstantsUtil,
-  type Connection
+  type Connection,
+  type WcWallet
 } from '@reown/appkit-common-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
@@ -47,29 +43,7 @@ import { WalletConnectConnector } from './connectors/WalletConnectConnector';
 import { WcHelpersUtil } from './utils/HelpersUtil';
 import { NetworkUtil } from './utils/NetworkUtil';
 import { RouterUtil } from './utils/RouterUtil';
-
-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 { type AppKitConfig } from './types';
 
 export class AppKit {
   private projectId: string;
@@ -79,6 +53,7 @@ export class AppKit {
   private config: AppKitConfig;
   private extraConnectors: WalletConnector[];
   private walletConnectConnector?: WalletConnector;
+  private balanceIntervalId?: ReturnType<typeof setInterval>;
 
   constructor(config: AppKitConfig) {
     this.projectId = config.projectId;
@@ -115,12 +90,16 @@ 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 || [];
 
     this.initControllers(config);
     this.initConnectors();
+    this.watchBalance();
   }
 
   /**
@@ -128,59 +107,42 @@ export class AppKit {
    * @param type - The type of connector to use.
    * @param options - Optional connection options.
    */
-  async connect(type: ConnectorType, options?: AppKitConnectOptions): Promise<void> {
+  async connect(options?: AppKitConnectOptions): Promise<void> {
     try {
-      const { namespaces, defaultChain, universalLink } = options ?? {};
-      const connector = await this.createConnector(type);
-
-      const chain =
-        defaultChain ??
-        NetworkUtil.getDefaultChainId(this.namespaces, OptionsController.state.defaultNetwork);
+      const { wallet, walletId } = options ?? {};
 
-      const approvedNamespaces = await connector.connect({
-        namespaces: namespaces ?? this.namespaces,
-        defaultChain: chain,
-        universalLink,
-        siweConfig: this.config?.siweConfig
-      });
+      let targetWallet: WcWallet | undefined;
 
-      const walletInfo = connector.getWalletInfo();
-      const properties = connector.getProperties();
-
-      if (!approvedNamespaces || Object.keys(approvedNamespaces).length === 0) {
-        throw new Error('Connection cancelled or failed: No approved namespaces returned.');
+      if (walletId) {
+        targetWallet = WalletUtil.getWallet(walletId);
+      } else if (wallet) {
+        targetWallet = wallet;
       }
 
-      // Setup adapters and subscribe to adapter events
-      const approvedAdapters = this.setupAdaptersAndSubscribe(
-        connector,
-        Object.keys(approvedNamespaces)
-      );
+      const connectorType = WcHelpersUtil.getConnectorTypeByWallet(targetWallet);
 
-      // 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 connector = await this.createConnector(connectorType);
 
-      // Store the connection details for the successfully connected adapters
-      this.setConnection(approvedAdapters, approvedNamespaces, walletInfo, properties);
+      const chain = NetworkUtil.getDefaultNetwork(
+        this.namespaces,
+        OptionsController.state.defaultNetwork
+      );
 
-      // Store connector type and namespaces in storage
-      await StorageUtil.setConnectedConnectors({
-        type: connector.type,
-        namespaces: Object.keys(approvedNamespaces)
+      const approvedNamespaces = await connector.connect({
+        namespaces: this.namespaces,
+        defaultNetwork: chain,
+        universalLink: targetWallet?.link_mode ?? undefined,
+        siweConfig: this.config?.siweConfig
       });
 
-      this.syncAccounts(approvedAdapters);
+      this.processConnection(connector, approvedNamespaces);
 
-      if (
-        OptionsController.state.isSiweEnabled &&
-        ConnectionsController.state.activeNamespace === 'eip155'
-      ) {
-        this.handleSiweChange({ isConnection: true });
-      } else {
-        ModalController.close();
+      // 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);
@@ -188,6 +150,47 @@ export class AppKit {
     }
   }
 
+  private async processConnection(
+    connector: WalletConnector,
+    namespaces?: Namespaces,
+    shouldCloseModal: boolean = true
+  ) {
+    if (!namespaces || Object.keys(namespaces).length === 0) {
+      throw new Error('No namespaces provided');
+    }
+
+    const walletInfo = connector.getWalletInfo();
+    const properties = connector.getProperties();
+
+    const initializedAdapters = this.setupAdaptersAndSubscribe(connector, Object.keys(namespaces));
+
+    if (initializedAdapters.length === 0) {
+      console.warn('No compatible adapters found for namespaces:', Object.keys(namespaces));
+
+      return;
+    }
+
+    // Store the connection details
+    this.setConnection(initializedAdapters, namespaces, walletInfo, properties);
+
+    // Sync accounts
+    await 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();
+    }
+  }
+
   /**
    * Disconnects from a given namespace.
    * @param namespace - The namespace to disconnect from.
@@ -219,7 +222,7 @@ export class AppKit {
       SwapController.resetState();
       SendController.resetState();
       OnRampController.resetState();
-      ConnectionController.disconnect();
+      WcController.resetState();
 
       if (ConnectionsController.state.activeNamespace === undefined) {
         ConnectionsController.setActiveNamespace(
@@ -287,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) {
@@ -308,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();
   }
@@ -330,13 +333,18 @@ 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.syncBalances(adapter, network);
+    this.syncNativeBalance(adapter, network);
 
     EventsController.sendEvent({
       type: 'track',
@@ -383,13 +391,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);
 
@@ -398,31 +405,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 });
-            }
-          }
+
+          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);
@@ -449,7 +433,7 @@ export class AppKit {
     }
 
     adapters.forEach(adapter => {
-      adapter.setConnector(connector);
+      adapter.init({ connector });
       this.subscribeToAdapterEvents(adapter);
     });
 
@@ -473,12 +457,12 @@ export class AppKit {
         n => n.id?.toString() === connection?.caipNetwork?.split(':')[1]
       );
 
-      this.syncBalances(adapter, network);
+      this.syncNativeBalance(adapter, network);
       this.syncIdentity(namespace, connection);
     });
   }
 
-  private syncBalances(adapter: BlockchainAdapter, network?: AppKitNetwork) {
+  private syncNativeBalance(adapter: BlockchainAdapter, network?: AppKitNetwork) {
     if (adapter && network) {
       const accounts = adapter.getAccounts();
       if (accounts && accounts.length > 0) {
@@ -527,6 +511,55 @@ export class AppKit {
     }
   }
 
+  private refreshBalance(fetchAllBalances: boolean = false) {
+    try {
+      if (fetchAllBalances) {
+        ConnectionsController.fetchBalance();
+      }
+      const ns = ConnectionsController.state.activeNamespace;
+      const network = ConnectionsController.state.activeNetwork;
+      if (ns && network) {
+        const adapter = this.getAdapterByNamespace(ns);
+        if (adapter) {
+          this.syncNativeBalance(adapter, network);
+        }
+      }
+    } catch {
+      // ignore
+    }
+  }
+
+  private startBalancePolling(fetchAllBalances: boolean = false) {
+    if (this.balanceIntervalId) return;
+    // immediate fetch
+    this.refreshBalance(fetchAllBalances);
+    this.balanceIntervalId = setInterval(() => this.refreshBalance(fetchAllBalances), 10000);
+  }
+
+  private stopBalancePolling() {
+    if (this.balanceIntervalId) {
+      clearInterval(this.balanceIntervalId);
+      this.balanceIntervalId = undefined;
+    }
+  }
+
+  private watchBalance() {
+    // watch balance when user is on account or account default view
+    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');
+      } else {
+        this.stopBalancePolling();
+      }
+    };
+    recomputePolling();
+    subscribeKey(RouterController.state, 'view', () => recomputePolling());
+    subscribeKey(ModalController.state, 'open', () => recomputePolling());
+  }
+
   private setConnection(
     adapters: BlockchainAdapter[],
     approvedNamespaces: Namespaces,
@@ -543,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({
@@ -569,32 +603,43 @@ 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
+      const hasChanged = ConnectionsController.updateAccounts(namespace, accounts);
 
-      if (namespace === 'eip155') {
+      if (hasChanged && namespace === 'eip155') {
         this.handleSiweChange({ isAccountChange: true });
       }
     });
 
-    adapter.on('chainChanged', ({ chainId }) => {
-      //eslint-disable-next-line no-console
-      console.log('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 network = this.networks.find(n => n.id?.toString() === chainId);
-      this.syncBalances(adapter, network);
+      this.syncNativeBalance(adapter, network);
       SendController.resetState();
 
+      // Refresh balance for embedded wallets
       if (isAuth) {
         ConnectionsController.fetchBalance();
       }
 
+      const address = connection?.accounts?.find(account =>
+        account.startsWith(`${namespace}:${chainId}`)
+      );
+      if (address) {
+        TransactionsController.fetchTransactions(address, true);
+      }
+
+      // Check if user needs to sign in again
       if (namespace === 'eip155') {
         this.handleSiweChange({ isNetworkChange: true });
       }
@@ -605,10 +650,7 @@ 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);
       const namespace = adapter.getSupportedNamespace();
       ConnectionsController.updateBalance(namespace, address, balance);
     });
@@ -623,10 +665,10 @@ 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);
+    OptionsController.setRequestedNetworks(this.networks);
 
     if (options.defaultNetwork) {
       const network = NetworkUtil.formatNetwork(options.defaultNetwork, this.projectId);
@@ -648,6 +690,7 @@ export class AppKit {
 
     if (options.siweConfig) {
       SIWEController.setSIWEClient(options.siweConfig);
+      OptionsController.setIsSiweEnabled(options.siweConfig.options.enabled);
     }
 
     if (
@@ -671,25 +714,22 @@ 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) {
+
+      if (includeWalletIds?.length) {
         return includeWalletIds.includes(wallet.id);
       }
-      if (excludeWalletIds) {
+      if (excludeWalletIds?.length) {
         return !excludeWalletIds.includes(wallet.id);
       }
 
-      return true;
+      return this.networks.some(
+        network => wallet.chains?.some(chain => network.caipNetworkId === chain)
+      );
     });
 
-    ConnectionController.setRecentWallets(filteredWallets);
-
-    if (connectedWalletImage) {
-      ConnectionController.setConnectedWalletImageUrl(connectedWalletImage);
-    }
+    WcController.setRecentWallets(filteredWallets);
   }
 
   private setExcludedWallets(options: AppKitConfig) {
@@ -699,7 +739,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);
@@ -710,8 +750,12 @@ export class AppKit {
 
     const customList = [...(customWallets ?? [])];
 
-    const addPhantom =
+    const isSolanaEnabled =
       adapters.some(adapter => adapter.getSupportedNamespace() === 'solana') &&
+      this.networks.some(network => network.chainNamespace === 'solana');
+
+    const addPhantom =
+      isSolanaEnabled &&
       extraConnectors?.some(connector => connector.type.toLowerCase() === 'phantom') &&
       !customList.some(wallet => wallet.id === ConstantsUtil.PHANTOM_CUSTOM_WALLET.id);
 
@@ -720,7 +764,7 @@ export class AppKit {
     }
 
     const addSolflare =
-      adapters.some(adapter => adapter.getSupportedNamespace() === 'solana') &&
+      isSolanaEnabled &&
       extraConnectors?.some(connector => connector.type.toLowerCase() === 'solflare') &&
       !customList.some(wallet => wallet.id === ConstantsUtil.SOLFLARE_CUSTOM_WALLET.id);
 
@@ -741,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 });
     }
   };
 
@@ -758,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

@@ -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');