Contract page token holdings

[saimeunt]

Contract page holdings

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a contract page, I want to see all the contract token holdings both in token quantity and dollar value, I want to see every ERC20 as well as ERC721/1155 for NFTs. When I click on the token holdings combobox, I can search for a particular token by name, and it should display some details about the selected token holding, such as quantity, dollar value and the spot price taken to compute the current dollar value.

Validation

It should look like the Etherscan contract page token holdings, eg. https://optimistic.etherscan.io/address/0x5ae97e4770b7034c7ca99ab7edc26a18a23cb412

Do NOT implement a dedicated token holdings page, it will be done in a separate issue. Stick to the minimum viable feature, do NOT implement token holdings sorting.

Implementation

Use the combobox component from shadcn/ui. For token prices, you can use the Coinbase spot price API, feel free to use something else if you find a better alternative. This feature will highly benefit from using an indexer to keep track of the contract token holdings, for the time being it's okay to build an MVP of the feature by tracking token transfers from the most recent blocks and using these logs to fetch the contract balance of the specific tokens found in the latest logs.

Resources

• shadcn/ui combobox: https://ui.shadcn.com/docs/components/combobox
• Coinbase spot price API: https://docs.cdp.coinbase.com/sign-in-with-coinbase/docs/api-prices/#get-spot-price
• ERC20 token transfers in transaction details page: https://github.com/walnuthq/op-scan/blob/main/src/lib/utils.ts#L77

[ShantelPeters]

Please can I be assigned to work on this issue,this is my first time applying for an issue

[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/ metacrypt.vercel.app

Here's how I plan to handle the issue

1. Fetch Token Data Integrate APIs to fetch token holdings and prices for ERC20 and ERC721/1155 tokens.

2. Design UI Components Create a layout with sections for token holdings and a searchable combobox. Ensure the design resembles Etherscan's token holdings page.

3. Add Search Functionality: Implement a combobox to search for tokens by name. -Display details (quantity, dollar value, spot price) for the selected token.

4. Validate Against Etherscan: Ensure the UI and data match the format and accuracy of Etherscan's contract page token holdings.

5. Testing and Deployment: Test to ensure compatibility.

[jaipaljadeja]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i can take this : )

[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'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 Token Holdings feature.

How I plan on tackling this issue

Proposed Solution for Contract Page Token Holdings

Component Creation:

• I will create a new component for displaying token holdings on the contract page.
• The component will show both ERC20 and ERC721/1155 (NFT) holdings.

Data Fetching and Processing:

• I will implement a system to track token transfers from recent blocks.
• Using these logs, I'll fetch the contract balance for specific tokens found in the latest logs. I'll integrate the Coinbase spot price API (or a suitable alternative) to fetch token prices for dollar value calculations.

Advanced and Fast Fetching Techniques:

• I will implement server-side rendering (SSR) with getServerSideProps for initial data loading.

UI Components:

• I will implement a combobox using the shadcn/ui component for token selection and search.
• The design will closely resemble the Etherscan contract page token holdings.
• The combobox will allow users to search for tokens by name.
• When a token is selected, I'll display details including quantity, dollar value, and the spot price used for calculations.

Token Holdings Display:

• I will show token holdings in both token quantity and dollar value.
• The display will include all ERC20 tokens and ERC721/1155 for NFTs.

I hope to get this issue assigned to me. i will deliver an excellent work. Thanks

[Blumebee]

@coxmars @jaipaljadeja @danielcdz @josephchimebuka @melnikga @ShantelPeters Hi all! 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

[jrmncos]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hey team! I'm a backend software engineer with more than 5 years of experience (but web2, I will not lie) I'm migrating to web3, so I would like to work on this one

How I plan on tackling this issue

the issue is very self explanatory (better than my job) I'll do it