Block transactions list page

[saimeunt]

Block transactions list page

⚠️ Reading contributors guidelines to get assigned is MANDATORY!

Read contributors guidelines

User stories

• As a user, I want to see a list of block transactions when visiting /block/:number/txs.
  The list should include tx hash, method, timestamp, from address, to address, value and fee.
  Add links where applicable (tx hash, from/to addresses

Validation

It should look like the Etherscan block transactions list page, eg. https://optimistic.etherscan.io/txs?block=121612939
We can use the method ID for now, we'll implement method identification later on.
Do NOT implement the "Download Page Data" functionality.

Implementation

You can use the transaction details page as inspiration for the global architecture.
Use the table component from shadcn/ui to show the list of transactions.

Resources:

• tx details page: https://github.com/walnuthq/op-scan/blob/main/src/components/pages/tx/index.tsx
• Block transactions list page on Etherscan: https://optimistic.etherscan.io/txs?block=121612939
• shadcn/ui Table component: https://ui.shadcn.com/docs/components/table

[ooochoche]

@saimeunt I'd love to work on this. I'm a frontend developer and can get id done in 2-3 workings days. Please use the link below to view my profile on OnlyDust

https://app.onlydust.com/u/Ejembiii

Here is how I would implement it:

• fork and clone the repository and study the project to see how it works and the coding conventions.
• find what APIs need to be called to fetch the required data.
• implement the Block transactions list page with the required data and component you specified in the Resources section.
• write tests to verify the changes

[adrianvrj]

Hi, my name is Adrian Vargas and I would love to work on this issue, here is my OD profile so you can take a look at my work

https://app.onlydust.com/u/adrianvrj

Here is how I would approach it:

• Initialize the Project and study the structure and code to see how it works
• Install Required Dependencies and necessary environment setup
• Update the transaction mapping to extract method names and add links to the transaction hash, from address, and to address.
• Run and tests the changes

[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 did a similar task on the previous ODHack on the Starkflare project from the walnut team. There I implemented a similar table for the ContractsBurningMostStepsTable component.
In order to solve this problem, I will use the table component from shadcn, the method for copying the contract address window.navigator.clipboard.writeText(), the tooltip component from shadcn to display the full address of the contract.
I will receive the data in the parent component, for example, on the /block/:number/txs page and use the prop to transfer them to the table component.

[saimeunt]

@adrianvrj I'm assigning to you, good luck!
@melnikga Thank you for your very comprehensive approach of the problem, you may be assigned halfway through the hack if there's no draft PR from the current assignee.