agora-appbuilder-core 2.3.0-beta.8 → 3.0.0

package/template/src/subComponents/livestream/CurrentLiveStreamRequestsView.tsx

@@ -7,8 +7,8 @@ import LiveStreamContext, {RaiseHandValue} from '../../components/livestream';
 import {filterObject} from '../../utils/index';
 import ParticipantSectionTitle from '../../components/participants/ParticipantSectionTitle';
 import {useString} from '../../utils/useString';
-import useUserList from '../../utils/useUserList';
 import {ClientRole} from '../../../agora-rn-uikit';
+import {useRender} from 'customization-api';
 
 const CurrentLiveStreamRequestsView = (props: any) => {
   //commented for v1 release
@@ -23,7 +23,7 @@ const CurrentLiveStreamRequestsView = (props: any) => {
   const noUserFoundLabel = 'User not found';
   const raisedHandsListTitleLabel = 'Streaming Request';
   const {p_style} = props;
-  const {renderList} = useUserList();
+  const {renderList} = useRender();
   const {raiseHandList, setLastCheckedRequestTimestamp} =
     useContext(LiveStreamContext);
   const [activeLiveStreamRequests, setActiveLiveStreamRequests] =

package/template/src/subComponents/livestream/controls/RemoteLiveStreamApprovedRequestRecall.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import {BtnTemplate, UidType} from '../../../../agora-rn-uikit';
 import {LiveStreamControlMessageEnum} from '../../../components/livestream';
 import icons from '../../../assets/icons';
-import CustomEvents from '../../../custom-events';
+import events, {EventPersistLevel} from '../../../rtm-events-api';
 
 export interface RemoteLiveStreamApprovedRequestRecallProps {
   uid: UidType;
@@ -14,9 +14,10 @@ const RemoteLiveStreamApprovedRequestRecall = (
     <BtnTemplate
       style={{width: 24, height: 22}}
       onPress={() => {
-        CustomEvents.send(
+        events.send(
           LiveStreamControlMessageEnum.raiseHandRequestRejected,
-          {},
+          '',
+          EventPersistLevel.LEVEL1,
           props.uid,
         );
       }}

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestApprove.tsx

@@ -4,12 +4,12 @@ import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
 import icons from '../../../assets/icons';
 
-export interface RemoteLiveStreamControlInterface {
+export interface RemoteLiveStreamControlProps {
   uid: UidType;
 }
 
 const RemoteLiveStreamRequestApprove = (
-  props: RemoteLiveStreamControlInterface,
+  props: RemoteLiveStreamControlProps,
 ) => {
   const {uid} = props;
   const {hostApprovesRequestOfUID} = useContext(LiveStreamContext);

package/template/src/subComponents/livestream/controls/RemoteLiveStreamRequestReject.tsx

@@ -4,13 +4,11 @@ import {BtnTemplate, PropsContext, UidType} from '../../../../agora-rn-uikit';
 import LiveStreamContext from '../../../components/livestream';
 import icons from '../../../assets/icons';
 
-interface RemoteLiveStreamControlInterface {
+interface RemoteLiveStreamControlProps {
   uid: UidType;
 }
 
-const RemoteLiveStreamRequestReject = (
-  props: RemoteLiveStreamControlInterface,
-) => {
+const RemoteLiveStreamRequestReject = (props: RemoteLiveStreamControlProps) => {
   const {uid} = props;
   const {hostRejectsRequestOfUID} = useContext(LiveStreamContext);
   const {styleProps} = useContext(PropsContext);

package/template/src/subComponents/livestream/index.ts

@@ -3,7 +3,7 @@ import RemoteLiveStreamApprovedRequestRecall, {
   RemoteLiveStreamApprovedRequestRecallProps,
 } from './controls/RemoteLiveStreamApprovedRequestRecall';
 import RemoteLiveStreamRequestApprove, {
-  RemoteLiveStreamControlInterface,
+  RemoteLiveStreamControlProps,
 } from './controls/RemoteLiveStreamRequestApprove';
 import RemoteLiveStreamRequestReject from './controls/RemoteLiveStreamRequestReject';
 // Local controls
@@ -14,7 +14,7 @@ import ApprovedLiveStreamControlsView from './ApprovedLiveStreamControlsView';
 
 export type {
   RemoteLiveStreamApprovedRequestRecallProps,
-  RemoteLiveStreamControlInterface,
+  RemoteLiveStreamControlProps,
 };
 export {
   RemoteLiveStreamApprovedRequestRecall,

package/template/src/subComponents/recording/useRecording.tsx

@@ -20,10 +20,10 @@ import {gql, useMutation} from '@apollo/client';
 import {useParams} from '../../components/Router';
 import {PropsContext} from '../../../agora-rn-uikit';
 import Toast from '../../../react-native-toast-message';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 import {useString} from '../../utils/useString';
 import ChatContext from '../../components/ChatContext';
-import CustomEvents, {EventLevel} from '../../custom-events';
+import events, {EventPersistLevel} from '../../rtm-events-api';
 import {EventActions, EventNames} from '../../rtm-events';
 import useRecordingLayoutQuery from './useRecordingLayoutQuery';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
@@ -31,14 +31,12 @@ import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 export interface RecordingContextInterface {
   startRecording: () => void;
   stopRecording: () => void;
-  setRecordingActive: React.Dispatch<SetStateAction<boolean>>;
   isRecordingActive: boolean;
 }
 
 const RecordingContext = createContext<RecordingContextInterface>({
   startRecording: () => {},
   stopRecording: () => {},
-  setRecordingActive: () => {},
   isRecordingActive: false,
 });
 
@@ -69,7 +67,10 @@ function usePrevious<T = any>(value: any) {
 
 interface RecordingProviderProps {
   children: React.ReactNode;
-  value: Omit<RecordingContextInterface, 'startRecording' | 'stopRecording'>;
+  value: {
+    setRecordingActive: React.Dispatch<SetStateAction<boolean>>;
+    isRecordingActive: boolean;
+  };
 }
 
 /**
@@ -91,13 +92,17 @@ const RecordingProvider = (props: RecordingProviderProps) => {
   //const recordingStartedText = useString<boolean>('recordingNotificationLabel');
   const recordingStartedText = (active: boolean) =>
     active ? 'Recording Started' : 'Recording Stopped';
-  const {executePresenterQuery} = useRecordingLayoutQuery();
+  const {executePresenterQuery, executeNormalQuery} = useRecordingLayoutQuery();
   const {localUid} = useContext(ChatContext);
   const {screenShareData} = useScreenContext();
 
   React.useEffect(() => {
-    CustomEvents.on(EventNames.RECORDING_ATTRIBUTE, (data) => {
-      switch (data?.payload?.action) {
+    events.on(EventNames.RECORDING_ATTRIBUTE, (data) => {
+      const payload = JSON.parse(data.payload);
+      const action = payload.action;
+      const value = payload.value;
+
+      switch (action) {
         case EventActions.RECORDING_STARTED:
           setRecordingActive(true);
           break;
@@ -109,7 +114,7 @@ const RecordingProvider = (props: RecordingProviderProps) => {
       }
     });
     () => {
-      CustomEvents.off(EventNames.RECORDING_ATTRIBUTE);
+      events.off(EventNames.RECORDING_ATTRIBUTE);
     };
   }, []);
 
@@ -148,17 +153,31 @@ const RecordingProvider = (props: RecordingProviderProps) => {
            * 1. Once the backend sucessfuly starts recording, send message
            * in the channel indicating that cloud recording is now active.
            */
-          CustomEvents.send(EventNames.RECORDING_ATTRIBUTE, {
-            action: EventActions.RECORDING_STARTED,
-            value: `${localUid}`,
-            level: EventLevel.LEVEL3,
-          });
+          events.send(
+            EventNames.RECORDING_ATTRIBUTE,
+            JSON.stringify({
+              action: EventActions.RECORDING_STARTED,
+              value: `${localUid}`,
+            }),
+            EventPersistLevel.LEVEL3,
+          );
           // 2. set the local recording state to true to update the UI
           setRecordingActive(true);
           // 3. set the presenter mode if screen share is active
-          if (Object.values(screenShareData).some((item) => item.isActive)) {
-            console.log('Executing presenter query');
-            executePresenterQuery();
+          // 3.a Get the most recent screenshare uid
+          const sorted = Object.entries(screenShareData)
+            .filter((el) => el[1]?.ts && el[1].ts > 0 && el[1]?.isActive)
+            .sort((a, b) => b[1].ts - a[1].ts);
+
+          const activeScreenshareUid = sorted.length > 0 ? sorted[0][0] : 0;
+          if (activeScreenshareUid) {
+            console.log(
+              'screenshare: Executing presenter query for screenuid',
+              activeScreenshareUid,
+            );
+            executePresenterQuery(parseInt(activeScreenshareUid));
+          } else {
+            executeNormalQuery();
           }
         }
       })
@@ -177,11 +196,14 @@ const RecordingProvider = (props: RecordingProviderProps) => {
            * 1. Once the backend sucessfuly starts recording, send message
            * in the channel indicating that cloud recording is now inactive.
            */
-          CustomEvents.send(EventNames.RECORDING_ATTRIBUTE, {
-            action: EventActions.RECORDING_STOPPED,
-            value: '',
-            level: EventLevel.LEVEL3,
-          });
+          events.send(
+            EventNames.RECORDING_ATTRIBUTE,
+            JSON.stringify({
+              action: EventActions.RECORDING_STOPPED,
+              value: '',
+            }),
+            EventPersistLevel.LEVEL3,
+          );
           // 2. set the local recording state to false to update the UI
           setRecordingActive(false);
         }
@@ -197,7 +219,6 @@ const RecordingProvider = (props: RecordingProviderProps) => {
         startRecording,
         stopRecording,
         isRecordingActive,
-        setRecordingActive,
       }}>
       {props.children}
     </RecordingContext.Provider>

package/template/src/subComponents/recording/useRecordingLayoutQuery.tsx

@@ -1,8 +1,8 @@
-import React, {useContext} from 'react';
+import React from 'react';
 import {useParams} from '../../components/Router';
 
 import {gql, useMutation} from '@apollo/client';
-import {PropsContext} from '../../../agora-rn-uikit';
+import {UidType} from '../../../agora-rn-uikit';
 
 const SET_PRESENTER = gql`
   mutation setPresenter($uid: Int!, $passphrase: String!) {
@@ -19,10 +19,16 @@ const SET_NORMAL = gql`
 function useRecordingLayoutQuery() {
   const [setPresenterQuery] = useMutation(SET_PRESENTER);
   const [setNormalQuery] = useMutation(SET_NORMAL);
-  const {screenShareUid} = useContext(PropsContext).rtcProps;
   const {phrase} = useParams<any>();
-
-  const executePresenterQuery = () => {
+  /**
+   * @param screenShareUid
+   * Default : Grid
+   * Below query changes the layout to vertical and passed UID is maxed view
+   * This should be called only when screenshare is actively going on
+   * and we want that as the main view
+   * https://docs.agora.io/en/cloud-recording/cloud_recording_layout?platform=RESTful
+   */
+  const executePresenterQuery = (screenShareUid: UidType) => {
     setPresenterQuery({
       variables: {
         uid: screenShareUid,

package/template/src/subComponents/screenshare/ScreenshareConfigure.native.tsx

@@ -9,38 +9,28 @@
  information visit https://appbuilder.agora.io. 
 *********************************************
 */
-import React, {useEffect, useContext, useRef} from 'react';
+import React, {useEffect, useRef} from 'react';
 import KeepAwake from 'react-native-keep-awake';
-import {RtcContext, UidType} from '../../../agora-rn-uikit';
+import {UidType} from '../../../agora-rn-uikit';
 import {
   useChangeDefaultLayout,
   useSetPinnedLayout,
 } from '../../pages/video-call/DefaultLayouts';
-import useUserList from '../../utils/useUserList';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
 import {useString} from '../../utils/useString';
-import CustomEvents from '../../custom-events';
-import {EventNames} from '../../rtm-events';
-
-function usePrevious(value: any) {
-  const ref = useRef();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+import events from '../../rtm-events-api';
+import {EventNames, EventActions} from '../../rtm-events';
+import {useRender, useRtc} from 'customization-api';
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
-  const rtc = useContext(RtcContext);
-  const {dispatch} = rtc;
-  const {renderList, renderPosition} = useUserList();
+  const {dispatch} = useRtc();
+  const {renderList, activeUids} = useRender();
   const {setScreenShareData, screenShareData} = useScreenContext();
   // commented for v1 release
   // const getScreenShareName = useString('screenshareUserName');
   // const userText = useString('remoteUserDefaultLabel')();
   const getScreenShareName = (name: string) => `${name}'s screenshare`;
   const userText = 'User';
-  const prevRenderPosition = usePrevious({renderPosition});
   const setPinnedLayout = useSetPinnedLayout();
   const changeLayout = useChangeDefaultLayout();
 
@@ -58,30 +48,52 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         value: [screenShareUid],
       });
       setPinnedLayout();
-    }
-    //screenshare is stopped set the layout Grid View
-    else {
+    } else {
+      //screenshare is stopped set the layout Grid View
       changeLayout();
     }
   };
 
   useEffect(() => {
-    CustomEvents.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
+    events.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
+      const payload = JSON.parse(data.payload);
+      const action = payload.action;
+      const value = payload.value;
+
       const screenUidOfUser =
         renderListRef.current.renderList[data.sender].screenUid;
-      setScreenShareData((prevState) => {
-        return {
-          ...prevState,
-          [screenUidOfUser]: {
-            name: renderListRef.current.renderList[screenUidOfUser]?.name,
-            isActive: data.payload.value === 'true' ? true : false,
-          },
-        };
-      });
-      //if remote user started/stopped the screenshare then change the layout to pinned/grid
-      data.payload.value === 'true'
-        ? triggerChangeLayout(true, screenUidOfUser)
-        : triggerChangeLayout(false);
+      switch (action) {
+        case EventActions.SCREENSHARE_STARTED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: true,
+                ts: value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(true, screenUidOfUser);
+          break;
+        case EventActions.SCREENSHARE_STOPPED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: false,
+                ts: value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(false);
+          break;
+        default:
+          break;
+      }
     });
   }, []);
 

package/template/src/subComponents/screenshare/ScreenshareConfigure.tsx

@@ -1,5 +1,16 @@
+/*
+********************************************
+ Copyright © 2022 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the “Materials”) are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.’s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
 import React, {useContext, useEffect, useRef, useState} from 'react';
-import {RtcContext, PropsContext, UidType} from '../../../agora-rn-uikit';
+import {PropsContext, UidType} from '../../../agora-rn-uikit';
 import {ScreenshareContext} from './useScreenshare';
 import {
   useChangeDefaultLayout,
@@ -7,28 +18,21 @@ import {
 } from '../../pages/video-call/DefaultLayouts';
 import {useRecording} from '../recording/useRecording';
 import {useScreenContext} from '../../components/contexts/ScreenShareContext';
-import useUserList from '../../utils/useUserList';
-import CustomEvents, {EventLevel} from '../../custom-events';
-import {EventNames} from '../../rtm-events';
+import events, {EventPersistLevel} from '../../rtm-events-api';
+import {EventActions, EventNames} from '../../rtm-events';
 import {IAgoraRTC} from 'agora-rtc-sdk-ng';
 import useRecordingLayoutQuery from '../recording/useRecordingLayoutQuery';
 import {useString} from '../../utils/useString';
-
-function usePrevious<T = any>(value: any) {
-  const ref = useRef<T>();
-  useEffect(() => {
-    ref.current = value;
-  });
-  return ref.current;
-}
+import {timeNow} from '../../rtm/utils';
+import {useRender, useRtc} from 'customization-api';
 
 export const ScreenshareContextConsumer = ScreenshareContext.Consumer;
 
 export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   const [isScreenshareActive, setScreenshareActive] = useState(false);
-  const rtc = useContext(RtcContext);
+  const rtc = useRtc();
   const {dispatch} = rtc;
-  const {renderList, renderPosition} = useUserList();
+  const {renderList, activeUids} = useRender();
   const {isRecordingActive} = useRecording();
   const {executeNormalQuery, executePresenterQuery} = useRecordingLayoutQuery();
   const {setScreenShareData, screenShareData} = useScreenContext();
@@ -64,22 +68,45 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   };
 
   useEffect(() => {
-    CustomEvents.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
+    events.on(EventNames.SCREENSHARE_ATTRIBUTE, (data) => {
+      const payload = JSON.parse(data.payload);
+      const action = payload.action;
+      const value = payload.value;
+
       const screenUidOfUser =
         renderListRef.current.renderList[data.sender].screenUid;
-      setScreenShareData((prevState) => {
-        return {
-          ...prevState,
-          [screenUidOfUser]: {
-            name: renderListRef.current.renderList[screenUidOfUser]?.name,
-            isActive: data.payload.value === 'true' ? true : false,
-          },
-        };
-      });
-      //if remote user started/stopped the screenshare then change the layout to pinned/grid
-      data.payload.value === 'true'
-        ? triggerChangeLayout(true, screenUidOfUser)
-        : triggerChangeLayout(false);
+      switch (action) {
+        case EventActions.SCREENSHARE_STARTED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: true,
+                ts: value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(true, screenUidOfUser);
+          break;
+        case EventActions.SCREENSHARE_STOPPED:
+          setScreenShareData((prevState) => {
+            return {
+              ...prevState,
+              [screenUidOfUser]: {
+                name: renderListRef.current.renderList[screenUidOfUser]?.name,
+                isActive: false,
+                ts: value || 0,
+              },
+            };
+          });
+          //if remote user started/stopped the screenshare then change the layout to pinned/grid
+          triggerChangeLayout(false);
+          break;
+        default:
+          break;
+      }
     });
   }, []);
 
@@ -89,9 +116,23 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
       setScreenshareActive(false);
       console.log('STOPPED SHARING');
       executeNormalQuery();
-      CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
-        value: `${false}`,
-        level: EventLevel.LEVEL2,
+      events.send(
+        EventNames.SCREENSHARE_ATTRIBUTE,
+        JSON.stringify({
+          action: EventActions.SCREENSHARE_STOPPED,
+          value: 0,
+        }),
+        EventPersistLevel.LEVEL2,
+      );
+      setScreenShareData((prevState) => {
+        return {
+          ...prevState,
+          [screenShareUid]: {
+            ...prevState[screenShareUid],
+            isActive: false,
+            ts: 0,
+          },
+        };
       });
       //if local user stopped the screenshare then change layout to grid
       triggerChangeLayout(false);
@@ -99,9 +140,10 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
   }, []);
 
   const executeRecordingQuery = (isScreenActive: boolean) => {
-    if (!isScreenActive) {
+    if (isScreenActive) {
+      console.log('screenshare: Executing presenter query');
       // If screen share is not going on, start the screen share by executing the graphql query
-      executePresenterQuery();
+      executePresenterQuery(screenShareUid);
     } else {
       // If recording is already going on, stop the recording by executing the graphql query.
       executeNormalQuery();
@@ -134,16 +176,33 @@ export const ScreenshareConfigure = (props: {children: React.ReactNode}) => {
         encryption as unknown as any,
       );
       isActive && setScreenshareActive(true);
+
       if (isActive) {
-        CustomEvents.send(EventNames.SCREENSHARE_ATTRIBUTE, {
-          value: `${true}`,
-          level: EventLevel.LEVEL2,
+        // 1. Set local state
+        setScreenShareData((prevState) => {
+          return {
+            ...prevState,
+            [screenShareUid]: {
+              name: renderListRef.current.renderList[screenShareUid]?.name,
+              isActive: true,
+              ts: timeNow(),
+            },
+          };
         });
-        //if local user started the screenshare then change layout to pinned
+        // 2. Inform everyone in the channel screenshare is actice
+        events.send(
+          EventNames.SCREENSHARE_ATTRIBUTE,
+          JSON.stringify({
+            action: EventActions.SCREENSHARE_STARTED,
+            value: timeNow(),
+          }),
+          EventPersistLevel.LEVEL2,
+        );
+        //3 . if local user started the screenshare then change layout to pinned
         triggerChangeLayout(true, screenShareUid);
       }
     } catch (e) {
-      console.error("supriya an't start the screen share", e);
+      console.error("can't start the screen share", e);
       executeNormalQuery();
     }
   };

package/template/src/subComponents/screenshare/useScreenshare.tsx

@@ -10,7 +10,7 @@
 *********************************************
 */
 import {createContext} from 'react';
-import {createHook} from 'fpe-implementation';
+import {createHook} from 'customization-implementation';
 
 export interface ScreenshareContextInterface {
   isScreenshareActive: boolean;

package/template/src/utils/SdkEvents.ts

@@ -14,55 +14,18 @@
  */
 type callBackType = (...args: any[]) => void;
 import {userEventsMapInterface} from '../SDKAppWrapper';
+import {createNanoEvents} from 'nanoevents';
 
 interface eventsMapInterface extends userEventsMapInterface {
-  addFpe: callBackType;
-  joinMeetingWithPhrase: (phrase: string) => void;
-}
-interface SDKEventsInterface {
-  eventsMap: eventsMapInterface;
-  eventSubs: {[key in keyof eventsMapInterface]: any};
-  emit: (eventName: keyof eventsMapInterface, ...args: any) => void;
-  on: (eventName: keyof eventsMapInterface, cb: callBackType) => void;
-  off: (eventName: keyof eventsMapInterface) => void;
+  addFpe?: callBackType;
+  addFpeInit?: () => void;
+  joinMeetingWithPhrase?: (
+    phrase: string,
+    resolve: () => void,
+    reject: (e: Error) => void,
+  ) => void;
 }
 
-const SDKEvents: SDKEventsInterface = {
-  eventsMap: {
-    addFpe: () => {},
-    joinMeetingWithPhrase: (p) => {},
-    leave: () => {},
-    create: () => {},
-    preJoin: () => {},
-    join: () => {},
-  },
-  eventSubs: {
-    addFpe: null,
-    joinMeetingWithPhrase: null,
-    leave: null,
-    create: null,
-    preJoin: null,
-    join: null,
-  },
-  on: function (eventName, cb) {
-    console.log(
-      'DEBUG(aditya)-SDKEvents: event registered:',
-      eventName,
-    );
-    this.eventsMap[eventName] = cb;
-    if (this.eventSubs[eventName]) {
-      cb(...this.eventSubs[eventName]);
-    }
-  },
-  emit: function (eventName, ...args) {
-    console.log('DEBUG(aditya)-SDKEvents: emit called:', eventName, ...args);
-    this.eventsMap[eventName](...args);
-    this.eventSubs[eventName] = args;
-  },
-  off: function (eventName) {
-    console.log('DEBUG(aditya)-SDKEvents: event deregistered:', eventName);
-    this.eventSubs[eventName] = null;
-  },
-};
+const SDKEvents = createNanoEvents<eventsMapInterface>();
 
 export default SDKEvents;