Data tile FE: Entrypoints and Transactions

[mazurroman]

Feel free to join our telegram to get latest updates: https://t.me/+DYI4FMia43I1NDI8

Related backend tasks:

• Data tile BE: Entrypoints burning most steps #9
• Data tile BE: Transactions burning most steps by entrypoint ID #10

Implement the "Entrypoints and Transactions" tile (file named entrypoints.tsx) based on the following description and mock.

• It should contain an input field, where the user can specify a contract ID. The default contract ID will be pre-set to Carmine
• It should contain a list of Entrypoints of a given contract, sorted by the amount of steps used. Use vertical scroll if the list is too large
• Above entrypoints, there will be a visualisation of each entrypoint usage. See the "Visual inspiration for the Entrypoints section" screenshot below
• On the right side, there will be a "Transactions" section with a list of transactions for a selected Entrypoint. It will be possible to select a different entrypoint using a little select box in the description below "Transactions" header (see mock below). Each transaction will contain a hash and a number of steps consumed. Bonus points for also showing the timestamp of the transaction.

Visual inspiration for the Entrypoints section:

Mock of the whole tile:

Note: if the backend tasks are not ready, it's OK to mock the data in a hardcoded JSON.

Specification missing: ‼️
Update based on our ability to get the data from the API; cc @barabanovro

[bhavyagosai]

Hey, I am Bhavya, a seasoned frontend engineer with two years of professional experience. Saw the project is using nextjs + tailwindcss + shadcn/radix where I have significant experience and have worked with them in my past projects. I can pick this issue up if its okay. You can assign it to me as odhack starts! The mocks should substantially help in the dev.

How I will approach this -

• will add the contract input using shadcn component
• will create a table like structure for entrypoints data and cap the rows a certain number from where it can scroll if more rows exist. Percentage can be calculated using the steps data and list can be sorted accordingly.
• By using the percentage data I can create the entrypoint usage visualisation component and make it dynamic so it can be reused.
• Similarly I can create the transactions section with using a dropdown/select component from shadcn and current transaction data can be changed and displayed based on the active state of the entrypoint dropdown
• noticed that we use recharts library, StackedBarCharts can be used to achieve the entrypoints visual

I understand that I although I have been actively contributing to the starknet ecosystem, I have not yet got a chance to showcase myself for walnut and the projects associated with it. I notice the difficulty level mentioned here is hard but nevertheless my explanation regarding the approach for this should be proof enough for my caliber to solve this.

[melnikga]

Can I take this?

I think it is necessary to divide the "Entrypoints and Transactions" tile into the EntrypointsAndTransactions, EntrypointsList, EntrypointVisual and TransactionsList components.
EntrypointsAndTransactions component will contain an input field for the contract, an Entry Points section, and a Transactions section.
EntrypointsList will include a list of entry points sorted by the number of steps taken.
EntrypointVisual is a component for visualizing the use of entry points. In the package.json file I noticed that you decided to use the recharts library to visualize the data. I have studied the documentation for this library in detail and suggest using the MixBarChart or StackedBarChart component to visualize entry points. And TransactionsList will display a list of transactions for the selected entry point.

[khayss]

Can I take up this issue?

[Ugo-X]

Hello good evening @mazurroman my name is Ugonna and I am a full-stack developer. I have worked on quite a number of projects before now, including previous OD hacks. You can check my profile to see my contributions. From the issue above I plan on tackling it by following the brief mockup design and also incorporating elements from the design inspo while making sure to adhere to the specifications for any part of the feature.
Please can I be assigned this issue?

[VictoriaAde]

Hi, I have a good idea of how this would work.
I am a developer with a good years of experience.
I would like to work on this.

[mazurroman]

Thank you to everyone interested!

@bhavyagosai I am assigning it to you because your comment was first and very thorough. Your past experience also shows that you should have the relevant skills to work on this task. Good luck!