Fix event duplication in useContractEvents (#2899)

Author: gregfromstl

.changeset/tame-rivers-rhyme.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Fixes useContractEvents duplicating events

packages/thirdweb/src/event/actions/watch-events.ts

@@ -16,6 +16,7 @@ export type WatchContractEventsOptions<
 > = Prettify<
   GetContractEventsOptionsDirect<abi, abiEvents, TStrict> & {
     onEvents: (events: ParseEventLogsResult<abiEvents, TStrict>) => void;
+    latestBlockNumber?: bigint;
   }
 >;
 
@@ -79,5 +80,6 @@ export function watchContractEvents<
         options.onEvents(logs);
       }
     },
+    latestBlockNumber: options.latestBlockNumber,
   });
 }

packages/thirdweb/src/react/core/hooks/contract/useContractEvents.ts

@@ -4,7 +4,7 @@ import {
   useQueryClient,
 } from "@tanstack/react-query";
 import type { Abi, AbiEvent } from "abitype";
-import { useEffect, useMemo } from "react";
+import { useEffect, useMemo, useRef } from "react";
 import { getContractEvents } from "../../../../event/actions/get-events.js";
 import type { ParseEventLogsResult } from "../../../../event/actions/parse-logs.js";
 import {
@@ -31,7 +31,13 @@ type UseContractEventsOptions<
  * @example
  * ```jsx
  * import { useContractEvents } from "thirdweb/react";
- * const contractEvents = useContractEvents({contract});
+ * import { tokensClaimedEvent } from "thirdweb/extensions/erc721";
+ *
+ * const account = useActiveAccount();
+ * const contractEvents = useContractEvents({
+ *  contract
+ *  events: [tokensClaimedEvent({ claimer: account?.address })],
+ * });
  * ```
  * @contract
  */
@@ -48,6 +54,7 @@ export function useContractEvents<
     enabled = true,
     watch = true,
   } = options;
+  const latestBlockNumber = useRef<bigint>(); // We use this to keep track of the latest block number when new pollers are spawned
 
   const queryClient = useQueryClient();
 
@@ -70,6 +77,7 @@ export function useContractEvents<
     queryFn: async () => {
       const rpcRequest = getRpcClient(contract);
       const currentBlockNumber = await eth_blockNumber(rpcRequest);
+      latestBlockNumber.current = currentBlockNumber;
       const initialEvents = await getContractEvents({
         contract,
         events: events,
@@ -85,17 +93,22 @@ export function useContractEvents<
       // don't watch if not enabled or if watch is false
       return;
     }
+
     // the return is important here because it will unwatch the events
     return watchContractEvents<abi, abiEvents>({
       contract,
       onEvents: (newEvents) => {
+        if (newEvents.length > 0 && newEvents[0]) {
+          latestBlockNumber.current = newEvents[0].blockNumber; // Update the latest block number to avoid duplicate events if a new poller is spawned during this block
+        }
         // biome-ignore lint/suspicious/noExplicitAny: TODO: fix any
-        queryClient.setQueryData(queryKey, (oldEvents: any = []) => {
-          const newLogs = [...oldEvents, ...newEvents];
-          return newLogs;
-        });
+        queryClient.setQueryData(queryKey, (oldEvents: any = []) => [
+          ...oldEvents,
+          ...newEvents,
+        ]);
       },
       events,
+      latestBlockNumber: latestBlockNumber.current,
     });
   }, [contract, enabled, events, queryClient, queryKey, watch]);
 

packages/thirdweb/src/rpc/watchBlockNumber.test.ts

@@ -138,4 +138,63 @@ describe.runIf(process.env.TW_SECRET_KEY)("watch block number", () => {
 
     unwatch2();
   });
+
+  it("should re-start from latestBlockNumber if provided", async () => {
+    const unwatch = watchBlockNumber({
+      client: TEST_CLIENT,
+      chain: baseSepolia,
+      onNewBlockNumber,
+    });
+
+    expect(onNewBlockNumber).toHaveBeenCalledTimes(0);
+
+    // wait for 5 seconds which should always be sufficient for a new block to be mined
+    await wait(5000);
+
+    expect(onNewBlockNumber).toHaveBeenCalled();
+
+    const lastBlockNumber = onNewBlockNumber.mock.lastCall?.[0];
+
+    onNewBlockNumber.mockClear();
+
+    unwatch();
+
+    // wait for 5 seconds which should always be sufficient for a new block to be mined
+    await wait(5000);
+
+    expect(onNewBlockNumber).toHaveBeenCalledTimes(0);
+
+    const unwatch2 = watchBlockNumber({
+      client: TEST_CLIENT,
+      chain: baseSepolia,
+      onNewBlockNumber,
+      latestBlockNumber: lastBlockNumber,
+    });
+
+    // wait for 5 seconds which should always be sufficient for a new block to be mined
+    await wait(5000);
+
+    expect(onNewBlockNumber).toHaveBeenCalled();
+
+    const firstBlockNumber = onNewBlockNumber.mock.calls[0]?.[0];
+
+    expect(firstBlockNumber).toEqual(lastBlockNumber + 1n);
+
+    unwatch2();
+  });
+
+  it("should start from latestBlockNumber", async () => {
+    const unwatch = watchBlockNumber({
+      client: TEST_CLIENT,
+      chain: baseSepolia,
+      onNewBlockNumber,
+      latestBlockNumber: 9342233n,
+    });
+
+    await wait(500); // wait long enough to have called callback
+
+    expect(onNewBlockNumber.mock.calls[0]?.[0]).toEqual(9342234n);
+
+    unwatch();
+  });
 });

packages/thirdweb/src/rpc/watchBlockNumber.ts

@@ -49,8 +49,6 @@ function createBlockNumberPoller(
   async function poll() {
     // stop polling if there are no more subscriptions
     if (!isActive) {
-      lastBlockNumber = undefined;
-      lastBlockAt = undefined;
       return;
     }
     const blockNumber = await eth_blockNumber(rpcRequest);
@@ -100,10 +98,14 @@ function createBlockNumberPoller(
   }
 
   // return the "subscribe" function
-  return function subscribe(callBack: (blockNumber: bigint) => void) {
+  return function subscribe(
+    callBack: (blockNumber: bigint) => void,
+    initialBlockNumber?: bigint,
+  ) {
     subscribers.push(callBack);
     // if we are currently not active -> start polling
     if (!isActive) {
+      lastBlockNumber = initialBlockNumber;
       isActive = true;
       poll();
     }
@@ -140,6 +142,7 @@ export type WatchBlockNumberOptions = {
   chain: Chain;
   onNewBlockNumber: (blockNumber: bigint) => void;
   overPollRatio?: number;
+  latestBlockNumber?: bigint;
 };
 
 /**
@@ -163,7 +166,8 @@ export type WatchBlockNumberOptions = {
  * @rpc
  */
 export function watchBlockNumber(opts: WatchBlockNumberOptions) {
-  const { client, chain, onNewBlockNumber, overPollRatio } = opts;
+  const { client, chain, onNewBlockNumber, overPollRatio, latestBlockNumber } =
+    opts;
   const chainId = chain.id;
   // if we already have a poller for this chainId -> use it
   let poller = existingPollers.get(chainId);
@@ -174,5 +178,5 @@ export function watchBlockNumber(opts: WatchBlockNumberOptions) {
     existingPollers.set(chainId, poller);
   }
   // subscribe to the poller and return the unSubscribe function to the caller
-  return poller(onNewBlockNumber);
+  return poller(onNewBlockNumber, latestBlockNumber);
 }