Missing event watcher hook like useWatchContractEvent

[0xmihirsahu]

There's no hook for logging contract events like https://wagmi.sh/react/api/hooks/useWatchContractEvent#usewatchcontractevent

[fracek]

Good catch! The good news is that the Starknet RPC spec includes a continuation token for the starknet_getEvents call so that we can use react-query infinite queries to implement this.

[0xmihirsahu]

So we are getting a useWatchContractEvent hook for starknet-react? l'd be happy to contribute to it.

[fracek]

Yes, it should be useEvents / useContractEvents. I will provide a short guide on what changes are required tomorrow morning.

[fracek]

To implement this hook you'll need to add some extra work since it's the first hook that uses infinite queries.

• First you need to wrap useInfiniteQuery like we did with useQuery in query.ts. It just makes only some parameters configurable.
• Add the new useEvents hook. The hooks should return the events as the data and store the continuation token to implement fetchNextPage.
• Add a type-safe useContractEvents hook that calls useEvents and additionally parses the events to javascript objects. You should be able to use starknet.js and abi-wan to make it type-safe. This is optional, you can implement in a second PR.

[JorgeOehrens]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

We develop smart contracts in Solidity for Ethereum's testnet and mainnet, and we use Next.js and React with TypeScript for the front end. Now, we're starting smart contract development on the Stellar blockchain using Soroban (Rust).

I use Wagmi for wallet connections and hooks, and I've found it very effective. After reading the documentation, I have a good idea of how to implement something similar to the useWatchContractEvent hook.

My focus is on maintaining clean, scalable code that aligns with the structure and quality of our existing codebase.

How I plan on tackling this issue

Create a custom React hook similar to useWatchContractEvent for StartkNet. This hook would subscribe to specific events on the StartkNet smart contract and update your React component's state based on those events.

[sotoyjuan]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey! I'd like to collaborate on this project. I have five years of frontend development experience, I'm currently going through a Starknet bootcamp with Dojo Coding, which provides me with the foundational knowledge needed. I believe this combination of my experience and current training makes me well-suited to tackle this issue. I've already contributed to another project using Typescript and Starknet.js. Thanks for considering me.

How I plan on tackling this issue

I'd love this challenge, I would test the wagmi hook shared in issue and try to understand that implementation to replicate in this context.

[baitcode]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

15 years of commercial development in Web 2.0
3 projects from 0 to 1

It's hard to tell, I know my way around technologies.

How I plan on tackling this issue

I'll do as describe in comment:

To implement this hook you'll need to add some extra work since it's the first hook that uses infinite queries.

First you need to wrap useInfiniteQuery like we did with useQuery in query.ts. It just makes only some parameters configurable.
Add the new useEvents hook. The hooks should return the events as the data and store the continuation token to implement fetchNextPage.
Add a type-safe useContractEvents hook that calls useEvents and additionally parses the events to javascript objects. You should be able to use starknet.js and abi-wan to make it type-safe. This is optional, you can implement in a second PR.

[0xmihirsahu]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a web3 developer who has won multiple web3 hackathons and have contributed to web3 open source projects. I was the original poster of this issue which I raised because I encountered it in StarkHack hackathon. Because I was occupied with my university exams so I was not able to start working on this issue. Now that I'm back I can start working on this issue. I'll be able to implement this hook with the experience and the skills I have with react and typescript.

How I plan on tackling this issue

I think @fracek has provided a good detailed explanation about how to implement this hook. I'll be following that and start working on it.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @fracek

I'm available to work on creating a hook for logging contract events. My name is Benjamin, and I have extensive experience in developing and integrating custom hooks to manage blockchain interactions efficiently. My background includes working with various hooks and APIs to enhance functionality and performance in decentralized applications.

Understanding the Issue

Currently, there is no hook available for logging contract events similar to useWatchContractEvent from Wagmi. The goal is to develop a hook that can efficiently watch and return emitted contract event logs. This involves creating a hook that can handle parameters such as address, ABI, event name, and various options for batching, polling, and error handling.

How I plan on tackling this issue

Develop Contract Event Hook

• Hook Creation: I will create a custom hook similar to useWatchContractEvent that can listen to and return logs for specified contract events.
• Parameters:
  • address: The contract's address.
  • abi: The contract's ABI.
  • eventName: The event to listen for.
  • args: Arguments to pass when calling the contract.
  • batch: Whether or not to batch events on each invocation.
  • chainId: ID of the chain to use when fetching data.
  • config: Config to use instead of retrieving from the nearest provider.
  • onError: Callback for handling errors.
  • onLogs: Callback for handling logs.
  • poll: Whether to use a polling mechanism to check for new blocks.
  • pollingInterval: Polling frequency in milliseconds.
  • strict: Whether to enforce strict checking.
  • syncConnectedChain: Set up a subscriber for connected chain changes.

Implementation Steps

• Create Hook Function: Implement the hook function with the above parameters and functionality.
• Testing: Test the hook to ensure it correctly handles contract events, including checking for proper handling of logs and errors.
• Documentation: Document the usage of the hook, including parameter descriptions and examples.

Tasks

Develop Hook

• Implement Hook Functionality: Create the hook to handle contract events, including configuration options and callbacks.
• Integration: Ensure the hook integrates smoothly with existing systems and handles contract interactions as expected.

Testing

• Functionality Testing: Verify that the hook correctly listens for and returns contract events.
• Error Handling: Test the hook's error handling and logging capabilities.
• Performance Testing: Ensure that the hook performs efficiently, including when handling multiple connectors in parallel.

Documentation

• Write Documentation: Provide detailed documentation on how to use the hook, including code examples and configuration options.
• Update Examples: Include examples for common use cases and configurations.

[LukePereyra]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Software Engineer frontend. I have experience with React and hooks

How I plan on tackling this issue

I will implemente a component useWatchContractEvent similar to the library wagmi. It's a useful component and the issue seems fun

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a Full Stack Web Developer with a solid background in front-end and back-end development. So it will be a pleasure to contribute for the first time to this great project. I am a member of the Dojo Coding community.

How I plan on tackling this issue

1. Understand the Existing Hook (useWatchContractEvent):

   • I would begin by thoroughly analyzing the useWatchContractEvent hook provided by wagmi. This includes understanding the parameters it accepts, such as the contract address, ABI, event name, and the callback function onLogs. I would also study how it handles options like pollingInterval, batch, and syncConnectedChain to determine which are essential for the custom hook.

2. Define the Requirements for the New Hook:

   • Based on the analysis, I would define the requirements for the new hook. The goal is to provide similar functionality while ensuring it aligns with the specific needs of your project. The custom hook should be able to:
     • Watch for specific contract events.
     • Log or process event data through a callback function.
     • Handle various configurations, such as polling, strict mode, and chain synchronization.

3. Design and Implementation:

   • I would design the hook to be as flexible and reusable as possible. It would accept parameters such as address, abi, eventName, onLogs, and optional configurations. The hook will utilize ethers.js or wagmi’s underlying utilities to watch for contract events.
   • I would implement the core functionality by establishing a WebSocket or polling connection to listen for event logs, then trigger the onLogs callback whenever an event is detected. The hook would also handle errors and provide meaningful feedback via the onError callback.

4. Testing and Verification:

   • I would write comprehensive unit tests to ensure that the hook works as expected under various conditions, such as different chain IDs, event types, and error scenarios. Testing will include edge cases, such as handling large batches of logs or network failures.
   • Additionally, I would test the hook within the context of a sample project or an existing application to verify its behavior in a real-world environment.

5. Documentation:

   • I would document the hook thoroughly, including usage examples, parameter descriptions, and configuration options. This documentation will ensure that other developers can easily understand and integrate the hook into their projects.

6. Integration:

   • I would ensure the hook integrates seamlessly with the existing codebase, following any specific coding standards or patterns used in your project. This might include making the hook compatible with the existing state management system or aligning it with the current architecture.

[fracek]

Hey @0xmihirsahu have a go at implementing this. Notice that like I mentioned starknet events rpc call has the possibility of paginating responses so we can use the useInfiniteQuery hook from react query. Make sure to wrap it like we do with useQuery

[deeseeker]

@fracek is this issue still open?