@reown/appkit-react-native 0.0.0-feat-multichain-20250520183003 → 0.0.0-feat-multichain-phantom-20250606183519

package/src/AppKit.ts

@@ -1,4 +1,5 @@
 import {
+  type Features,
   AccountController,
   EventsController,
   ModalController,
@@ -6,7 +7,6 @@ import {
   OptionsController,
   RouterController,
   TransactionsController,
-  type Metadata,
   StorageUtil,
   type OptionsControllerState,
   ThemeController,
@@ -19,6 +19,7 @@ import type {
   ProposalNamespaces,
   New_ConnectorType,
   Namespaces,
+  Metadata,
   CaipNetworkId,
   AppKitNetwork,
   Provider,
@@ -26,7 +27,9 @@ import type {
   ThemeMode,
   WalletInfo,
   Network,
-  ChainNamespace
+  ChainNamespace,
+  ConnectOptions,
+  Storage
 } from '@reown/appkit-common-react-native';
 
 import { WalletConnectConnector } from './connectors/WalletConnectConnector';
@@ -40,6 +43,7 @@ interface AppKitConfig {
   metadata: Metadata;
   adapters: BlockchainAdapter[];
   networks: Network[];
+  storage: Storage;
   extraConnectors?: WalletConnector[];
   clipboardClient?: OptionsControllerState['clipboardClient'];
   includeWalletIds?: OptionsControllerState['includeWalletIds'];
@@ -53,7 +57,7 @@ interface AppKitConfig {
   themeVariables?: ThemeVariables;
   siweConfig?: AppKitSIWEClient;
   defaultNetwork?: Network;
-  // features?: Features;
+  features?: Features;
   // chainImages?: Record<number, string>; //TODO: rename to networkImages
 }
 
@@ -102,18 +106,17 @@ export class AppKit {
   /**
    * Handles the full connection flow for a given connector type.
    * @param type - The type of connector to use.
-   * @param requestedNamespaces - Optional specific namespaces to request.
+   * @param options - Optional connection options.
    */
-  async connect(type: New_ConnectorType, requestedNamespaces?: ProposalNamespaces): Promise<void> {
+  async connect(type: New_ConnectorType, options?: ConnectOptions): Promise<void> {
     try {
+      const { namespaces, defaultChain, universalLink } = options ?? {};
       const connector = await this.createConnector(type);
-      const defaultChain = this.defaultNetwork
-        ? NetworkUtil.getDefaultChainId(this.defaultNetwork)
-        : undefined;
 
       const approvedNamespaces = await connector.connect({
-        namespaces: requestedNamespaces ?? this.namespaces,
-        defaultChain
+        namespaces: namespaces ?? this.namespaces,
+        defaultChain,
+        universalLink
       });
 
       const walletInfo = connector.getWalletInfo();
@@ -166,10 +169,12 @@ export class AppKit {
         return;
       }
 
-      const connection = ConnectionsController.state.connections[activeNamespace];
+      const connection = ConnectionsController.state.connections.get(
+        activeNamespace as ChainNamespace
+      );
       const connectorType = connection?.adapter?.connector?.type;
 
-      await ConnectionsController.disconnect(activeNamespace, isInternal);
+      await ConnectionsController.disconnect(activeNamespace as ChainNamespace, isInternal);
 
       if (connectorType) {
         await StorageUtil.removeConnectedConnectors(connectorType);
@@ -203,7 +208,9 @@ export class AppKit {
     const activeNamespace = namespace ?? ConnectionsController.state.activeNamespace;
     if (!activeNamespace) return null;
 
-    const connection = ConnectionsController.state.connections[activeNamespace];
+    const connection = ConnectionsController.state.connections.get(
+      activeNamespace as ChainNamespace
+    );
     if (!connection || !connection.adapter || !connection.adapter.connector) return null;
 
     return connection.adapter.connector.getProvider() as T;
@@ -227,7 +234,7 @@ export class AppKit {
       }
     });
 
-    ConnectionsController.setActiveChain(
+    ConnectionsController.setActiveNetwork(
       adapter.getSupportedNamespace(),
       `${adapter.getSupportedNamespace()}:${network.id}` as CaipNetworkId
     );
@@ -248,15 +255,28 @@ export class AppKit {
   private async createConnector(type: New_ConnectorType): Promise<WalletConnector> {
     // Check if an extra connector was provided by the developer
     const CustomConnector = this.extraConnectors.find(
-      connector => connector.constructor.name.toLowerCase() === type.toLowerCase()
+      connector => connector.type.toLowerCase() === type.toLowerCase()
     );
 
     if (CustomConnector) {
+      await CustomConnector.init({
+        storage: OptionsController.state.storage!,
+        metadata: this.metadata
+      });
+
       return CustomConnector;
     }
 
     // Default to WalletConnectConnector if no custom connector matches
-    return WalletConnectConnector.create({ projectId: this.projectId, metadata: this.metadata });
+    const walletConnectConnector = new WalletConnectConnector({
+      projectId: this.projectId
+    });
+    await walletConnectConnector.init({
+      storage: OptionsController.state.storage!,
+      metadata: this.metadata
+    });
+
+    return walletConnectConnector;
   }
 
   //TODO: reuse logic with connect method
@@ -327,28 +347,36 @@ export class AppKit {
   }
 
   private getAdapterByNamespace(namespace: ChainNamespace): BlockchainAdapter | null {
-    const namespaceConnection = ConnectionsController.state.connections[namespace];
+    const namespaceConnection = ConnectionsController.state.connections.get(namespace);
+    if (namespaceConnection) {
+      return namespaceConnection.adapter;
+    }
 
-    return namespaceConnection?.adapter ?? null;
+    return null;
   }
 
   private async syncAccounts(adapters: BlockchainAdapter[]) {
-    // Get account balances
-    adapters.map(adapter => {
+    adapters.forEach(async adapter => {
       const namespace = adapter.getSupportedNamespace();
-      const connection = ConnectionsController.state.connections[namespace];
-
-      if (!connection) return;
-
-      const network = this.networks.find(
-        n => n.id?.toString() === connection?.activeChain?.split(':')[1]
-      );
-
-      const address =
-        adapter.getAccounts()?.find(a => a.startsWith(connection?.activeChain)) ??
-        adapter.getAccounts()?.[0];
-
-      adapter.getBalance({ address, network, tokens: this.config.tokens });
+      const connection = ConnectionsController.state.connections.get(namespace);
+      if (connection) {
+        const accounts = adapter.getAccounts();
+        if (accounts && accounts.length > 0) {
+          ConnectionsController.updateAccounts(namespace, accounts);
+
+          const network = this.networks.find(
+            n => n.id?.toString() === connection?.caipNetwork?.split(':')[1]
+          );
+
+          const address = accounts.find(
+            a => a.split(':')[1] === connection.caipNetwork?.split(':')[1]
+          );
+
+          if (address) {
+            adapter.getBalance({ address, network, tokens: this.config.tokens });
+          }
+        }
+      }
     });
   }
 
@@ -364,14 +392,14 @@ export class AppKit {
 
       const accounts = namespaceDetails.accounts ?? [];
       const chains = namespaceDetails.chains ?? [];
-      const activeChain = adapter?.connector?.getChainId(namespace);
+      const caipNetwork = adapter?.connector?.getChainId(namespace);
 
       ConnectionsController.storeConnection({
         namespace,
         adapter,
         accounts,
         chains,
-        activeChain,
+        caipNetwork,
         wallet
       });
     });
@@ -387,15 +415,17 @@ export class AppKit {
   }
 
   private subscribeToAdapterEvents(adapter: BlockchainAdapter): void {
-    adapter.on('accountsChanged', ({ accounts, namespace }) => {
+    adapter.on('accountsChanged', ({ accounts }) => {
+      const namespace = adapter.getSupportedNamespace();
       //eslint-disable-next-line no-console
       console.log('accountsChanged', accounts, namespace);
       //TODO: check this
     });
 
-    adapter.on('chainChanged', ({ chainId, namespace }) => {
+    adapter.on('chainChanged', ({ chainId }) => {
+      const namespace = adapter.getSupportedNamespace();
       const chain = `${namespace}:${chainId}` as CaipNetworkId;
-      ConnectionsController.setActiveChain(namespace, chain);
+      ConnectionsController.setActiveNetwork(namespace, chain);
 
       const network = this.networks.find(n => n.id?.toString() === chainId);
       if (network) {
@@ -406,18 +436,19 @@ export class AppKit {
       }
     });
 
-    adapter.on('disconnect', ({ namespace }) => {
-      // console.log('AppKit disconnect namespace', namespace);
+    adapter.on('disconnect', () => {
+      const namespace = adapter.getSupportedNamespace();
       this.disconnect(namespace, false);
     });
 
-    adapter.on('balanceChanged', ({ namespace, address, balance }) => {
+    adapter.on('balanceChanged', ({ address, balance }) => {
+      const namespace = adapter.getSupportedNamespace();
       ConnectionsController.updateBalance(namespace, address, balance);
     });
   }
 
   private async initControllers(options: AppKitConfig) {
-    await this.initAsyncValues();
+    await this.initAsyncValues(options);
 
     OptionsController.setProjectId(options.projectId);
     OptionsController.setMetadata(options.metadata);
@@ -428,7 +459,8 @@ export class AppKit {
     OptionsController.setCustomWallets(options.customWallets);
     OptionsController.setEnableAnalytics(options.enableAnalytics);
     OptionsController.setDebug(options.debug);
-    // OptionsController.setFeatures(options.features);
+    OptionsController.setFeatures(options.features);
+    OptionsController.setStorage(options.storage);
 
     ThemeController.setThemeMode(options.themeMode);
     ThemeController.setThemeVariables(options.themeVariables);
@@ -454,7 +486,7 @@ export class AppKit {
     // }
   }
 
-  private async initAsyncValues() {
+  private async initActiveNamespace() {
     const activeNamespace = await StorageUtil.getActiveNamespace();
     if (activeNamespace) {
       ConnectionsController.setActiveNamespace(activeNamespace);
@@ -462,6 +494,35 @@ export class AppKit {
       ConnectionsController.setActiveNamespace(this.defaultNetwork?.chainNamespace);
     }
   }
+
+  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) {
+        return includeWalletIds.includes(wallet.id);
+      }
+      if (excludeWalletIds) {
+        return !excludeWalletIds.includes(wallet.id);
+      }
+
+      return true;
+    });
+
+    ConnectionController.setRecentWallets(filteredWallets);
+
+    if (connectedWalletImage) {
+      ConnectionController.setConnectedWalletImageUrl(connectedWalletImage);
+    }
+  }
+
+  private async initAsyncValues(options: AppKitConfig) {
+    await this.initActiveNamespace();
+    await this.initRecentWallets(options);
+    //disable coinbase if connector is not set
+  }
 }
 
 export function createAppKit(config: AppKitConfig): AppKit {

package/src/client.ts

@@ -343,7 +343,6 @@ export class AppKitScaffold {
 
   private async initRecentWallets(options: ScaffoldOptions) {
     const wallets = await StorageUtil.getRecentWallets();
-    const connectedWalletImage = await StorageUtil.getConnectedWalletImageUrl();
 
     const filteredWallets = wallets.filter(wallet => {
       const { includeWalletIds, excludeWalletIds } = options;
@@ -358,10 +357,6 @@ export class AppKitScaffold {
     });
 
     ConnectionController.setRecentWallets(filteredWallets);
-
-    if (connectedWalletImage) {
-      ConnectionController.setConnectedWalletImageUrl(connectedWalletImage);
-    }
   }
 
   private async initConnectedConnector() {

package/src/connectors/WalletConnectConnector.ts

@@ -1,21 +1,48 @@
-import { type Metadata, ConnectionController } from '@reown/appkit-core-react-native';
+import { ConnectionController } from '@reown/appkit-core-react-native';
 import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
 import {
   WalletConnector,
   type AppKitNetwork,
   type Namespaces,
-  type ProposalNamespaces,
   type Provider,
   type WalletInfo,
   type ChainNamespace,
-  type CaipNetworkId
+  type CaipNetworkId,
+  type ConnectOptions,
+  type ConnectorInitOptions,
+  type Metadata
 } from '@reown/appkit-common-react-native';
 
+interface WalletConnectConnectorConfig {
+  projectId: string;
+}
+
 export class WalletConnectConnector extends WalletConnector {
-  private static universalProviderInstance: IUniversalProvider | null = null;
+  private readonly config: WalletConnectConnectorConfig;
+
+  constructor(config: WalletConnectConnectorConfig) {
+    super({ type: 'walletconnect' });
+    this.config = config;
+  }
+
+  override async init(ops: ConnectorInitOptions) {
+    super.init(ops);
+
+    const provider = await this.getUniversalProvider({
+      projectId: this.config.projectId,
+      metadata: ops.metadata
+    });
+
+    this.provider = provider as Provider;
+
+    await this.restoreSession();
+  }
 
-  private constructor(provider: IUniversalProvider) {
-    super({ type: 'walletconnect', provider: provider as Provider });
+  private async restoreSession(): Promise<boolean> {
+    const provider = this.getProvider() as IUniversalProvider;
+    if (!provider) {
+      return false;
+    }
 
     if (provider.session?.namespaces) {
       this.namespaces = provider.session.namespaces as Namespaces;
@@ -31,50 +58,41 @@ export class WalletConnectConnector extends WalletConnector {
         };
       }
     }
+
+    return true;
   }
 
-  private static async getUniversalProvider({
+  private async getUniversalProvider({
     projectId,
     metadata
   }: {
     projectId: string;
     metadata: Metadata;
   }): Promise<IUniversalProvider> {
-    if (!WalletConnectConnector.universalProviderInstance) {
-      WalletConnectConnector.universalProviderInstance = await UniversalProvider.init({
+    if (!this.provider) {
+      this.provider = (await UniversalProvider.init({
         projectId,
-        metadata
-      });
+        metadata,
+        storage: this.storage
+      })) as Provider;
     }
 
-    return WalletConnectConnector.universalProviderInstance;
-  }
-
-  public static async create({
-    projectId,
-    metadata
-  }: {
-    projectId: string;
-    metadata: Metadata;
-  }): Promise<WalletConnectConnector> {
-    const provider = await WalletConnectConnector.getUniversalProvider({
-      projectId,
-      metadata
-    });
-
-    return new WalletConnectConnector(provider);
+    return this.provider as IUniversalProvider;
   }
 
   override disconnect(): Promise<void> {
-    return this.provider.disconnect();
+    return this.getProvider().disconnect();
   }
 
-  override async connect(opts: { namespaces: ProposalNamespaces; defaultChain?: CaipNetworkId }) {
+  override async connect(opts: ConnectOptions) {
     function onUri(uri: string) {
       ConnectionController.setWcUri(uri);
     }
 
-    this.provider.on('display_uri', onUri);
+    const provider = this.getProvider() as IUniversalProvider;
+
+    // @ts-ignore
+    provider.on('display_uri', onUri);
 
     const session = await (this.provider as IUniversalProvider).connect({
       namespaces: {},
@@ -87,12 +105,16 @@ export class WalletConnectConnector extends WalletConnector {
 
     this.namespaces = session?.namespaces as Namespaces;
 
-    this.provider.off('display_uri', onUri);
+    provider.off('display_uri', onUri);
 
     return this.namespaces;
   }
 
   override getProvider(): Provider {
+    if (!this.provider) {
+      throw new Error('WalletConnectConnector: Provider not initialized. Call init() first.');
+    }
+
     return this.provider;
   }
 

package/src/hooks/useAccount.ts

@@ -11,11 +11,11 @@ export function useAccount() {
     connections
   } = useSnapshot(ConnectionsController.state);
 
-  const connection = activeNamespace ? connections[activeNamespace] : undefined;
+  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
 
   return {
     address: address?.split(':')[2],
     isConnected: !!address,
-    chainId: connection?.activeChain
+    chainId: connection?.caipNetwork
   };
 }

package/src/hooks/useProvider.ts

@@ -7,12 +7,14 @@ interface ProviderResult {
   providerType?: ChainNamespace;
 }
 
-export function useProvider(namespace?: string): ProviderResult {
+export function useProvider(namespace?: ChainNamespace): ProviderResult {
   const { connections, activeNamespace } = useSnapshot(ConnectionsController.state);
 
-  if (!namespace || !activeNamespace) return { provider: undefined, providerType: undefined };
+  const targetNamespace = namespace ?? activeNamespace;
 
-  const connection = connections[namespace ?? activeNamespace];
+  if (!targetNamespace) return { provider: undefined, providerType: undefined };
+
+  const connection = connections.get(targetNamespace);
 
   if (!connection) return { provider: undefined, providerType: undefined };
 

package/src/index.ts

@@ -21,8 +21,10 @@ export type * from '@reown/appkit-core-react-native';
 export { CoreHelperUtil } from '@reown/appkit-core-react-native';
 
 export * from './AppKit';
-export * from './networks';
 export { AppKitProvider } from './AppKitContext';
+
+export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
+
 export { WalletConnectConnector } from './connectors/WalletConnectConnector';
 
 /****** Hooks *******/
@@ -31,3 +33,7 @@ export { useProvider } from './hooks/useProvider';
 export { useAccount } from './hooks/useAccount';
 export { useWalletInfo } from './hooks/useWalletInfo';
 export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEvents';
+
+/********** Networks **********/
+export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';
+export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';

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

@@ -15,6 +15,7 @@ import {
   AccountController,
   AssetUtil,
   ConnectionsController,
+  ConstantsUtil,
   EventsController,
   OptionsController,
   TransactionsController
@@ -32,9 +33,11 @@ export function AccountActivity({ style }: Props) {
   const [refreshing, setRefreshing] = useState(false);
   const [initialLoad, setInitialLoad] = useState(true);
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
-  const { activeNetwork, activeNamespace } = useSnapshot(ConnectionsController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
-  const isSupported = activeNamespace && ['eip155', 'solana'].includes(activeNamespace);
+  const isSupported =
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
 
   const handleLoadMore = () => {
     const address = ConnectionsController.state.activeAddress?.split(':')[2];

package/src/partials/w3m-account-wallet-features/index.tsx

@@ -3,10 +3,10 @@ import { useSnapshot } from 'valtio';
 import { Balance, FlexView, IconLink, Tabs } from '@reown/appkit-ui-react-native';
 import {
   AccountController,
+  ConnectionsController,
   ConstantsUtil,
   CoreHelperUtil,
   EventsController,
-  NetworkController,
   OnRampController,
   OptionsController,
   RouterController,
@@ -25,8 +25,12 @@ export function AccountWalletFeatures() {
   const [activeTab, setActiveTab] = useState(0);
   const { tokenBalance } = useSnapshot(AccountController.state);
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
+  const { activeNetwork } = useSnapshot(ConnectionsController.state);
   const balance = CoreHelperUtil.calculateAndFormatBalance(tokenBalance as BalanceType[]);
-  const isSwapsEnabled = features?.swaps;
+  const isSwapsEnabled =
+    features?.swaps &&
+    activeNetwork?.caipNetworkId &&
+    ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(activeNetwork.caipNetworkId);
 
   const onTabChange = (index: number) => {
     setActiveTab(index);
@@ -46,23 +50,16 @@ export function AccountWalletFeatures() {
   };
 
   const onSwapPress = () => {
-    if (
-      NetworkController.state.caipNetwork?.id &&
-      !ConstantsUtil.SWAP_SUPPORTED_NETWORKS.includes(`${NetworkController.state.caipNetwork.id}`)
-    ) {
-      RouterController.push('UnsupportedChain');
-    } else {
-      SwapController.resetState();
-      EventsController.sendEvent({
-        type: 'track',
-        event: 'OPEN_SWAP',
-        properties: {
-          network: NetworkController.state.caipNetwork?.id || '',
-          isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
-        }
-      });
-      RouterController.push('Swap');
-    }
+    SwapController.resetState();
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'OPEN_SWAP',
+      properties: {
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+      }
+    });
+    RouterController.push('Swap');
   };
 
   const onSendPress = () => {
@@ -70,7 +67,7 @@ export function AccountWalletFeatures() {
       type: 'track',
       event: 'OPEN_SEND',
       properties: {
-        network: NetworkController.state.caipNetwork?.id || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
         isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
       }
     });

package/src/partials/w3m-send-input-token/index.tsx

@@ -43,7 +43,7 @@ export function SendInputToken({
       const isNetworkToken =
         token.address === undefined ||
         Object.values(ConstantsUtil.NATIVE_TOKEN_ADDRESS).some(
-          nativeAddress => token?.address === nativeAddress
+          nativeAddress => token?.address?.split(':')[2] === nativeAddress
         );
 
       const numericGas = NumberUtil.bigNumber(gasPrice).shiftedBy(-token.quantity.decimals);

package/src/partials/w3m-swap-details/index.tsx

@@ -1,6 +1,10 @@
 import { useSnapshot } from 'valtio';
 import { useState } from 'react';
-import { ConstantsUtil, NetworkController, SwapController } from '@reown/appkit-core-react-native';
+import {
+  ConnectionsController,
+  ConstantsUtil,
+  SwapController
+} from '@reown/appkit-core-react-native';
 import {
   FlexView,
   Text,
@@ -80,7 +84,7 @@ export function SwapDetails({ initialOpen, canClose }: SwapDetailsProps) {
     setModalData(
       getModalData('networkCost', {
         networkSymbol: SwapController.state.networkTokenSymbol,
-        networkName: NetworkController.state.caipNetwork?.name
+        networkName: ConnectionsController.state.activeNetwork?.name
       })
     );
   };

package/src/partials/w3m-swap-input/index.tsx

@@ -128,7 +128,7 @@ export function SwapInput({
             >
               <Text variant="small-400" color="fg-200" numberOfLines={1}>
                 {isMarketValueGreaterThanZero
-                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 2)}`
+                  ? `~$${UiUtil.formatNumberToLocalString(marketValue, 6)}`
                   : ''}
               </Text>
               {showMax && (

package/src/utils/HelpersUtil.ts

@@ -1,14 +1,10 @@
 import type { Namespace, NamespaceConfig } from '@walletconnect/universal-provider';
-
 import type {
   AppKitNetwork,
   CaipNetworkId,
   ChainNamespace
 } from '@reown/appkit-common-react-native';
-import { solana, solanaDevnet } from '../networks/solana';
-// import { EnsController, type OptionsControllerState } from '@reown/appkit-controllers'
-
-// import { solana, solanaDevnet } from '../networks/index.js'
+import { solana, solanaDevnet } from '@reown/appkit-common-react-native';
 
 export const DEFAULT_METHODS = {
   solana: [