Contract page transactions

[saimeunt]

Contract page transactions

⚠️ 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 transactions interacting with this contract.
The transactions list should be displayed as a table showing tx hash, method, block number, timestamp, from, to, amount and tx fee.

Validation

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

Do NOT add the "Download Page Data" button and the filters dropdown.
Do NOT handle pagination for the moment.
You must reuse some of the components already build for the other pages displaying transactions (/block/:number/txs and /txs).

Implementation

You can use the transactions page as an inspiration for the global architecture, see /txs.
We will need to use an indexer to retrieve all the transactions targeting a specific address, to build an MVP of the feature you can use a contract with a lot of transactions such as https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e and fetch the latest transactions then filter out the txs having to 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

[adrianvrj]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I have already worked on this project on a similar project, plus I got experience on Typescript and Nexxt

How I plan on tackling this issue

• Read the code carefully.
• Add necessary components.
• Add necessary pages in Contract dir and develop the necessary HTML and CSS to look like Etherscan contract details transactions page.
• Code a fetch method to retrieve the data of the contract and display the transactions.

[melnikga]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I can 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

The file https://github.com/walnuthq/op-scan/blob/main/src/lib/contracts/erc-20/contract.ts it was developed by me at the previous hackathon, therefore it will not be difficult for me to make a similar component using the Table from shadcn again.
My profile on OnlyDust: https://app.onlydust.com/u/melnikga

[josephchimebuka]

Hello @saimeunt I am a software developer and I am proficient in Reactjs, typescript, nextjs, solidity I am contributed to some projects on Odhack here is my profile https://app.onlydust.com/u/josephchimebuka and here are couple of projects I have worked on https://bethelapp.com/ https://metacrypt.vercel.app/

Here's how I plan to handle the issue

1. Fetch Transaction Data:

   • I will use an API to retrieve transaction data for the contract.

2. Design the UI:

   • Then I'll create a layout similar to Etherscan's contract details transactions page.
   • Include a section for the transactions table.

3. Implement the Transactions Table:

   • I'll create a table with columns for tx hash, method, block number, timestamp, from, to, amount, and tx fee.
   • Then populate the table with the fetched transaction data.

4. Validate Against Etherscan:

   • Ensure the layout and data format match Etherscan's contract details transactions page.

5. Testing and Deployment:

   • Test the feature to ensure it displays correctly and handles large datasets.
   • Deploy the feature and verify its functionality on the desired network.

[Ugo-X]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello Project Lead! I'm Ugo, a fullstack(js,React,Node,Next.js,Three.js) developer with a strong track record in OD hack projects. I've been actively involved since Edition 1, successfully contributing to various initiatives including op-scan on the last OD-hack, and I'm thrilled to be part of Edition 6!
Having used OnlyDust extensively (see my profile: https://app.onlydust.com/u/Ugo-X)), I'm confident in my ability to tackle new challenges within this edition.
I'm eager to leverage my skills and experience to contribute effectively.

How I plan on tackling this issue

To solve issue #41

I will use shadcn ui table to build out the transactions page as specified.

Then build out the mvp by filtering through transactions to match a specific contract address, then reiterate through the solution to make for a better function fix. I would be sure to adhere to the instructions as given in the issue description.

[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. 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 sure that i will deliver an efficient and user-friendly Contract page transactions.

How I plan on tackling this issue

Proposed Solution for Contract Page Transactions

Component Creation:

• I will create a new component in src/components/pages/contract/transactions.tsx.
• I will reuse components from /block/:number/txs and /txs.
• 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 transactions targeting a specific address.
• For the MVP, I will use a contract with a lot of transactions, such as https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e, and fetch the latest transactions, then filter out the transactions with to equal to the contract address.
• I will use Next.js's built-in getServerSideProps to fetch the list of transactions interacting with the contract, ensuring efficient data loading and SEO benefits.

Table Structure:

• The table will display transactions with columns: tx hash, method, block number, timestamp, from, to, amount, and tx fee.
• The design will be inspired by Etherscan's contract details transactions 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 transactions.
• Efficient data processing techniques will be used to filter and display transactions.

I hope to get this task assigned to me and watch me perform my magic. Thanks

[Blumebee]

Hi @adrianvrj ! 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

[MariangelaNM]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Mariangela. I'm a software developer specializing in front-end development, and I would like to work on this project.

How I plan on tackling this issue

• Component Preparation and Reusability:
  Make necessary adjustments to these components for seamless integration into the contract details page.

• Indexer Configuration:
  Utilize the API to fetch all transactions associated with the contract address.
  Apply a filter to ensure that the to field in the transactions matches the specified contract address.
  Implement error handling and data validation to ensure the accuracy and reliability of the retrieved data.

• Table Construction:
  Implement the Table component from shadcn/ui.
  Format the retrieved transaction data appropriately and feed it into the table component.
  Ensure the table supports sorting, filtering, and pagination to enhance user experience.

• Integration:
  Import the ContractTransactions component and integrate it into the contract details page.
  Conduct thorough testing to ensure the component works as expected and displays accurate transaction data.
  Optimize the performance of the component to handle large datasets efficiently.

[ScottyDavies]

I am applying to this issue via OnlyDust platform.
As a frontend developer, I would approach this problem in the following way:

Understand the Requirements:
Carefully review the user stories and the provided Etherscan example to fully understand the expected functionality and UI.
Identify the key elements that need to be displayed in the transactions table (tx hash, method, block number, timestamp, from, to, amount, tx fee).
Design the UI and Components:
Create a wireframe or mockup of the contract details page, including the transactions table.
Break down the UI into reusable components, such as a ContractDetailsPage, TransactionsTable, and individual TransactionRow components.
Determine the data structure and shape that will be used to represent the transaction data.
Implement the Data Fetching:
Identify the necessary API endpoints or data sources to retrieve the contract transaction data.
Implement a function or service to fetch the transaction data, potentially using a library like Axios or the Fetch API.
Handle any error cases, such as network errors or empty data responses.
Populate the Transactions Table:
Create the TransactionsTable component that will render the table of transactions.
Use the fetched transaction data to populate the table rows, mapping the data to the appropriate columns.
Implement sorting and pagination functionality if required, to handle a large number of transactions.
Style the UI:
Apply the appropriate styles to the ContractDetailsPage and TransactionsTable components to match the provided Etherscan example.
Ensure the table layout, column widths, and overall appearance are consistent with the design.
Leverage a UI library (e.g., DaisyUI, Material UI, Ant Design) or write custom CSS to achieve the desired look and feel.
Implement Interactivity:
Add event handlers and functionality to allow users to interact with the transactions table (e.g., sorting, filtering, navigating to transaction details).
Implement any additional features, such as the ability to copy the transaction hash or view the transaction on the blockchain explorer.
Test and Refine:
Write unit tests to ensure the correct rendering and functionality of the ContractDetailsPage and TransactionsTable components.
Conduct integration tests to verify the end-to-end flow of fetching data, rendering the table, and handling user interactions.
Gather feedback from stakeholders and refine the implementation based on their input.
As an experienced frontend developer, I can leverage the following skills and knowledge to address this problem:

React.js expertise: I have a strong understanding of React.js and its component-based architecture, which will be crucial for building the UI and managing the state.
API integration: I have experience integrating with various APIs to fetch and consume data, which will be necessary for retrieving the contract transaction data.
UI design and styling: I can design a visually appealing and responsive UI that aligns with the provided Etherscan example, utilizing CSS or a UI library.
Interactivity and user experience: I can implement interactive features, such as sorting and filtering, to provide a smooth user experience.
Testing and quality assurance: I can write comprehensive tests to ensure the correctness and reliability of the implemented solution.
Attention to detail: I can ensure the final implementation matches the provided design and meets the specified requirements.
By applying these skills, I can deliver a high-quality contract details page with a transactions table that meets the user's needs and provides a seamless experience for accessing contract-related information.

[Benjtalkshow]

@saimeunt ,
Thanks a lot. I will begin working on this project as soon as possible.