Merge pull request #308 from reown-com/chore/event-hook

chore: event subscription hook

Author: ignaciosantise

.changeset/five-pumas-wash.md

@@ -0,0 +1,18 @@
+---
+'@reown/appkit-scaffold-react-native': patch
+'@reown/appkit-ethers5-react-native': patch
+'@reown/appkit-ethers-react-native': patch
+'@reown/appkit-wagmi-react-native': patch
+'@reown/appkit-core-react-native': patch
+'@reown/appkit-auth-ethers-react-native': patch
+'@reown/appkit-auth-wagmi-react-native': patch
+'@reown/appkit-coinbase-ethers-react-native': patch
+'@reown/appkit-coinbase-wagmi-react-native': patch
+'@reown/appkit-common-react-native': patch
+'@reown/appkit-scaffold-utils-react-native': patch
+'@reown/appkit-siwe-react-native': patch
+'@reown/appkit-ui-react-native': patch
+'@reown/appkit-wallet-react-native': patch
+---
+
+chore: added event subscription hook

packages/core/src/controllers/EventsController.ts

@@ -3,7 +3,7 @@ import { ApiController } from './ApiController';
 import { OptionsController } from './OptionsController';
 import { CoreHelperUtil } from '../utils/CoreHelperUtil';
 import { FetchUtil } from '../utils/FetchUtil';
-import type { Event } from '../utils/TypeUtil';
+import type { Event, EventName } from '../utils/TypeUtil';
 
 // -- Helpers ------------------------------------------- //
 const baseUrl = CoreHelperUtil.getAnalyticsUrl();
@@ -33,6 +33,14 @@ export const EventsController = {
     return sub(state, () => callback(state));
   },
 
+  subscribeEvent(event: EventName, callback: (newEvent: EventsControllerState) => void) {
+    return sub(state, () => {
+      if (state.data.event === event) {
+        callback(state);
+      }
+    });
+  },
+
   async _sendAnalyticsEvent(data: EventsControllerState['data'], timestamp: number) {
     if (excluded.includes(data.event)) {
       return;

packages/core/src/utils/TypeUtil.ts

@@ -343,6 +343,51 @@ export type CustomWallet = Pick<
 >;
 
 // -- EventsController Types ----------------------------------------------------
+export type EventName =
+  | 'MODAL_LOADED'
+  | 'MODAL_OPEN'
+  | 'MODAL_CLOSE'
+  | 'CLICK_ALL_WALLETS'
+  | 'CLICK_NETWORKS'
+  | 'SWITCH_NETWORK'
+  | 'SELECT_WALLET'
+  | 'CONNECT_SUCCESS'
+  | 'CONNECT_ERROR'
+  | 'DISCONNECT_SUCCESS'
+  | 'DISCONNECT_ERROR'
+  | 'CLICK_WALLET_HELP'
+  | 'CLICK_NETWORK_HELP'
+  | 'CLICK_GET_WALLET'
+  | 'EMAIL_LOGIN_SELECTED'
+  | 'EMAIL_SUBMITTED'
+  | 'DEVICE_REGISTERED_FOR_EMAIL'
+  | 'EMAIL_VERIFICATION_CODE_SENT'
+  | 'EMAIL_VERIFICATION_CODE_PASS'
+  | 'EMAIL_VERIFICATION_CODE_FAIL'
+  | 'EMAIL_EDIT'
+  | 'EMAIL_EDIT_COMPLETE'
+  | 'EMAIL_UPGRADE_FROM_MODAL'
+  | 'CLICK_SIGN_SIWE_MESSAGE'
+  | 'CLICK_CANCEL_SIWE'
+  | 'SIWE_AUTH_SUCCESS'
+  | 'SIWE_AUTH_ERROR'
+  | 'CLICK_TRANSACTIONS'
+  | 'ERROR_FETCH_TRANSACTIONS'
+  | 'LOAD_MORE_TRANSACTIONS'
+  | 'OPEN_SEND'
+  | 'OPEN_SWAP'
+  | 'INITIATE_SWAP'
+  | 'SWAP_SUCCESS'
+  | 'SWAP_ERROR'
+  | 'SEND_INITIATED'
+  | 'SEND_SUCCESS'
+  | 'SEND_ERROR'
+  | 'SOCIAL_LOGIN_STARTED'
+  | 'SOCIAL_LOGIN_SUCCESS'
+  | 'SOCIAL_LOGIN_REQUEST_USER_DATA'
+  | 'SOCIAL_LOGIN_CANCELED'
+  | 'SOCIAL_LOGIN_ERROR'
+  | 'SET_PREFERRED_ACCOUNT_TYPE';
 
 export type Event =
   | {

packages/ethers/src/index.tsx

@@ -13,6 +13,7 @@ export {
   NetworkButton,
   AppKit
 } from '@reown/appkit-scaffold-react-native';
+import type { EventName, EventsControllerState } from '@reown/appkit-scaffold-react-native';
 
 export { defaultConfig } from './utils/defaultConfig';
 
@@ -129,7 +130,7 @@ export function useAppKitError() {
   };
 }
 
-export function useAppKitEvents() {
+export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
   if (!modal) {
     throw new Error('Please call "createAppKit" before using "useAppKitEvents" hook');
   }
@@ -139,12 +140,30 @@ export function useAppKitEvents() {
   useEffect(() => {
     const unsubscribe = modal?.subscribeEvents(newEvent => {
       setEvents({ ...newEvent });
+      callback?.(newEvent);
     });
 
     return () => {
       unsubscribe?.();
     };
-  }, []);
+  }, [callback]);
 
   return event;
 }
+
+export function useAppKitEventSubscription(
+  event: EventName,
+  callback: (newEvent: EventsControllerState) => void
+) {
+  if (!modal) {
+    throw new Error('Please call "createAppKit" before using "useAppKitEventSubscription" hook');
+  }
+
+  useEffect(() => {
+    const unsubscribe = modal?.subscribeEvent(event, callback);
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback, event]);
+}

packages/ethers5/src/index.tsx

@@ -6,6 +6,7 @@ export {
   NetworkButton,
   AppKit
 } from '@reown/appkit-scaffold-react-native';
+import type { EventName, EventsControllerState } from '@reown/appkit-scaffold-react-native';
 import {
   ConstantsUtil,
   EthersStoreUtil,
@@ -126,7 +127,7 @@ export function useAppKitError() {
   };
 }
 
-export function useAppKitEvents() {
+export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
   if (!modal) {
     throw new Error('Please call "createAppKit" before using "useAppKitEvents" hook');
   }
@@ -136,12 +137,30 @@ export function useAppKitEvents() {
   useEffect(() => {
     const unsubscribe = modal?.subscribeEvents(newEvent => {
       setEvents({ ...newEvent });
+      callback?.(newEvent);
     });
 
     return () => {
       unsubscribe?.();
     };
-  }, []);
+  }, [callback]);
 
   return event;
 }
+
+export function useAppKitEventSubscription(
+  event: EventName,
+  callback: (newEvent: EventsControllerState) => void
+) {
+  if (!modal) {
+    throw new Error('Please call "createAppKit" before using "useAppKitEventSubscription" hook');
+  }
+
+  useEffect(() => {
+    const unsubscribe = modal?.subscribeEvent(event, callback);
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback, event]);
+}

packages/scaffold/src/client.ts

@@ -12,7 +12,8 @@ import type {
   ThemeControllerState,
   Connector,
   ConnectedWalletInfo,
-  Features
+  Features,
+  EventName
 } from '@reown/appkit-core-react-native';
 import { SIWEController, type SIWEControllerClient } from '@reown/appkit-siwe-react-native';
 import {
@@ -145,6 +146,10 @@ export class AppKitScaffold {
     return EventsController.subscribe(callback);
   }
 
+  public subscribeEvent(event: EventName, callback: (newEvent: EventsControllerState) => void) {
+    return EventsController.subscribeEvent(event, callback);
+  }
+
   public resolveReownName = async (name: string) => {
     const wcNameAddress = await EnsController.resolveName(name);
     const networkNameAddresses = wcNameAddress?.addresses

packages/wagmi/src/index.tsx

@@ -6,6 +6,7 @@ export {
   NetworkButton,
   AppKit
 } from '@reown/appkit-scaffold-react-native';
+import type { EventName, EventsControllerState } from '@reown/appkit-scaffold-react-native';
 import { ConstantsUtil } from '@reown/appkit-scaffold-utils-react-native';
 export { defaultWagmiConfig } from './utils/defaultWagmiConfig';
 import { useEffect, useState, useSyncExternalStore } from 'react';
@@ -82,7 +83,7 @@ export function useWalletInfo() {
   return { walletInfo };
 }
 
-export function useAppKitEvents() {
+export function useAppKitEvents(callback?: (newEvent: EventsControllerState) => void) {
   if (!modal) {
     throw new Error('Please call "createAppKit" before using "useAppKitEvents" hook');
   }
@@ -92,12 +93,30 @@ export function useAppKitEvents() {
   useEffect(() => {
     const unsubscribe = modal?.subscribeEvents(newEvent => {
       setEvents({ ...newEvent });
+      callback?.(newEvent);
     });
 
     return () => {
       unsubscribe?.();
     };
-  }, []);
+  }, [callback]);
 
   return event;
 }
+
+export function useAppKitEventSubscription(
+  event: EventName,
+  callback: (newEvent: EventsControllerState) => void
+) {
+  if (!modal) {
+    throw new Error('Please call "createAppKit" before using "useAppKitEventSubscription" hook');
+  }
+
+  useEffect(() => {
+    const unsubscribe = modal?.subscribeEvent(event, callback);
+
+    return () => {
+      unsubscribe?.();
+    };
+  }, [callback, event]);
+}