Closed saimeunt closed 1 month ago
I am applying to this issue via OnlyDust platform.
Hi, I have already worked on this project on a similar project, plus I got experience on Typescript and Nexxt
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 (#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 Transaction Data:
Design the UI:
Implement the Transactions Table:
Validate Against Etherscan:
Testing and Deployment:
I am applying to this issue via OnlyDust platform.
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.
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.
I am applying to this issue via OnlyDust platform.
@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.
src/components/pages/contract/transactions.tsx
./block/:number/txs
and /txs
.getServerSideProps
to fetch the list of transactions interacting with the contract, ensuring efficient data loading and SEO benefits.tx hash
, method
, block number
, timestamp
, from
, to
, amount
, and tx fee
.I hope to get this task assigned to me and watch me perform my magic. Thanks
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
I am applying to this issue via OnlyDust platform.
Hello, I'm Mariangela. I'm a software developer specializing in front-end development, and I would like to work on this project.
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.
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.
@saimeunt , Thanks a lot. I will begin working on this project as soon as possible.
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 havingto
equal to the contract address.Resources