Contract page events

[saimeunt]

Contract page events

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a contract details page, I want to see the list of events involving this contract. The events list should be displayed as a table showing tx hash, block number, timestamp, method and decoded logs.

Validation

It should look like the Etherscan contract details events page, eg. https://optimistic.etherscan.io/address/0xa5f565650890fba1824ee0f21ebbbf660a179934#events

Do NOT add the search button. Do NOT handle pagination for the moment.

Implementation

We will need to use an indexer to retrieve all the logs emitted from a specific contract, to build an MVP of the feature you can use a contract with a lot of events such as https://optimistic.etherscan.io/address/0xa5f565650890fba1824ee0f21ebbbf660a179934 and fetch the latest events then filter out the logs having address equal to the contract address.

Resources

• txs page: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/txs/index.tsx
• shadcn/ui table: https://ui.shadcn.com/docs/components/table
• getLogs docs: https://viem.sh/docs/actions/public/getLogs.html

[od-hunter]

Hi @saimeunt , Please I will like to be assigned this issue. I am a front-end Developer, and my experience includes html, css, react, JavaScript and TypeScript. To solve this issue, I'd take the following steps:

1. First of all set up the indexer API to fetch events data.
2. I'll then retrieve logs and filter them based on the contract address.
3. Next I'll display events in a table, that is I'll create a React component to render the events in a table format, showing tx hash, block number, timestamp, method, and decoded logs.
4. Lastly, I'll apply CSS for a clean and user-friendly table display. I’ll then test, to make sure it runs fine and solves the issue.

PS: I will NOT add the search button and; I will NOT handle pagination. I promise to give ONLY high quality code.

Here is my Onlydust profile link https://app.onlydust.com/u/od-hunter . Please give me the opportunity to contribute to this ecosystem. I’ll be able to come up with a PR within 3-5 working days once I am assigned. Please give me the opportunity. Thank you sir.

[armandocodecr]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As a Full-Stack Developer with a year of experience, I am well-prepared to contribute effectively to your project. My technical and soft skills have enabled me to successfully complete contributions to Walnut's repositories, demonstrating my ability to deliver high-quality solutions that meet project standards.

I am adept at problem-solving and take pride in creating applications that reduce workloads across various departments. My ability to adapt and learn quickly enables me to tackle new challenges effectively and independently, making me highly capable of addressing complex issues and implementing efficient solutions.

I am also a member of "Dojo coding," a community where many developers contribute to various projects. This community provides substantial support and knowledge-sharing, enhancing my ability to contribute effectively.

Effective communication is one of my strengths. I ensure that my explanations and descriptions are detailed and user-friendly, which has been appreciated by the maintainers I've worked with. My tech stack aligns perfectly with the project's requirements, ensuring a smooth integration and development process.

Overall, my skills, experience, and community support make me well-equipped to contribute to your project by resolving issues efficiently and delivering high-quality, impactful solutions.

How I plan on tackling this issue

Request for Issue Assignment: Contract Page Events

Hi Walnut team,

I am excited about the opportunity to work on this issue. I have previously contributed to Walnut's repositories, demonstrating my familiarity with the codebase and commitment to quality. Below, I have outlined a detailed plan on how I will approach and solve this issue.

Technical Plan

Objective

To display a list of events involving a specific contract on its details page, showing transaction hash, block number, timestamp, method, and decoded logs in a table format.

Step-by-Step Implementation

UI Component

1. Table Integration:
   • Use the table component from shadcn/ui as described in their documentation.
   • The table will display the transaction hash, block number, timestamp, method, and decoded logs for each event.

Fetching Contract Events

1. Indexer for Event Logs:

   • Use an indexer to retrieve all logs emitted from the specified contract.
   • For the MVP, use a contract with a significant number of events, such as this example contract, and fetch the latest events.
   • Filter out logs to include only those with an address equal to the contract address.

2. Decoding Logs:

   • Implement or use existing utilities to decode logs and extract relevant information such as transaction hash, block number, timestamp, and method.
   • Reference the getLogs documentation for detailed instructions on retrieving and decoding logs.

Backend Modifications

1. Event Retrieval:
   • Modify or extend existing functions to handle the retrieval of logs for a specific contract.
   • Ensure that the retrieved logs are filtered and decoded appropriately before being sent to the frontend.

Frontend Modifications

1. Display Events:
   • Modify the contract details page component to include the events table.
   • Ensure the UI is user-friendly and resembles the Etherscan contract details events page (e.g., Etherscan contract details events page).

Validation and Testing

1. Conduct thorough testing to ensure accurate data display.
2. Validate the feature against user stories to ensure it meets the requirements.
3. Ensure the table does not include a search button and does not handle pagination, as specified.

Conclusion

I believe my familiarity with the codebase and my detailed approach make me a suitable candidate for this issue. I am confident in delivering a high-quality solution that meets the project's standards.

Thank you for considering my request. I look forward to contributing further to Walnut's repositories.

Best regards!

[melnikga]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Can I take this? I've worked with a lot of Walnut projects and I'm ready to tackle this issue. In the OP scan project, I was developing token transfers in tx details page (#13 )

How I plan on tackling this issue

To implement the table, I will use the Table component from Shadcn, and to get and display the necessary data, I will use the getLogs function. Since I am well familiar with the structure of the project, it will not be difficult for me to do this work. My profile on OnlyDust: https://app.onlydust.com/u/melnikga

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @saimeunt let me hop on this issue and get it done I am a frontend developer with experience in building and optimizing user interfaces for web applications. My background includes working with javascript, React, Typescript and tailwind css, which are essential for this project. I have a solid understanding of blockchain technologies

How I plan on tackling this issue

Understand the Requirements:

Review the provided user story and the example from Etherscanto understand the expected output. Ensure clarity on the fields required: tx hash, method, block number, timestamp, from, to, type, and item. Set Up the Project:

Clone the existing project and create a new branch for the feature. Install necessary dependencies and set up the development environment. Fetch Data:

Use the contract address provided to fetch the latest NFT transfer events. Utilize the ERC721/1155 contract ABI to decode these events and filter transactions where the to address equals the contract address. Display Data:

Use the shadcn/ui table component to display the fetched data in a structured format. Ensure the table includes all required fields and is styled to match the project's design guidelines. Enhance User Experience:

Display the NFT image using the token URI provided in the transaction metadata. Ensure the table is responsive and provides a seamless experience across different devices.

Documentation:

Document the code and provide a clear explanation of how to use and extend the feature. Ensure any new dependencies or configurations are noted in the project documentation.

[zarah-s]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

With my strong background in Rust, Solidity and JavaScript, I can apply my expertise in solving this issue

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

@saimeunt I'm excited about the opportunity to contribute to the Op Scan Project again. Having successfully implemented the block details page during the last ODHack, I was commended for one of the best PRs ( #issue 19 ). I'm keen to bring the same level of quality and dedication to this new task. With my 3 years of solid background in Next.js, TypeScript, Shadcn, and React, I'm very confident that I will deliver an efficient and user-friendly Contract events page.

How I plan on tackling this issue

Proposed Solution for Contract Page Events

Component Creation:

• I will create a new component in src/components/pages/contract/events.tsx.
• I will reuse components from /txs where applicable to maintain consistency.
• Each tx hash will be a link to the transaction details page.
• Each block number will be a link to the block details page.

Fetching Data:

• I will use an indexer to retrieve all logs emitted from a specific contract. For the MVP, I will use a contract with many events, such as https://optimistic.etherscan.io/address/0xa5f565650890fba1824ee0f21ebbbf660a179934, and fetch the latest events, then filter out the logs having address equal to the contract address.
• I will utilize the getLogs function from viem.sh as mentioned in the resources.
• I will use Next.js's built-in getServerSideProps to fetch the list of events involving the contract, ensuring efficient data loading and SEO benefits.

Table Structure:

• The table will display events with columns: tx hash, block number, timestamp, method, and decoded logs.
• The design will be inspired by Etherscan's contract details events page.

UI Components:

• I will use Shadcn's table component to ensure a cohesive interface.
• The table will be responsive and clean, adhering to the project's design standards.

Performance Optimization:

• I will optimize data fetching by retrieving only necessary events. Efficient data processing techniques will be used to filter and display events.

I'm looking forward to the opportunity to implement this feature and contribute to the Op Scan Project's growth. Thank you for considering my proposal.

[Blumebee]

Hi @martinvibes & @armandocodecr & @od-hunter ! If you haven't yet done so, please apply to the issue via OnlyDust! It will make it much easier to assign. Maintainers will be assigning through the platform. https://app.onlydust.com/hackathons/odhack-60

[ShantelPeters]

I am applying to this issue via OnlyDust platform. Background and Leverage: As a full-stack developer with experience in building scalable and user-friendly web applications, I'm excited to help implement the contract page events feature. My background in software development, particularly with blockchain technologies and web3, has equipped me with the skills to effectively leverage the required resources and technologies.

Approach to the Problem:

1. Research and Understand Requirements: I'll thoroughly review the user stories, validation, and implementation guidelines to ensure I understand the requirements.
2. Choose an Indexer: I'll select a suitable indexer (e.g., Viem) to retrieve logs emitted from a specific contract.
3. Fetch and Filter Logs: I'll implement a solution to fetch the latest events from the contract and filter out logs with addresses equal to the contract address.
4. Display Events Table: I'll utilize the shadcn/ui table component to display the events list as a table, including tx hash, block number, timestamp, method, and decoded logs.
5. Implement MVP: I'll build a minimum viable product (MVP) using the provided contract example and iterate based on feedback.

Solution: My proposed solution involves researching requirements, choosing an indexer, fetching and filtering logs, displaying the events table, and implementing an MVP.

Technical Details:

• I'll utilize JavaScript, React, and web3 technologies to implement the solution.
• I'll leverage the provided resources, including the txs page and shadcn/ui table component.
• I'll ensure the solution is scalable, user-friendly, and easy to maintain. Please give me the opportunity to contribute to this ecosystem. I’ll be able to come up with a PR within 3-5 working days once I am assigned. Please give me the opportunity. Thank you sir.

[martinvibes]

@Blumebee I have done that already ma with the neccessary ways of tackling the issue

[saimeunt]

@armandocodecr assigning to you, please make sure to pull the latest commit before starting your work and don't hesitate to reach out to me should you encounter any issues with the project!

[armandocodecr]

Thanks @saimeunt ! 🚀

[saimeunt]

Hey @armandocodecr it just occurred to me that we're planning to add this library to extract the ABI given a contract address bytecode, I think you will need it to extract the event name and parameters to format it accordingly in the table.

[armandocodecr]

Perfect, thanks for sharing the library with me!

[armandocodecr]

Hey @saimeunt ,

I am trying to install the library you suggested, but I get the error shown in the image when I try to install it. Am I running the correct command? Or is there something else I need to configure beforehand?