Latest blocks page

[saimeunt]

Latest blocks page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

• As a user, I want to see the list of the latest block created on the blockchain by visiting /blocks
• I want to see a table of the list of newly created blocks as well as the entire history through pagination. The detail for each block should be block number, timestamp, txns count, gas used and gas limit.

Validation

It should look like the Etherscan latest blocks list: https://optimistic.etherscan.io/blocks

For the gas used column, you should add the percentage against gas limit and you can show a progress bar using https://ui.shadcn.com/docs/components/progress Don't forget to add links to block details page /block/:number and block txs /block/:number/txs page.

Do NOT include block metrics such as Network utilization, block size, etc. Do NOT add a "Download Page Data" button. Do NOT add a "Show rows" dropdown, this is out of scope for this issue.

Implementation

Use a simple table from shadcn/ui, always display 25 blocks and use a query parameter to handle pagination: If current block head is 100 then

• /blocks => blocks 100 => 76
• /blocks?p=2 => blocks 75 => 51
• /blocks?p=3 => blocks 50 => 26 Use client state to keep track of the latest block number upon first visiting the page, and use this as a reference for navigation: when we click on page 2, we want to see the next 25 blocks from the initial block head (100), not the next 25 blocks from the new current block head.

You must use NextJS best practices about handling query parameters, in particular, read searchParams from the top-level Page component and use a React Server Component to fetch the blocks needed. Do NOT fetch the blocks client-side.

Resources

• shadcn/ui Table component: https://ui.shadcn.com/docs/components/table
• shadcn/ui Progress component: https://ui.shadcn.com/docs/components/progress
• NextJS docs about query parameters: https://nextjs.org/docs/app/api-reference/functions/use-search-params#server-components

[adrianvrj]

Hi! Can I hop on this? I have already worked on a similar issue and think I can handle this!

Plus I am already working on the block transactions issue, I think I can work on this as a continuation of that issue.

How I would approach this:

• Create the component for block display.
• Populate the component with the necessary data.
• Create the necessary directories to ensure the path /blocks can be accessed.
• Run tests.

[MariangelaNM]

Hi, i would like work in this issue

Detailed Approach to Creating a Block Display Component

1. Configure Route Access Ensure that the /blocks route is correctly set up in your application's routing system. This involves configuring the appropriate routing so that when users access this route, they are presented with the block display component.

2. Testing and Validation Once the component is integrated and the route is configured, conduct testing to verify that everything functions as expected. Test various scenarios, such as viewing different pages of blocks if pagination is implemented, and ensure that data is displayed correctly in the user interface.

3. Optimization and Enhancements If necessary, optimize the component and data integration to improve performance and usability. Consider any improvements to design or functionality that could enhance the user experience.

[PoulavBhowmick03]

Hey! I would love to work on this issue! I am Poulav Bhowmick, a fullstack blockchain developer, already raised a PR and have a pretty good understanding of the codebase

How I would implement the latest blocks page

1. Create a new route in the app folder and would import the @/components/pages/home/latest-blocks
2. Would use Shadcn UI to create a similar looking table and use the props from the previously imported latest-blocks component to display the block number, timestamp, txn count, gas used and gas limit

I already have decent experience in building pagination, be it with or without Shadcn UI, so I feel I would be a great fit for this task I would love to get assigned and complete this task as soon as possible

[Benjtalkshow]

@saimeunt

I'm interested in implementing the Latest Block page for the Op Scan Project. This is my first time contributing to a Walnut project. With my 3 years of solid background in Next.js, TypeScript, Shadcn, and React, I’m very sure that i will deliver an efficient and user-friendly blocks page. You can check out my GitHub profile here: My Github Profile

Proposed Solution for Latest Blocks Page

Component Creation:

• I will create a new page component in src/pages/blocks.tsx.
• I will use the Shadcn UI table component to display the blocks in a tabular format.

Fetching Data:

• I will use a React Server Component to fetch the list of latest blocks from the blockchain. This ensures the data is fetched server-side, in line with Next.js best practices.
• I will use Next.js's built-in getServerSideProps or getStaticProps to fetch the initial list of blocks, ensuring efficient data loading and SEO benefits.

Table Structure:

• The table will display 25 blocks per page.
• Each row will include details such as block number, timestamp, transaction count, gas used, and gas limit.
• For the gas used column, I will calculate the percentage against the gas limit and use Shadcn's progress bar component to visually represent this.

Pagination:

• I will handle pagination using query parameters. The initial visit to /blocks will show the latest 25 blocks.
• For example, if the current block head is 100, /blocks will show blocks 100 to 76, /blocks?p=2 will show blocks 75 to 51, and so on.
• I will use the useSearchParams function from Next.js to manage query parameters and navigate between pages.
• Client state will track the latest block number upon the first visit, using this as a reference for subsequent navigations.

Linking to Details:

1. Each block number in the table will be a link to the block details page (/block/:number).
2. The transaction count will link to the block transactions page(/block/:number/txs).

UI Components:

• I will use Shadcn's table component for the main layout.
• I will use Shadcn's progress bar component to visually represent the gas used as a percentage of the gas limit. Sample : <Progress value={(gasUsed / gasLimit) * 100} />
• Ensuring a responsive and clean design that works seamlessly across all devices.

Performance Optimization:

• I will use getServerSideProps to fetch the initial data on the server-side. This ensures that the page loads with the necessary data already available, improving both load time and SEO.
• I will optimize the load time of the page by fetching only the necessary data for the displayed blocks and using server-side rendering for initial data fetches.
• I will implement efficient data fetching techniques, such as pagination with query parameters, to reduce the amount of data loaded at once and improve navigation speed between different block pages.
• I will track the latest block number upon the first visit using client-side state to ensure consistent navigation.
• I will leverage caching strategies to store previously fetched data, minimizing redundant network requests and ensuring quicker access to recently viewed pages.

Testing and Validation:

• I will thoroughly test the page across different browsers and screen sizes to ensure consistent behavior and a good user experience.
• The design will be inspired by Etherscan's latest blocks list for familiarity and ease of use.

I am confident that my approach will deliver a high-quality and user-friendly Latest Blocks page. I will do my best to deliver on this issue promptly and ensure it meets the project's standards.

[armandocodecr]

Plan to Resolve the Issue: Latest Blocks Page

Hello walnut team,

I would love to work on this issue and here is my proposal for the implementation:

Problem Description

The objective is to develop a page that displays a paginated list of the latest blocks created on the blockchain. This list should include:

• Block number
• Timestamp
• Transaction count
• Gas used
• Gas limit
• Progress bar showing the percentage of gas used

The visualization should resemble the latest blocks list on Etherscan, without additional metrics such as network utilization or block size.

Implementation Plan

1. Project Structure

a. Create the Route for Blocks:

• Page /blocks: Create a dedicated page to display the list of blocks. This page will use a React Server Component to handle the fetching and initial rendering of block data, adhering to Next.js best practices for handling search parameters (searchParams).

b. Implement the API to Fetch Blocks:

• API Route /api/blocks: Implement an API to fetch blocks from a simulated source or a blockchain API. This API will handle receiving the page number and returning the corresponding blocks, based on the last known block number.

c. Table Component:

• Blocks Table: Use the Shadcn table component to clearly and orderly display the list of blocks. The table will include all necessary details and a link to block and transaction detail pages.

d. Pagination:

• Pagination Handling: Implement pagination using search parameters (searchParams). The logic will maintain the last block number as a reference to calculate subsequent pages, ensuring that navigation always shows 25 blocks per page, starting from the last known block.

2. Technical Details

a. Use of React Server Component (RSC):

• Server-Side Data Fetching: Use React Server Components for server-side data fetching. This ensures that the /blocks page is rendered with up-to-date data from the server without requiring additional client-side requests.

b. Progress Bar:

• Gas Usage Visualization: Include a progress bar in the gas used column using the Shadcn progress component. This will provide a clear visual representation of the percentage of gas used compared to the block’s gas limit.

c. Detail Links:

• Navigation to Detail Pages: Add links in each row of the table leading to /block/:number for block details and /block/:number/txs for the block's transaction list. This will improve navigation and access to detailed information about each block.

3. Verification and Testing

a. Pagination Verification:

• Navigation Validation: Test pagination to ensure smooth transition between pages and that the block calculation logic works as expected.

b. Data Verification:

• Content Validation: Verify that the block data is correctly displayed in the table and that the progress bar accurately reflects gas usage.

c. Link Navigation:

• Link Testing: Ensure that links to the block detail and transaction pages function and redirect to the correct information.

Conclusion

My plan outlines a complete and careful implementation that follows Next.js best practices and uses Shadcn components for a clean and efficient user interface. This solution not only meets the specific requirements of the issue but also ensures an intuitive user experience and a technically sound implementation.

I hope to have the opportunity to work on this issue and contribute significantly to the project. Thank you for considering my proposal.

Best regards, Armando.

[saimeunt]

@Benjtalkshow this one is for you!

I appreciate your proposal, while reading it a couple things came to my mind:

Please make sure you are following along the latest NextJS way of approaching Server Side Rendering which is the app router and React Server Components, getServerSideProps / getStaticProps and the pages router is outdated. You can refer to other pages and components already implemented and the NextJS docs if needed: https://nextjs.org/docs/app/building-your-application/data-fetching/patterns#parallel-data-fetching

Regarding pagination, it should be done almost entirely server-side using the searchParams parameter: https://nextjs.org/docs/app/api-reference/file-conventions/page#searchparams-optional you should not use useSearchParams which is a client side API. Something else came into my mind, you will need to fetch the latest block number on first page load and then pass it to all subsequent page navigation since data fetching only happens on the server.

• navigating to blocks display blocks 100 => 76 and since there's no latest query parameter, fetch it using viem getBlockNumber and use it in pagination links.
• navigating to blocks?p=2&latest=100 display blocks 75 => 51, read latest block number from searchParams.
• and so on...

Finally, everything related to caching is an after thought and out of scope for this issue, as well as cross browser support and responsive design, we assume shadcn/ui sane defaults will be more than enough.

[Benjtalkshow]

@saimeunt,

Thank you for assigning this task to me. I also appreciate the clarification on using the latest NextJS practices for Server Side Rendering with the app router and React Server Components. I will ensure to follow these guidelines and refer to the NextJS documentation and existing components as needed.

[saimeunt]

@Benjtalkshow how is it going with the issue? Are you still working on this? Please note that if you're not providing at least a draft PR by the end of Wednesday we'll have to assign someone else.

[Benjtalkshow]

@saimeunt Good day sir, i am currently working it. i will provide feedback soon.

[Benjtalkshow]

@saimeunt ,

Made a pr for the latest blocks page some (hours ago) #32