@reown/appkit-react-native 0.0.0-chore-bump-builder-20250728194329

package/src/AppKitContext.tsx

@@ -0,0 +1,39 @@
+import React, { createContext, useContext, type ReactNode } from 'react';
+import { AppKit } from './AppKit';
+
+interface AppKitContextType {
+  appKit: AppKit | null;
+}
+
+export const AppKitContext = createContext<AppKitContextType>({ appKit: null });
+
+interface AppKitProviderProps {
+  children: ReactNode;
+  instance: AppKit;
+}
+
+export const AppKitProvider: React.FC<AppKitProviderProps> = ({ children, instance }) => {
+  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 = () => {
+  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 {
+    connect: context.appKit.connect.bind(context.appKit),
+    disconnect: context.appKit.disconnect.bind(context.appKit),
+    open: context.appKit.open.bind(context.appKit),
+    close: context.appKit.close.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/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,249 @@
+import { ConnectionController } from '@reown/appkit-core-react-native';
+import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
+import {
+  WalletConnector,
+  type AppKitNetwork,
+  type Namespaces,
+  type Provider,
+  type WalletInfo,
+  type ChainNamespace,
+  type CaipNetworkId,
+  type ConnectOptions,
+  type ConnectorInitOptions,
+  type Metadata,
+  type ConnectionProperties
+} from '@reown/appkit-common-react-native';
+import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
+
+interface WalletConnectConnectorConfig {
+  projectId: string;
+}
+
+export class WalletConnectConnector extends WalletConnector {
+  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();
+  }
+
+  override 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;
+    }
+
+    if (provider.session?.sessionProperties) {
+      this.properties = {
+        ...provider.session.sessionProperties,
+        smartAccounts: provider.session.sessionProperties['smartAccounts']
+          ? JSON.parse(provider.session.sessionProperties['smartAccounts'])
+          : [],
+        sessionTopic: provider.session.topic
+      };
+    }
+
+    if (provider.session?.peer?.metadata) {
+      const metadata = provider.session?.peer.metadata;
+      if (metadata) {
+        this.wallet = {
+          ...metadata,
+          name: metadata.name,
+          icon: metadata.icons?.[0]
+        };
+      }
+    }
+
+    return true;
+  }
+
+  private async getUniversalProvider({
+    projectId,
+    metadata
+  }: {
+    projectId: string;
+    metadata: Metadata;
+  }): Promise<IUniversalProvider> {
+    if (!this.provider) {
+      this.provider = (await UniversalProvider.init({
+        projectId,
+        metadata,
+        storage: this.storage
+      })) as Provider;
+    }
+
+    return this.provider as IUniversalProvider;
+  }
+
+  override async connect(opts: ConnectOptions) {
+    const { siweConfig, namespaces, defaultChain, universalLink } = opts;
+    function onUri(uri: string) {
+      ConnectionController.setWcUri(uri);
+    }
+
+    const provider = this.getProvider() as IUniversalProvider;
+
+    // @ts-ignore
+    provider.on('display_uri', onUri);
+
+    let session: IUniversalProvider['session'];
+
+    // SIWE
+    const isEVMOnly = Object.keys(namespaces ?? {}).length === 1 && namespaces?.['eip155'];
+    const params = await siweConfig?.getMessageParams?.();
+    if (siweConfig?.options?.enabled && params && Object.keys(params).length > 0 && isEVMOnly) {
+      // 1CA is only supported on EVM
+
+      // @ts-ignore
+      const result = await provider.authenticate(
+        {
+          ...params,
+          nonce: await siweConfig.getNonce(),
+          methods: namespaces?.['eip155']?.methods,
+          chains: params.chains
+        },
+        universalLink
+      );
+
+      // Auths is an array of signed CACAO objects https://github.com/ChainAgnostic/CAIPs/blob/main/CAIPs/caip-74.md
+      const signedCacao = result?.auths?.[0];
+      if (signedCacao) {
+        const { p, s } = signedCacao;
+        const chainId = getDidChainId(p.iss);
+        const address = getDidAddress(p.iss);
+
+        try {
+          // Kicks off verifyMessage and populates external states
+          const message = provider?.client?.formatAuthMessage({
+            request: p,
+            iss: p.iss
+          })!;
+
+          await SIWEController.verifyMessage({
+            message,
+            signature: s.s,
+            cacao: signedCacao
+          });
+
+          if (address && chainId) {
+            const siweSession = {
+              address,
+              chainId: parseInt(chainId, 10)
+            };
+
+            SIWEController.setSession(siweSession);
+            SIWEController.onSignIn?.(siweSession);
+          }
+        } catch (error) {
+          // eslint-disable-next-line no-console
+          console.error('Error verifying message', error);
+          // eslint-disable-next-line no-console
+          await provider.disconnect().catch(console.error);
+          // eslint-disable-next-line no-console
+          await SIWEController.signOut().catch(console.error);
+          throw error;
+        }
+      }
+      session = result?.session;
+    } else {
+      session = await (this.provider as IUniversalProvider).connect({
+        namespaces: {},
+        optionalNamespaces: namespaces
+      });
+    }
+
+    const metadata = session?.peer?.metadata;
+    if (metadata) {
+      this.wallet = {
+        ...metadata,
+        name: metadata?.name,
+        icon: metadata?.icons?.[0]
+      };
+    } else {
+      this.wallet = undefined;
+    }
+
+    if (defaultChain) {
+      (this.provider as IUniversalProvider).setDefaultChain(defaultChain);
+    }
+
+    if (session?.sessionProperties) {
+      this.properties = {
+        ...session.sessionProperties,
+        smartAccounts: session.sessionProperties['smartAccounts']
+          ? JSON.parse(session.sessionProperties['smartAccounts'])
+          : [],
+        sessionTopic: session.topic
+      };
+    }
+
+    this.namespaces = session?.namespaces as Namespaces;
+
+    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;
+  }
+
+  override getNamespaces(): Namespaces {
+    return this.namespaces ?? {};
+  }
+
+  override getProperties(): ConnectionProperties | undefined {
+    return this.properties;
+  }
+
+  override switchNetwork(network: AppKitNetwork): Promise<void> {
+    if (!network) throw new Error('No network provided');
+
+    let caipNetworkId = network.caipNetworkId ?? `eip155:${network.id}`;
+
+    (this.provider as IUniversalProvider).setDefaultChain(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,22 @@
+import { useSnapshot } from 'valtio';
+import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useAccount() {
+  useAppKit(); // Use the hook for checks
+
+  const {
+    activeAddress: address,
+    activeNamespace,
+    connections
+  } = useSnapshot(ConnectionsController.state);
+
+  const connection = activeNamespace ? connections.get(activeNamespace) : undefined;
+
+  return {
+    address: address?.split(':')[2],
+    isConnected: !!address,
+    chainId: connection?.caipNetwork,
+    namespace: activeNamespace
+  };
+}

package/src/hooks/useAppKit.ts

@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+import { useSnapshot } from 'valtio';
+import { ModalController } from '@reown/appkit-core-react-native';
+
+import type { AppKit } from '../AppKit';
+import { AppKitContext } from '../AppKitContext';
+
+interface UseAppKitReturn {
+  open: AppKit['open'];
+  close: AppKit['close'];
+  disconnect: (namespace?: string) => void;
+  switchNetwork: AppKit['switchNetwork'];
+  isOpen: boolean;
+}
+
+export const useAppKit = (): UseAppKitReturn => {
+  const context = useContext(AppKitContext);
+  const { open } = useSnapshot(ModalController.state);
+
+  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),
+    isOpen: open
+  };
+};

package/src/hooks/useAppKitEvents.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { useSnapshot } from 'valtio';
+import {
+  EventsController,
+  type EventName,
+  type EventsControllerState
+} from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
+  useAppKit(); // Use the hook for checks
+  const { data, timestamp } = useSnapshot(EventsController.state);
+
+  useEffect(() => {
+    const unsubscribe = EventsController.subscribe(newEvent => {
+      callback?.(newEvent);
+    });
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback]);
+
+  return { data, timestamp };
+}
+
+export function useAppKitEventSubscription(
+  event: EventName,
+  callback: (newEvent: EventsControllerState) => void
+) {
+  useAppKit(); // Use the hook for checks
+
+  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 };
+}

package/src/hooks/useKeyboard.ts

@@ -0,0 +1,62 @@
+import { useEffect, useState } from 'react';
+import { Keyboard, type KeyboardEventListener, type KeyboardMetrics } from 'react-native';
+
+const emptyCoordinates = Object.freeze({
+  screenX: 0,
+  screenY: 0,
+  width: 0,
+  height: 0
+});
+const initialValue = {
+  start: emptyCoordinates,
+  end: emptyCoordinates
+};
+
+export function useKeyboard() {
+  const [shown, setShown] = useState(false);
+  const [coordinates, setCoordinates] = useState<{
+    start: undefined | KeyboardMetrics;
+    end: KeyboardMetrics;
+  }>(initialValue);
+  const [keyboardHeight, setKeyboardHeight] = useState<number>(0);
+
+  const handleKeyboardWillShow: KeyboardEventListener = e => {
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+  };
+  const handleKeyboardDidShow: KeyboardEventListener = e => {
+    setShown(true);
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+    setKeyboardHeight(e.endCoordinates.height);
+  };
+  const handleKeyboardWillHide: KeyboardEventListener = e => {
+    setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+  };
+  const handleKeyboardDidHide: KeyboardEventListener = e => {
+    setShown(false);
+    if (e) {
+      setCoordinates({ start: e.startCoordinates, end: e.endCoordinates });
+    } else {
+      setCoordinates(initialValue);
+      setKeyboardHeight(0);
+    }
+  };
+
+  useEffect(() => {
+    const subscriptions = [
+      Keyboard.addListener('keyboardWillShow', handleKeyboardWillShow),
+      Keyboard.addListener('keyboardDidShow', handleKeyboardDidShow),
+      Keyboard.addListener('keyboardWillHide', handleKeyboardWillHide),
+      Keyboard.addListener('keyboardDidHide', handleKeyboardDidHide)
+    ];
+
+    return () => {
+      subscriptions.forEach(subscription => subscription.remove());
+    };
+  }, []);
+
+  return {
+    keyboardShown: shown,
+    coordinates,
+    keyboardHeight
+  };
+}

package/src/hooks/useProvider.ts

@@ -0,0 +1,25 @@
+import { useSnapshot } from 'valtio';
+import { ConnectionsController } from '@reown/appkit-core-react-native';
+import type { Provider, ChainNamespace } from '@reown/appkit-common-react-native';
+
+interface ProviderResult {
+  provider?: 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);
+
+  if (!connection) return { provider: undefined, providerType: undefined };
+
+  return {
+    provider: connection.adapter.connector?.getProvider(),
+    providerType: connection.adapter.getSupportedNamespace()
+  };
+}

package/src/hooks/useTimeout.ts

@@ -0,0 +1,34 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+function useTimeout(delay: number) {
+  const timeLeftRef = useRef(delay);
+  const [timeLeft, setTimeLeft] = useState(delay);
+  const interval = useRef<NodeJS.Timer>();
+
+  const startTimer = useCallback((newDelay: number) => {
+    timeLeftRef.current = newDelay;
+    setTimeLeft(newDelay);
+    interval.current = setInterval(() => {
+      if (timeLeftRef.current > 0) {
+        timeLeftRef.current -= 1;
+        setTimeLeft(timeLeftRef.current);
+      } else {
+        if (typeof interval.current === 'number') {
+          clearInterval(interval.current);
+        }
+      }
+    }, 1000);
+  }, []);
+
+  useEffect(() => {
+    return () => {
+      if (typeof interval.current === 'number') {
+        clearInterval(interval.current);
+      }
+    };
+  }, [interval]);
+
+  return { timeLeft, startTimer };
+}
+
+export default useTimeout;

package/src/hooks/useWalletInfo.ts

@@ -0,0 +1,10 @@
+import { useSnapshot } from 'valtio';
+import { ConnectionsController } from '@reown/appkit-core-react-native';
+import { useAppKit } from './useAppKit';
+
+export function useWalletInfo() {
+  useAppKit(); // Use the hook for checks
+  const { walletInfo } = useSnapshot(ConnectionsController.state);
+
+  return { walletInfo };
+}

package/src/index.ts

@@ -0,0 +1,34 @@
+/********** Components **********/
+export {
+  AccountButton as AccountButton,
+  type AccountButtonProps
+} from './modal/w3m-account-button';
+export { AppKitButton, type AppKitButtonProps } from './modal/w3m-button';
+export {
+  ConnectButton as ConnectButton,
+  type ConnectButtonProps as ConnectButtonProps
+} from './modal/w3m-connect-button';
+export {
+  NetworkButton as NetworkButton,
+  type NetworkButtonProps as NetworkButtonProps
+} from './modal/w3m-network-button';
+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';
+
+/****** Hooks *******/
+export { useAppKit } from './hooks/useAppKit';
+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';
+
+/********** Main **********/
+export { createAppKit } from './AppKit';
+export { AppKitProvider } from './AppKitContext';

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

@@ -0,0 +1,51 @@
+import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
+import {
+  CoreHelperUtil,
+  ModalController,
+  ThemeController,
+  ConnectionsController,
+  AssetController
+} from '@reown/appkit-core-react-native';
+import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
+
+export interface AccountButtonProps {
+  balance?: 'show' | 'hide';
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
+  const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const {
+    activeAddress: address,
+    activeBalance,
+    activeNetwork,
+    identity
+  } = useSnapshot(ConnectionsController.state);
+
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
+  const showBalance = balance === 'show';
+
+  return (
+    <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
+      <AccountButtonUI
+        onPress={() => ModalController.open()}
+        address={address?.split(':')[2] ?? ''}
+        profileName={identity?.name}
+        networkSrc={networkImage}
+        avatarSrc={identity?.avatar}
+        disabled={disabled}
+        style={style}
+        balance={
+          showBalance
+            ? CoreHelperUtil.formatBalance(activeBalance?.amount, activeBalance?.symbol)
+            : ''
+        }
+        testID={testID}
+      />
+    </ThemeProvider>
+  );
+}