@reown/appkit-react-native 2.0.0-alpha.5 → 2.0.0-alpha.6

package/src/AppKit.ts

@@ -37,13 +37,13 @@ import {
   type Connection,
   type WcWallet
 } from '@reown/appkit-common-react-native';
-import { SIWEController } from '@reown/appkit-siwe-react-native';
 
 import { WalletConnectConnector } from './connectors/WalletConnectConnector';
 import { WcHelpersUtil } from './utils/HelpersUtil';
 import { NetworkUtil } from './utils/NetworkUtil';
 import { RouterUtil } from './utils/RouterUtil';
 import { type AppKitConfig } from './types';
+import { SIWXUtil } from './utils/SIWXUtil';
 
 export class AppKit {
   private projectId: string;
@@ -131,8 +131,7 @@ export class AppKit {
       const approvedNamespaces = await connector.connect({
         namespaces: this.namespaces,
         defaultNetwork: chain,
-        universalLink: targetWallet?.link_mode ?? undefined,
-        siweConfig: this.config?.siweConfig
+        universalLink: targetWallet?.link_mode ?? undefined
       });
 
       this.processConnection(connector, approvedNamespaces);
@@ -150,11 +149,7 @@ export class AppKit {
     }
   }
 
-  private async processConnection(
-    connector: WalletConnector,
-    namespaces?: Namespaces,
-    shouldCloseModal: boolean = true
-  ) {
+  private async processConnection(connector: WalletConnector, namespaces?: Namespaces) {
     if (!namespaces || Object.keys(namespaces).length === 0) {
       throw new Error('No namespaces provided');
     }
@@ -176,19 +171,7 @@ export class AppKit {
     // Sync accounts
     await this.syncAccounts(initializedAdapters);
 
-    // Handle SIWE if enabled
-    this.handleSiweConnectionIfEnabled(shouldCloseModal);
-  }
-
-  private handleSiweConnectionIfEnabled(shouldCloseModal: boolean = true): void {
-    if (
-      OptionsController.state.isSiweEnabled &&
-      ConnectionsController.state.activeNamespace === 'eip155'
-    ) {
-      this.handleSiweChange({ isConnection: true });
-    } else if (shouldCloseModal) {
-      ModalController.close();
-    }
+    await SIWXUtil.initializeIfEnabled({ onDisconnect: this.disconnect, closeModal: true });
   }
 
   /**
@@ -230,8 +213,8 @@ export class AppKit {
         );
       }
 
-      if (OptionsController.state.isSiweEnabled) {
-        await SIWEController.signOut();
+      if (SIWXUtil.getSIWX()?.signOutOnDisconnect) {
+        await SIWXUtil.clearSessions();
       }
 
       EventsController.sendEvent({
@@ -298,15 +281,11 @@ export class AppKit {
 
   async close() {
     ModalController.close();
+    const isSIWXRequired = SIWXUtil.getSIWX()?.getRequired?.();
 
-    if (OptionsController.state.isSiweEnabled && ConnectionsController.state.isConnected) {
-      const session = await SIWEController.getSession();
-      if (
-        !session &&
-        SIWEController.state.status !== 'success' &&
-        ConnectionsController.state.activeNamespace === 'eip155' &&
-        !!ConnectionsController.state.activeAddress
-      ) {
+    if (isSIWXRequired && ConnectionsController.state.isConnected) {
+      const sessions = await SIWXUtil.getSessions();
+      if (!sessions.length) {
         return await this.disconnect();
       }
     }
@@ -326,6 +305,13 @@ export class AppKit {
       return RouterController.goBack();
     }
 
+    const isSIWXRequired = SIWXUtil.getSIWX()?.getRequired?.();
+
+    if (isSIWXRequired) {
+      // Don't close the modal if SIWX is required
+      return;
+    }
+
     return this.close();
   }
 
@@ -396,25 +382,27 @@ export class AppKit {
    * This attempts to restore previous sessions.
    */
   private async initConnectors() {
+    ModalController.setLoading(true);
     const connectedConnectors = await StorageUtil.getConnectedConnectors();
     if (connectedConnectors.length > 0) {
-      ModalController.setLoading(true);
-
       for (const connected of connectedConnectors) {
         try {
           const connector = await this.createConnector(connected.type);
 
           const namespaces = connector.getNamespaces();
 
-          await this.processConnection(connector, namespaces, false);
+          await this.processConnection(connector, namespaces);
         } catch (error) {
           // Use console.warn for non-critical initialization failures
           console.warn(`Failed to initialize connector type ${connected.type}:`, error);
           await StorageUtil.removeConnectedConnectors(connected.type);
         }
       }
-      ModalController.setLoading(false);
     }
+
+    //Always init the walletconnect connector
+    await this.createWalletConnectConnector();
+    ModalController.setLoading(false);
   }
 
   private setupAdaptersAndSubscribe(
@@ -603,11 +591,7 @@ export class AppKit {
   private subscribeToAdapterEvents(adapter: BlockchainAdapter): void {
     adapter.on('accountsChanged', ({ accounts }) => {
       const namespace = adapter.getSupportedNamespace();
-      const hasChanged = ConnectionsController.updateAccounts(namespace, accounts);
-
-      if (hasChanged && namespace === 'eip155') {
-        this.handleSiweChange({ isAccountChange: true });
-      }
+      ConnectionsController.updateAccounts(namespace, accounts);
     });
 
     adapter.on('chainChanged', async ({ chainId }) => {
@@ -639,10 +623,7 @@ export class AppKit {
         TransactionsController.fetchTransactions(address, true);
       }
 
-      // Check if user needs to sign in again
-      if (namespace === 'eip155') {
-        this.handleSiweChange({ isNetworkChange: true });
-      }
+      SIWXUtil.initializeIfEnabled({ onDisconnect: this.disconnect, caipAddress: address });
     });
 
     adapter.on('disconnect', () => {
@@ -688,9 +669,8 @@ export class AppKit {
 
     ConnectionsController.setNetworks(this.networks);
 
-    if (options.siweConfig) {
-      SIWEController.setSIWEClient(options.siweConfig);
-      OptionsController.setIsSiweEnabled(options.siweConfig.options.enabled);
+    if (options.siwx) {
+      OptionsController.setSiwx(options.siwx);
     }
 
     if (
@@ -796,45 +776,6 @@ export class AppKit {
       ModalController.open({ view: routeName });
     }
   };
-
-  private async handleSiweChange(params?: {
-    isConnection?: boolean;
-    isNetworkChange?: boolean;
-    isAccountChange?: boolean;
-  }) {
-    const { isNetworkChange, isAccountChange, isConnection } = params ?? {};
-    const { enabled, signOutOnAccountChange, signOutOnNetworkChange } =
-      SIWEController.state._client?.options ?? {};
-
-    if (!enabled || RouterController.state.view === 'ConnectingSiwe') {
-      // Do nothing if view is connecting siwe or siwe is not enabled
-      return;
-    }
-
-    const session = await SIWEController.getSession();
-    if (session && isAccountChange) {
-      if (signOutOnAccountChange) {
-        // If the address has changed and signOnAccountChange is enabled, sign out
-        await SIWEController.signOut();
-
-        return this.navigate('ConnectingSiwe');
-      }
-    } else if (session && isNetworkChange) {
-      if (signOutOnNetworkChange) {
-        // If the network has changed and signOnNetworkChange is enabled, sign out
-        await SIWEController.signOut();
-
-        return this.navigate('ConnectingSiwe');
-      }
-    } else if (!session) {
-      // If it's connected but there's no session, show sign view
-
-      return this.navigate('ConnectingSiwe');
-    } else if (isConnection) {
-      // Already connected with 1CA
-      ModalController.close();
-    }
-  }
 }
 
 export function createAppKit(config: AppKitConfig): AppKit {

package/src/connectors/WalletConnectConnector.ts

@@ -1,5 +1,5 @@
 import { WcController } from '@reown/appkit-core-react-native';
-import { UniversalProvider, type IUniversalProvider } from '@walletconnect/universal-provider';
+import UniversalProvider from '@walletconnect/universal-provider';
 import {
   WalletConnector,
   type AppKitNetwork,
@@ -14,7 +14,7 @@ import {
   type ConnectionProperties,
   type RequestArguments
 } from '@reown/appkit-common-react-native';
-import { getDidAddress, getDidChainId, SIWEController } from '@reown/appkit-siwe-react-native';
+import { SIWXUtil } from '../utils/SIWXUtil';
 
 interface WalletConnectConnectorConfig {
   projectId: string;
@@ -42,7 +42,7 @@ export class WalletConnectConnector extends WalletConnector {
   }
 
   override async restoreSession(): Promise<boolean> {
-    const provider = this.getProvider() as IUniversalProvider;
+    const provider = this.getProvider() as UniversalProvider;
     if (!provider) {
       return false;
     }
@@ -67,9 +67,15 @@ export class WalletConnectConnector extends WalletConnector {
         this.wallet = {
           ...metadata,
           name: metadata.name,
-          icon: metadata.icons?.[0]
+          icon: metadata.icons?.[0],
+          type: 'walletconnect'
         };
       }
+    } else {
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
     }
 
     return true;
@@ -81,7 +87,7 @@ export class WalletConnectConnector extends WalletConnector {
   }: {
     projectId: string;
     metadata: Metadata;
-  }): Promise<IUniversalProvider> {
+  }): Promise<UniversalProvider> {
     if (!this.provider) {
       this.provider = (await UniversalProvider.init({
         projectId,
@@ -90,82 +96,36 @@ export class WalletConnectConnector extends WalletConnector {
       })) as Provider;
     }
 
-    return this.provider as IUniversalProvider;
+    return this.provider as UniversalProvider;
   }
 
   override async connect(opts: ConnectOptions) {
-    const { siweConfig, namespaces, defaultNetwork, universalLink } = opts;
+    const { namespaces, defaultNetwork, universalLink } = opts;
     function onUri(uri: string) {
       WcController.setWcUri(uri);
     }
 
-    const provider = this.getProvider() as IUniversalProvider;
+    const provider = this.getProvider() as UniversalProvider;
 
     // @ts-ignore
     provider.on('display_uri', onUri);
 
-    let session: IUniversalProvider['session'];
+    let session: UniversalProvider['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) {
+
+    if (isEVMOnly && SIWXUtil.getSIWX()) {
       // 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
-        },
+      session = await SIWXUtil.universalProviderAuthenticate({
+        universalProvider: this.provider as UniversalProvider,
+        chains: namespaces?.['eip155']?.chains ?? [],
+        methods: namespaces?.['eip155']?.methods ?? [],
         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: {},
+      session = await (this.provider as UniversalProvider).connect({
         optionalNamespaces: namespaces
       });
     }
@@ -175,14 +135,18 @@ export class WalletConnectConnector extends WalletConnector {
       this.wallet = {
         ...metadata,
         name: metadata?.name,
-        icon: metadata?.icons?.[0]
+        icon: metadata?.icons?.[0],
+        type: 'walletconnect'
       };
     } else {
-      this.wallet = undefined;
+      this.wallet = {
+        name: 'Unknown Wallet',
+        type: 'walletconnect'
+      };
     }
 
     if (defaultNetwork?.caipNetworkId) {
-      (this.provider as IUniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
+      (this.provider as UniversalProvider).setDefaultChain(defaultNetwork.caipNetworkId);
     }
 
     if (session?.sessionProperties) {
@@ -229,7 +193,7 @@ export class WalletConnectConnector extends WalletConnector {
 
   override getNamespaces(): Namespaces {
     const namespaces =
-      ((this.provider as IUniversalProvider)?.session?.namespaces as Namespaces) ?? {};
+      ((this.provider as UniversalProvider)?.session?.namespaces as Namespaces) ?? {};
     this.namespaces = namespaces;
 
     return namespaces;
@@ -244,7 +208,7 @@ export class WalletConnectConnector extends WalletConnector {
 
     let caipNetworkId = network.caipNetworkId ?? `eip155:${network.id}`;
 
-    (this.provider as IUniversalProvider).setDefaultChain(caipNetworkId);
+    (this.provider as UniversalProvider).setDefaultChain(caipNetworkId);
 
     return Promise.resolve();
   }
@@ -259,7 +223,7 @@ export class WalletConnectConnector extends WalletConnector {
       return undefined;
     }
 
-    const chainId = (this.provider as IUniversalProvider).rpcProviders[
+    const chainId = (this.provider as UniversalProvider).rpcProviders[
       namespace
     ]?.getDefaultChain?.();
 

package/src/index.ts

@@ -17,6 +17,13 @@ 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';
+export type {
+  SIWXConfig,
+  SIWXMessage,
+  SIWXSession,
+  SIWXStorage,
+  SIWXVerifier
+} from '@reown/appkit-common-react-native';
 export type { AppKitConfig } from './types';
 
 /****** Hooks *******/
@@ -31,6 +38,9 @@ export { useAppKitState } from './hooks/useAppKitState';
 export { solana, solanaDevnet, solanaTestnet } from '@reown/appkit-common-react-native';
 export { bitcoin, bitcoinTestnet } from '@reown/appkit-common-react-native';
 
+/********** SIWX **********/
+export { ReownAuthentication } from '@reown/appkit-core-react-native';
+
 /********** Main **********/
 export { createAppKit } from './AppKit';
 export { AppKitProvider } from './AppKitContext';

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

@@ -1,5 +1,5 @@
 import { useSnapshot } from 'valtio';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { RouterController } from '@reown/appkit-core-react-native';
 
 import { AccountDefaultView } from '../../views/w3m-account-default-view';
@@ -10,7 +10,7 @@ import { ConnectSocialsView } from '../../views/w3m-connect-socials-view';
 import { ConnectingView } from '../../views/w3m-connecting-view';
 import { ConnectingExternalView } from '../../views/w3m-connecting-external-view';
 import { ConnectingSocialView } from '../../views/w3m-connecting-social-view';
-import { ConnectingSiweView } from '../../views/w3m-connecting-siwe-view';
+import { SIWXSignMessageView } from '../../views/w3m-siwx-sign-view';
 import { GetWalletView } from '../../views/w3m-get-wallet-view';
 import { NetworksView } from '../../views/w3m-networks-view';
 import { NetworkSwitchView } from '../../views/w3m-network-switch-view';
@@ -31,8 +31,8 @@ import { WalletSendPreviewView } from '../../views/w3m-wallet-send-preview-view'
 import { WalletSendSelectTokenView } from '../../views/w3m-wallet-send-select-token-view';
 import { WhatIsANetworkView } from '../../views/w3m-what-is-a-network-view';
 import { WhatIsAWalletView } from '../../views/w3m-what-is-a-wallet-view';
-import { UiUtil } from '../../utils/UiUtil';
-import { useRouteTransition } from '../../hooks/useRouteTransition';
+// import { UiUtil } from '../../utils/UiUtil';
+// import { useRouteTransition } from '../../hooks/useRouteTransition';
 
 import { Animated } from 'react-native';
 import { useCustomDimensions } from '@reown/appkit-ui-react-native';
@@ -40,18 +40,15 @@ import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 export function AppKitRouter() {
   const { view } = useSnapshot(RouterController.state);
   const { maxHeight } = useCustomDimensions();
-  const { animateTransition, getAnimatedStyle } = useRouteTransition({
-    duration: 300,
-    useNativeDriver: true
-  });
+  // const { animateTransition, getAnimatedStyle } = useRouteTransition();
 
-  useEffect(() => {
-    UiUtil.setRouteTransition(animateTransition);
-  }, [animateTransition]);
+  // useEffect(() => {
+  //   UiUtil.setRouteTransition(animateTransition);
+  // }, [animateTransition]);
 
-  useEffect(() => {
-    UiUtil.createViewTransition();
-  }, [view]);
+  // useEffect(() => {
+  //   UiUtil.createViewTransition();
+  // }, [view]);
 
   const ViewComponent = useMemo(() => {
     switch (view) {
@@ -67,8 +64,8 @@ export function AppKitRouter() {
         return ConnectSocialsView;
       case 'ConnectingExternal':
         return ConnectingExternalView;
-      case 'ConnectingSiwe':
-        return ConnectingSiweView;
+      case 'SIWXSignMessage':
+        return SIWXSignMessageView;
       case 'ConnectingSocial':
         return ConnectingSocialView;
       case 'WalletConnect':
@@ -119,7 +116,7 @@ export function AppKitRouter() {
   }, [view]);
 
   return (
-    <Animated.View style={[getAnimatedStyle(), { maxHeight }]}>
+    <Animated.View style={{ maxHeight }}>
       <ViewComponent />
     </Animated.View>
   );

package/src/partials/w3m-all-wallets-list/components/WalletItem.tsx

@@ -10,9 +10,10 @@ interface WalletItemProps {
   imageHeaders?: Record<string, string>;
   onItemPress: (wallet: WcWallet) => void;
   style?: StyleProp<ViewStyle>;
+  testID?: string;
 }
 
-export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletItemProps) {
+export function WalletItem({ item, imageHeaders, onItemPress, style, testID }: WalletItemProps) {
   const { walletImages } = useSnapshot(AssetController.state);
   const isInstalled = ApiController.state.installed.find(wallet => wallet?.id === item?.id);
   const imageSrc = AssetUtil.getWalletImage(item, walletImages);
@@ -29,6 +30,7 @@ export function WalletItem({ item, imageHeaders, onItemPress, style }: WalletIte
       name={item?.name ?? 'Unknown'}
       onPress={() => onItemPress(item)}
       installed={!!isInstalled}
+      testID={testID}
     />
   );
 }

package/src/partials/w3m-all-wallets-list/components/WalletList.tsx

@@ -24,6 +24,7 @@ interface Props {
   isLoading?: boolean;
   loadingItems?: number;
   style?: StyleProp<ViewStyle>;
+  testIDKey?: string;
 }
 
 export function WalletList({
@@ -33,6 +34,7 @@ export function WalletList({
   onEndReachedThreshold,
   isLoading = false,
   loadingItems = 20,
+  testIDKey,
   style
 }: Props) {
   const { padding, maxHeight } = useCustomDimensions();
@@ -61,6 +63,7 @@ export function WalletList({
             imageHeaders={imageHeaders}
             onItemPress={onItemPress}
             style={styles.itemContainer}
+            testID={testIDKey ? `${testIDKey}-${item?.id}` : undefined}
           />
         );
       }}

package/src/partials/w3m-all-wallets-search/index.tsx

@@ -78,5 +78,5 @@ export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchP
     );
   }
 
-  return <WalletList onItemPress={onItemPress} data={results} />;
+  return <WalletList onItemPress={onItemPress} data={results} testIDKey="wallet-search-item" />;
 }

package/src/partials/w3m-header/index.tsx

@@ -32,7 +32,7 @@ export function Header() {
       Connect: 'Connect wallet',
       ConnectSocials: 'All socials',
       ConnectingExternal: walletName ?? 'Connect wallet',
-      ConnectingSiwe: 'Sign in',
+      SIWXSignMessage: 'Sign in',
       ConnectingSocial: socialName ?? 'Connecting Social',
       WalletConnect: walletName ?? 'WalletConnect',
       GetWallet: 'Get a wallet',
@@ -58,8 +58,8 @@ export function Header() {
     }[_view];
   };
 
-  const noCloseViews = ['OnRampSettings', 'ConnectingSiwe'];
-  const noBackViews = ['UnsupportedChain'];
+  const noCloseViews = ['OnRampSettings', 'SIWXSignMessage'];
+  const noBackViews = ['UnsupportedChain', 'SIWXSignMessage'];
   const showClose = !noCloseViews.includes(view);
   const header = headings(data, view);
 

package/src/types.ts

@@ -7,10 +7,10 @@ import {
   type Metadata,
   type Network,
   type Storage,
-  type AppKitSIWEClient,
   type ThemeMode,
   type ThemeVariables,
-  type Tokens
+  type Tokens,
+  type SIWXConfig
 } from '@reown/appkit-common-react-native';
 
 /**
@@ -154,13 +154,11 @@ export interface AppKitConfig {
   themeVariables?: ThemeVariables;
 
   /**
-   * Optional SIWE (Sign-In with Ethereum) configuration.
-   * Enables authentication flow using Ethereum signatures.
-   * Must implement the AppKitSIWEClient interface.
-   *
-   * @see {@link https://docs.reown.com/appkit/react-native/core/siwe | SIWE Documentation}
+   * @experimental - This feature is not production ready.
+   * Enable Sign In With X (SIWX) feature.
+   * @default undefined
    */
-  siweConfig?: AppKitSIWEClient;
+  siwx?: SIWXConfig;
 
   /**
    * Optional default network to use when no specific network is selected.