feat: event improvements

packages/appkit/src/AppKit.ts

@@ -180,7 +180,7 @@ export class AppKit {
    * @param namespace - The namespace to disconnect from.
    * @param isInternal - Whether the disconnect is internal (i.e. from the AppKit) or external (i.e. from wallet side).
    */
-  async disconnect(namespace?: string, isInternal?: boolean): Promise<void> {
+  async disconnect(namespace?: ChainNamespace, isInternal?: boolean): Promise<void> {
     try {
       const activeNamespace = namespace ?? ConnectionsController.state.activeNamespace;
 
@@ -220,7 +220,10 @@ export class AppKit {
 
       EventsController.sendEvent({
         type: 'track',
-        event: 'DISCONNECT_SUCCESS'
+        event: 'DISCONNECT_SUCCESS',
+        properties: {
+          namespace: activeNamespace
+        }
       });
     } catch (error) {
       LogController.sendError(error, 'AppKit.ts', 'disconnect');
@@ -270,7 +273,7 @@ export class AppKit {
       type: 'track',
       event: 'SWITCH_NETWORK',
       properties: {
-        network: network.id
+        network: network.caipNetworkId
       }
     });
 
@@ -385,6 +388,10 @@ export class AppKit {
    */
   private async initConnectors() {
     ModalController.setLoading(true);
+
+    //Always init the walletconnect connector
+    await this.createWalletConnectConnector();
+
     const connectedConnectors = await StorageUtil.getConnectedConnectors();
     if (connectedConnectors.length > 0) {
       for (const connected of connectedConnectors) {
@@ -401,10 +408,22 @@ export class AppKit {
           await StorageUtil.removeConnectedConnectors(connected.type);
         }
       }
+
+      const address = ConnectionsController.state.activeAddress;
+      const walletInfo = ConnectionsController.state.walletInfo;
+      if (address) {
+        EventsController.sendEvent({
+          type: 'track',
+          event: 'CONNECT_SUCCESS',
+          address: CoreHelperUtil.getPlainAddress(address),
+          properties: {
+            name: walletInfo?.name ?? 'Unknown',
+            reconnect: true
+          }
+        });
+      }
     }
 
-    //Always init the walletconnect connector
-    await this.createWalletConnectConnector();
     ModalController.setLoading(false);
   }
 
@@ -644,6 +663,7 @@ export class AppKit {
 
   private async initControllers(options: AppKitConfig) {
     await this.initStorageAndValues(options);
+    let defaultNetwork;
 
     OptionsController.setProjectId(options.projectId);
     OptionsController.setMetadata(options.metadata);
@@ -667,8 +687,8 @@ export class AppKit {
     OptionsController.setRequestedNetworks(this.networks);
 
     if (options.defaultNetwork) {
-      const network = NetworkUtil.formatNetwork(options.defaultNetwork, this.projectId);
-      OptionsController.setDefaultNetwork(network);
+      defaultNetwork = NetworkUtil.formatNetwork(options.defaultNetwork, this.projectId);
+      OptionsController.setDefaultNetwork(defaultNetwork);
     }
 
     ThemeController.setDefaultThemeMode(options.themeMode);
@@ -694,6 +714,24 @@ export class AppKit {
     ) {
       OptionsController.setIsOnRampEnabled(true);
     }
+
+    EventsController.sendEvent({
+      type: 'track',
+      event: 'INITIALIZE',
+      properties: {
+        showWallets: options.features?.showWallets,
+        themeMode: options.themeMode,
+        themeVariables: options.themeVariables,
+        networks: this.networks.map(network => network.caipNetworkId).filter(Boolean),
+        defaultNetwork: defaultNetwork?.caipNetworkId,
+        metadata: options.metadata,
+        enableAnalytics: options.enableAnalytics,
+        features: options.features,
+        adapters: this.adapters.map(adapter => adapter?.constructor?.name).filter(Boolean),
+        extraConnectors: this.extraConnectors.map(connector => connector?.type).filter(Boolean),
+        siwx: !!options.siwx
+      }
+    });
   }
 
   private async initActiveNamespace() {

packages/appkit/src/hooks/useAppKit.ts

@@ -1,12 +1,13 @@
 import { useContext, useMemo } from 'react';
+import type { ChainNamespace } from '@reown/appkit-common-react-native';
 
 import type { AppKit } from '../AppKit';
 import { AppKitContext } from '../AppKitContext';
 
 interface UseAppKitReturn {
   open: AppKit['open'];
   close: AppKit['close'];
-  disconnect: (namespace?: string) => void;
+  disconnect: (namespace?: ChainNamespace) => void;
   switchNetwork: AppKit['switchNetwork'];
 }
 
@@ -30,7 +31,7 @@ export const useAppKit = (): UseAppKitReturn => {
     return {
       open: context.appKit.open.bind(context.appKit),
       close: context.appKit.close.bind(context.appKit),
-      disconnect: (namespace?: string) =>
+      disconnect: (namespace?: ChainNamespace) =>
         context.appKit!.disconnect.bind(context.appKit!)(namespace),
       switchNetwork: context.appKit.switchNetwork.bind(context.appKit)
     };

packages/appkit/src/partials/w3m-account-wallet-features/index.tsx

@@ -21,7 +21,7 @@ export function AccountWalletFeatures() {
   const { features, isOnRampEnabled } = useSnapshot(OptionsController.state);
   const { activeNetwork, balances, activeNamespace } = useSnapshot(ConnectionsController.state);
   const balance = CoreHelperUtil.calculateAndFormatBalance(balances as BalanceType[]);
-  const network = ConnectionsController.state.activeNetwork?.caipNetworkId || '';
+  const network = ConnectionsController.state.activeNetwork?.caipNetworkId;
   const isSmartAccount = ConnectionsController.state.accountType === 'smartAccount';
   const showSend =
     activeNamespace && ConstantsUtil.SEND_SUPPORTED_NAMESPACES.includes(activeNamespace);

packages/appkit/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}
     />

packages/appkit/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}

packages/appkit/src/partials/w3m-all-wallets-list/index.tsx

@@ -15,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;
 }
 

packages/appkit/src/partials/w3m-all-wallets-search/index.tsx

@@ -15,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;
 }
 

packages/appkit/src/partials/w3m-connecting-mobile/index.tsx

@@ -11,7 +11,8 @@ import {
   EventsController,
   ConstantsUtil,
   AssetController,
-  LogController
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -61,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
+        }
+      });
     }
   };
 
@@ -75,13 +91,17 @@ 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
           }
         });
       }

packages/appkit/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
       }
     });
   };

packages/appkit/src/partials/w3m-connecting-web/index.tsx

@@ -10,7 +10,8 @@ import {
   OptionsController,
   EventsController,
   AssetController,
-  LogController
+  LogController,
+  ConnectionsController
 } from '@reown/appkit-core-react-native';
 import {
   Button,
@@ -51,14 +52,18 @@ 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
           }
         });
       }

packages/appkit/src/utils/SIWXUtil.ts

@@ -349,7 +349,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
     };

packages/appkit/src/views/w3m-account-default-view/index.tsx

@@ -122,7 +122,7 @@ export function AccountDefaultView() {
       type: 'track',
       event: 'OPEN_SWAP',
       properties: {
-        network: ConnectionsController.state.activeNetwork?.caipNetworkId || '',
+        network: ConnectionsController.state.activeNetwork?.caipNetworkId,
         isSmartAccount: false
       }
     });
@@ -158,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({

packages/appkit/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'
+      }
     });
   };