Data tile FE: contracts burning most steps

[mazurroman]

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

There is a placeholder component called contracts.tsx. The goal of this task is to build the UI of this component.

It is safe to assume that the data format coming from the API will look like this:

contract name, address, number of steps, percentage consumption

The backend task related to this one is here: https://github.com/walnuthq/starkflare/issues/5

Todo:

• Create UI of this tile based on the mock attached
• If the backend task is already done, connect the frontend to the API. Otherwise just hardcode some dummy data on the frontend to make it look good
• The UI will contain a list of contracts sorted by the most expensive ones. The list will show 10 contracts and then "Others" for the rest. If there is not enough vertical space, there will be a scroll bar for the contract list.
• Each contract in the list will contain the following data: contract label (or address if doesn't exist), contract name, number of steps consumed, percentage amount of the ratio of a given contracts consumption vs the rest
• Clicking the contract label in the UI will copy it's address. After clicking, a tooltip saying "Contract address copied" will appear for a couple of seconds.
• Piechart to visualise the data
• Hovering on the piechart will show which contract is being hovered

[Ayoazeez26]

Hi, my name is Abdulhakeem and I am a frontend dev with over 6 years experience and I will like to work on this.

I hope to implement this by having a contractlist component and a piechart component to display the list of contracts and the pie chart respectively. I would make use of flexbox to layout the tile and ensure that the contract list and pie chart are displayed side by side or as per the design. I would use Fetch API to retrieve the contract data from the API if it's available or create a sample dataset to use as dummy data.

I would display the most expensive contracts using the sort() or toSorted() array methods.

I would use JavaScript's Clipboard API to implement the add-to-clipboard functionality

The contractlist component would have a reusable component card that would take the contract name, address, number of steps, percentage consumption as props and the contractlist component would map the data returned from the API to display the list of card components.

[melnikga]

Can I take this?

[martinvibes]

Hi my name is Martin Machiebe i am a frontend dev and i would love to work on this I can build this using separate sections for contract details and a chart. I'll get contract data and display the most expensive ones first.

This sentence explains the functionality in simpler terms, focusing on the user experience:

Separate sections for easy viewing. Data retrieval and sorting. Copying functionality. Here's a breakdown of the choices made:

Removed technical details: Flexbox, Fetch API, sort methods, etc. These are implementation details not relevant to the user's understanding. Focused on user benefits: Easy access to information, sorting for quick reference, and a convenient way to copy details. Simplified sentence structure: Shorter sentence for better readability.

[RashidElmirzoev]

@mazurroman Hey, my name is Rashid. I have extensive experience in web application development. I primarily work with the Nextjs + TS stack. At my previous job, I frequently had to deal with developing pie charts, so I can definitely handle this task. Here's the proposed solution: Handling input data: In the Contracts component, I would define a state to store the contract data. If the backend task is already completed, I would fetch the data from the API when the component mounts using the fetch API.

Sorting and formatting data: I would sort the received contract data in descending order of consumption using the sort() function.

Implementing address copying functionality: To copy the contract address on click, I would use the navigator.clipboard.writeText() function.

Creating the pie chart component: I would create a separate PieChart component that would take the prepared data for the pie chart and render it using the PieChart component from recharts.

Handling pie chart Sector Hover: To display contract information when hovering over a pie chart sector, I would use the onMouseEnter and onMouseLeave props of the PieChart component from recharts. The tooltip on hover over the chart can be implemented using react-tooltip.

[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]

Assigning to @melnikga who is a returning contributor at Walnut and was first here with a comment (@Ayoazeez26 your edit came after @melnikga).

Thanks to everyone for showing your interest!

[Ayoazeez26]

Assigning to @melnikga who is a returning contributor at Walnut and was first here with a comment (@Ayoazeez26 your edit came after @melnikga).

Thanks to everyone for showing your interest!

@mazurroman I edited my comment to explain how I would achieve the task after I saw the guidelines on the telegram group, my initial comment was a simple I would like to work on this task