@reown/appkit-react-native 0.0.0-feat-multichain-20250513175016

package/src/client.ts

@@ -0,0 +1,384 @@
+import './config/animations';
+
+import type {
+  AccountControllerState,
+  ConnectionControllerClient,
+  ModalControllerState,
+  NetworkControllerClient,
+  NetworkControllerState,
+  OptionsControllerState,
+  EventsControllerState,
+  PublicStateControllerState,
+  ThemeControllerState,
+  Connector,
+  ConnectedWalletInfo,
+  Features,
+  EventName
+} from '@reown/appkit-core-react-native';
+import { SIWEController, type SIWEControllerClient } from '@reown/appkit-siwe-react-native';
+import {
+  AccountController,
+  BlockchainApiController,
+  ConnectionController,
+  ConnectorController,
+  EnsController,
+  EventsController,
+  ModalController,
+  NetworkController,
+  OptionsController,
+  PublicStateController,
+  SnackController,
+  StorageUtil,
+  ThemeController,
+  TransactionsController
+} from '@reown/appkit-core-react-native';
+import {
+  ConstantsUtil,
+  ErrorUtil,
+  type ThemeMode,
+  type ThemeVariables
+} from '@reown/appkit-common-react-native';
+import { Appearance } from 'react-native';
+
+// -- Types ---------------------------------------------------------------------
+export interface LibraryOptions {
+  projectId: OptionsControllerState['projectId'];
+  metadata: OptionsControllerState['metadata'];
+  themeMode?: ThemeMode;
+  themeVariables?: ThemeVariables;
+  includeWalletIds?: OptionsControllerState['includeWalletIds'];
+  excludeWalletIds?: OptionsControllerState['excludeWalletIds'];
+  featuredWalletIds?: OptionsControllerState['featuredWalletIds'];
+  customWallets?: OptionsControllerState['customWallets'];
+  defaultChain?: NetworkControllerState['caipNetwork'];
+  tokens?: OptionsControllerState['tokens'];
+  clipboardClient?: OptionsControllerState['clipboardClient'];
+  enableAnalytics?: OptionsControllerState['enableAnalytics'];
+  _sdkVersion: OptionsControllerState['sdkVersion'];
+  debug?: OptionsControllerState['debug'];
+  features?: Features;
+}
+
+export interface ScaffoldOptions extends LibraryOptions {
+  networkControllerClient: NetworkControllerClient;
+  connectionControllerClient: ConnectionControllerClient;
+  siweControllerClient?: SIWEControllerClient;
+}
+
+export interface OpenOptions {
+  view: 'Account' | 'Connect' | 'Networks' | 'Swap' | 'OnRamp';
+}
+
+// -- Client --------------------------------------------------------------------
+export class AppKitScaffold {
+  public reportedAlertErrors: Record<string, boolean> = {};
+
+  public constructor(options: ScaffoldOptions) {
+    this.initControllers(options);
+  }
+
+  // -- Public -------------------------------------------------------------------
+  public async open(options?: OpenOptions) {
+    ModalController.open(options);
+  }
+
+  public async close() {
+    ModalController.close();
+  }
+
+  public getThemeMode() {
+    return ThemeController.state.themeMode;
+  }
+
+  public getThemeVariables() {
+    return ThemeController.state.themeVariables;
+  }
+
+  public setThemeMode(themeMode: ThemeControllerState['themeMode']) {
+    ThemeController.setThemeMode(themeMode);
+  }
+
+  public setThemeVariables(themeVariables: ThemeControllerState['themeVariables']) {
+    ThemeController.setThemeVariables(themeVariables);
+  }
+
+  public subscribeTheme(callback: (newState: ThemeControllerState) => void) {
+    return ThemeController.subscribe(callback);
+  }
+
+  public getWalletInfo() {
+    return AccountController.state.connectedWalletInfo;
+  }
+
+  public subscribeWalletInfo(callback: (newState: ConnectedWalletInfo) => void) {
+    return AccountController.subscribeKey('connectedWalletInfo', callback);
+  }
+
+  public getState() {
+    return { ...PublicStateController.state };
+  }
+
+  public subscribeState(callback: (newState: PublicStateControllerState) => void) {
+    return PublicStateController.subscribe(callback);
+  }
+
+  public subscribeStateKey<K extends keyof PublicStateControllerState>(
+    key: K,
+    callback: (value: PublicStateControllerState[K]) => void
+  ) {
+    return PublicStateController.subscribeKey(key, callback);
+  }
+
+  public subscribeConnection(
+    callback: (isConnected: AccountControllerState['isConnected']) => void
+  ) {
+    return AccountController.subscribeKey('isConnected', callback);
+  }
+
+  public setLoading(loading: ModalControllerState['loading']) {
+    ModalController.setLoading(loading);
+  }
+
+  public getEvent() {
+    return { ...EventsController.state };
+  }
+
+  public subscribeEvents(callback: (newEvent: EventsControllerState) => void) {
+    return EventsController.subscribe(callback);
+  }
+
+  public subscribeEvent(event: EventName, callback: (newEvent: EventsControllerState) => void) {
+    return EventsController.subscribeEvent(event, callback);
+  }
+
+  public resolveReownName = async (name: string) => {
+    const wcNameAddress = await EnsController.resolveName(name);
+    const networkNameAddresses = wcNameAddress?.addresses
+      ? Object.values(wcNameAddress?.addresses)
+      : [];
+
+    return networkNameAddresses[0]?.address || false;
+  };
+
+  // -- Protected ----------------------------------------------------------------
+  protected setIsConnected: (typeof AccountController)['setIsConnected'] = isConnected => {
+    AccountController.setIsConnected(isConnected);
+  };
+
+  protected setCaipAddress: (typeof AccountController)['setCaipAddress'] = caipAddress => {
+    AccountController.setCaipAddress(caipAddress);
+  };
+
+  protected getCaipAddress = () => AccountController.state.caipAddress;
+
+  protected setBalance: (typeof AccountController)['setBalance'] = (balance, balanceSymbol) => {
+    AccountController.setBalance(balance, balanceSymbol);
+  };
+
+  protected setProfileName: (typeof AccountController)['setProfileName'] = profileName => {
+    AccountController.setProfileName(profileName);
+  };
+
+  protected setProfileImage: (typeof AccountController)['setProfileImage'] = profileImage => {
+    AccountController.setProfileImage(profileImage);
+  };
+
+  protected resetAccount: (typeof AccountController)['resetAccount'] = () => {
+    AccountController.resetAccount();
+  };
+
+  protected setCaipNetwork: (typeof NetworkController)['setCaipNetwork'] = caipNetwork => {
+    NetworkController.setCaipNetwork(caipNetwork);
+  };
+
+  protected getCaipNetwork = () => NetworkController.state.caipNetwork;
+
+  protected setRequestedCaipNetworks: (typeof NetworkController)['setRequestedCaipNetworks'] =
+    requestedCaipNetworks => {
+      NetworkController.setRequestedCaipNetworks(requestedCaipNetworks);
+    };
+
+  protected getApprovedCaipNetworksData: (typeof NetworkController)['getApprovedCaipNetworksData'] =
+    () => NetworkController.getApprovedCaipNetworksData();
+
+  protected resetNetwork: (typeof NetworkController)['resetNetwork'] = () => {
+    NetworkController.resetNetwork();
+  };
+
+  protected setConnectors: (typeof ConnectorController)['setConnectors'] = (
+    connectors: Connector[]
+  ) => {
+    ConnectorController.setConnectors(connectors);
+    this.setConnectorExcludedWallets(connectors);
+  };
+
+  protected addConnector: (typeof ConnectorController)['addConnector'] = (connector: Connector) => {
+    ConnectorController.addConnector(connector);
+  };
+
+  protected getConnectors: (typeof ConnectorController)['getConnectors'] = () =>
+    ConnectorController.getConnectors();
+
+  protected resetWcConnection: (typeof ConnectionController)['resetWcConnection'] = () => {
+    ConnectionController.resetWcConnection();
+    TransactionsController.resetTransactions();
+  };
+
+  protected fetchIdentity: (typeof BlockchainApiController)['fetchIdentity'] = request =>
+    BlockchainApiController.fetchIdentity(request);
+
+  protected setAddressExplorerUrl: (typeof AccountController)['setAddressExplorerUrl'] =
+    addressExplorerUrl => {
+      AccountController.setAddressExplorerUrl(addressExplorerUrl);
+    };
+
+  protected setConnectedWalletInfo: (typeof AccountController)['setConnectedWalletInfo'] =
+    connectedWalletInfo => {
+      AccountController.setConnectedWalletInfo(connectedWalletInfo);
+    };
+
+  protected setClientId: (typeof BlockchainApiController)['setClientId'] = clientId => {
+    BlockchainApiController.setClientId(clientId);
+  };
+
+  protected setPreferredAccountType: (typeof AccountController)['setPreferredAccountType'] =
+    preferredAccountType => {
+      AccountController.setPreferredAccountType(preferredAccountType);
+    };
+
+  protected handleAlertError(error?: string | { shortMessage: string; longMessage: string }) {
+    if (!error) return;
+
+    if (typeof error === 'object') {
+      SnackController.showInternalError(error);
+
+      return;
+    }
+
+    // Check if the error is a universal provider error
+    const matchedUniversalProviderError = Object.entries(ErrorUtil.UniversalProviderErrors).find(
+      ([, { message }]) => error?.includes(message)
+    );
+
+    const [errorKey, errorValue] = matchedUniversalProviderError ?? [];
+
+    const { message, alertErrorKey } = errorValue ?? {};
+
+    if (errorKey && message && !this.reportedAlertErrors[errorKey]) {
+      const alertError =
+        ErrorUtil.ALERT_ERRORS[alertErrorKey as keyof typeof ErrorUtil.ALERT_ERRORS];
+
+      if (alertError) {
+        SnackController.showInternalError(alertError);
+        this.reportedAlertErrors[errorKey] = true;
+      }
+    }
+  }
+
+  // -- Private ------------------------------------------------------------------
+  private async initControllers(options: ScaffoldOptions) {
+    this.initAsyncValues(options);
+    NetworkController.setClient(options.networkControllerClient);
+    NetworkController.setDefaultCaipNetwork(options.defaultChain);
+
+    OptionsController.setProjectId(options.projectId);
+    OptionsController.setIncludeWalletIds(options.includeWalletIds);
+    OptionsController.setExcludeWalletIds(options.excludeWalletIds);
+    OptionsController.setFeaturedWalletIds(options.featuredWalletIds);
+    OptionsController.setTokens(options.tokens);
+    OptionsController.setCustomWallets(options.customWallets);
+    OptionsController.setEnableAnalytics(options.enableAnalytics);
+    OptionsController.setSdkVersion(options._sdkVersion);
+    OptionsController.setDebug(options.debug);
+
+    if (options.clipboardClient) {
+      OptionsController.setClipboardClient(options.clipboardClient);
+    }
+
+    ConnectionController.setClient(options.connectionControllerClient);
+
+    if (options.themeMode) {
+      ThemeController.setThemeMode(options.themeMode);
+    } else {
+      ThemeController.setThemeMode(Appearance.getColorScheme() as ThemeMode);
+    }
+
+    if (options.themeVariables) {
+      ThemeController.setThemeVariables(options.themeVariables);
+    }
+    if (options.metadata) {
+      OptionsController.setMetadata(options.metadata);
+    }
+
+    if (options.siweControllerClient) {
+      SIWEController.setSIWEClient(options.siweControllerClient);
+    }
+
+    if (options.features) {
+      OptionsController.setFeatures(options.features);
+    }
+
+    if (
+      (options.features?.onramp === true || options.features?.onramp === undefined) &&
+      (options.metadata?.redirect?.universal || options.metadata?.redirect?.native)
+    ) {
+      OptionsController.setIsOnRampEnabled(true);
+    }
+  }
+
+  private async setConnectorExcludedWallets(connectors: Connector[]) {
+    const excludedWallets = OptionsController.state.excludeWalletIds || [];
+
+    // Exclude Coinbase if the connector is not implemented
+    const excludeCoinbase =
+      connectors.findIndex(connector => connector.id === ConstantsUtil.COINBASE_CONNECTOR_ID) ===
+      -1;
+
+    if (excludeCoinbase) {
+      excludedWallets.push(ConstantsUtil.COINBASE_EXPLORER_ID);
+    }
+
+    OptionsController.setExcludeWalletIds(excludedWallets);
+  }
+
+  private async initRecentWallets(options: ScaffoldOptions) {
+    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 initConnectedConnector() {
+    const connectedConnector = await StorageUtil.getConnectedConnector();
+    if (connectedConnector) {
+      ConnectorController.setConnectedConnector(connectedConnector, false);
+    }
+  }
+
+  private async initSocial() {
+    const connectedSocialProvider = await StorageUtil.getConnectedSocialProvider();
+    ConnectionController.setConnectedSocialProvider(connectedSocialProvider);
+  }
+
+  private async initAsyncValues(options: ScaffoldOptions) {
+    await this.initConnectedConnector();
+    await this.initRecentWallets(options);
+    await this.initSocial();
+  }
+}

package/src/config/animations.ts

@@ -0,0 +1,7 @@
+import { Platform, UIManager } from 'react-native';
+
+if (Platform.OS === 'android') {
+  if (UIManager.setLayoutAnimationEnabledExperimental) {
+    UIManager.setLayoutAnimationEnabledExperimental(true);
+  }
+}

package/src/connectors/WalletConnectConnector.ts

@@ -0,0 +1,129 @@
+import { type Metadata, 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
+} from '@reown/appkit-common-react-native';
+
+export class WalletConnectConnector extends WalletConnector {
+  private static universalProviderInstance: IUniversalProvider | null = null;
+
+  private constructor(provider: IUniversalProvider) {
+    super({ type: 'walletconnect', provider: provider as Provider });
+
+    if (provider.session?.namespaces) {
+      this.namespaces = provider.session.namespaces as Namespaces;
+    }
+
+    if (provider.session?.peer?.metadata) {
+      const metadata = provider.session?.peer.metadata;
+      if (metadata) {
+        this.wallet = {
+          ...metadata,
+          name: metadata.name,
+          icon: metadata.icons?.[0]
+        };
+      }
+    }
+  }
+
+  private static async getUniversalProvider({
+    projectId,
+    metadata
+  }: {
+    projectId: string;
+    metadata: Metadata;
+  }): Promise<IUniversalProvider> {
+    if (!WalletConnectConnector.universalProviderInstance) {
+      WalletConnectConnector.universalProviderInstance = await UniversalProvider.init({
+        projectId,
+        metadata
+      });
+    }
+
+    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);
+  }
+
+  override disconnect(): Promise<void> {
+    return this.provider.disconnect();
+  }
+
+  override async connect(opts: { namespaces: ProposalNamespaces; defaultChain?: CaipNetworkId }) {
+    function onUri(uri: string) {
+      ConnectionController.setWcUri(uri);
+    }
+
+    this.provider.on('display_uri', onUri);
+
+    const session = await (this.provider as IUniversalProvider).connect({
+      namespaces: {},
+      optionalNamespaces: opts.namespaces
+    });
+
+    if (opts.defaultChain) {
+      (this.provider as IUniversalProvider).setDefaultChain(opts.defaultChain);
+    }
+
+    this.namespaces = session?.namespaces as Namespaces;
+
+    this.provider.off('display_uri', onUri);
+
+    return this.namespaces;
+  }
+
+  override getProvider(): Provider {
+    return this.provider;
+  }
+
+  override getNamespaces(): Namespaces {
+    return this.namespaces ?? {};
+  }
+
+  override switchNetwork(network: AppKitNetwork): Promise<void> {
+    if (!network.caipNetworkId) throw new Error('No network provided');
+    (this.provider as IUniversalProvider).setDefaultChain(network.caipNetworkId);
+
+    return Promise.resolve();
+  }
+
+  override getWalletInfo(): WalletInfo | undefined {
+    return this.wallet;
+  }
+
+  override getChainId(namespace: ChainNamespace): CaipNetworkId | undefined {
+    if (!this.namespaces || !this.namespaces[namespace]) {
+      return undefined;
+    }
+
+    const chainId = (this.provider as IUniversalProvider).rpcProviders[
+      namespace
+    ]?.getDefaultChain();
+
+    if (!chainId) {
+      return undefined;
+    }
+
+    return `${namespace}:${chainId}` as CaipNetworkId;
+  }
+}

package/src/hooks/useAccount.ts

@@ -0,0 +1,18 @@
+import { useSnapshot } from 'valtio';
+import { ConnectionsController } from '@reown/appkit-core-react-native';
+
+export function useAccount() {
+  const {
+    activeAddress: address,
+    activeNamespace,
+    connections
+  } = useSnapshot(ConnectionsController.state);
+
+  const connection = connections[activeNamespace ?? ''];
+
+  return {
+    address: address?.split(':')[2],
+    isConnected: !!address,
+    chainId: connection?.activeChain
+  };
+}

package/src/hooks/useAppKit.ts

@@ -0,0 +1,29 @@
+import { useContext } from 'react';
+import type { AppKit } from '../AppKit';
+import { AppKitContext } from '../AppKitContext';
+
+interface UseAppKitReturn {
+  open: AppKit['open'];
+  close: AppKit['close'];
+  disconnect: (namespace?: string) => void;
+  switchNetwork: AppKit['switchNetwork'];
+}
+
+export const useAppKit = (): UseAppKitReturn => {
+  const context = useContext(AppKitContext);
+
+  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)
+  };
+};

package/src/hooks/useAppKitEvents.ts

@@ -0,0 +1,47 @@
+import { useEffect } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  EventsController,
+  OptionsController,
+  type EventName,
+  type EventsControllerState
+} from '@reown/appkit-core-react-native';
+
+export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
+  const { projectId } = useSnapshot(OptionsController.state);
+  const { data, timestamp } = useSnapshot(EventsController.state);
+
+  if (!projectId) {
+    throw new Error('Please call "createAppKit" before using "useAppKitEvents" hook');
+  }
+
+  useEffect(() => {
+    const unsubscribe = EventsController.subscribe(newEvent => {
+      callback?.(newEvent);
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback]);
+
+  return { data, timestamp };
+}
+
+export function useAppKitEventSubscription(
+  event: EventName,
+  callback: (newEvent: EventsControllerState) => void
+) {
+  const { projectId } = useSnapshot(OptionsController.state);
+  if (!projectId) {
+    throw new Error('Please call "createAppKit" before using "useAppKitEventSubscription" hook');
+  }
+
+  useEffect(() => {
+    const unsubscribe = EventsController?.subscribeEvent(event, callback);
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback, event]);
+}

package/src/hooks/useCustomDimensions.ts

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import { useWindowDimensions } from 'react-native';
+
+/**
+ * Hook used to get the width of the screen and the padding needed to accomplish portrait and landscape modes.
+ * @returns { width: number, isPortrait: boolean, isLandscape: boolean, padding: number }
+ */
+export function useCustomDimensions() {
+  const { width, height } = useWindowDimensions();
+  const [maxWidth, setMaxWidth] = useState<number>(Math.min(width, height));
+  const [isPortrait, setIsPortrait] = useState<boolean>(height > width);
+  const [padding, setPadding] = useState<number>(0);
+
+  useEffect(() => {
+    setMaxWidth(Math.min(width, height));
+    setIsPortrait(height > width);
+    setPadding(width < height ? 0 : (width - height) / 2);
+  }, [width, height]);
+
+  return { maxWidth, isPortrait, isLandscape: !isPortrait, padding };
+}

package/src/hooks/useDebounceCallback.ts

@@ -0,0 +1,45 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+interface Props {
+  callback: ((args?: any) => any) | ((args?: any) => Promise<any>);
+  delay?: number;
+}
+
+export function useDebounceCallback({ callback, delay = 250 }: Props) {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const callbackRef = useRef(callback);
+
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+
+  const abort = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+      timeoutRef.current = null;
+    }
+  }, []);
+
+  const debouncedCallback = useCallback(
+    (args?: any) => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = setTimeout(() => {
+        callbackRef.current(args);
+      }, delay);
+    },
+    [delay]
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  return { debouncedCallback, abort };
+}