@reown/appkit-react-native 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/connectors/WalletConnectConnector.ts

@@ -10,8 +10,10 @@ import {
   type CaipNetworkId,
   type ConnectOptions,
   type ConnectorInitOptions,
-  type Metadata
+  type Metadata,
+  type ConnectionProperties
 } from '@reown/appkit-common-react-native';
+import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
 
 interface WalletConnectConnectorConfig {
   projectId: string;
@@ -38,7 +40,7 @@ export class WalletConnectConnector extends WalletConnector {
     await this.restoreSession();
   }
 
-  private async restoreSession(): Promise<boolean> {
+  override async restoreSession(): Promise<boolean> {
     const provider = this.getProvider() as IUniversalProvider;
     if (!provider) {
       return false;
@@ -48,6 +50,16 @@ export class WalletConnectConnector extends WalletConnector {
       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) {
@@ -80,11 +92,8 @@ export class WalletConnectConnector extends WalletConnector {
     return this.provider as IUniversalProvider;
   }
 
-  override disconnect(): Promise<void> {
-    return this.getProvider().disconnect();
-  }
-
   override async connect(opts: ConnectOptions) {
+    const { siweConfig, namespaces, defaultChain, universalLink } = opts;
     function onUri(uri: string) {
       ConnectionController.setWcUri(uri);
     }
@@ -94,13 +103,95 @@ export class WalletConnectConnector extends WalletConnector {
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    const session = await (this.provider as IUniversalProvider).connect({
-      namespaces: {},
-      optionalNamespaces: opts.namespaces
-    });
+    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
+      });
+    }
 
-    if (opts.defaultChain) {
-      (this.provider as IUniversalProvider).setDefaultChain(opts.defaultChain);
+    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;
@@ -122,6 +213,10 @@ export class WalletConnectConnector extends WalletConnector {
     return this.namespaces ?? {};
   }
 
+  override getProperties(): ConnectionProperties | undefined {
+    return this.properties;
+  }
+
   override switchNetwork(network: AppKitNetwork): Promise<void> {
     if (!network) throw new Error('No network provided');
 

package/src/hooks/useAccount.ts

@@ -16,6 +16,7 @@ export function useAccount() {
   return {
     address: address?.split(':')[2],
     isConnected: !!address,
-    chainId: connection?.caipNetwork
+    chainId: connection?.caipNetwork,
+    namespace: activeNamespace
   };
 }

package/src/index.ts

@@ -1,3 +1,4 @@
+/********** Components **********/
 export {
   AccountButton as AccountButton,
   type AccountButtonProps
@@ -12,21 +13,11 @@ export {
   type NetworkButtonProps as NetworkButtonProps
 } from './modal/w3m-network-button';
 export { AppKit } from './modal/w3m-modal';
-export { AppKitRouter } from './modal/w3m-router';
-
-export { AppKitScaffold } from './client';
-export type { LibraryOptions, ScaffoldOptions } from './client';
 
+/********** Types **********/
 export type * from '@reown/appkit-core-react-native';
-export { CoreHelperUtil } from '@reown/appkit-core-react-native';
-
-export * from './AppKit';
-export { AppKitProvider } from './AppKitContext';
-
 export type { AppKitNetwork, Storage } from '@reown/appkit-common-react-native';
 
-export { WalletConnectConnector } from './connectors/WalletConnectConnector';
-
 /****** Hooks *******/
 export { useAppKit } from './hooks/useAppKit';
 export { useProvider } from './hooks/useProvider';
@@ -37,3 +28,7 @@ export { useAppKitEvents, useAppKitEventSubscription } from './hooks/useAppKitEv
 /********** 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

@@ -1,16 +1,13 @@
 import { useSnapshot } from 'valtio';
+import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  AccountController,
   CoreHelperUtil,
   ModalController,
-  AssetUtil,
   ThemeController,
-  ConnectionsController
+  ConnectionsController,
+  AssetController
 } from '@reown/appkit-core-react-native';
-
 import { AccountButton as AccountButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
-import { ApiController } from '@reown/appkit-core-react-native';
-import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface AccountButtonProps {
   balance?: 'show' | 'hide';
@@ -20,15 +17,16 @@ export interface AccountButtonProps {
 }
 
 export function AccountButton({ balance, disabled, style, testID }: AccountButtonProps) {
-  const { profileImage, profileName } = useSnapshot(AccountController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
   const {
     activeAddress: address,
     activeBalance,
-    activeNetwork
+    activeNetwork,
+    identity
   } = useSnapshot(ConnectionsController.state);
 
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const showBalance = balance === 'show';
 
   return (
@@ -36,10 +34,9 @@ export function AccountButton({ balance, disabled, style, testID }: AccountButto
       <AccountButtonUI
         onPress={() => ModalController.open()}
         address={address?.split(':')[2] ?? ''}
-        profileName={profileName}
+        profileName={identity?.name}
         networkSrc={networkImage}
-        imageHeaders={ApiController._getApiHeaders()}
-        avatarSrc={profileImage}
+        avatarSrc={identity?.avatar}
         disabled={disabled}
         style={style}
         balance={

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

@@ -1,7 +1,7 @@
 import { useSnapshot } from 'valtio';
 import { AccountButton, type AccountButtonProps } from '../w3m-account-button';
 import { ConnectButton, type ConnectButtonProps } from '../w3m-connect-button';
-import { AccountController, ModalController } from '@reown/appkit-core-react-native';
+import { ConnectionsController, ModalController } from '@reown/appkit-core-react-native';
 
 export interface AppKitButtonProps {
   balance?: AccountButtonProps['balance'];
@@ -22,7 +22,7 @@ export function AppKitButton({
   accountStyle,
   connectStyle
 }: AppKitButtonProps) {
-  const { isConnected } = useSnapshot(AccountController.state);
+  const { isConnected } = useSnapshot(ConnectionsController.state);
   const { loading } = useSnapshot(ModalController.state);
 
   return !loading && isConnected ? (

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

@@ -4,21 +4,14 @@ import { useWindowDimensions, StatusBar } from 'react-native';
 import Modal from 'react-native-modal';
 import { Card, ThemeProvider } from '@reown/appkit-ui-react-native';
 import {
-  AccountController,
   ApiController,
-  ConnectionController,
-  ConnectorController,
-  CoreHelperUtil,
   EventsController,
   ModalController,
   OptionsController,
   RouterController,
-  TransactionsController,
-  type AppKitFrameProvider,
-  WebviewController,
-  ThemeController
+  ThemeController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
-import type { CaipAddress } from '@reown/appkit-common-react-native';
 import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { AppKitRouter } from '../w3m-router';
@@ -26,22 +19,17 @@ import { Header } from '../../partials/w3m-header';
 import { Snackbar } from '../../partials/w3m-snackbar';
 import { useCustomDimensions } from '../../hooks/useCustomDimensions';
 import styles from './styles';
+import { useAppKit } from '../../AppKitContext';
 
 export function AppKit() {
-  const { open, loading } = useSnapshot(ModalController.state);
-  const { connectors, connectedConnector } = useSnapshot(ConnectorController.state);
-  const { caipAddress, isConnected } = useSnapshot(AccountController.state);
-  const { frameViewVisible, webviewVisible } = useSnapshot(WebviewController.state);
+  const { disconnect } = useAppKit();
+  const { open } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
   const { projectId } = useSnapshot(OptionsController.state);
   const { height } = useWindowDimensions();
   const { isLandscape } = useCustomDimensions();
   const portraitHeight = height - 80;
   const landScapeHeight = height * 0.95 - (StatusBar.currentHeight ?? 0);
-  const authProvider = connectors.find(c => c.type === 'AUTH')?.provider as AppKitFrameProvider;
-  const AuthView = authProvider?.AuthView;
-  const SocialView = authProvider?.Webview;
-  const showAuth = !connectedConnector || connectedConnector === 'AUTH';
 
   const onBackButtonPress = () => {
     if (RouterController.state.history.length > 1) {
@@ -58,8 +46,14 @@ export function AppKit() {
 
   const handleClose = async () => {
     if (OptionsController.state.isSiweEnabled) {
-      if (SIWEController.state.status !== 'success' && AccountController.state.isConnected) {
-        await ConnectionController.disconnect();
+      const session = await SIWEController.getSession();
+      if (
+        !session &&
+        SIWEController.state.status !== 'success' &&
+        ConnectionsController.state.activeNamespace === 'eip155' &&
+        !!ConnectionsController.state.activeAddress
+      ) {
+        await disconnect();
       }
     }
 
@@ -71,68 +65,17 @@ export function AppKit() {
       EventsController.sendEvent({ type: 'track', event: 'BUY_CANCEL' });
     }
   };
-
-  const onNewAddress = useCallback(
-    async (address?: CaipAddress) => {
-      if (!isConnected || loading) {
-        return;
-      }
-
-      const newAddress = CoreHelperUtil.getPlainAddress(address);
-      TransactionsController.resetTransactions();
-
-      if (OptionsController.state.isSiweEnabled) {
-        const newNetworkId = CoreHelperUtil.getNetworkId(address);
-
-        const { signOutOnAccountChange, signOutOnNetworkChange } =
-          SIWEController.state._client?.options ?? {};
-        const session = await SIWEController.getSession();
-
-        if (session && newAddress && signOutOnAccountChange) {
-          // If the address has changed and signOnAccountChange is enabled, sign out
-          await SIWEController.signOut();
-          onSiweNavigation();
-        } else if (
-          newNetworkId &&
-          session?.chainId.toString() !== newNetworkId &&
-          signOutOnNetworkChange
-        ) {
-          // If the network has changed and signOnNetworkChange is enabled, sign out
-          await SIWEController.signOut();
-          onSiweNavigation();
-        } else if (!session) {
-          // If it's connected but there's no session, show sign view
-          onSiweNavigation();
-        }
-      }
-    },
-    [isConnected, loading]
-  );
-
-  const onSiweNavigation = () => {
-    if (ModalController.state.open) {
-      RouterController.push('ConnectingSiwe');
-    } else {
-      ModalController.open({ view: 'ConnectingSiwe' });
-    }
-  };
-
   useEffect(() => {
     if (projectId) {
       prefetch();
     }
   }, [projectId, prefetch]);
 
-  useEffect(() => {
-    onNewAddress(caipAddress);
-  }, [caipAddress, onNewAddress]);
-
   return (
     <>
       <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
         <Modal
           style={styles.modal}
-          coverScreen={!frameViewVisible && !webviewVisible}
           isVisible={open}
           useNativeDriver
           useNativeDriverForBackdrop
@@ -152,8 +95,6 @@ export function AppKit() {
             <Snackbar />
           </Card>
         </Modal>
-        {!!showAuth && AuthView && <AuthView />}
-        {!!showAuth && SocialView && <SocialView />}
       </ThemeProvider>
     </>
   );

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

@@ -1,12 +1,12 @@
 import { useSnapshot } from 'valtio';
 import type { StyleProp, ViewStyle } from 'react-native';
 import {
-  AccountController,
   ApiController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   EventsController,
   ModalController,
+  OptionsController,
   ThemeController
 } from '@reown/appkit-core-react-native';
 import { NetworkButton as NetworkButtonUI, ThemeProvider } from '@reown/appkit-ui-react-native';
@@ -17,11 +17,15 @@ export interface NetworkButtonProps {
 }
 
 export function NetworkButton({ disabled, style }: NetworkButtonProps) {
-  const { isConnected } = useSnapshot(AccountController.state);
-  const { activeNetwork } = useSnapshot(ConnectionsController.state);
+  const { activeNetwork, isConnected } = useSnapshot(ConnectionsController.state);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const { defaultNetwork } = useSnapshot(OptionsController.state);
   const { loading } = useSnapshot(ModalController.state);
   const { themeMode, themeVariables } = useSnapshot(ThemeController.state);
 
+  const network = isConnected ? activeNetwork : defaultNetwork;
+  const networkImage = network ? networkImages[network.id] : undefined;
+
   const onNetworkPress = () => {
     ModalController.open({ view: 'Networks' });
     EventsController.sendEvent({
@@ -33,7 +37,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
   return (
     <ThemeProvider themeMode={themeMode} themeVariables={themeVariables}>
       <NetworkButtonUI
-        imageSrc={AssetUtil.getNetworkImage(activeNetwork?.id)}
+        imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}
         disabled={disabled || loading}
         style={style}
@@ -41,7 +45,7 @@ export function NetworkButton({ disabled, style }: NetworkButtonProps) {
         loading={loading}
         testID="network-button"
       >
-        {activeNetwork?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
+        {network?.name ?? (isConnected ? 'Unknown Network' : 'Select Network')}
       </NetworkButtonUI>
     </ThemeProvider>
   );

package/src/modal/w3m-router/index.tsx

@@ -1,5 +1,5 @@
-import { useLayoutEffect, useMemo } from 'react';
 import { useSnapshot } from 'valtio';
+import { useLayoutEffect, useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -9,12 +9,8 @@ import { ConnectView } from '../../views/w3m-connect-view';
 import { ConnectSocialsView } from '../../views/w3m-connect-socials-view';
 import { ConnectingView } from '../../views/w3m-connecting-view';
 import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
-import { ConnectingFarcasterView } from '../../views/w3m-connecting-farcaster-view';
 import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
-import { CreateView } from '../../views/w3m-create-view';
-import { ConnectingSiweView } from '@reown/appkit-siwe-react-native';
-import { EmailVerifyOtpView } from '../../views/w3m-email-verify-otp-view';
-import { EmailVerifyDeviceView } from '../../views/w3m-email-verify-device-view';
+import { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';
 import { NetworksView } from '../../views/w3m-networks-view';
 import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
@@ -25,14 +21,9 @@ import { OnRampSettingsView } from '../../views/w3m-onramp-settings-view';
 import { OnRampTransactionView } from '../../views/w3m-onramp-transaction-view';
 import { SwapView } from '../../views/w3m-swap-view';
 import { SwapPreviewView } from '../../views/w3m-swap-preview-view';
-import { SwapSelectTokenView } from '../../views/w3m-swap-select-token-view';
 import { TransactionsView } from '../../views/w3m-transactions-view';
 import { UnsupportedChainView } from '../../views/w3m-unsupported-chain-view';
-import { UpdateEmailWalletView } from '../../views/w3m-update-email-wallet-view';
-import { UpdateEmailPrimaryOtpView } from '../../views/w3m-update-email-primary-otp-view';
-import { UpdateEmailSecondaryOtpView } from '../../views/w3m-update-email-secondary-otp-view';
 import { UpgradeEmailWalletView } from '../../views/w3m-upgrade-email-wallet-view';
-import { UpgradeToSmartAccountView } from '../../views/w3m-upgrade-to-smart-account-view';
 import { WalletCompatibleNetworks } from '../../views/w3m-wallet-compatible-networks-view';
 import { WalletReceiveView } from '../../views/w3m-wallet-receive-view';
 import { WalletSendView } from '../../views/w3m-wallet-send-view';
@@ -67,16 +58,8 @@ export function AppKitRouter() {
         return ConnectingSiweView;
       case 'ConnectingSocial':
         return ConnectingSocialView;
-      case 'ConnectingFarcaster':
-        return ConnectingFarcasterView;
       case 'ConnectingWalletConnect':
         return ConnectingView;
-      case 'Create':
-        return CreateView;
-      case 'EmailVerifyDevice':
-        return EmailVerifyDeviceView;
-      case 'EmailVerifyOtp':
-        return EmailVerifyOtpView;
       case 'GetWallet':
         return GetWalletView;
       case 'Networks':
@@ -97,22 +80,12 @@ export function AppKitRouter() {
         return SwapView;
       case 'SwapPreview':
         return SwapPreviewView;
-      case 'SwapSelectToken':
-        return SwapSelectTokenView;
       case 'Transactions':
         return TransactionsView;
       case 'UnsupportedChain':
         return UnsupportedChainView;
-      case 'UpdateEmailPrimaryOtp':
-        return UpdateEmailPrimaryOtpView;
-      case 'UpdateEmailSecondaryOtp':
-        return UpdateEmailSecondaryOtpView;
-      case 'UpdateEmailWallet':
-        return UpdateEmailWalletView;
       case 'UpgradeEmailWallet':
         return UpgradeEmailWalletView;
-      case 'UpgradeToSmartAccount':
-        return UpgradeToSmartAccountView;
       case 'WalletCompatibleNetworks':
         return WalletCompatibleNetworks;
       case 'WalletReceive':

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

@@ -12,8 +12,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import { type Transaction, type TransactionImage } from '@reown/appkit-common-react-native';
 import {
-  AccountController,
-  AssetUtil,
+  AssetController,
   ConnectionsController,
   ConstantsUtil,
   EventsController,
@@ -34,13 +33,19 @@ export function AccountActivity({ style }: Props) {
   const [initialLoad, setInitialLoad] = useState(true);
   const { loading, transactions, next } = useSnapshot(TransactionsController.state);
   const { activeNetwork } = useSnapshot(ConnectionsController.state);
-  const networkImage = AssetUtil.getNetworkImage(activeNetwork?.id);
+  const { networkImages } = useSnapshot(AssetController.state);
+  const networkImage = activeNetwork ? networkImages[activeNetwork.id] : undefined;
   const isSupported =
     activeNetwork?.caipNetworkId &&
     ConstantsUtil.ACTIVITY_SUPPORTED_CHAINS.includes(activeNetwork.caipNetworkId);
 
   const handleLoadMore = () => {
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
     TransactionsController.fetchTransactions(address);
     EventsController.sendEvent({
       type: 'track',
@@ -49,14 +54,19 @@ export function AccountActivity({ style }: Props) {
         address,
         projectId: OptionsController.state.projectId,
         cursor: TransactionsController.state.next,
-        isSmartAccount: AccountController.state.preferredAccountType === 'smartAccount'
+        isSmartAccount: ConnectionsController.state.accountType === 'smartAccount'
       }
     });
   };
 
   const onRefresh = useCallback(async () => {
+    const address = ConnectionsController.state.activeAddress;
+
+    if (!address) {
+      return;
+    }
+
     setRefreshing(true);
-    const address = ConnectionsController.state.activeAddress?.split(':')[2];
     await TransactionsController.fetchTransactions(address, true);
     setRefreshing(false);
   }, []);
@@ -66,8 +76,8 @@ export function AccountActivity({ style }: Props) {
   }, [transactions]);
 
   useEffect(() => {
-    if (!TransactionsController.state.transactions.length) {
-      const address = ConnectionsController.state.activeAddress?.split(':')[2];
+    const address = ConnectionsController.state.activeAddress;
+    if (!TransactionsController.state.transactions.length && address) {
       TransactionsController.fetchTransactions(address, true);
     }
     // Set initial load to false after first fetch