feat: optimize useWatchContractEvent (#64)

* tweak: optimize useWatchContractEvent

* tweak: change the way handle listener

* test: update unit tests

* chore: add docstring & update import

* tweak: use eventemitter to handle listeners instead

* chore: add eventemitter3

* test: sync tests

* refactor: use EventEmitter from @dedot/utils

* refactor: better handler for whether emit or not system.events

* refactor: ensure op stop when component unmount

* refactor: standardize subscribing to internal events\

* fix: wrong import

* refactor: add type suggestion for useWatchInternalEvent

* refactoring & renaming

* fix deps

---------

Co-authored-by: Thang X. Vu <thang@coongcrafts.io>

Author: 1cedrus

…typink/src/hooks/__tests__/test-utils.ts …ypink/src/hooks/__tests__/test-utils.tsxpackages/typink/src/hooks/__tests__/test-utils.ts renamed to packages/typink/src/hooks/__tests__/test-utils.tsx packages/typink/src/hooks/__tests__/test-utils.ts renamed to packages/typink/src/hooks/__tests__/test-utils.tsx

@@ -1,4 +1,6 @@
 import { act } from '@testing-library/react';
+import { Props } from '../../types.js';
+import { TypinkEventsProvider } from '../../providers/index.js';
 
 export const waitForNextUpdate = async (then?: () => Promise<void>) => {
   await act(async () => {
@@ -10,3 +12,5 @@ export const waitForNextUpdate = async (then?: () => Promise<void>) => {
 export const sleep = (ms: number = 0) => {
   return new Promise((resolve) => setTimeout(resolve, ms));
 };
+
+export const typinkEventsWrapper = ({ children }: Props) => <TypinkEventsProvider>{children}</TypinkEventsProvider>;

packages/typink/src/hooks/__tests__/usePSP22Balance.test.ts

@@ -5,7 +5,7 @@ import { useRawContract } from '../useRawContract.js';
 import { useContractQuery } from '../useContractQuery.js';
 import { useWatchContractEvent } from '../useWatchContractEvent.js';
 import { renderHook, waitFor } from '@testing-library/react';
-import { waitForNextUpdate } from './test-utils';
+import { waitForNextUpdate } from './test-utils.js';
 
 vi.mock('../useTypink');
 vi.mock('../useWatchContractEvent');

packages/typink/src/hooks/__tests__/useWatchContractEvent.test.ts

@@ -1,95 +1,127 @@
-import { renderHook } from '@testing-library/react-hooks';
-import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { renderHook, waitFor } from '@testing-library/react';
 import { useWatchContractEvent } from '../useWatchContractEvent.js';
 import { useTypink } from '../useTypink.js';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { Contract } from 'dedot/contracts';
 import { Psp22ContractApi } from '../psp22/contracts/psp22';
-import { waitForNextUpdate } from './test-utils.js';
+import { useTypinkEvents, useClient } from '../../providers/index.js';
+import { typinkEventsWrapper, waitForNextUpdate } from './test-utils.js';
+import type { ContractEvent } from 'dedot/contracts';
 
 vi.mock('../useTypink', () => ({
   useTypink: vi.fn(),
 }));
 
+vi.mock('../../providers/ClientProvider.js', () => ({
+  useClient: vi.fn(),
+}));
+
 describe('useWatchContractEvent', () => {
-  const client = {
+  const mockClient = {
     query: {
       system: {
         events: vi.fn(),
       },
     },
   };
 
-  const contract: Contract<Psp22ContractApi> = {
+  const mockSub = vi.fn();
+
+  const mockContract = {
     events: {
       Transfer: {
-        filter: vi.fn(),
+        filter: (events: ContractEvent[]) => events.filter((event) => event.name === 'Transfer'),
       },
     },
-  } as unknown as Contract<any>;
-
-  const mockUseTypink = {
-    client,
-  };
+  } as any as Contract<Psp22ContractApi>;
 
   beforeEach(() => {
-    vi.mocked(useTypink).mockReturnValue(mockUseTypink as any);
+    vi.mocked(useClient).mockReturnValue({
+      client: mockClient,
+    } as any);
+
+    vi.mocked(useTypink).mockReturnValue({
+      client: mockClient,
+      subscribeToEvent: mockSub,
+    } as any);
   });
 
   afterEach(() => {
     vi.clearAllMocks();
   });
 
-  it('should not call system.events if client is not defined', () => {
-    vi.mocked(useTypink).mockReturnValue({ client: undefined } as any);
+  it('should successfully subscribe to the system events when all parameters are valid', async () => {
+    const { rerender } = renderHook(
+      ({ enabled }) => useWatchContractEvent(mockContract, 'Transfer', vi.fn(), enabled),
+      { initialProps: { enabled: true } },
+    );
+
+    expect(mockSub).toHaveBeenCalledTimes(1);
 
-    renderHook(() => useWatchContractEvent(contract, 'Transfer', vi.fn()));
+    rerender({ enabled: false });
+    expect(mockSub).toHaveBeenCalledTimes(1);
 
-    expect(client.query.system.events).not.toHaveBeenCalled();
+    rerender({ enabled: true });
+    expect(mockSub).toHaveBeenCalledTimes(2);
   });
 
-  it('should not call system.events if contract is not defined', () => {
-    renderHook(() =>
-      // @ts-ignore
-      useWatchContractEvent(undefined, 'Transfer', vi.fn()),
-    );
+  it('should call the callback function when new events are detected', async () => {
+    const mockApprovalEvent = {
+      name: 'Approval',
+      data: {},
+    };
+
+    const mockTransferEvent = {
+      name: 'Transfer',
+      data: {},
+    };
+
+    mockClient.query.system.events.mockImplementation((callback) => {
+      return new Promise((resolve) => {
+        setTimeout(() => {
+          callback([mockTransferEvent]);
+          setTimeout(() => {
+            callback([mockTransferEvent]);
+            callback([mockApprovalEvent]);
+          }, 50);
+        }, 100);
+
+        resolve(() => {});
+      });
+    });
 
-    expect(client.query.system.events).not.toHaveBeenCalled();
-  });
+    const { result } = renderHook(() => useTypinkEvents(), { wrapper: typinkEventsWrapper });
 
-  it('should not call system.events if enabled is false', () => {
-    renderHook(() => useWatchContractEvent(contract, 'Transfer', vi.fn(), false));
+    await waitFor(() => {
+      expect(result.current).toBeDefined();
+    });
 
-    expect(client.query.system.events).not.toHaveBeenCalled();
-  });
+    mockSub.mockImplementation(result.current.subscribeToEvent);
 
-  it('should call system.events if all conditions are met', async () => {
-    const onNewEvent = vi.fn();
-    const events = [{ data: { from: 'address1', to: 'address2' } }];
+    const mockCallback = vi.fn();
+    renderHook(() => useWatchContractEvent(mockContract, 'Transfer', mockCallback));
 
-    // @ts-ignore
-    vi.mocked(contract.events.Transfer.filter).mockReturnValue(events);
-    vi.mocked(client.query.system.events).mockImplementation((callback) => {
-      callback(events);
+    await waitFor(() => {
+      expect(mockCallback).toHaveBeenCalledTimes(1);
     });
 
-    renderHook(() => useWatchContractEvent(contract, 'Transfer', onNewEvent));
-
-    expect(client.query.system.events).toHaveBeenCalled();
-    expect(contract.events.Transfer.filter).toHaveBeenCalledWith(events);
-    expect(onNewEvent).toHaveBeenCalledWith(events);
+    await waitFor(() => {
+      expect(mockCallback).toHaveBeenCalledTimes(2);
+    });
   });
 
   it('should unsubscribe when component unmounts', async () => {
-    const unsub = vi.fn();
+    const mockUnsub = vi.fn();
+
+    mockSub.mockReturnValue(mockUnsub);
 
-    vi.mocked(client.query.system.events).mockResolvedValue(unsub);
-    const { unmount } = renderHook(() => useWatchContractEvent(contract, 'Transfer', vi.fn()));
+    const { unmount } = renderHook(() => useWatchContractEvent(mockContract, 'Transfer', vi.fn()));
 
     // Wait for unsub to be set
     await waitForNextUpdate();
 
     unmount();
 
-    expect(unsub).toHaveBeenCalled();
+    expect(mockUnsub).toHaveBeenCalled();
   });
 });

packages/typink/src/hooks/internal/useListenerCounter.ts

@@ -0,0 +1,25 @@
+import { useState } from 'react';
+import { TypinkEvent } from '../../providers/index.js';
+
+export const useListenerCounter = (event: TypinkEvent) => {
+  const [counter, setCounter] = useState(0);
+
+  const tryIncrease = (eventToCheck: TypinkEvent) => {
+    if (event !== eventToCheck) return;
+
+    setCounter((counter) => counter + 1);
+  };
+
+  const tryDecrease = (eventToCheck: TypinkEvent) => {
+    if (event !== eventToCheck) return;
+
+    setCounter((counter) => counter - 1);
+  };
+
+  return {
+    tryIncrease,
+    tryDecrease,
+    counter,
+    hasAny: counter > 0,
+  };
+};

packages/typink/src/hooks/useWatchContractEvent.ts

@@ -1,11 +1,11 @@
-import { useEffect } from 'react';
-import { useTypink } from './useTypink.js';
 import { OmitNever } from '../types.js';
 import { Contract, GenericContractApi } from 'dedot/contracts';
-import { Unsub } from 'dedot/types';
-import { useDeepDeps } from './internal/index.js';
+import { useWatchTypinkEvent } from './useWatchTypinkEvent.js';
+import { useCallback } from 'react';
+import { useDeepDeps } from './internal/useDeepDeps.js';
+import { TypinkEvent } from '../providers/index.js';
 
-type UseContractEvent<A extends GenericContractApi = GenericContractApi> = OmitNever<{
+export type UseContractEvent<A extends GenericContractApi = GenericContractApi> = OmitNever<{
   [K in keyof A['events']]: K extends string ? (K extends `${infer Literal}` ? Literal : never) : never;
 }>;
 
@@ -30,37 +30,21 @@ export function useWatchContractEvent<
   onNewEvent: (events: ReturnType<T['events'][M]['filter']>) => void,
   enabled: boolean = true,
 ): void {
-  const { client } = useTypink();
-
-  useEffect(
-    () => {
-      if (!client || !contract || !enabled) return;
-
-      // handle unsubscribing when component unmounts
-      let done = false;
-      let unsub: Unsub | undefined;
-
-      (async () => {
-        // TODO reuse this subscription more efficiently
-        unsub = await client.query.system.events((events) => {
-          if (done) {
-            unsub && unsub();
-            return;
-          }
-
-          const contractEvents = contract.events[event].filter(events);
-          if (contractEvents.length === 0) return;
-
-          // @ts-ignore
-          onNewEvent(contractEvents);
-        });
-      })();
-
-      return () => {
-        unsub && unsub();
-        done = true;
-      };
-    },
-    useDeepDeps([client, contract, onNewEvent, enabled]),
+  useWatchTypinkEvent(
+    TypinkEvent.SYSTEM_EVENTS,
+    useCallback(
+      (events) => {
+        if (!contract || !enabled) return;
+
+        const contractEvents = contract.events[event].filter(events);
+
+        if (contractEvents.length <= 0) return;
+
+        // @ts-ignore
+        onNewEvent(contractEvents);
+      },
+      useDeepDeps([contract, event, onNewEvent, enabled]),
+    ),
+    enabled,
   );
 }

packages/typink/src/hooks/useWatchTypinkEvent.ts

@@ -0,0 +1,45 @@
+import { useEffect } from 'react';
+import { useDeepDeps } from './internal/index.js';
+import { useTypink } from './useTypink.js';
+import { TypinkEvent, TypinkEventsRegistration } from '../providers/index.js';
+
+/**
+ * A React hook that watches for internal typink events.
+ *
+ * This hook sets up a subscription to system events and filters for the specified event.
+ * When new events are detected, it calls the provided callback function.
+ *
+ * @param event - The name of the event to watch for.
+ * @param callback - Callback function to be called when new events are detected.
+ * @param enabled - Optional boolean to enable or disable the event watching. Defaults to true.
+ */
+export function useWatchTypinkEvent<T extends TypinkEvent>(
+  event: T,
+  callback: TypinkEventsRegistration[T],
+  enabled: boolean = true,
+) {
+  const { subscribeToEvent, client } = useTypink();
+
+  useEffect(
+    () => {
+      if (!client || !enabled) return;
+
+      let unmounted = false;
+
+      const unsub = subscribeToEvent(event, (events) => {
+        if (unmounted) {
+          unsub && unsub();
+          return;
+        }
+
+        callback(events);
+      });
+
+      return () => {
+        unsub && unsub();
+        unmounted = true;
+      };
+    },
+    useDeepDeps([client, callback, event, enabled]),
+  );
+}