@reown/appkit-react-native 0.0.0-fix-ui-changes-20250829201240 → 0.0.0-fix-singleton-appkit-20251001153745

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';
 
 /**
@@ -129,6 +129,7 @@ export interface AppKitConfig {
   /**
    * Optional flag to enable debug mode.
    * When enabled, additional logging and debugging information will be output.
+   * Only enabled in development mode.
    *
    * @see {@link https://docs.reown.com/appkit/react-native/core/options#debug | Debug Documentation}
    * @default false
@@ -154,13 +155,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.

package/src/utils/SIWXUtil.ts

@@ -0,0 +1,364 @@
+import UniversalProvider from '@walletconnect/universal-provider';
+
+import {
+  type CaipNetworkId,
+  type ChainNamespace,
+  type SIWXSession
+} from '@reown/appkit-common-react-native';
+
+import {
+  ModalController,
+  OptionsController,
+  RouterController,
+  SnackController,
+  CoreHelperUtil,
+  ConnectionsController,
+  EventsController,
+  LogController
+} from '@reown/appkit-core-react-native';
+import { Alert } from 'react-native';
+
+/**
+ * SIWXUtil holds the methods to interact with the SIWX plugin and must be called internally on AppKit.
+ */
+
+export const SIWXUtil = {
+  getSIWX() {
+    return OptionsController.state.siwx;
+  },
+
+  async initializeIfEnabled({
+    onDisconnect,
+    caipAddress = ConnectionsController.state.activeAddress,
+    closeModal = false
+  }: {
+    onDisconnect: () => Promise<void>;
+    caipAddress?: string;
+    closeModal?: boolean;
+  }) {
+    const siwx = OptionsController.state.siwx;
+
+    if (!siwx || !caipAddress) {
+      if (closeModal) {
+        ModalController.close();
+      }
+
+      return;
+    }
+
+    const [namespace, chainId, address] = caipAddress.split(':') as [
+      ChainNamespace,
+      string,
+      string
+    ];
+
+    const isSupportedNetwork = ConnectionsController.getAvailableNetworks().find(
+      network => network.caipNetworkId === `${namespace}:${chainId}`
+    );
+
+    if (!isSupportedNetwork) {
+      return;
+    }
+
+    try {
+      const sessions = await siwx.getSessions(`${namespace}:${chainId}`, address);
+
+      if (sessions.length) {
+        ModalController.close();
+
+        return;
+      }
+
+      if (ModalController.state.open) {
+        RouterController.push('SIWXSignMessage');
+      } else {
+        ModalController.open({ view: 'SIWXSignMessage' });
+      }
+    } catch (error: unknown) {
+      LogController.sendError(error, 'SIWXUtil.ts', 'initializeIfEnabled');
+
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SIWX_AUTH_ERROR',
+        properties: this.getSIWXEventProperties(error)
+      });
+
+      await onDisconnect();
+      SnackController.showError('A problem occurred while trying initialize authentication');
+    }
+  },
+  async requestSignMessage() {
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'CLICK_SIGN_SIWX_MESSAGE',
+      properties: this.getSIWXEventProperties()
+    });
+
+    const siwx = OptionsController.state.siwx;
+
+    const address = ConnectionsController.state.activeAddress;
+    const plainAddress = CoreHelperUtil.getPlainAddress(address);
+    const network = ConnectionsController.state.activeNetwork;
+
+    if (!siwx) {
+      throw new Error('SIWX is not enabled');
+    }
+
+    if (!address || !plainAddress) {
+      throw new Error('No ActiveCaipAddress found');
+    }
+
+    if (!network) {
+      throw new Error('No ActiveCaipNetwork or client found');
+    }
+
+    try {
+      const siwxMessage = await siwx.createMessage({
+        chainId: network.caipNetworkId,
+        accountAddress: plainAddress
+      });
+
+      const message = siwxMessage.toString();
+
+      const signature = await ConnectionsController.signMessage(address, message);
+
+      if (!signature) {
+        throw new Error('Error signing message');
+      }
+
+      SnackController.showLoading('Authenticating...', true);
+
+      // Add a small delay to allow the app to fully restore network connectivity
+      // after returning from background (wallet redirect)
+      await new Promise(resolve => setTimeout(resolve, 500));
+
+      await siwx.addSession({
+        data: siwxMessage,
+        message,
+        signature
+      });
+
+      SnackController.hide();
+
+      ModalController.close();
+
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SIWX_AUTH_SUCCESS',
+        properties: this.getSIWXEventProperties()
+      });
+    } catch (error) {
+      if (!ModalController.state.open) {
+        await ModalController.open({
+          view: 'SIWXSignMessage'
+        });
+      }
+
+      // @ts-ignore
+      Alert.alert('Error signing message', error?.message ?? error);
+
+      SnackController.showError('Error signing message');
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'SIWX_AUTH_ERROR',
+        properties: this.getSIWXEventProperties(error)
+      });
+
+      // eslint-disable-next-line no-console
+      console.error('SIWXUtil:requestSignMessage', error);
+    }
+  },
+  async cancelSignMessage(onDisconnect: () => Promise<void>) {
+    try {
+      const siwx = this.getSIWX();
+      const isRequired = siwx?.getRequired?.();
+      if (isRequired) {
+        await onDisconnect();
+      } else {
+        ModalController.close();
+      }
+
+      EventsController.sendEvent({
+        event: 'CLICK_CANCEL_SIWX',
+        type: 'track',
+        properties: this.getSIWXEventProperties()
+      });
+    } catch (error) {
+      // eslint-disable-next-line no-console
+      console.error('SIWXUtil:cancelSignMessage', error);
+    }
+  },
+  async getAllSessions() {
+    const siwx = this.getSIWX();
+    const allRequestedCaipNetworks = ConnectionsController.state.networks;
+    const sessions = [] as SIWXSession[];
+    await Promise.all(
+      allRequestedCaipNetworks.map(async caipNetwork => {
+        const session = await siwx?.getSessions(
+          caipNetwork.caipNetworkId,
+          CoreHelperUtil.getPlainAddress(ConnectionsController.state.activeAddress) || ''
+        );
+        if (session) {
+          sessions.push(...session);
+        }
+      })
+    );
+
+    return sessions;
+  },
+  async getSessions(args?: { address?: string; caipNetworkId?: CaipNetworkId }) {
+    const siwx = OptionsController.state.siwx;
+    let address = args?.address;
+    if (!address) {
+      const activeCaipAddress = ConnectionsController.state.activeAddress;
+      address = CoreHelperUtil.getPlainAddress(activeCaipAddress);
+    }
+
+    let network = args?.caipNetworkId;
+    if (!network) {
+      const activeCaipNetwork = ConnectionsController.state.activeNetwork;
+      network = activeCaipNetwork?.caipNetworkId;
+    }
+
+    if (!siwx || !address || !network) {
+      return [];
+    }
+
+    return siwx.getSessions(network, address);
+  },
+  async isSIWXCloseDisabled() {
+    const siwx = this.getSIWX();
+
+    if (siwx) {
+      const isSiwxSignMessage = RouterController.state.view === 'SIWXSignMessage';
+
+      if (isSiwxSignMessage) {
+        return siwx.getRequired?.() && (await this.getSessions()).length === 0;
+      }
+    }
+
+    return false;
+  },
+
+  async universalProviderAuthenticate({
+    universalProvider,
+    chains,
+    methods,
+    universalLink
+  }: {
+    universalProvider: UniversalProvider;
+    chains: CaipNetworkId[];
+    methods: string[];
+    universalLink?: string;
+  }) {
+    const siwx = SIWXUtil.getSIWX();
+    const namespaces = new Set(chains.map(chain => chain.split(':')[0] as ChainNamespace));
+
+    if (!siwx || namespaces.size !== 1 || !namespaces.has('eip155')) {
+      return undefined;
+    }
+
+    // Ignores chainId and account address to get other message data
+    const siwxMessage = await siwx.createMessage({
+      chainId: OptionsController.state.defaultNetwork?.caipNetworkId || ('' as CaipNetworkId),
+      accountAddress: ''
+    });
+
+    let messageChains = chains;
+
+    if (OptionsController.state.defaultNetwork?.caipNetworkId) {
+      // The first chainId is what is used for universal provider to build the message
+      messageChains = [
+        OptionsController.state.defaultNetwork?.caipNetworkId,
+        ...chains.filter(chain => chain !== OptionsController.state.defaultNetwork?.caipNetworkId)
+      ];
+    }
+
+    const result = await universalProvider.authenticate(
+      {
+        nonce: siwxMessage.nonce,
+        domain: siwxMessage.domain,
+        uri: siwxMessage.uri,
+        exp: siwxMessage.expirationTime,
+        iat: siwxMessage.issuedAt,
+        nbf: siwxMessage.notBefore,
+        requestId: siwxMessage.requestId,
+        version: siwxMessage.version,
+        resources: siwxMessage.resources,
+        statement: siwxMessage.statement,
+        chainId: siwxMessage.chainId,
+        methods,
+        chains: messageChains
+      },
+      universalLink
+    );
+
+    SnackController.showLoading('Authenticating...', true);
+
+    if (result?.auths?.length) {
+      const sessions = result.auths.map<SIWXSession>(cacao => {
+        const message = universalProvider.client.formatAuthMessage({
+          request: cacao.p,
+          iss: cacao.p.iss
+        });
+
+        return {
+          data: {
+            ...cacao.p,
+            accountAddress: cacao.p.iss.split(':').slice(-1).join(''),
+            chainId: cacao.p.iss.split(':').slice(2, 4).join(':') as CaipNetworkId,
+            uri: cacao.p.aud,
+            version: cacao.p.version || siwxMessage.version,
+            expirationTime: cacao.p.exp,
+            issuedAt: cacao.p.iat,
+            notBefore: cacao.p.nbf
+          },
+          message,
+          signature: cacao.s.s,
+          cacao
+        };
+      });
+
+      try {
+        await siwx.setSessions(sessions);
+
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SIWX_AUTH_SUCCESS',
+          properties: SIWXUtil.getSIWXEventProperties()
+        });
+      } catch (error) {
+        // eslint-disable-next-line no-console
+        console.error('SIWX:universalProviderAuth - failed to set sessions', error);
+
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'SIWX_AUTH_ERROR',
+          properties: SIWXUtil.getSIWXEventProperties(error)
+        });
+
+        // eslint-disable-next-line no-console
+        await universalProvider.disconnect().catch(console.error);
+        throw error;
+      } finally {
+        SnackController.hide();
+      }
+    }
+
+    return result?.session;
+  },
+  getSIWXEventProperties(error?: unknown) {
+    return {
+      network: ConnectionsController.state.activeNetwork?.caipNetworkId,
+      isSmartAccount: ConnectionsController.state.accountType === 'smartAccount',
+      message: error ? CoreHelperUtil.parseError(error) : undefined
+    };
+  },
+  async clearSessions() {
+    const siwx = this.getSIWX();
+
+    if (siwx) {
+      await siwx.setSessions([]);
+    }
+  }
+};

package/src/views/w3m-account-default-view/index.tsx

@@ -14,7 +14,8 @@ import {
   OnRampController,
   ConnectionsController,
   AssetController,
-  AssetUtil
+  AssetUtil,
+  LogController
 } from '@reown/appkit-core-react-native';
 // import { ConstantsUtil as CommonConstantsUtil } from '@reown/appkit-common-react-native';
 import {
@@ -94,6 +95,7 @@ export function AccountDefaultView() {
         switchAccountType(namespace, newType, network);
       }
     } catch (error) {
+      LogController.sendError(error, 'AccountDefaultView.tsx', 'onSwitchAccountType');
       SnackController.showError('Error switching account type');
     }
   };
@@ -120,7 +122,7 @@ export function AccountDefaultView() {
       type: 'track',
       event: 'OPEN_SWAP',
       properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId,
         isSmartAccount: false
       }
     });
@@ -156,7 +158,7 @@ export function AccountDefaultView() {
   };
 
   const onSendPress = () => {
-    const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+    const network = ConnectionsController.state.activeNetwork?.caipNetworkId;
     const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
 
     EventsController.sendEvent({
@@ -193,7 +195,7 @@ export function AccountDefaultView() {
         testID="header-close"
       />
       <ScrollView bounces={false} fadingEdgeLength={20} style={{ paddingHorizontal: padding }}>
-        <FlexView alignItems="center" padding={['3xl', 's', '3xl', 's']}>
+        <FlexView alignItems="center" padding={['3xl', 's', 's', 's']}>
           <Avatar imageSrc={identity?.avatar} address={account ?? ''} />
           <FlexView flexDirection="row" alignItems="center" margin={['s', '0', '0', '0']}>
             <Text variant="medium-title-600">

package/src/views/w3m-account-view/index.tsx

@@ -50,15 +50,7 @@ export function AccountView() {
   }, []);
 
   return (
-    <ScrollView
-      bounces={false}
-      contentContainerStyle={[
-        styles.contentContainer,
-        {
-          paddingHorizontal: padding
-        }
-      ]}
-    >
+    <ScrollView bounces={false} contentContainerStyle={{ paddingHorizontal: padding }}>
       <NetworkButton
         imageSrc={networkImage}
         imageHeaders={ApiController._getApiHeaders()}

package/src/views/w3m-account-view/styles.ts

@@ -1,10 +1,7 @@
 import { Spacing } from '@reown/appkit-ui-react-native';
-import { Platform, StyleSheet } from 'react-native';
+import { StyleSheet } from 'react-native';
 
 export default StyleSheet.create({
-  contentContainer: {
-    paddingBottom: Platform.select({ ios: Spacing.s })
-  },
   networkIcon: {
     alignSelf: 'flex-start',
     position: 'absolute',

package/src/views/w3m-all-wallets-view/index.tsx

@@ -22,25 +22,32 @@ export function AllWalletsView() {
 
   const { debouncedCallback: onInputChange } = useDebounceCallback({ callback: setSearchQuery });
 
-  const onWalletPress = (wallet: WcWallet) => {
+  const onWalletPress = (wallet: WcWallet, displayIndex: number) => {
     const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
-      RouterController.push('ConnectingWalletConnect', { wallet });
+      RouterController.push('WalletConnect', { wallet });
     }
 
     EventsController.sendEvent({
       type: 'track',
       event: 'SELECT_WALLET',
-      properties: { name: wallet.name ?? 'Unknown', platform: 'mobile', explorer_id: wallet.id }
+      properties: {
+        name: wallet.name ?? 'Unknown',
+        platform: 'mobile',
+        explorerId: wallet.id,
+        walletRank: wallet.order,
+        displayIndex,
+        view: 'AllWallets'
+      }
     });
   };
 
   const onQrCodePress = () => {
     WcController.removePressedWallet();
     WcController.removeWcLinking();
-    RouterController.push('ConnectingWalletConnect');
+    RouterController.push('WalletConnect');
 
     EventsController.sendEvent({
       type: 'track',

package/src/views/w3m-connect-socials-view/index.tsx

@@ -1,12 +1,12 @@
 import { useSnapshot } from 'valtio';
 import { ScrollView } from 'react-native';
 import { StringUtil, type SocialProvider } from '@reown/appkit-common-react-native';
+import { FlexView, ListSocial, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
 import {
   EventsController,
   OptionsController,
   RouterController
 } from '@reown/appkit-core-react-native';
-import { FlexView, ListSocial, Text, useCustomDimensions } from '@reown/appkit-ui-react-native';
 
 import styles from './styles';
 
@@ -27,7 +27,7 @@ export function ConnectSocialsView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', 'm', '2xl', 'm']}>
+      <FlexView padding={['xs', 'm', '0', 'm']}>
         {socialProviders.map(provider => (
           <ListSocial
             key={provider}

package/src/views/w3m-connect-view/components/all-wallet-list.tsx

@@ -4,37 +4,38 @@ import {
   ApiController,
   AssetController,
   AssetUtil,
+  OptionsController,
   WcController,
   type WcControllerState
 } from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import { ListItemLoader, ListWallet } from '@reown/appkit-ui-react-native';
 import { UiUtil } from '../../../utils/UiUtil';
-import { filterOutRecentWallets } from '../utils';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
-  onWalletPress: (wallet: WcWallet) => void;
+  onWalletPress: (wallet: WcWallet, displayIndex: number, isInstalled?: boolean) => void;
 }
 
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
   const { installed, featured, recommended, prefetchLoading } = useSnapshot(ApiController.state);
+  const { customWallets } = useSnapshot(OptionsController.state);
   const { recentWallets } = useSnapshot(WcController.state) as WcControllerState;
   const { walletImages } = useSnapshot(AssetController.state);
   const imageHeaders = ApiController._getApiHeaders();
-  const RECENT_COUNT = recentWallets?.length && installed.length ? 1 : recentWallets?.length ?? 0;
 
-  const combinedWallets = [...installed, ...featured, ...recommended];
+  const combinedWallets = [
+    ...(recentWallets?.slice(0, 1) ?? []),
+    ...installed,
+    ...featured,
+    ...recommended,
+    ...(customWallets ?? [])
+  ];
 
   // Deduplicate by wallet ID
-  const uniqueWallets = Array.from(
+  const list = Array.from(
     new Map(combinedWallets.map(wallet => [wallet.id, wallet])).values()
-  );
-
-  const list = filterOutRecentWallets(recentWallets, uniqueWallets, RECENT_COUNT).slice(
-    0,
-    UiUtil.TOTAL_VISIBLE_WALLETS - RECENT_COUNT
-  );
+  ).slice(0, UiUtil.TOTAL_VISIBLE_WALLETS);
 
   if (!list?.length) {
     return null;
@@ -46,16 +47,24 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
       <ListItemLoader style={itemStyle} />
     </>
   ) : (
-    list.map(wallet => (
-      <ListWallet
-        key={wallet?.id}
-        imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
-        imageHeaders={imageHeaders}
-        name={wallet?.name ?? 'Unknown'}
-        onPress={() => onWalletPress(wallet)}
-        style={itemStyle}
-        installed={!!installed.find(installedWallet => installedWallet.id === wallet.id)}
-      />
-    ))
+    list.map((wallet, index) => {
+      const isRecent = recentWallets?.some(recentWallet => recentWallet.id === wallet.id);
+      //eslint-disable-next-line valtio/state-snapshot-rule
+      const isInstalled = !!installed.find(installedWallet => installedWallet.id === wallet.id);
+
+      return (
+        <ListWallet
+          key={wallet?.id}
+          imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
+          imageHeaders={imageHeaders}
+          name={wallet?.name ?? 'Unknown'}
+          onPress={() => onWalletPress(wallet, index, isInstalled)}
+          tagLabel={isRecent ? 'Recent' : undefined}
+          tagVariant={isRecent ? 'shade' : undefined}
+          style={itemStyle}
+          installed={isInstalled}
+        />
+      );
+    })
   );
 }

package/src/views/w3m-connect-view/index.tsx

@@ -17,10 +17,8 @@ import {
   useCustomDimensions
 } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../../partials/w3m-placeholder';
-import { CustomWalletList } from './components/custom-wallet-list';
 import { AllWalletsButton } from './components/all-wallets-button';
 import { AllWalletList } from './components/all-wallet-list';
-import { RecentWalletList } from './components/recent-wallet-list';
 import { SocialLoginList } from './components/social-login-list';
 import styles from './styles';
 import { WcHelpersUtil } from '../../utils/HelpersUtil';
@@ -35,12 +33,12 @@ export function ConnectView() {
   const showLoadingError = !showConnectWalletsButton && prefetchError;
   const showList = !showConnectWalletsButton && !showLoadingError;
 
-  const onWalletPress = (wallet: WcWallet, isInstalled?: boolean) => {
+  const onWalletPress = (wallet: WcWallet, displayIndex: number, isInstalled?: boolean) => {
     const isExternal = WcHelpersUtil.isExternalWallet(wallet);
     if (isExternal) {
       RouterController.push('ConnectingExternal', { wallet });
     } else {
-      RouterController.push('ConnectingWalletConnect', { wallet });
+      RouterController.push('WalletConnect', { wallet });
     }
 
     const platform = EventUtil.getWalletPlatform(wallet, isInstalled);
@@ -50,7 +48,10 @@ export function ConnectView() {
       properties: {
         name: wallet.name ?? 'Unknown',
         platform,
-        explorer_id: wallet.id
+        explorerId: wallet.id,
+        walletRank: wallet.order,
+        displayIndex,
+        view: 'Connect'
       }
     });
   };
@@ -62,7 +63,7 @@ export function ConnectView() {
 
   return (
     <ScrollView style={{ paddingHorizontal: padding }} bounces={false}>
-      <FlexView padding={['xs', '0', 's', '0']}>
+      <FlexView padding={['xs', '0', 'xs', '0']}>
         {isSocialEnabled ? (
           <>
             <SocialLoginList options={features?.socials} />
@@ -70,7 +71,7 @@ export function ConnectView() {
           </>
         ) : null}
 
-        <FlexView padding={['0', 's', 'xs', 's']}>
+        <FlexView padding={['0', 's', '0', 's']}>
           {showConnectWalletsButton ? (
             <ListItem contentStyle={styles.connectWalletButton} onPress={onViewAllPress}>
               <Icon name="wallet" size="lg" />
@@ -94,9 +95,7 @@ export function ConnectView() {
           ) : null}
           {showList ? (
             <>
-              <RecentWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
-              <CustomWalletList itemStyle={styles.item} onWalletPress={onWalletPress} />
               <AllWalletsButton itemStyle={styles.item} onPress={onViewAllPress} />
             </>
           ) : null}