Closed saimeunt closed 2 months ago
Hello ,I can be assigned this to work on this issue
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
I am applying to this issue via OnlyDust platform.
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.
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:
I am applying to this issue via OnlyDust platform.
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 (https://github.com/walnuthq/op-scan/issues/13 )
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
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
Fetch Token Transfer Data: I'll fetch the token transfer data
Filter Transactions:
to
address matches the contract address.Design the UI:
Implement the Transactions Table:
Validation Against Etherscan:
Testing and Deployment:
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
I am applying to this issue via OnlyDust platform.
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.
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.
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
I am applying to this issue via OnlyDust platform.
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.
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.
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.
Table Integration:
Indexer for Transactions:
Existing Components:
/block/:number/txs
and /txs
).Transaction Retrieval:
API Endpoints:
Display Transactions:
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!
@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!
@saimeunt ok, thanks a lot!
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 havingto
equal to the contract address. You will need to fetch the latestTransfer
events using the ERC20 contract ABI which is available in the project.Resources