@reown/appkit-wagmi-react-native 0.0.0-feat-onramp-20250409135734 → 0.0.0-feat-multichain-20250512202036

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reown/appkit-wagmi-react-native",
-  "version": "0.0.0-feat-onramp-20250409135734",
+  "version": "0.0.0-feat-multichain-20250512202036",
   "main": "lib/commonjs/index.js",
   "types": "lib/typescript/index.d.ts",
   "module": "lib/module/index.js",
@@ -39,10 +39,10 @@
     "access": "public"
   },
   "dependencies": {
-    "@reown/appkit-common-react-native": "0.0.0-feat-onramp-20250409135734",
-    "@reown/appkit-scaffold-react-native": "0.0.0-feat-onramp-20250409135734",
-    "@reown/appkit-scaffold-utils-react-native": "0.0.0-feat-onramp-20250409135734",
-    "@reown/appkit-siwe-react-native": "0.0.0-feat-onramp-20250409135734"
+    "@reown/appkit-common-react-native": "0.0.0-feat-multichain-20250512202036",
+    "@reown/appkit-react-native": "0.0.0-feat-multichain-20250512202036",
+    "@reown/appkit-scaffold-utils-react-native": "0.0.0-feat-multichain-20250512202036",
+    "@reown/appkit-siwe-react-native": "0.0.0-feat-multichain-20250512202036"
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=1.17.0",

package/src/adapter.ts

@@ -0,0 +1,192 @@
+import {
+  EVMAdapter,
+  WalletConnector,
+  type AppKitNetwork,
+  type CaipAddress,
+  type ChainNamespace,
+  type GetBalanceParams,
+  type GetBalanceResponse
+} from '@reown/appkit-common-react-native';
+import {
+  type Config,
+  type CreateConfigParameters,
+  createConfig,
+  getBalance as getBalanceWagmi,
+  switchChain as switchChainWagmi,
+  disconnect as disconnectWagmiCore,
+  connect as connectWagmi,
+  type Connector
+} from '@wagmi/core';
+import type { Chain } from 'wagmi/chains';
+import { getTransport } from './utils/helpers';
+import { formatUnits, type Hex } from 'viem';
+import { UniversalConnector } from './connectors/UniversalConnector';
+
+type ConfigParams = Partial<CreateConfigParameters> & {
+  networks: [Chain, ...Chain[]];
+  projectId: string;
+  connectors?: Connector[];
+};
+
+export class WagmiAdapter extends EVMAdapter {
+  private static supportedNamespace: ChainNamespace = 'eip155';
+  public wagmiChains: readonly Chain[] | undefined;
+  public wagmiConfig!: Config;
+  private wagmiConfigConnector?: Connector;
+
+  constructor(configParams: ConfigParams) {
+    super({
+      projectId: configParams.projectId,
+      supportedNamespace: WagmiAdapter.supportedNamespace
+    });
+    this.wagmiChains = configParams.networks;
+    this.wagmiConfig = this.createWagmiInternalConfig(configParams);
+  }
+
+  private createWagmiInternalConfig(configParams: ConfigParams): Config {
+    // Connectors are typically added via wagmiConfig.connectors, but here AppKit manages the connection.
+    // We'll use the `connect` action with our dynamically created connector instance.
+    // So, the `connectors` array for createConfig can be empty and is added later.
+    const initialConnectors: (() => Connector)[] = [];
+
+    const transportsArr = configParams.networks.map(chain => [
+      chain.id,
+      getTransport({ chainId: chain.id, projectId: configParams.projectId })
+    ]);
+    const transports = Object.fromEntries(transportsArr);
+
+    return createConfig({
+      chains: configParams.networks,
+      connectors: initialConnectors, // Empty, as we connect programmatically
+      transports,
+      multiInjectedProviderDiscovery: false
+    });
+  }
+
+  async switchNetwork(network: AppKitNetwork): Promise<void> {
+    if (!this.wagmiConfigConnector) {
+      throw new Error('WagmiAdapter: AppKit connector not set or not connected via Wagmi.');
+    }
+
+    await switchChainWagmi(this.wagmiConfig, {
+      chainId: network.id as number,
+      connector: this.wagmiConfigConnector
+    });
+  }
+
+  async getBalance(params: GetBalanceParams): Promise<GetBalanceResponse> {
+    const { network, address } = params;
+
+    if (!this.connector) throw new Error('No active AppKit connector (EVMAdapter.connector)');
+    if (!network) throw new Error('No network provided');
+
+    if (!this.wagmiConfigConnector) {
+      throw new Error('WagmiAdapter: AppKit connector not properly configured with Wagmi.');
+    }
+
+    const balanceAddress =
+      address ||
+      this.getAccounts()?.find((acc: CaipAddress) => acc.includes(network.id.toString()));
+
+    if (!balanceAddress) {
+      return Promise.resolve({ amount: '0.00', symbol: network.nativeCurrency.symbol || 'ETH' });
+    }
+
+    const accountHex = balanceAddress.split(':')[2] as Hex;
+
+    const token =
+      network?.caipNetworkId && (params.tokens?.[network.caipNetworkId]?.address as Hex);
+
+    const balance = await getBalanceWagmi(this.wagmiConfig, {
+      address: accountHex,
+      chainId: network.id as number,
+      token
+    });
+
+    const formattedBalance = {
+      amount: formatUnits(balance.value, balance.decimals),
+      symbol: balance.symbol,
+      contractAddress: token ? (`${network.caipNetworkId}:${token}` as CaipAddress) : undefined
+    };
+
+    this.emit('balanceChanged', {
+      namespace: this.getSupportedNamespace(),
+      address: balanceAddress,
+      balance: formattedBalance
+    });
+
+    return Promise.resolve(formattedBalance);
+  }
+
+  getAccounts(): CaipAddress[] | undefined {
+    if (!this.connector) {
+      return undefined;
+    }
+
+    const namespaces = this.connector.getNamespaces();
+    if (!namespaces) {
+      return undefined;
+    }
+
+    const supportedNamespaceKey = this.getSupportedNamespace();
+    const accountsForNamespace = namespaces[supportedNamespaceKey];
+
+    return accountsForNamespace?.accounts;
+  }
+
+  async disconnect(): Promise<void> {
+    if (this.wagmiConfigConnector) {
+      await disconnectWagmiCore(this.wagmiConfig, { connector: this.wagmiConfigConnector });
+      this.wagmiConfigConnector = undefined;
+    } else if (this.connector) {
+      await this.connector.disconnect();
+      this.onDisconnect();
+    }
+
+    const evmAdapterInstance = this as any;
+    if ('connector' in evmAdapterInstance) {
+      evmAdapterInstance.connector = undefined;
+    }
+  }
+
+  async request(method: string, params?: any[]) {
+    if (!this.connector) throw new Error('WagmiAdapter: No active AppKit connector');
+    const provider = this.connector.getProvider();
+
+    return provider.request({ method, params });
+  }
+
+  getSupportedNamespace(): ChainNamespace {
+    return WagmiAdapter.supportedNamespace;
+  }
+
+  override setConnector(_connector: WalletConnector): void {
+    super.setConnector(_connector);
+
+    if (_connector && this.wagmiChains) {
+      if (!this.wagmiConfigConnector) {
+        // Manually add the connector to the wagmiConfig
+        const connectorInstance = this.wagmiConfig._internal.connectors.setup(
+          UniversalConnector(_connector)
+        );
+
+        this.wagmiConfig._internal.connectors.setState(prev => [...prev, connectorInstance]);
+        this.wagmiConfigConnector = connectorInstance;
+
+        connectorInstance.emitter.on('message', ({ type }: { type: string }) => {
+          if (type === 'externalDisconnect') {
+            this.onDisconnect();
+
+            this.wagmiConfigConnector = undefined;
+          }
+        });
+
+        try {
+          connectWagmi(this.wagmiConfig, { connector: connectorInstance });
+        } catch (error) {
+          this.wagmiConfigConnector = undefined;
+        }
+      }
+    }
+  }
+}

package/src/connectors/UniversalConnector.ts

@@ -0,0 +1,224 @@
+import type { Provider, WalletConnector } from '@reown/appkit-common-react-native';
+import {
+  getAddress,
+  numberToHex,
+  SwitchChainError,
+  UserRejectedRequestError,
+  type Chain,
+  type Hex
+} from 'viem';
+import { ChainNotConfiguredError, createConnector, ProviderNotFoundError } from 'wagmi';
+
+export function UniversalConnector(appKitProvidedConnector: WalletConnector) {
+  let provider: Provider | undefined;
+
+  let accountsChangedHandler: ((accounts: string[]) => void) | undefined;
+  let chainChangedHandler: ((chainId: string | number) => void) | undefined;
+  let disconnectHandler: ((error?: Error) => void) | undefined;
+
+  type AppKitConnectorProperties = { ready: boolean };
+
+  return createConnector<Provider, AppKitConnectorProperties>(config => ({
+    id: 'walletconnect',
+    name: 'WalletConnect',
+    type: 'walletconnect' as const,
+    ready: !!appKitProvidedConnector.getProvider(),
+
+    async setup() {
+      provider = appKitProvidedConnector.getProvider();
+      // appkitConnector = appKitProvidedConnector;
+      if (provider?.on) {
+        accountsChangedHandler = (accounts: string[]) => {
+          const hexAccounts = accounts.map(acc => getAddress(acc));
+          config.emitter.emit('change', { accounts: hexAccounts });
+          if (hexAccounts.length === 0) {
+            config.emitter.emit('disconnect');
+          }
+        };
+        chainChangedHandler = (chainId: string | number) => {
+          const newChainId = typeof chainId === 'string' ? parseInt(chainId, 10) : chainId;
+          config.emitter.emit('change', { chainId: newChainId });
+        };
+        disconnectHandler = (error?: Error) => {
+          config.emitter.emit('disconnect');
+          if (error) config.emitter.emit('error', { error });
+        };
+
+        if (accountsChangedHandler) provider.on('accountsChanged', accountsChangedHandler);
+        if (chainChangedHandler) provider.on('chainChanged', chainChangedHandler);
+        if (disconnectHandler) provider.on('disconnect', disconnectHandler);
+        if (disconnectHandler) provider.on('session_delete', disconnectHandler);
+      }
+    },
+
+    async connect({ chainId } = {}) {
+      try {
+        const _provider = await this.getProvider();
+        if (!_provider) throw new ProviderNotFoundError();
+
+        // AppKit connector is already connected or handles its own connection.
+        // We just need to sync its state with Wagmi.
+        const accountAddresses = await this.getAccounts();
+        if (!accountAddresses || accountAddresses.length === 0) {
+          throw new UserRejectedRequestError(
+            new Error('No accounts found or user rejected connection via AppKit.')
+          );
+        }
+
+        let currentChainId = await this.getChainId();
+
+        // Handle chain switching if requested and different
+        if (chainId && currentChainId !== chainId) {
+          await this.switchChain?.({ chainId });
+          currentChainId = chainId;
+        }
+
+        this.ready = true;
+
+        return { accounts: accountAddresses, chainId: currentChainId };
+      } catch (error) {
+        if (error instanceof UserRejectedRequestError) throw error;
+        throw new UserRejectedRequestError(error as Error); // Generalize other errors as user rejection for simplicity
+      }
+    },
+
+    async disconnect() {
+      await appKitProvidedConnector.disconnect();
+      config.emitter.emit('message', { type: 'externalDisconnect' });
+      if (provider?.off && accountsChangedHandler && chainChangedHandler && disconnectHandler) {
+        provider.off('accountsChanged', accountsChangedHandler);
+        provider.off('chainChanged', chainChangedHandler);
+        provider.off('disconnect', disconnectHandler);
+        provider.off('session_delete', disconnectHandler);
+        accountsChangedHandler = undefined;
+        chainChangedHandler = undefined;
+        disconnectHandler = undefined;
+      }
+      this.ready = false;
+    },
+
+    async getAccounts() {
+      const namespaces = appKitProvidedConnector.getNamespaces();
+      // @ts-ignore
+      const eip155Accounts = namespaces?.eip155?.accounts;
+      if (!eip155Accounts) return [] as readonly Hex[];
+
+      return eip155Accounts
+        .map((caipAddr: string) => {
+          const parts = caipAddr.split(':');
+
+          return parts.length === 3 ? parts[2] : null;
+        })
+        .filter((addrPart): addrPart is string => !!addrPart)
+        .map((addrPart: string) => getAddress(addrPart)) as readonly Hex[];
+    },
+
+    async getChainId() {
+      const _provider = appKitProvidedConnector.getProvider();
+      if (_provider) {
+        try {
+          const chainId = (await _provider.request({
+            method: 'eth_chainId'
+          })) as string;
+
+          return parseInt(chainId, 10);
+        } catch (e) {
+          // console.warn("Could not get chainId from provider", e);
+        }
+      }
+      // Fallback: Try to get from CAIP accounts if available
+      const namespaces = appKitProvidedConnector.getNamespaces();
+      // @ts-ignore
+      const eip155Accounts = namespaces?.eip155?.accounts;
+      if (eip155Accounts && eip155Accounts.length > 0) {
+        const parts = eip155Accounts[0]?.split(':');
+        if (parts && parts.length > 1 && typeof parts[1] === 'string') {
+          const chainIdNum = parseInt(parts[1], 10);
+          if (!isNaN(chainIdNum)) {
+            return chainIdNum;
+          }
+        }
+      }
+      if (config.chains && config.chains.length > 0) return config.chains[0].id;
+      throw new Error('Unable to determine chainId.');
+    },
+
+    async getProvider() {
+      if (!provider) {
+        provider = appKitProvidedConnector.getProvider();
+      }
+
+      return Promise.resolve(provider);
+    },
+
+    async isAuthorized() {
+      try {
+        const accounts = await this.getAccounts();
+
+        return !!(accounts && accounts.length > 0);
+      } catch {
+        return false;
+      }
+    },
+
+    async switchChain({ chainId }) {
+      const _provider = await this.getProvider();
+      if (!_provider) throw new Error('Provider not available for switching chain.');
+      const currentChainId = await this.getChainId();
+      if (currentChainId === chainId) return config.chains.find(c => c.id === chainId) as Chain;
+
+      try {
+        await _provider.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: numberToHex(chainId) }]
+        });
+        config.emitter.emit('change', { chainId });
+
+        return config.chains.find(c => c.id === chainId) as Chain;
+      } catch (error) {
+        const chain = config.chains.find(c => c.id === chainId);
+        // Check if chain is not configured
+        if (!chain) throw new SwitchChainError(new ChainNotConfiguredError());
+
+        // Try to add chain if switch failed (common pattern)
+        //4902 in MetaMask: Unrecognized chain ID
+        if ((error as any)?.code === 4902 || (error as any)?.data?.originalError?.code === 4902) {
+          try {
+            await _provider.request({
+              method: 'wallet_addEthereumChain',
+              params: [
+                {
+                  chainId: numberToHex(chainId),
+                  chainName: chain.name,
+                  nativeCurrency: chain.nativeCurrency,
+                  rpcUrls: [chain.rpcUrls.default?.http[0] ?? ''], // Take first default HTTP RPC URL
+                  blockExplorerUrls: [chain.blockExplorers?.default?.url]
+                }
+              ]
+            });
+            config.emitter.emit('change', { chainId });
+
+            return chain;
+          } catch (addError) {
+            throw new UserRejectedRequestError(addError as Error);
+          }
+        }
+        throw new SwitchChainError(error as Error);
+      }
+    },
+
+    onAccountsChanged(accounts: string[]) {
+      if (accounts.length === 0) this.onDisconnect();
+      else config.emitter.emit('change', { accounts: accounts.map(x => getAddress(x)) });
+    },
+
+    onChainChanged(chain: string) {
+      const chainId = Number(chain);
+      config.emitter.emit('change', { chainId });
+    },
+
+    onDisconnect: () => {
+      config.emitter.emit('disconnect');
+    }
+  }));
+}

package/src/index.tsx

@@ -1,123 +1,3 @@
-import '@walletconnect/react-native-compat';
-import { useEffect, useState, useSyncExternalStore } from 'react';
-export {
-  AccountButton,
-  AppKitButton,
-  ConnectButton,
-  NetworkButton,
-  AppKit
-} from '@reown/appkit-scaffold-react-native';
-import type { EventName, EventsControllerState } from '@reown/appkit-scaffold-react-native';
-import { ConstantsUtil } from '@reown/appkit-common-react-native';
+import { WagmiAdapter } from './adapter';
 
-export { defaultWagmiConfig } from './utils/defaultWagmiConfig';
-import type { AppKitOptions } from './client';
-import { AppKit } from './client';
-
-// -- Types -------------------------------------------------------------------
-export type { AppKitOptions } from './client';
-
-type OpenOptions = Parameters<AppKit['open']>[0];
-
-// -- Setup -------------------------------------------------------------------
-let modal: AppKit | undefined;
-
-export function createAppKit(options: AppKitOptions) {
-  if (!modal) {
-    modal = new AppKit({
-      ...options,
-      _sdkVersion: `react-native-wagmi-${ConstantsUtil.VERSION}`
-    });
-  }
-
-  return modal;
-}
-
-// -- Hooks -------------------------------------------------------------------
-export function useAppKit() {
-  if (!modal) {
-    throw new Error('Please call "createAppKit" before using "useAppKit" hook');
-  }
-
-  async function open(options?: OpenOptions) {
-    await modal?.open(options);
-  }
-
-  async function close() {
-    await modal?.close();
-  }
-
-  return { open, close };
-}
-
-export function useAppKitState() {
-  if (!modal) {
-    throw new Error('Please call "createAppKit" before using "useAppKitState" hook');
-  }
-
-  const [state, setState] = useState(modal.getState());
-
-  useEffect(() => {
-    const unsubscribe = modal?.subscribeState(newState => {
-      if (newState) setState({ ...newState });
-    });
-
-    return () => {
-      unsubscribe?.();
-    };
-  }, []);
-
-  return state;
-}
-
-export function useWalletInfo() {
-  if (!modal) {
-    throw new Error('Please call "createAppKit" before using "useWalletInfo" hook');
-  }
-
-  const walletInfo = useSyncExternalStore(
-    modal.subscribeWalletInfo,
-    modal.getWalletInfo,
-    modal.getWalletInfo
-  );
-
-  return { walletInfo };
-}
-
-export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
-  if (!modal) {
-    throw new Error('Please call "createAppKit" before using "useAppKitEvents" hook');
-  }
-
-  const [event, setEvents] = useState(modal.getEvent());
-
-  useEffect(() => {
-    const unsubscribe = modal?.subscribeEvents(newEvent => {
-      setEvents({ ...newEvent });
-      callback?.(newEvent);
-    });
-
-    return () => {
-      unsubscribe?.();
-    };
-  }, [callback]);
-
-  return event;
-}
-
-export function useAppKitEventSubscription(
-  event: EventName,
-  callback: (newEvent: EventsControllerState) => void
-) {
-  if (!modal) {
-    throw new Error('Please call "createAppKit" before using "useAppKitEventSubscription" hook');
-  }
-
-  useEffect(() => {
-    const unsubscribe = modal?.subscribeEvent(event, callback);
-
-    return () => {
-      unsubscribe?.();
-    };
-  }, [callback, event]);
-}
+export { WagmiAdapter };

package/src/utils/helpers.ts

@@ -1,51 +1,6 @@
-import {
-  CoreHelperUtil,
-  type CaipNetwork,
-  type CaipNetworkId
-} from '@reown/appkit-scaffold-react-native';
+import { CoreHelperUtil } from '@reown/appkit-react-native';
 import { PresetsUtil, ConstantsUtil } from '@reown/appkit-common-react-native';
-import type { Connector } from '@wagmi/core';
-import { EthereumProvider } from '@walletconnect/ethereum-provider';
-import type { AppKitClientOptions } from '../client';
-import { http, type Hex } from 'viem';
-
-export function getCaipDefaultChain(chain?: AppKitClientOptions['defaultChain']) {
-  if (!chain) {
-    return undefined;
-  }
-
-  return {
-    id: `${ConstantsUtil.EIP155}:${chain.id}`,
-    name: chain.name,
-    imageId: PresetsUtil.EIP155NetworkImageIds[chain.id]
-  } as CaipNetwork;
-}
-
-export async function getWalletConnectCaipNetworks(connector?: Connector) {
-  if (!connector) {
-    throw new Error('networkControllerClient:getApprovedCaipNetworks - connector is undefined');
-  }
-  const provider = (await connector?.getProvider()) as Awaited<
-    ReturnType<(typeof EthereumProvider)['init']>
-  >;
-  const ns = provider?.signer?.session?.namespaces;
-  const nsMethods = ns?.[ConstantsUtil.EIP155]?.methods;
-  const nsChains = ns?.[ConstantsUtil.EIP155]?.chains as CaipNetworkId[];
-
-  return {
-    supportsAllNetworks: Boolean(nsMethods?.includes(ConstantsUtil.ADD_CHAIN_METHOD)),
-    approvedCaipNetworkIds: nsChains
-  };
-}
-
-export function getAuthCaipNetworks() {
-  return {
-    supportsAllNetworks: false,
-    approvedCaipNetworkIds: PresetsUtil.RpcChainIds.map(
-      id => `${ConstantsUtil.EIP155}:${id}`
-    ) as CaipNetworkId[]
-  };
-}
+import { http } from 'viem';
 
 export function getTransport({ chainId, projectId }: { chainId: number; projectId: string }) {
   const RPC_URL = CoreHelperUtil.getBlockchainApiUrl();
@@ -56,15 +11,3 @@ export function getTransport({ chainId, projectId }: { chainId: number; projectI
 
   return http(`${RPC_URL}/v1/?chainId=${ConstantsUtil.EIP155}:${chainId}&projectId=${projectId}`);
 }
-
-export function requireCaipAddress(caipAddress: string) {
-  if (!caipAddress) {
-    throw new Error('No CAIP address provided');
-  }
-  const account = caipAddress.split(':')[2] as Hex;
-  if (!account) {
-    throw new Error('Invalid CAIP address');
-  }
-
-  return account;
-}