Contract page NFT transfers

[saimeunt]

Contract page NFT 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 NFT transfers involving this contract.
The transactions list should be displayed as a table showing tx hash, method, block number, timestamp, from, to, type and item.

Validation

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

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 NFT transfers then filter out the txs having to equal to the contract address.
You will need to fetch the latest Transfer events using the ERC721/1155 contract ABI which you will need to add in the project (use what is already done with ERC20 as an inspiration).
Display the NFT image using standard token URI format (JSON metadata file pointing to an external image).

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

[Oshioke-Salaki]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer (react and Next JS) and blockchain developer(solidity and cairo) ready to tackle this.
This is my onlydust profile - https://app.onlydust.com/u/Oshioke-Salaki

How I plan on tackling this issue

To solve this issue, I would take a look at the indexer to know how it works and figure how I can fetch nft data using the provided test address.

After doing that I would store the data retrieved and filtered data as a state variable which will be used to construct the table and form the rows of the table just like in etherscan.

I would love to work on this issue so much. From my onlydust profile you can see that I have contributed to a lot of projects within the ecosystem and I would love to do the same here.

[juandiegocv27]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Juan Diego Carballo, a full-stack web developer specializing in blockchain technologies. I have a strong background in Typescript, React, and NodeJS, and I am eager to make my first contribution to Walnut's repositories. You can view my technical projects and skills on my OnlyDust profile here: OnlyDust Profile. 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

Plan for Addressing the Issue:

-Indexer Exploration: I will start by understanding the existing indexer integration to ensure that my approach will be compatible with the current system architecture.
-Data Retrieval and Filtering: I plan to utilize the provided test address to fetch and filter NFT data, ensuring the data matches the requirements for displaying NFT transfers.
-UI Implementation: I will implement a dynamic table component to display the data similar to Etherscan. This will involve editing existing components or creating new ones as necessary, while ensuring the use of TypeScript, ESLint, and Prettier for code consistency.

I am committed to following the coding conventions and contributing high-quality code. I look forward to the possibility of an extended collaboration with the Walnut team.

Already run the project in local host 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 NFT Transfer Data:

   • Use an indexer to retrieve NFT transfers for the contract and fetch the latest transfer events

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, type, and item.
   • Populate the table with the filtered NFT transfer data.

5. Validation Against Etherscan:

   • Ensure the layout and data format match Etherscan's contract token transfers page, but customized for NFT transfers.

6. Testing and Deployment:

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

[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 ( issue #19 ), I'm keen to bring the same level of quality and dedication to this new task. With my background in Next.js, TypeScript, Shadcn, and React, I'm confident I can deliver an efficient and user-friendly Contract NFT transfers page.

How I plan on tackling this issue

Proposed Solution for Contract Page NFT Transfers

Component Creation:

• I will create a new component for the NFT transfers list, following the structure of the /txs page for global architecture.
• The component will be placed in the appropriate location within the contract details page.
  I hope to get this task assigned to me

Data Fetching and Processing:

• I will implement an indexer to retrieve all transactions targeting the specific contract address.
• I will fetch the latest NFT transfers and filter out transactions with to equal to the contract address.
• I will implement fetching of Transfer events using the ERC721/1155 contract ABI.
• I will add the necessary ERC721/1155 contract ABI to the project, following the pattern used for ERC20.

Table Structure:

• The table will display NFT transfers with columns: tx hash, method, block number, timestamp, from, to, type, and item.
• Each tx hash will link to the transaction details page.
• Each block number will link to the block details page.

UI Components:

• I will use Shadcn's table component to create the transfers list.
• The design will closely resemble the Etherscan contract details NFT transfers page.
• I will implement NFT image display using the standard token URI format, fetching JSON metadata that points to an external image.

[bhavyagosai]

hey @saimeunt , Bhavya here. I have previously had experience working with starkflare and op-scan wherein I created the account details page regarding address or a contract. I have major experience in nextjs + shadcn + tailwindcss and I am already familiar with the code! I have already setup the project + indexer locally and would love to work on this issue!

To add this section of the contract page what I will do is:

• will use the tx page and shadcn table and such components to build the ui (should not be a hassle for me)
  • create reusable components or use them if already there like copy buttons, question hovers or image cards if deemed necessary.
  • set up hyperlinks, if deemed necessary
  • add the additional info section, if deemed necessary.
• setup and use the indexer for easy quering using the contract mentioned for dev
• fetch data and filter according to the ones being sent to the contract so as to get the relevant list.
  • add the ERC721/1155 contract abi and relevant functions for adding NFT supporting standard just like how ERC20 has been setup
  • fetch data using this and display relevant details. (fetch transfer events and filter and display accordingly)

[Blumebee]

Hi @bhavyagosai & @Oshioke-Salaki ! 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

[Oshioke-Salaki]

i just did. thank you @Blumebee

[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, particularly with blockchain technologies and web3, I'm excited to help implement the contract page NFT transfers feature. My background 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.
2. Choose an Indexer: I'll select a suitable indexer to retrieve transactions targeting a specific address.
3. Fetch and Filter Transactions: I'll implement a solution to fetch the latest NFT transfers and filter out transactions with "to" equal to the contract address.
4. Fetch Transfer Events: I'll use the ERC721/1155 contract ABI to fetch the latest Transfer events.
5. Display NFT Transfers Table: I'll utilize the shadcn/ui table component to display the NFT transfers list.
6. Display NFT Images: I'll fetch and display NFT images using the standard token URI format.

Solution:
My proposed solution involves researching requirements, choosing an indexer, fetching and filtering transactions, fetching transfer events, displaying the NFT transfers table, and displaying NFT images.

Technical Details:

• I'll utilize JavaScript, React, web3, and ERC721/1155 contract ABIs.
• 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.

[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 NFT Transfers

Hi Walnut team,

I am excited about the opportunity to work on this issue. I have previously contributed to Walnut's repositories and have a deep understanding of the codebase.

Technical Plan

Objective

To display a list of NFT transfers involving a specific contract on its details page, showing transaction hash, method, block number, timestamp, from, to, type, and item 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, type, and item for each NFT transfer.

Fetching NFT Transfers

Indexer for NFT Transfers:

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

Fetching and Decoding Events

ERC721/1155 Contract ABI:

• Fetch the latest Transfer events using the ERC721/1155 contract ABI, which needs to be added to the project (use the existing ERC20 contract ABI as a reference).
• Decode the logs to extract relevant information such as transaction hash, method, block number, timestamp, from, to, type, and item.

Display NFT Image

Standard Token URI Format:

• Implement functionality to fetch and display the NFT image using the standard token URI format (JSON metadata file pointing to an external image).

Backend Modifications

Event Retrieval:

• Modify or extend existing functions to handle the retrieval and filtering of NFT transfer events.

API Endpoints:

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

Frontend Modifications

Display Transfers:

• Modify the contract details page component to include the NFT transfers table.
• Ensure the UI is user-friendly and resembles the Etherscan contract details NFT transfers page (e.g., Etherscan contract details NFT transfers 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!

[bhavyagosai]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey, I am Bhavya, a seasoned frontend engineer with two years of professional experience. I have been working with react, nextjs, typescript, shadcn, tailwindcss for a while now and am familiar with Walnut's projects. I have previously contributed to starkflare and op-scan too. I have already setup the project + indexer locally and would love to work on this issue!

How I plan on tackling this issue

To add this section of the contract page what I will do is:

• will use the tx page and shadcn table and such components to build the ui (should not be a hassle for me)
  • create reusable components or use them if already there like copy buttons, question hovers or image cards if deemed necessary.
  • set up hyperlinks, if deemed necessary
  • add the additional info section (eye icon), if deemed necessary.
• setup and use the indexer for easy quering using the contract mentioned for development.
• fetch data and filter according to the ones being sent to the contract so as to get the relevant list.
  • add the ERC721/1155 contract abi and relevant functions for adding NFT supporting standard just like how ERC20 has been setup.
  • basically fetch data using this and display relevant details. (fetch transfer events and filter and display accordingly)