[SDK] Optimize multi-event querying with indexer

Author: joaquim-verges

.changeset/great-chairs-find.md

@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+More efficient multi event querying when using indexer

apps/dashboard/src/@3rdweb-sdk/react/hooks/useActivity.ts

@@ -1,12 +1,7 @@
-import { type AbiEvent, formatAbiItem } from "abitype";
+import {} from "abitype";
 import { useMemo } from "react";
-import {
-  type PreparedEvent,
-  type ThirdwebContract,
-  prepareEvent,
-} from "thirdweb";
+import type { ThirdwebContract } from "thirdweb";
 import { useContractEvents } from "thirdweb/react";
-import { useResolveContractAbi } from "./useResolveContractAbi";
 
 export interface InternalTransaction {
   transactionHash: string;
@@ -20,20 +15,8 @@ export interface InternalTransaction {
 }
 
 export function useActivity(contract: ThirdwebContract, autoUpdate?: boolean) {
-  const abiQuery = useResolveContractAbi(contract);
-
-  // Get all the Prepare Events from the contract abis
-  const events: PreparedEvent<AbiEvent>[] = useMemo(() => {
-    const eventsItems = (abiQuery.data || []).filter((o) => o.type === "event");
-    const eventSignatures = eventsItems.map((event) => formatAbiItem(event));
-    return eventSignatures.map((signature) =>
-      prepareEvent({ signature: signature as `event ${string}` }),
-    );
-  }, [abiQuery.data]);
-
   const eventsQuery = useContractEvents({
     contract,
-    events,
     blockRange: 20000,
     watch: autoUpdate,
   });
@@ -42,26 +25,29 @@ export function useActivity(contract: ThirdwebContract, autoUpdate?: boolean) {
     if (!eventsQuery.data) {
       return [];
     }
-    const obj = eventsQuery.data.slice(0, 100).reduce(
-      (acc, curr) => {
-        const internalTx = acc[curr.transactionHash];
-        if (internalTx) {
-          internalTx.events.push(curr);
-          internalTx.events.sort((a, b) => b.logIndex - a.logIndex);
-          if (internalTx.blockNumber > curr.blockNumber) {
-            internalTx.blockNumber = curr.blockNumber;
+    const obj = eventsQuery.data
+      .toReversed()
+      .slice(0, 100)
+      .reduce(
+        (acc, curr) => {
+          const internalTx = acc[curr.transactionHash];
+          if (internalTx) {
+            internalTx.events.push(curr);
+            internalTx.events.sort((a, b) => b.logIndex - a.logIndex);
+            if (internalTx.blockNumber > curr.blockNumber) {
+              internalTx.blockNumber = curr.blockNumber;
+            }
+          } else {
+            acc[curr.transactionHash] = {
+              transactionHash: curr.transactionHash,
+              blockNumber: curr.blockNumber,
+              events: [curr],
+            };
           }
-        } else {
-          acc[curr.transactionHash] = {
-            transactionHash: curr.transactionHash,
-            blockNumber: curr.blockNumber,
-            events: [curr],
-          };
-        }
-        return acc;
-      },
-      {} as Record<string, InternalTransaction>,
-    );
+          return acc;
+        },
+        {} as Record<string, InternalTransaction>,
+      );
     return Object.values(obj).sort((a, b) =>
       a.blockNumber > b.blockNumber ? -1 : 1,
     );

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

@@ -7,7 +7,10 @@ import type {
 import { type Log, formatLog } from "viem";
 import { resolveContractAbi } from "../../contract/actions/resolve-abi.js";
 import type { ThirdwebContract } from "../../contract/contract.js";
-import { getContractEvents as getContractEventsInsight } from "../../insight/get-events.js";
+import {
+  type ContractEvent,
+  getContractEvents as getContractEventsInsight,
+} from "../../insight/get-events.js";
 import { eth_blockNumber } from "../../rpc/actions/eth_blockNumber.js";
 import {
   type GetLogsBlockParams,
@@ -156,6 +159,23 @@ export async function getContractEvents<
 
   // if we have an abi on the contract, we can encode the topics with it
   if (!events?.length && !!contract) {
+    if (useIndexer) {
+      // fetch all events from the indexer, no need to get events from ABI
+      const events = await getContractEventsInsight({
+        client: contract.client,
+        chains: [contract.chain],
+        contractAddress: contract.address,
+        decodeLogs: true,
+        queryOptions: {
+          limit: 500,
+          filter_block_hash: restParams.blockHash,
+          filter_block_number_gte: restParams.fromBlock,
+          filter_block_number_lte: restParams.toBlock,
+        },
+      });
+      return toLog(events) as GetContractEventsResult<abiEvents, TStrict>;
+    }
+
     // if we have a contract *WITH* an abi we can use that
     if (contract.abi?.length) {
       // @ts-expect-error - we can't make typescript happy here, but we know this is an abi event
@@ -246,6 +266,10 @@ async function getLogsFromInsight(options: {
     },
   });
 
+  return toLog(r);
+}
+
+function toLog(r: ContractEvent[]) {
   const cleanedEventData = r.map((tx) => ({
     chainId: tx.chain_id,
     blockNumber: numberToHex(Number(tx.block_number)),
@@ -257,7 +281,18 @@ async function getLogsFromInsight(options: {
     address: tx.address,
     data: tx.data as Hex,
     topics: tx.topics as [`0x${string}`, ...`0x${string}`[]] | [] | undefined,
+    ...(tx.decoded
+      ? {
+          eventName: tx.decoded.name,
+          args: {
+            ...tx.decoded.indexed_params,
+            ...tx.decoded.non_indexed_params,
+          },
+        }
+      : {}),
   }));
 
-  return cleanedEventData.map((e) => formatLog(e));
+  return cleanedEventData
+    .map((e) => formatLog(e))
+    .sort((a, b) => Number((a.blockNumber ?? 0n) - (b.blockNumber ?? 0n)));
 }

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

@@ -77,6 +77,7 @@ export function watchContractEvents<
             fromBlock: blockNumber,
             // toBlock is inclusive
             toBlock: blockNumber,
+            useIndexer: false,
           }),
         {
           retries: 3,