Block details page

[saimeunt]

Block details page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

As a user, when I access a block details page, I want to see basic info about the block such as block number, block hash, mining timestamp, number of transactions contained in the block as well as total gas used by the block.
When I click on previous block / next block buttons I want to navigate between adjacent blocks.
When I click on the number of transactions I want to be redirected to the block transactions list: /block/:number/txs.

Validation

It should look like the Etherscan block detail page, eg. https://optimistic.etherscan.io/block/121511346
Do NOT use an accordion to show more details, just display block hash below block number.
Do NOT implement the block transactions list page.

Implementation

You can use the transaction details page as inspiration for the global architecture.
The URL of the page should be /block/:number.
You should use a description list similar to the tx details page to display the block attributes and the pagination component for the previous / next block buttons.

Resources

• tx details page: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx
• shadcn/ui pagination: https://ui.shadcn.com/docs/components/pagination

[Jemiiah]

@saimeunt I would love to work on this issue and have previously contributed to previous project and still will be contributing to more project, basically my first contribution on this repository
https://app.onlydust.com/u/Jemiiah

[bhavyagosai]

hey, bhavya here. I have previously contributed to starkflare and been working with frontend development since the last 2 years. I would like to work on this issue.

To implement this I would do the following:

• set up folder and file pertaining the route /block/:number

• ui will be inspired from Etherscan block details page and transaction details page from which the card component can be reused to display the data uniformly.

• Navigation between blocks can be inspired similarly from the Etherscan page where they have buttons for moving between blocks.

• To fetch the data I can see that the fetchL2LatestBlocks() has beautifully been implemented to get the latest block and the next 5 blocks data (thus latest 6 blocks data). Similarly getBlock() function can be used to fetch data like block hash, timestamp and gas details like gas used and gas limit regarding a specific block (passing the block number) and using getBlockTransactionCount() to get transaction count of the blocks.

• The timestamp can be shown in human readable format using date-fns

• api will trigger as the user lands on the page and states regarding the block details will be updated and displayed.

• skeleton loading can be shown to load the page instantly and wait for the data to be fetched.

[melnikga]

Hi, can I take this
I have been a contributor to several projects of the walnut team. My profile on onlydust: https://app.onlydust.com/u/melnikga
I would implement this as follows: first of all, I would add components that would display basic info about the block. At the bottom of the page, I would place a pagination component from shadcn, when interacting with which the user will be able to switch between pages of different blocks. I would get information from the server in a similar way as in the tx details page: const transaction = await l2PublicClient.getTransaction({ hash });

[Benjtalkshow]

Hi, @saimeunt

I will be glad to work on the Block Details Page for the Op Scan. This is my first time contributing to a Walnut project as I didn't get the opportunity to work on any frontend tasks during ODHack 4.0. With my 3 years of expertise in Next.js, TypeScript, Shadcn, and React, I’m confident I can deliver a robust and user-friendly page. You can check out my Github here: https://github.com/Benjtalkshow.

Here's how i will implement the page:

1. Page Creation: Develop pages/block/[blockNumber].tsx with a focus on Shadcn for responsive UI design.
2. Block Information: Display key details like block number, hash, mining timestamp, transactions count, and gas used.
3. Navigation: Implement intuitive navigation using Shadcn's pagination for seamless block switching.
4. User Interaction: Enable direct access to transaction lists by clicking on transaction counts.
5. Design and Validation: Ensure consistency with Etherscan’s block detail page layout, avoiding unnecessary complexity.

[Dprof-in-tech]

Hello @saimeunt

I'm Isaac a fullstack javascript developer with proficiency and considerable experience building solutions with Nextjs and Tailwindcss. My Onlydust and GitHub profile shows my involvement and successful contributions with projects like StarknetQuest and superteam.fun where I had the opportunity to work on something similar, building a nextjs slug for a dynamic page.

here is my proposed solution to this issue:

1. Component Creation:
   I will create a new React component called BlockDetailsPage in the file src/components/pages/block/index.tsx,

2. I will implement the page to be accessible at the URL /block/:number, where :number is the block number and use React Query to fetch block details from the blockchain. Create a custom hook or API function to retrieve the following information:

   Block number
   Block hash
   Mining timestamp
   Number of transactions
   Total gas used

3. I will structure the page similar to the transaction details page, using a description list to display block attributes. Include the following elements:

   Page title: "Block Details"
   Block number (prominently displayed)
   Block hash (displayed below the block number)
   Timestamp (converted to a human-readable format)
   Number of transactions (clickable, linking to /block/:number/txs)
   Total gas used

4. I will create "Previous Block" and "Next Block" buttons using the shadcn/ui Pagination component to allow users to navigate to adjacent blocks.

5. I will also display a loading indicator while fetching block data to ensure a better user experience while making sure the design is responsive across all screen sizes.

Here are the links to my GitHub and Onlydust profile and I will do my best to deliver on this issue promptly.
https://app.onlydust.com/u/Dprof-in-tech
https://github.com/dprof-in-tech

[saimeunt]

@Dprof-in-tech thanks for your detailed comment, assigning the issue to you.
Please note that you should use viem to query the blockchain using getBlock, also, you don't need to use a loading indicator as we fetch the blockchain data server-side using React Server Components.
Most of the components have already been designed and you should take inspiration from /src/components/pages/tx/index.tsx

[jedstroke]

Hello Walnut Fam,

I am a seasoned fullstack developer with a focus on front-end development. Although I haven't contributed to Walnut before, I am excited by your welcoming stance: "However, if you are new, don’t worry—we are eager to attract new talent..."

I am passionate about creating responsive, modular, and scalable UI components and would love to take on this issue.

Here are my profiles for your reference:

• OnlyDust: Jedstroke's Profile
• Portfolio: Jedidiah Gabriel
  Looking forward to contributing!

Best regards,
Jedidiah Gabriel

[Dprof-in-tech]

@Dprof-in-tech thanks for your detailed comment, assigning the issue to you. Please note that you should use viem to query the blockchain using getBlock, also, you don't need to use a loading indicator as we fetch the blockchain data server-side using React Server Components. Most of the components have already been designed and you should take inspiration from /src/components/pages/tx/index.tsx

Thank you
I'll do just that

I'll start working on it right away and give updates as needed.

[saimeunt]

@Dprof-in-tech 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.

[Dprof-in-tech]

I'm sorry for the no response
Already started building it and I'm almost done