Latest transactions page

[saimeunt]

Latest transactions 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 transactions created on the blockchain by visiting /txs
• I want to see a table of the list of newly created transactions. The detail for each tx should be tx hash, method ID, block number, timestamp, from address, to address, value and txn fee.

Validation

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

For the method ID column, just display the 4 bytes selector, function name mapping is out of scope.
Don't forget to add links to tx details page /tx/:hash, block details page /block/:number and from/to addresses /address/:address.

Do NOT include txs metrics such as txs count over 24h, pending txs, etc.
Do NOT add a "Download Page Data" button.
Do NOT add pagination, it will be done in another separate issue.
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 the last 50 txs from the last 10 most recent blocks.
Extract transactions from blocks using getBlock({ blockNumber: N, includeTransactions: true }) and sort them by descending timestamp.

You must use React Server Components and fetch the blocks server-side, you can use work done on the block txs page as an inspiration.

Resources

• shadcn/ui Table component: https://ui.shadcn.com/docs/components/table

[melnikga]

Can I take this?

[Ugo-X]

Hello @saimeunt ! I'm Ugo, a fullstack(js,React,Node,Next.js,Three.js) developer with a strong track record in OD hack projects. I've been actively involved since Edition 2, contributing to various initiatives, and I'm thrilled to be part of Edition 5!
Having used OnlyDust extensively (see my profile: https://app.onlydust.com/u/Ugo-X. and my Github: https://github.com/Ugo-X), I'm confident in my ability to tackle new challenges within this edition.
I'm eager to leverage my skills and experience to contribute effectively.

I would follow these steps to develop a new page displaying the latest transactions at the /txs route:

Fetching Latest Transactions Server-Side:

1. I would utilize React Server Components to fetch data on the server-side, ensuring optimal performance and data security.
2. I would leverage ethers.js to connect to a blockchain provider and interact with the blockchain network.
3. I would fetch the latest 10 blocks using the getBlockWithTransactions method provided by ethers.js. This ensures we retrieve blocks with their associated transactions.
4. I would extract and sort the transactions from the fetched blocks. I would sort them by timestamp in descending order, displaying the newest transactions first.

Using shadcn/ui Table Component:

1. I would import the Table component from the shadcn/ui library to display the transaction data in a user-friendly table format.
2. I would populate the table with the 50 most recent transactions. This ensures a good balance between displaying enough data and maintaining page performance.
3. I would include specific details in each table column:
   • Transaction Hash
   • Method ID (including the 4 bytes selector)
   • Block Number
   • Timestamp
   • From Address
   • To Address
   • Value
   • Transaction Fee

Creating Links for Detailed Views:

1. I would ensure each transaction hash, block number, and address in the table act as links. Clicking these links would navigate users to dedicated pages for detailed information:
   • Clicking a transaction hash would navigate to /tx/:hash (detailed transaction view).
   • Clicking a block number would navigate to /block/:number (detailed block view).
   • Clicking an address would navigate to /address/:address (detailed address view).

Following User Stories and Validation Criteria:

1. I would ensure the table visually resembles the Etherscan latest transactions list. This provides a familiar and easy-to-understand interface for users.
2. I would display the 4 bytes selector within the method ID column. This allows users to quickly identify the function associated with the transaction.
3. I would adhere to the provided constraints:
   • No metrics displayed on the page.
   • No download button provided.
   • No pagination implemented for simpler navigation.
   • No rows dropdown menu included.

[JoelVR17]

Hi @saimeunt,

I'm a full-stack web developer with a strong background in front-end and back-end development. I'm excited to contribute to this project.

References:

• GitHub
• OnlyDust
• Portfolio

Steps:

1. Create TransactionsPage Component: I will create a file containing a TransactionsPage component.

2. Build Transactions Table: The table will include columns for transaction hash, method ID, block number, timestamp, source address, destination address, value, and transaction fee using @shadcn/ui.

3. Update fetchL2LatestBlocks Function: I will update the fetchL2LatestBlocks function to add necessary parameters and customize the table. I will utilize the getBlock function to fetch up to 10 blocks and limit the table to 50 rows using the reduce method.

4. Set Links in Table: I will loop through the transactions in the table, setting the correct links for each: details page (/tx/:hash), block details page (/block/:number), and source/destination addresses (/address/:address).

Restrictions:

I will ensure the following restrictions are adhered to:

1. No Transaction Metrics: I will not include transaction metrics like transaction count in 24 hours, pending transactions, etc.
2. No Download Data Button: I will not add a "Download data from page" button.
3. No Pagination: Pagination will be handled in a separate issue.
4. No "Show Rows" Dropdown: I will not add a "Show rows" dropdown as it is not within the scope of this issue.

Important:

If needed, I can use the Highlight feature on the table to make it easier for users to identify matching addresses.

Best regards,
Joel

[Benjtalkshow]

@saimeunt,

I'm highly interested in tackling this task. I have expertise in designing and implementing frontend UIs and functionalities using Next.js, TypeScript, Shadcn, React, Redux, and other frontend libraries. I’m confident in delivering an efficient and user-friendly transactions page. You can check out my GitHub profile here: My Github Profile.

Here is my Proposed Solution for Latest Transactions Page:

Component Creation:

• I will create a new page component in src/pages/txs.tsx and use the Shadcn UI table component to display the transactions.

Fetching Data:

Using React Server Components and Next.js's getServerSideProps or getStaticProps, I will fetch the latest 10 blocks and their transactions from the blockchain with getBlock({ blockNumber: N, includeTransactions: true }).

Table Structure:

• The table will display the last 50 transactions, with details such as transaction hash, method ID (4 bytes selector), block number, timestamp, from/to addresses, value, and transaction fee.

Linking to Details:

• Each transaction hash, **block number**, and **address** will link to their respective details pages (/tx/:hash, /block/:number, /address/:address).

Performance Optimization:

• I will optimize load times with server-side rendering, efficient data fetching, and caching strategies. This includes using pagination, Incremental Static Regeneration (ISR), server-side caching, and client-side caching.

Testing and Validation:

• I will ensure the page works seamlessly across different browsers and screen sizes, adhering to Etherscan's design for user familiarity and ease of use.

[saimeunt]

@Ugo-X Thank you for your proposal, I'm assigning you for this issue.

Please note however that we're not using ethers.js but viem, don't worry though, they're pretty similar.

[Ugo-X]

@Ugo-X Thank you for your proposal, I'm assigning you for this issue.

Please note however that we're not using ethers.js but viem, don't worry though, they're pretty similar.

alright chief, I will be sure to take note of that. Thank you.

[saimeunt]

@Ugo-X 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.

[Ugo-X]

Hello @saimeunt I'm almost done and will send a PR by tomorrow.