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: #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

There is a placeholder tile for the "Transactions count and steps used" data tile. The component is called TxStepsStats (tx-steps.tsx). It's using dummy data and so the goal is to connect the tile with the backend and "make it work".

Backend:

Update the get_common_data function in the https://github.com/walnuthq/starkflare-indexer backend repo to include two new fields:

1. An array containing the number of transactions for each of the last 7 days.
2. An array containing the number of steps for each of the last 7 days."

Implement a new function to retrieve this data and call it from within the get_common_data function.

Note: These new fields should be added to the existing response format of get_common_data without modifying the other fields.

Frontend

Update the frontend to meet the attached mock (labels for x and y axes, two data lines, total weekly numbers at the top of the tile for both tx count and steps used)

Mock:

Tips:

• Use the "Total users" data tile as an example. Initially it's the only tile that is already working
• This is primarily a task for the backend. If frontend help is needed, please let us know, and we will create a separate, frontend-only task that will simply consume the APIs created here and assign it to someone more experienced with frontend development.

About Starkflare

See Readme.

How to get an issue assigned

At Walnut, we highly value code quality. We ensure that only the best contributors work on our code, which is why our selection process is careful and thorough.

We do not assign issues on a first-come, first-served basis. Primarily, we assign issues to contributors who have previously worked with us. However, if you are new, don’t worry—we are eager to attract new talent. We just need to get to know you and ensure you have the skills to complete the task. Below are detailed instructions on how to get an issue assigned.

If It’s Your First Contribution to Walnut’s Repositories

1. Add a comment briefly introducing yourself.
2. Provide detailed technical instructions on how you plan to accomplish the task. Mention which functions or files you plan to edit and what code you intend to write.

Note: Once you finish your first issue with us, you won’t need to provide detailed instructions anymore; a simple “I am up for it” comment will suffice!

If You Have Already Contributed to Any of Walnut's Repositories

Just comment that you are up for the work, and we will assign the issue to you.

🤗 Get updates from us

• Join the Walnut contributors chat on Telegram.
• Click "Follow" on the Walnut GitHub profile to stay updated on our upcoming projects.
• Support us with a follow on X.

⚠️ ATTENTION: This is a DRAFT task for the upcoming OD Hack. We will start assigning issues after Thursday, May 23rd. Feel free to join our telegram to get latest updates: https://t.me/+DYI4FMia43I1NDI8

Backed task for creating the API: #7

The data format returned from the API:

tx hash, timestamp, amount of steps consumed, block number

The goal of this task is to update the txs-steps-burned component with a list of transactions that used the highest amount of steps. Each line in the list should present the transaction hash, amount of steps burned, timestamp.

Tips:

• If the backend task is not yet ready, it's OK to hardcode some dummy data on the frontend to make it ready for a demo.

Broken links in navbar

At the bottom of the app (above footer) add a title with a button that will encourage people to contribute to this project.

Title text: Have ideas to make cairovm.codes better?
Button text: Contribute on GitHub
Link url: https://github.com/walnuthq/starkflare

Visual inspiration: https://cairovm.codes/ (scroll down to the relevant section)

Contributor guidelines: #12

walnuthq/starkflare-indexer#3

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

Update the get_common_data function in the https://github.com/walnuthq/starkflare-indexer backend repo to include a new field in the response called top_transactions_by_steps. This field should contain a list of the top 10 transactions that consumed the highest amount of steps over the last 7 days.

For each transaction in the top_transactions_by_steps list, include the following data:

• Transaction hash
• Number of steps consumed
• Timestamp of the transaction
• Block number in which the transaction was included

Implement a new function to retrieve this data and call it from within the get_common_data function.

Note: The top_transactions_by_steps field should be added to the existing response format of get_common_data without modifying the other fields.

The exact data format as well as more instructions defined in: #8

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

Update get_common_data function to include top contracts by steps

1. Modify the get_common_data function in the starkflare-indexer backend repository (https://github.com/walnuthq/starkflare-indexer) to include a new field called top_contracts_by_steps in the response.

2. The top_contracts_by_steps field should contain a list of the top 10 contracts that consumed the highest amount of steps over the last 7 days.

3. For each contract in the top_contracts_by_steps list, include the following data:

   • Contract hash
   • Number of steps consumed
   • Percentage of total steps consumed by the contract

4. Implement a new function to retrieve the top contracts by steps data and call it from within the get_common_data function.

5. Ensure that the top_contracts_by_steps field is added to the existing response format of get_common_data without modifying the other fields.

Create Next.js server API endpoint for enhanced contracts data

1. Implement a new API endpoint in this Next.js repository that fetches data from the starkflare-indexer endpoint created in the previous step.

2. Enhance the data returned by the starkflare-indexer endpoint by adding contract names to the response. To obtain the contract names:

   • Use the Voyager API (https://docs.voyager.online) to fetch the contract names based on the contract hashes

3. The final response from this Next.js API endpoint should include:

   • Contract hash
   • Number of steps consumed
   • Percentage of total steps consumed by the contract
   • Contract name

4. Implement proper error handling and validation of the data received from the starkflare-indexer endpoint to ensure data integrity and reliability.

5. Follow Next.js best practices and coding conventions while implementing the API endpoint.

⚠️ ATTENTION: This is a DRAFT task for the upcoming OD Hack. We will start assigning issues after Thursday, May 23rd. Feel free to join our telegram to get latest updates: https://t.me/+DYI4FMia43I1NDI8

Add number of users incl diff from last period (new vs lost)
Add question mark with info about the tile (TBD: copy)

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

Related backend tasks:

• #9
• #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

walnuthq/starkflare-indexer#4

Preparing issues, doing reviews, coordinating contributors.

walnuthq/starkflare-indexer#1

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

Add a "dropdown" to the header (top right) with a label "7 days", to indicate that all of the data is for the last week.

The dropdown will be disabled and it won't be possible to change it - initially only 7 days will be supported. There will be a new issue in the future to make this selector work.

To make things clear, also add a tooltip. After a user hovers on the selector, this text will pop up: "Currently only 7 day time frame is supported."

walnuthq/walnut-landingpage#21

walnuthq/starkflare-indexer#2
walnuthq/starkflare-indexer#5

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

Create an API endpoint in the https://github.com/walnuthq/starkflare-indexer backend repo that accepts two parameters: contract hash and entrypoint selector. The endpoint should return a list of transactions for the given contract and entrypoint, sorted by the number of steps consumed in descending order.

The returned data for each transaction should include:

• Transaction hash
• Number of steps consumed
• Timestamp of the transaction

Follow the guidelines outlined in the starkflare-indexer repository. Note that this endpoint should be implemented separately from the get_common_data endpoint as it requires specific arguments.

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

Implement API endpoint for contract entrypoint steps consumption

1. Create an API endpoint in the starkflare-indexer backend https://github.com/walnuthq/starkflare-indexer that accepts a contract hash as a parameter and returns a list of entrypoints for the given contract, sorted by the total number of steps consumed over the last 7 days.

2. For each entrypoint, the endpoint should return:

   • Entrypoint selector
   • Total number of steps consumed
   • Percentage of steps consumption compared to other entrypoints in the contract

3. Follow the guidelines in the starkflare-indexer repository when implementing this new endpoint.

Create Next.js server API endpoint for enhanced contract entrypoint data

1. Implement a new API endpoint in this Next.js repository that fetches data from the starkflare-indexer endpoint created in the previous step.

2. Enhance the data returned by the starkflare-indexer endpoint by adding entrypoint names to the response. To obtain the entrypoint names:

   • Fetch the contract ABI from the node provider
   • Use the ABI to map entrypoint selectors to their corresponding names

3. The final response from this Next.js API endpoint should include:

   • Entrypoint selector
   • Entrypoint name
   • Total number of steps consumed
   • Percentage of gas consumption compared to other entrypoints in the contract

4. Ensure proper error handling and validation of the data received from the starkflare-indexer endpoint.

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

The dashboard already contains a placeholder for the "L1 gas spent" data tile. It's currently using static data and the goal of this task is to connect the tile to the server, query live data and polish the tile.

Backend:

Update the get_common_data function in the https://github.com/walnuthq/starkflare-indexer backend repo to include a new field - an array containing the number of L1 gas spent for each of the last 7 days.

Implement a new function to retrieve this data and call it from within the get_common_data function.

Note: This new field should be added to the existing response format of get_common_data without modifying the other fields.

Frontend:

• Add labels to the x axis: "M", "T", "W", "T", "F", "S", "S" to indicate days of week
• Add hover tooltip. After hovering, the tooltip will show the amount of ETH spent for the particular day
• Add question mark with explanation about this tile (@mazurroman to provide the copy)

The L1 gas spent component file: gas-spent.tsx.