Contract page token transfers

[saimeunt]

Contract page token transfers

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

Validation

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

Do NOT add the "Download Page Data" button and the filters dropdown.
Do NOT handle pagination for the moment.

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 token transfers such as https://optimistic.etherscan.io/address/0x087000a300de7200382b55d40045000000e5d60e and fetch the latest token transfers then filter out the txs having to equal to the contract address.
You will need to fetch the latest Transfer events using the ERC20 contract ABI which is available in the project.

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
• ERC20 contract: https://github.com/walnuthq/op-scan/blob/main/src/lib/contracts/erc-20/contract.ts
• ERC20 token transfers in transaction details page: https://github.com/walnuthq/op-scan/blob/main/src/lib/utils.ts#L77

[ShantelPeters]

Hello ,I can be assigned this to work on this issue

[MarvyNwaokobia]

I would love to work on this issue. If given this issue, this would be my first time contributing to WalnutHq. To solve this issue, i would go to the /txs page to check out for the global architect to have a feel of what to do.

then i would set up my code so i fetch data and store in state.

next i would implement the table to contain the fetched data having filtered out txns having to equal to the contract address.

this is my onlydust profile - https://app.onlydust.com/u/MarvyNwaokobia

[juandiegocv27]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Juan Diego Carballo, eager to contribute to the token transfers feature on the contract details page. My expertise in TypeScript and blockchain development aligns well with the project's requirements. I have actively participated in events like StarkHack and a hackerhouse in Brussels, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Dojo Coding community 🇨🇷. Yhis is my first contribution to Walnut’s Repositories.

How I plan on tackling this issue

Why may do to fix the issue:

-Data Fetching: Use the indexer to filter ERC20 'Transfer' events for the specified contract address, capturing relevant transaction details.
-UI Implementation: Develop a table on the contract details page to display transaction hash, method, block, timestamp, from, to, amount, and token type, excluding pagination and download features for simplicity.
Resources: I'll leverage components and architecture from /txs and utilize shadcn/ui tables for consistent UI.
-You can find more about my projects and skills on my GitHub: GitHub Profile and OnlyDust profile: OnlyDust Profile.

I look forward to contributing to this feature and enhancing user experience on the OP Scan platform.

Already run the project in local and the db:

[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 Token Transfer Data:
   I'll fetch the token transfer data

2. Filter Transactions:

   • Filter the transactions to include only those where the to address matches the contract address.

3. Design the UI:

   • Create a layout similar to Etherscan's token transfers page.
   • Include a section for the transactions table.

4. Implement the Transactions Table:

   • Create a table with columns for tx hash, method, block number, timestamp, from, to, amount, and token.
   • Populate the table with the filtered token transfer data.

5. Validation Against Etherscan:

   • Ensure the layout and data format match Etherscan's contract token transfers page,

6. Testing and Deployment:

   • Test the feature to ensure it displays correctly and handles the data as expected.

[martinvibes]

i'm applying this issue via OnlyDust Platform

###My background and how it can be leveraged

@saimeunt let me take on this issue
i'm a frontend developer and i would love to participate and be a contributor in this repo

i'm skilled in javascript ,React and typescript

[Dprof-in-tech]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello
I’m Isaac, a JavaScript developer with notable experience contributing to projects on OnlyDust on and off the ODHACK. I am a returning contributor to your project and would love to contribute more here.

I’m skilled in using JavaScript and typescript to build out efficient solutions and this experience of mine can be seen on my OnlyDust profile at https://app.onlydust.com/u/Dprof-in-tech and on my GitHub at https://github.com/dprof-in-tech

I have my proposed solution to this issue below.

How I plan on tackling this issue

To solve issue #40

I will use shadcn ui table to build out the token transfer table component.

Using the transactions page as inspiration, I would fetch the transactions matching to the contract address from the indexer as specified and display them on this table component.

I would be sure to adhere strictly to the issue guidelines as stated and work with them.

[Blumebee]

Hi all @MarvyNwaokobia @ShantelPeters ! 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

[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 Transactions

Hi Walnut team,

I am excited about the opportunity to work on this issue. I have previously contributed to Walnut's repositories, demonstrating my ability to deliver high-quality solutions that meet project standards. Below, I have outlined a detailed plan on how I will approach and solve this issue.

Technical Plan

Objective

To display a list of transactions interacting with a specific contract on its details page, showing transaction hash, method, block number, timestamp, from, to, amount, and transaction fee in a table format.

Step-by-Step Implementation

UI Component

Table Integration:

• Use the table component from shadcn/ui as described in their documentation.
• The table will display transaction hash, method, block number, timestamp, from, to, amount, and transaction fee for each transaction.

Fetching Transactions

Indexer for Transactions:

• Use an indexer to retrieve all transactions targeting the specific contract address.
• For the MVP, use a contract with a significant number of transactions, such as this example contract, and fetch the latest transactions.
• Filter the transactions to include only those with the "to" address equal to the contract address.

Reusing Components

Existing Components:

• Reuse components already built for other pages displaying transactions (e.g., /block/:number/txs and /txs).
• Ensure consistency in design and functionality with other transaction pages.

Backend Modifications

Transaction Retrieval:

• Modify or extend existing functions to handle the retrieval and filtering of transactions for the specified contract.

API Endpoints:

• Develop or modify existing API endpoints to serve transaction data to the frontend.

Frontend Modifications

Display Transactions:

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

Validation and Testing

• Conduct thorough testing to ensure accurate data display.
• Validate the feature against user stories to ensure it meets the requirements.
• Ensure the table does not include a "Download Page Data" button or filters dropdown, and does not handle pagination, as specified.

Conclusion

Given my previous contributions to Walnut's repositories and my familiarity with the codebase, I am confident in my ability to resolve this issue effectively.

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

Best regards!

[saimeunt]

@melnikga 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!

[melnikga]

@saimeunt ok, thanks a lot!