@reown/appkit-react-native 0.0.0-feat-multichain-20250925192219 → 0.0.0-feat-multichain-20251001210321

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

@@ -7,13 +7,21 @@ import { memo } from 'react';
 
 interface WalletItemProps {
   item: WcWallet;
+  displayIndex: number;
   imageHeaders?: Record<string, string>;
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
 
-export function WalletItem({ item, imageHeaders, onItemPress, style, testID }: WalletItemProps) {
+export function WalletItem({
+  item,
+  displayIndex,
+  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);
@@ -28,7 +36,7 @@ export function WalletItem({ item, imageHeaders, onItemPress, style, testID }: W
       style={style}
       imageHeaders={imageHeaders}
       name={item?.name ?? 'Unknown'}
-      onPress={() => onItemPress(item)}
+      onPress={() => onItemPress(item, displayIndex)}
       installed={!!isInstalled}
       testID={testID}
     />

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

@@ -18,7 +18,7 @@ const ITEM_HEIGHT_WITH_GAP = ITEM_HEIGHT + Spacing['3xs'];
 
 interface Props {
   data: WcWallet[];
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   onEndReached?: () => void;
   onEndReachedThreshold?: number;
   isLoading?: boolean;
@@ -52,7 +52,7 @@ export function WalletList({
       data={displayData}
       style={[styles.list, { height: maxHeight }, style]}
       columnWrapperStyle={styles.columnWrapperStyle}
-      renderItem={({ item }) => {
+      renderItem={({ item, index }) => {
         if (isLoading) {
           return <CardSelectLoader style={styles.itemContainer} />;
         }
@@ -61,6 +61,7 @@ export function WalletList({
           <WalletItem
             item={item}
             imageHeaders={imageHeaders}
+            displayIndex={index}
             onItemPress={onItemPress}
             style={styles.itemContainer}
             testID={testIDKey ? `${testIDKey}-${item?.id}` : undefined}

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

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react';
 import { useSnapshot } from 'valtio';
 import {
   ApiController,
+  LogController,
   OptionsController,
   SnackController,
   type OptionsControllerState
@@ -14,7 +15,7 @@ import { Loading } from './components/Loading';
 import { WalletList } from './components/WalletList';
 
 interface AllWalletsListProps {
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   headerHeight?: number;
 }
 
@@ -61,6 +62,7 @@ export function AllWalletsList({ onItemPress }: AllWalletsListProps) {
       await ApiController.fetchWallets({ page: 1 });
       setLoading(false);
     } catch (error) {
+      LogController.sendError(error, 'AllWalletsList.tsx', 'initialFetch');
       SnackController.showError('Failed to load wallets');
       setLoading(false);
       setLoadingError(true);

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

@@ -1,6 +1,11 @@
 import { useSnapshot } from 'valtio';
 import { useCallback, useEffect, useState } from 'react';
-import { ApiController, OptionsController, SnackController } from '@reown/appkit-core-react-native';
+import {
+  ApiController,
+  LogController,
+  OptionsController,
+  SnackController
+} from '@reown/appkit-core-react-native';
 import { type WcWallet } from '@reown/appkit-common-react-native';
 import { useCustomDimensions } from '@reown/appkit-ui-react-native';
 import { Placeholder } from '../w3m-placeholder';
@@ -10,7 +15,7 @@ import { Loading } from '../w3m-all-wallets-list/components/Loading';
 import { WalletList } from '../w3m-all-wallets-list/components/WalletList';
 
 export interface AllWalletsSearchProps {
-  onItemPress: (wallet: WcWallet) => void;
+  onItemPress: (wallet: WcWallet, displayIndex: number) => void;
   searchQuery?: string;
 }
 
@@ -36,6 +41,7 @@ export function AllWalletsSearch({ searchQuery, onItemPress }: AllWalletsSearchP
       await ApiController.searchWallet({ search: searchQuery });
       setLoading(false);
     } catch (error) {
+      LogController.sendError(error, 'AllWalletsSearch.tsx', 'searchFetch');
       SnackController.showError('Failed to load wallets');
       setLoading(false);
       setLoadingError(true);

package/src/partials/w3m-connecting-mobile/index.tsx

@@ -10,7 +10,9 @@ import {
   OptionsController,
   EventsController,
   ConstantsUtil,
-  AssetController
+  AssetController,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -60,6 +62,21 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
   const onStorePress = () => {
     if (storeUrl) {
       CoreHelperUtil.openLink(storeUrl);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: data?.wallet?.id,
+          walletRank: data?.wallet?.order
+        }
+      });
     }
   };
 
@@ -74,17 +91,22 @@ export function ConnectingMobile({ onRetry, onCopyUri, isInstalled }: Props) {
         await CoreHelperUtil.openLink(redirect);
         await WcController.state.wcPromise;
         WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             method: 'mobile',
             name: data?.wallet?.name ?? 'Unknown',
-            explorer_id: data?.wallet?.id
+            explorerId: data?.wallet?.id,
+            caipNetworkId
           }
         });
       }
     } catch (error: any) {
+      LogController.sendError(error, 'ConnectingMobile.tsx', 'onConnect');
       if (error.message.includes(ConstantsUtil.LINKING_ERROR)) {
         setErrorType('not_installed');
       } else {

package/src/partials/w3m-connecting-qrcode/index.tsx

@@ -4,7 +4,9 @@ import {
   WcController,
   EventsController,
   OptionsController,
-  SnackController
+  SnackController,
+  ConnectionsController,
+  CoreHelperUtil
 } from '@reown/appkit-core-react-native';
 import {
   FlexView,
@@ -35,13 +37,17 @@ export function ConnectingQrCode() {
 
   const onConnect = async () => {
     await WcController.state.wcPromise;
+    const address = ConnectionsController.state.activeAddress;
+    const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
 
     EventsController.sendEvent({
       type: 'track',
       event: 'CONNECT_SUCCESS',
+      address: CoreHelperUtil.getPlainAddress(address),
       properties: {
         method: 'qrcode',
-        name: 'WalletConnect'
+        name: 'WalletConnect',
+        caipNetworkId
       }
     });
   };

package/src/partials/w3m-connecting-web/index.tsx

@@ -9,7 +9,9 @@ import {
   CoreHelperUtil,
   OptionsController,
   EventsController,
-  AssetController
+  AssetController,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -50,18 +52,24 @@ export function ConnectingWeb({ onCopyUri }: ConnectingWebProps) {
         await Linking.openURL(redirect);
         await WcController.state.wcPromise;
         WcController.setConnectedWallet(wcLinking, data?.wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
 
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             method: 'web',
             name: data?.wallet?.name ?? 'Unknown',
-            explorer_id: data?.wallet?.id
+            explorerId: data?.wallet?.id,
+            caipNetworkId
           }
         });
       }
-    } catch {}
+    } catch (error) {
+      LogController.sendError(error, 'ConnectingWeb.tsx', 'onConnect');
+    }
   }, [data?.wallet, wcUri]);
 
   return (

package/src/types.ts

@@ -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

package/src/utils/SIWXUtil.ts

@@ -13,9 +13,9 @@ import {
   SnackController,
   CoreHelperUtil,
   ConnectionsController,
-  EventsController
+  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.
@@ -74,8 +74,7 @@ export const SIWXUtil = {
         ModalController.open({ view: 'SIWXSignMessage' });
       }
     } catch (error: unknown) {
-      // eslint-disable-next-line no-console
-      console.error('SIWXUtil:initializeIfEnabled error', error);
+      LogController.sendError(error, 'SIWXUtil.ts', 'initializeIfEnabled');
 
       EventsController.sendEvent({
         type: 'track',
@@ -153,10 +152,7 @@ export const SIWXUtil = {
           view: 'SIWXSignMessage'
         });
       }
-
-      // @ts-ignore
-      Alert.alert('Error signing message', error?.message ?? error);
-
+      SnackController.hide();
       SnackController.showError('Error signing message');
       EventsController.sendEvent({
         type: 'track',
@@ -293,8 +289,6 @@ export const SIWXUtil = {
       universalLink
     );
 
-    SnackController.showLoading('Authenticating...', true);
-
     if (result?.auths?.length) {
       const sessions = result.auths.map<SIWXSession>(cacao => {
         const message = universalProvider.client.formatAuthMessage({
@@ -320,6 +314,7 @@ export const SIWXUtil = {
       });
 
       try {
+        SnackController.showLoading('Authenticating...', true);
         await siwx.setSessions(sessions);
 
         EventsController.sendEvent({
@@ -349,7 +344,7 @@ export const SIWXUtil = {
   },
   getSIWXEventProperties(error?: unknown) {
     return {
-      network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+      network: ConnectionsController.state.activeNetwork?.caipNetworkId,
       isSmartAccount: ConnectionsController.state.accountType === 'smartAccount',
       message: error ? CoreHelperUtil.parseError(error) : undefined
     };

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({

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

@@ -22,7 +22,7 @@ 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 });
@@ -33,7 +33,14 @@ export function AllWalletsView() {
     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'
+      }
     });
   };
 

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

@@ -14,7 +14,7 @@ import { UiUtil } from '../../../utils/UiUtil';
 
 interface Props {
   itemStyle: StyleProp<ViewStyle>;
-  onWalletPress: (wallet: WcWallet) => void;
+  onWalletPress: (wallet: WcWallet, displayIndex: number, isInstalled?: boolean) => void;
 }
 
 export function AllWalletList({ itemStyle, onWalletPress }: Props) {
@@ -47,8 +47,10 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
       <ListItemLoader style={itemStyle} />
     </>
   ) : (
-    list.map(wallet => {
+    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
@@ -56,11 +58,11 @@ export function AllWalletList({ itemStyle, onWalletPress }: Props) {
           imageSrc={AssetUtil.getWalletImage(wallet, walletImages)}
           imageHeaders={imageHeaders}
           name={wallet?.name ?? 'Unknown'}
-          onPress={() => onWalletPress(wallet)}
+          onPress={() => onWalletPress(wallet, index, isInstalled)}
           tagLabel={isRecent ? 'Recent' : undefined}
           tagVariant={isRecent ? 'shade' : undefined}
           style={itemStyle}
-          installed={!!installed.find(installedWallet => installedWallet.id === wallet.id)}
+          installed={isInstalled}
         />
       );
     })

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

@@ -33,7 +33,7 @@ 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 });
@@ -48,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'
       }
     });
   };

package/src/views/w3m-connecting-external-view/index.tsx

@@ -8,7 +8,9 @@ import {
   WcController,
   AssetUtil,
   AssetController,
-  CoreHelperUtil
+  CoreHelperUtil,
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -41,6 +43,21 @@ export function ConnectingExternalView() {
   const onStorePress = () => {
     if (storeUrl) {
       CoreHelperUtil.openLink(storeUrl);
+      EventsController.sendEvent({
+        type: 'track',
+        event: 'GET_WALLET',
+        properties: {
+          name: RouterController.state.data?.wallet?.name ?? 'Unknown',
+          link: storeUrl,
+          linkType: Platform.select({
+            ios: 'appstore',
+            android: 'playstore',
+            default: undefined
+          }),
+          explorerId: RouterController.state.data?.wallet?.id,
+          walletRank: RouterController.state.data?.wallet?.order
+        }
+      });
     }
   };
 
@@ -61,17 +78,22 @@ export function ConnectingExternalView() {
         }
         WcController.addRecentWallet(wallet);
         WcController.setPressedWallet(wallet);
+        const address = ConnectionsController.state.activeAddress;
+        const caipNetworkId = ConnectionsController.state.activeNetwork?.caipNetworkId;
         EventsController.sendEvent({
           type: 'track',
           event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
           properties: {
             name: wallet?.name ?? 'Unknown',
             method: 'mobile',
-            explorer_id: wallet?.id
+            caipNetworkId,
+            explorerId: wallet?.id
           }
         });
       }
     } catch (error) {
+      LogController.sendError(error, 'ConnectingExternalView.tsx', 'onConnect');
       if (/(Wallet not found)/i.test((error as Error).message)) {
         setErrorType('not_installed');
       } else if (/(rejected)/i.test((error as Error).message)) {

package/src/views/w3m-connecting-social-view/index.tsx

@@ -5,7 +5,8 @@ import {
   CoreHelperUtil,
   EventsController,
   RouterController,
-  SnackController
+  SnackController,
+  LogController
 } from '@reown/appkit-core-react-native';
 import {
   FlexView,
@@ -48,6 +49,7 @@ export function ConnectingSocialView() {
         });
       }
     } catch (e) {
+      LogController.sendError(e, 'ConnectingSocialView.tsx', 'onConnect');
       EventsController.sendEvent({
         type: 'track',
         event: 'SOCIAL_LOGIN_ERROR',

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

@@ -9,7 +9,8 @@ import {
   SnackController,
   OptionsController,
   ApiController,
-  EventsController
+  EventsController,
+  LogController
 } from '@reown/appkit-core-react-native';
 import { useInternalAppKit } from '../../AppKitContext';
 import { ConnectingQrCode } from '../../partials/w3m-connecting-qrcode';
@@ -51,6 +52,7 @@ export function ConnectingView() {
         WcController.setWcPromise(connectPromise);
       }
     } catch (error) {
+      LogController.sendError(error, 'ConnectingView.tsx', 'initializeConnection');
       WcController.setWcError(true);
       WcController.clearUri();
       SnackController.showError('Declined');

package/src/views/w3m-network-switch-view/index.tsx

@@ -4,6 +4,7 @@ import {
   ApiController,
   AssetController,
   AssetUtil,
+  LogController,
   RouterController
 } from '@reown/appkit-core-react-native';
 import {
@@ -35,6 +36,7 @@ export function NetworkSwitchView() {
       await switchNetwork(RouterController.state.data.network);
       back();
     } catch (error) {
+      LogController.sendError(error, 'NetworkSwitchView.tsx', 'onSwitchNetwork');
       setIsError(true);
       setShowRetry(true);
     }

package/src/views/w3m-siwx-sign-view/index.tsx

@@ -11,6 +11,7 @@ import {
 } from '@reown/appkit-ui-react-native';
 import {
   ConnectionsController,
+  LogController,
   OptionsController,
   RouterController,
   SnackController
@@ -37,6 +38,7 @@ export function SIWXSignMessageView() {
     try {
       await SIWXUtil.requestSignMessage();
     } catch (error) {
+      LogController.sendError(error, 'SIWXSignMessageView.tsx', 'onSign');
       SnackController.showError('Signature declined');
     } finally {
       setIsSigning(false);

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

@@ -93,7 +93,7 @@ export function SwapView() {
       type: 'track',
       event: 'INITIATE_SWAP',
       properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId,
         swapFromToken: SwapController.state.sourceToken?.symbol || '',
         swapToToken: SwapController.state.toToken?.symbol || '',
         swapFromAmount: SwapController.state.sourceTokenAmount || '',

package/src/views/w3m-what-is-a-wallet-view/index.tsx

@@ -8,7 +8,7 @@ export function WhatIsAWalletView() {
 
   const onGetWalletPress = () => {
     RouterController.push('GetWallet');
-    EventsController.sendEvent({ type: 'track', event: 'CLICK_GET_WALLET' });
+    EventsController.sendEvent({ type: 'track', event: 'CLICK_GET_WALLET_HELP' });
   };
 
   return (