refactor: add type suggestion for useWatchInternalEvent

Author: 1cedrus

packages/typink/src/hooks/useWatchContractEvent.ts

@@ -4,7 +4,6 @@ import { useWatchInternalEvent } from './useWatchInternalEvent.js';
 import { InternalEvent } from '../utils/events.js';
 import { useCallback } from 'react';
 import { useDeepDeps } from './internal/useDeepDeps.js';
-import type { FrameSystemEventRecord } from 'dedot/chaintypes/index.js';
 
 export type UseContractEvent<A extends GenericContractApi = GenericContractApi> = OmitNever<{
   [K in keyof A['events']]: K extends string ? (K extends `${infer Literal}` ? Literal : never) : never;
@@ -31,10 +30,10 @@ export function useWatchContractEvent<
   onNewEvent: (events: ReturnType<T['events'][M]['filter']>) => void,
   enabled: boolean = true,
 ): void {
-  useWatchInternalEvent({
-    event: InternalEvent.SYSTEM_EVENTS,
-    callback: useCallback(
-      (events: FrameSystemEventRecord[]) => {
+  useWatchInternalEvent(
+    InternalEvent.SYSTEM_EVENTS,
+    useCallback(
+      (events) => {
         if (!contract || !enabled) return;
 
         const contractEvents = contract.events[event].filter(events);
@@ -47,5 +46,5 @@ export function useWatchContractEvent<
       useDeepDeps([contract, event, onNewEvent]),
     ),
     enabled,
-  });
+  );
 }

packages/typink/src/hooks/useWatchInternalEvent.ts

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useDeepDeps } from './internal/index.js';
 import { useTypink } from './useTypink.js';
-import { InternalEvent } from 'src/utils/events.js';
+import { InternalCallback, InternalEvent } from '../utils/events.js';
 
 /**
  * A React hook that watches for internal system events.
@@ -14,12 +14,11 @@ import { InternalEvent } from 'src/utils/events.js';
  * @param parameters.callback - Callback function to be called when new events are detected.
  * @param parameters.enabled - Optional boolean to enable or disable the event watching. Defaults to true.
  */
-export function useWatchInternalEvent(parameters: {
-  event: InternalEvent;
-  callback: (events: any[]) => void;
-  enabled?: boolean;
-}) {
-  const { event, callback, enabled = true } = parameters;
+export function useWatchInternalEvent<T extends InternalEvent>(
+  event: T,
+  callback: InternalCallback[T],
+  enabled: boolean = true,
+) {
   const { subscribeToEvent, client } = useTypink();
 
   useEffect(

packages/typink/src/providers/ListenersProvider.tsx

@@ -1,11 +1,11 @@
 import { createContext, useContext, useEffect } from 'react';
 import { Props } from '../types.js';
 import { useClient } from './ClientProvider.js';
-import { Callback, InternalEE, InternalEvent, Unsub } from '../utils/events.js';
+import { InternalEE, InternalEvent, Unsub } from '../utils/events.js';
 import { useListenerCounter } from '../hooks/internal/useListenerCounter.js';
 
 export interface ListenersContextProps {
-  subscribeToEvent: (event: InternalEvent, callback: Callback) => Unsub | undefined;
+  subscribeToEvent: (event: InternalEvent, callback: (events: any[]) => void) => Unsub | undefined;
 }
 
 export const ListenersContext = createContext<ListenersContextProps>({} as any);
@@ -41,7 +41,7 @@ export function ListenersProvider({ children }: Props) {
     };
   }, [client, hasListener]);
 
-  const subscribeToEvent = (event: InternalEvent, callback: Callback): Unsub | undefined => {
+  const subscribeToEvent = (event: InternalEvent, callback: (events: any[]) => void): Unsub | undefined => {
     if (!client || !InternalEE) {
       return;
     }

packages/typink/src/utils/events.ts

@@ -1,6 +1,10 @@
+import { FrameSystemEventRecord } from 'dedot/chaintypes';
 import { EventEmitter } from 'dedot/utils';
 
-export type Callback = (events: any[]) => void;
+export type InternalCallback = {
+  [InternalEvent.SYSTEM_EVENTS]: (events: FrameSystemEventRecord[]) => void;
+};
+
 export type Unsub = () => void;
 export enum InternalEvent {
   SYSTEM_EVENTS = 'SYSTEM_EVENTS',